:root {
    --bg: #06111f;
    --bg-soft: #091a2d;
    --surface: #0d2036;
    --surface-2: #102842;
    --primary: #38bdf8;
    --primary-strong: #0ea5e9;
    --accent: #67e8f9;
    --text: #f7fbff;
    --muted: #c4d4e5;
    --muted-2: #91a8be;
    --border: rgba(93, 176, 231, .25);
    --border-strong: rgba(56, 189, 248, .5);
    --success: #4ade80;
    --danger: #fb7185;
    --shadow: 0 18px 55px rgba(0,0,0,.28);
    --radius: 18px;
    --radius-sm: 12px;
    --max: 1180px;
    --focus: 0 0 0 3px rgba(56,189,248,.28);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 15% 0%, rgba(14,165,233,.12), transparent 35%), radial-gradient(circle at 90% 15%, rgba(103,232,249,.08), transparent 30%);
    z-index: -1;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--accent); }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.container { width: min(var(--max), calc(100% - 32px)); margin-inline: auto; }
.narrow { max-width: 900px; }
.skip-link { position: fixed; left: 12px; top: -100px; z-index: 100; padding: 10px 14px; background: var(--primary); color: #02101c; border-radius: 10px; font-weight: 800; }
.skip-link:focus { top: 12px; }
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(6,17,31,.9); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background: linear-gradient(135deg,var(--primary-strong),var(--accent)); color:#04111d; font-weight:900; font-size:13px; box-shadow: 0 7px 25px rgba(14,165,233,.2); }
.brand strong { display:block; font-size:17px; letter-spacing:.2px; }
.brand small { display:block; color:var(--muted); font-size:11px; margin-top:-2px; }
.site-nav { display:flex; align-items:center; gap:5px; }
.site-nav a { padding: 9px 12px; border-radius: 10px; color: var(--muted); font-size:14px; font-weight:700; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); background: rgba(56,189,248,.1); }
.menu-toggle { display:none; border:1px solid var(--border); background:var(--surface); color:var(--text); width:44px; height:44px; border-radius:12px; }
.menu-toggle span { display:block; width:20px; height:2px; margin:4px auto; background:var(--text); border-radius:4px; }

main { min-height: 65vh; }
.hero-section { padding: 80px 0 70px; }
.hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:64px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:7px; color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:900; }
h1,h2,h3 { line-height:1.15; margin:0 0 14px; letter-spacing:-.025em; }
h1 { font-size: clamp(2.25rem, 5vw, 4.25rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); }
h3 { font-size:1.1rem; }
p { margin: 0 0 15px; color:var(--muted); }
.hero-lead { max-width: 650px; font-size: clamp(1rem, 2vw, 1.16rem); }
.gradient-text { background:linear-gradient(90deg,var(--primary),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.button-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:22px; }
.center { justify-content:center; }
.btn { min-height:46px; padding:10px 17px; border-radius:12px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; font-weight:800; color:var(--text); transition:transform .15s ease, background .15s ease, border-color .15s ease; }
.btn:hover { transform:translateY(-1px); }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.btn-primary { background:linear-gradient(135deg,var(--primary-strong),#0284c7); color:#03121f; }
.btn-primary:hover { color:#03121f; filter:brightness(1.08); }
.btn-secondary { background:var(--surface-2); border-color:var(--border); }
.btn-secondary:hover { background:#153552; color:var(--text); border-color:var(--border-strong); }
.btn-ghost { background:transparent; border-color:var(--border); color:var(--muted); }
.btn-ghost:hover { color:var(--text); border-color:var(--border-strong); background:rgba(56,189,248,.06); }
.btn-danger { background:rgba(251,113,133,.1); border-color:rgba(251,113,133,.35); color:#fecdd3; }
.btn-small { min-height:38px; padding:7px 12px; font-size:13px; }
.privacy-note { display:flex; gap:9px; align-items:flex-start; max-width:650px; margin-top:24px; padding:12px 14px; color:var(--muted); font-size:13px; background:rgba(56,189,248,.055); border:1px solid var(--border); border-radius:12px; }
.privacy-note span { color:var(--success); font-weight:900; }
.hero-card { padding:24px; background:linear-gradient(145deg,rgba(13,32,54,.95),rgba(7,23,40,.95)); border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow); }
.scanner-demo { position:relative; aspect-ratio:1; max-width:390px; margin:auto; border-radius:18px; background:radial-gradient(circle, #173d59 0%, #071625 62%); overflow:hidden; display:grid; place-items:center; }
.qr-placeholder { width:52%; aspect-ratio:1; display:grid; place-items:center; border:10px solid #fff; background:#081523; color:#fff; font-size:32px; font-weight:900; box-shadow:0 0 0 4px rgba(255,255,255,.12); }
.qr-placeholder::before { content:""; position:absolute; width:15%; height:15%; background:transparent; border:5px solid var(--primary); border-radius:3px; }
.corner { position:absolute; width:48px; height:48px; border-color:var(--accent); border-style:solid; z-index:2; }
.corner.tl { top:13%; left:13%; border-width:5px 0 0 5px; } .corner.tr { top:13%; right:13%; border-width:5px 5px 0 0; } .corner.bl { bottom:13%; left:13%; border-width:0 0 5px 5px; } .corner.br { bottom:13%; right:13%; border-width:0 5px 5px 0; }
.scan-line { position:absolute; left:17%; right:17%; top:50%; height:2px; background:var(--primary); box-shadow:0 0 15px var(--primary); animation:scan 2.5s ease-in-out infinite; z-index:3; }
@keyframes scan { 0%,100% { transform:translateY(-90px); opacity:.45; } 50% { transform:translateY(90px); opacity:1; } }
.hero-card-caption { padding:14px 4px 0; color:var(--muted); font-size:13px; }
.status-dot { display:inline-block; width:8px; height:8px; background:var(--success); border-radius:50%; margin-right:7px; box-shadow:0 0 12px rgba(74,222,128,.6); }
.section { padding:70px 0; }
.section-alt { background:rgba(8,27,47,.55); border-block:1px solid rgba(93,176,231,.09); }
.section-heading { max-width:720px; margin-bottom:30px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature-card, .card, .prose-card, .info-card, .scanner-panel, .result-card { background:linear-gradient(145deg,rgba(13,32,54,.96),rgba(9,26,45,.96)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 12px 40px rgba(0,0,0,.12); }
.feature-card { padding:23px; }
.icon-box { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:rgba(56,189,248,.1); border:1px solid var(--border); color:var(--accent); font-size:20px; margin-bottom:18px; }
.type-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.type-chip { display:flex; align-items:center; justify-content:center; min-height:54px; border:1px solid var(--border); border-radius:13px; background:rgba(13,32,54,.7); color:var(--text); font-weight:750; }
.info-card { padding:24px; margin-top:25px; }
.privacy-card { max-width:850px; }
.page-hero { padding:65px 0 35px; }
.page-hero.compact { padding-bottom:15px; }
.page-hero p { max-width:720px; font-size:1.06rem; }
.scanner-layout, .generator-layout, .contact-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:start; }
.scanner-panel { padding:20px; }
.panel-header { display:flex; justify-content:space-between; gap:15px; align-items:flex-start; margin-bottom:15px; }
.status-text { font-size:13px; margin:0; }
.status-badge, .type-badge { display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(56,189,248,.07); color:var(--accent); font-size:12px; font-weight:900; white-space:nowrap; }
.status-badge[data-state="active"] { color:#bbf7d0; border-color:rgba(74,222,128,.3); background:rgba(74,222,128,.08); }
.status-badge[data-state="error"] { color:#fecdd3; border-color:rgba(251,113,133,.35); background:rgba(251,113,133,.08); }
.video-wrap { position:relative; width:100%; aspect-ratio:4/3; background:#030b14; border-radius:16px; overflow:hidden; border:1px solid var(--border); }
#camera-video { width:100%; height:100%; object-fit:cover; display:block; }
.video-placeholder { position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:6px; text-align:center; background:radial-gradient(circle at center,rgba(14,165,233,.1),rgba(3,11,20,.98)); padding:20px; }
.video-placeholder span { color:var(--muted); font-size:13px; }
.placeholder-icon { font-size:38px; color:var(--primary); }
.scan-overlay { position:absolute; inset:0; pointer-events:none; display:grid; place-items:center; }
.scan-frame { width:min(72%,330px); aspect-ratio:1; position:relative; }
.frame-corner { position:absolute; width:34px; height:34px; border-color:var(--accent); border-style:solid; }
.frame-tl { top:0; left:0; border-width:4px 0 0 4px; } .frame-tr { top:0; right:0; border-width:4px 4px 0 0; } .frame-bl { bottom:0; left:0; border-width:0 0 4px 4px; } .frame-br { bottom:0; right:0; border-width:0 4px 4px 0; }
.scan-beam { position:absolute; left:8%; right:8%; top:50%; height:2px; background:var(--primary); box-shadow:0 0 16px var(--primary); animation:scan 2.2s infinite; }
.camera-controls { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:end; margin-top:16px; }
.field { display:block; color:var(--muted); font-size:13px; font-weight:700; }
.field > span { display:block; margin-bottom:7px; }
input, textarea, select { width:100%; color:var(--text); background:#071726; border:1px solid var(--border); border-radius:11px; padding:11px 12px; min-height:46px; }
textarea { resize:vertical; min-height:110px; }
input::placeholder, textarea::placeholder { color:#7891a8; }
select { appearance:auto; }
.helper-text { color:var(--muted-2); font-size:12px; margin:14px 0 0; }
.drop-zone { min-height:270px; border:1.5px dashed var(--border-strong); border-radius:16px; display:grid; place-items:center; align-content:center; gap:7px; text-align:center; padding:25px; cursor:pointer; background:rgba(56,189,248,.025); transition:.15s; }
.drop-zone:hover, .drop-zone.dragging { background:rgba(56,189,248,.09); border-color:var(--primary); }
.drop-zone span { color:var(--muted); font-size:13px; }
.drop-zone small { color:var(--muted-2); font-size:11px; }
.upload-icon { color:var(--primary)!important; font-size:36px!important; }
.image-preview { margin-top:15px; display:grid; gap:10px; }
.image-preview img { max-height:260px; max-width:100%; object-fit:contain; margin:auto; border-radius:12px; border:1px solid var(--border); }
.alert { padding:12px 14px; border-radius:12px; margin-top:15px; border:1px solid var(--border); font-size:13px; }
.alert-error { color:#ffe4e8; background:rgba(251,113,133,.09); border-color:rgba(251,113,133,.35); }
.alert-success { color:#dcfce7; background:rgba(74,222,128,.08); border-color:rgba(74,222,128,.3); }
.alert-info { color:#dbeafe; background:rgba(56,189,248,.08); }
.generator-form, .qr-output, .card { padding:24px; }
.generator-form { display:grid; gap:15px; }
#generator-fields { display:grid; gap:15px; }
.qr-output { min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.qr-output-box { width:min(100%,370px); aspect-ratio:1; background:#fff; border-radius:14px; display:grid; place-items:center; padding:18px; }
.qr-output-box img { display:block; width:100%; height:auto; image-rendering:auto; }
.empty-state { text-align:center; padding:50px 20px; border:1px dashed var(--border); border-radius:18px; background:rgba(13,32,54,.5); }
.empty-state.small { border:0; padding:20px; background:transparent; }
.empty-icon { width:54px; height:54px; margin:0 auto 15px; display:grid; place-items:center; border-radius:15px; background:rgba(56,189,248,.08); color:var(--accent); font-size:24px; }
.loading-state { min-height:280px; display:grid; place-items:center; align-content:center; }
.spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.result-card { padding:28px; }
.result-top { padding-bottom:18px; border-bottom:1px solid var(--border); }
.result-top h2 { margin-top:14px; }
.result-subtitle { margin:0; font-size:13px; }
.result-details { padding:20px 0; }
.result-row { display:grid; grid-template-columns:150px 1fr; gap:15px; padding:12px 0; border-bottom:1px solid rgba(93,176,231,.12); }
.result-row span { color:var(--muted-2); font-size:13px; }
.result-row strong { overflow-wrap:anywhere; color:var(--text); font-weight:700; }
.raw-content { padding:16px; background:#06111d; border:1px solid var(--border); border-radius:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.raw-details { border-top:1px solid var(--border); padding-top:15px; color:var(--muted); }
.raw-details pre { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--muted); background:#06111d; padding:15px; border-radius:10px; border:1px solid var(--border); }
.result-footer-actions { margin-top:18px; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:18px; }
.history-list { display:grid; gap:12px; }
.history-item { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:15px; }
.history-main { min-width:0; }
.history-main p { margin:9px 0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:760px; }
.history-main time { color:var(--muted-2); font-size:12px; }
.history-actions { display:flex; gap:8px; flex-shrink:0; }
.settings-card { overflow:hidden; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:21px 24px; border-bottom:1px solid var(--border); }
.setting-row:last-of-type { border-bottom:0; }
.setting-row h3 { margin-bottom:5px; }
.setting-row p { margin:0; font-size:13px; }
.switch { position:relative; width:50px; height:30px; flex:0 0 auto; }
.switch input { opacity:0; width:0; height:0; position:absolute; }
.switch > span:not(.sr-only) { position:absolute; inset:0; border-radius:999px; background:#183149; border:1px solid var(--border); transition:.2s; }
.switch > span:not(.sr-only)::after { content:""; position:absolute; width:22px; height:22px; top:3px; left:3px; border-radius:50%; background:#c9d8e7; transition:.2s; }
.switch input:checked + span { background:rgba(14,165,233,.4); border-color:var(--primary); }
.switch input:checked + span::after { transform:translateX(20px); background:var(--primary); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.prose-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:20px; }
.prose-card { padding:28px; }
.prose-card h2 { font-size:1.45rem; margin-top:26px; }
.prose-card h2:first-child { margin-top:0; }
.prose-card p { color:var(--muted); }
.prose-card code { color:var(--accent); }
.form-stack { display:grid; gap:15px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.site-footer { border-top:1px solid var(--border); background:#050f1b; padding:35px 0 20px; }
.footer-inner { display:flex; justify-content:space-between; gap:25px; align-items:flex-start; }
.footer-inner strong { font-size:15px; }
.footer-inner p { font-size:12px; margin:4px 0 0; }
.footer-links { display:flex; flex-wrap:wrap; gap:8px 17px; justify-content:flex-end; }
.footer-links a { color:var(--muted); font-size:12px; }
.footer-links a:hover { color:var(--text); }
.footer-bottom { border-top:1px solid rgba(93,176,231,.1); margin-top:25px; padding-top:17px; color:var(--muted-2); font-size:11px; }

@media (max-width: 980px) {
    .hero-grid, .scanner-layout, .generator-layout, .contact-layout, .prose-grid { grid-template-columns:1fr; }
    .hero-grid { gap:30px; }
    .feature-grid { grid-template-columns:repeat(2,1fr); }
    .hero-card { max-width:600px; width:100%; margin:auto; }
}
@media (max-width: 760px) {
    .container { width:min(var(--max), calc(100% - 24px)); }
    .header-inner { min-height:64px; }
    .menu-toggle { display:block; }
    .site-nav { position:absolute; left:12px; right:12px; top:70px; display:none; flex-direction:column; align-items:stretch; padding:8px; background:rgba(9,26,45,.98); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); }
    .site-nav.open { display:flex; }
    .site-nav a { padding:12px 13px; }
    .hero-section { padding:55px 0 45px; }
    .section { padding:50px 0; }
    .feature-grid { grid-template-columns:1fr; }
    .type-grid { grid-template-columns:repeat(2,1fr); }
    .camera-controls, .form-grid { grid-template-columns:1fr; }
    .camera-controls .button-row { margin-top:0; }
    .toolbar, .history-item, .footer-inner { align-items:stretch; flex-direction:column; }
    .history-actions { width:100%; }
    .history-actions .btn { flex:1; }
    .footer-links { justify-content:flex-start; }
}
@media (max-width: 430px) {
    .container { width:calc(100% - 20px); }
    h1 { font-size:2.15rem; }
    .button-row { width:100%; }
    .button-row .btn, .button-row a.btn { width:100%; }
    .hero-grid { gap:20px; }
    .hero-card { padding:14px; }
    .scanner-panel, .generator-form, .qr-output, .card, .prose-card, .result-card, .info-card { padding:17px; }
    .result-row { grid-template-columns:1fr; gap:3px; }
    .type-grid { gap:8px; }
    .type-chip { min-height:48px; font-size:13px; }
    .qr-output { min-height:390px; }
    .qr-output-box { width:min(100%,290px); }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}