/* VoxLedger Landing — tokens, layout, components */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --vl-primary-50:#eff6ff; --vl-primary-100:#dbeafe; --vl-primary-200:#bfdbfe;
  --vl-primary-300:#93c5fd; --vl-primary-400:#60a5fa; --vl-primary-500:#3b82f6;
  --vl-primary-600:#2563eb; --vl-primary-700:#1d4ed8; --vl-primary-800:#1e40af;
  --vl-primary-900:#1e3a8a; --vl-primary-950:#172554;
  --vl-success:#16a34a; --vl-warning:#d97706; --vl-danger:#dc2626;
  --bg:#ffffff; --bg-soft:#f8fafc; --bg-muted:#f1f5f9;
  --bg-inverse:#0f172a; --bg-deep:#020617;
  --text:#0f172a; --text-2:#475569; --text-3:#64748b; --text-muted:#94a3b8;
  --border:#e2e8f0; --border-strong:#cbd5e1;
  --on-primary:#ffffff;
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-xl:24px;
  --shadow-sm:0 1px 2px rgba(15,23,42,0.04);
  --shadow:0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-lg:0 12px 32px -8px rgba(15,23,42,0.15), 0 4px 12px -4px rgba(29,78,216,0.1);
  --shadow-brand:0 12px 32px -8px rgba(29,78,216,0.35);
  --focus:0 0 0 3px rgba(37,99,235,0.4);
  --section-pad:96px;
}

[data-theme="dark"]{
  --bg:#0f172a; --bg-soft:#020617; --bg-muted:#1e293b;
  --bg-inverse:#f8fafc;
  --text:#f1f5f9; --text-2:#cbd5e1; --text-3:#94a3b8; --text-muted:#64748b;
  --border:#1e293b; --border-strong:#334155;
  --vl-primary-50:#172554; --vl-primary-100:#1e3a8a;
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;line-height:1.55;transition:background .2s,color .2s}
::selection{background:var(--vl-primary-200);color:var(--vl-primary-900)}
*:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:12px 20px;background:var(--vl-primary-700);color:#fff;text-decoration:none;font-weight:600;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* HEADER */
header.site{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:32px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand svg{flex-shrink:0}
.brand-wordmark{font-family:'DM Sans',sans-serif;font-size:18px;letter-spacing:-.02em;line-height:1}
.brand-wordmark .vox{font-weight:700;color:var(--vl-primary-700)}
.brand-wordmark .ledger{font-weight:500;color:var(--vl-primary-600)}
[data-theme="dark"] .brand-wordmark .vox{color:var(--vl-primary-300)}
[data-theme="dark"] .brand-wordmark .ledger{color:#fff}

nav.primary{display:flex;gap:4px;flex:1;margin-left:8px}
nav.primary a{padding:8px 14px;border-radius:8px;color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500;transition:background .15s,color .15s}
nav.primary a:hover{background:var(--bg-muted);color:var(--text)}

.header-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.icon-btn:hover{background:var(--bg-muted);border-color:var(--border-strong)}
.lang-toggle{display:flex;gap:0;padding:2px;border:1px solid var(--border);border-radius:8px;height:36px;align-items:stretch}
.lang-toggle button{border:none;background:transparent;padding:0 10px;cursor:pointer;font:600 12px 'Inter',sans-serif;color:var(--text-3);border-radius:6px;letter-spacing:.05em}
.lang-toggle button.active{background:var(--bg-muted);color:var(--text)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;height:40px;border-radius:10px;border:none;font:600 14px 'Inter',sans-serif;cursor:pointer;text-decoration:none;transition:background .15s,transform .15s,box-shadow .15s;white-space:nowrap}
.btn-primary{background:var(--vl-primary-600);color:#fff}
.btn-primary:hover{background:var(--vl-primary-700);box-shadow:var(--shadow-brand)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border-strong)}
.btn-ghost:hover{background:var(--bg-muted);border-color:var(--vl-primary-600);color:var(--vl-primary-700)}
.btn-large{height:52px;padding:0 24px;font-size:15px;border-radius:12px}

.mobile-only{display:none}
@media(max-width:900px){
  nav.primary{display:none}
  .header-actions .btn{display:none}
  .header-actions .lang-toggle{display:none}
  .mobile-only{display:inline-flex}
}

/* HERO */
section.hero{position:relative;overflow:hidden;padding:80px 0 96px;background:radial-gradient(circle at 85% 25%,rgba(37,99,235,0.08),transparent 50%),radial-gradient(circle at 15% 75%,rgba(124,58,237,0.05),transparent 50%)}
[data-theme="dark"] section.hero{background:radial-gradient(circle at 85% 25%,rgba(37,99,235,0.18),transparent 50%),radial-gradient(circle at 15% 75%,rgba(124,58,237,0.1),transparent 50%)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.hero-grid>*{min-width:0}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:48px}}

.hero-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;background:var(--vl-primary-100);color:var(--vl-primary-800);border-radius:9999px;font:600 12px 'Inter',sans-serif;margin-bottom:24px}
[data-theme="dark"] .hero-pill{background:rgba(37,99,235,0.2);color:var(--vl-primary-300)}
.hero-pill .badge{background:var(--vl-primary-700);color:#fff;padding:2px 8px;border-radius:9999px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

h1.hero-title{font-family:'DM Sans',sans-serif;font-size:clamp(36px,5vw,60px);font-weight:700;line-height:1.04;letter-spacing:-.03em;margin-bottom:20px}
h1.hero-title .accent{background:linear-gradient(135deg,var(--vl-primary-600),var(--vl-primary-900));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] h1.hero-title .accent{background:linear-gradient(135deg,var(--vl-primary-300),var(--vl-primary-500));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:18px;color:var(--text-2);margin-bottom:32px;max-width:540px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.hero-trust{display:flex;flex-wrap:wrap;gap:16px 24px;font:500 13px 'Inter',sans-serif;color:var(--text-2)}
.hero-trust span{display:inline-flex;align-items:center;gap:6px}
.hero-trust svg{color:var(--vl-success);flex-shrink:0}

.demo-frame{position:relative;background:linear-gradient(135deg,#1e293b,#0f172a);border-radius:24px;padding:8px;box-shadow:0 30px 60px -20px rgba(15,23,42,0.4),0 0 0 1px rgba(255,255,255,0.05) inset;transform:perspective(1200px) rotateY(-3deg) rotateX(2deg);transition:transform .4s ease}
.demo-frame:hover{transform:perspective(1200px) rotateY(0deg) rotateX(0deg)}
.demo-screen{background:#0f172a;border-radius:18px;padding:20px 22px;color:#f1f5f9;min-height:360px;position:relative;overflow:hidden}
.demo-bar{display:flex;align-items:center;gap:8px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,0.08);font:500 11px 'JetBrains Mono',monospace;color:rgba(255,255,255,0.45);letter-spacing:.04em}
.demo-bar .dot{width:6px;height:6px;border-radius:50%;background:#ef4444;animation:pulse 1.5s infinite}
.demo-bar .ts{margin-left:auto}

.demo-wave{display:flex;align-items:center;gap:3px;height:32px;margin-bottom:16px;padding:0 4px}
.demo-wave span{flex:1;max-width:8px;background:var(--vl-primary-400);border-radius:2px;animation:waveDance 1.4s ease-in-out infinite}
.demo-wave span:nth-child(2){animation-delay:.1s}
.demo-wave span:nth-child(3){animation-delay:.2s}
.demo-wave span:nth-child(4){animation-delay:.3s}
.demo-wave span:nth-child(5){animation-delay:.4s}
.demo-wave span:nth-child(6){animation-delay:.5s}
.demo-wave span:nth-child(7){animation-delay:.6s}
.demo-wave span:nth-child(8){animation-delay:.7s}
.demo-wave span:nth-child(9){animation-delay:.8s}
.demo-wave span:nth-child(10){animation-delay:.9s}
.demo-wave span:nth-child(odd){background:var(--vl-primary-300)}

.demo-lines{display:flex;flex-direction:column;gap:14px}
.demo-line{display:flex;gap:10px;align-items:flex-start;opacity:0;animation:lineIn .5s forwards}
.demo-line:nth-child(1){animation-delay:.2s}
.demo-line:nth-child(2){animation-delay:1.8s}
.demo-line:nth-child(3){animation-delay:3.4s}
.demo-speaker{flex-shrink:0;background:rgba(37,99,235,0.2);color:#93c5fd;padding:3px 10px;border-radius:9999px;font:600 10px 'Inter',sans-serif;line-height:1.4}
.demo-line:nth-child(2) .demo-speaker{background:rgba(22,163,74,0.2);color:#86efac}
.demo-line:nth-child(3) .demo-speaker{background:rgba(124,58,237,0.2);color:#c4b5fd}
.demo-text{font:400 14px 'Inter',sans-serif;line-height:1.55;color:#cbd5e1}

.demo-badge{position:absolute;padding:8px 12px;border-radius:10px;background:rgba(15,23,42,0.85);border:1px solid rgba(255,255,255,0.1);backdrop-filter:blur(8px);display:flex;align-items:center;gap:8px;font:600 11px 'Inter',sans-serif;box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.demo-badge.lock{top:-14px;right:-12px;color:#86efac}
.demo-badge.lock svg{color:#86efac}
.demo-badge.task{bottom:-16px;left:-12px;color:#bfdbfe;opacity:0;animation:badgePop .5s forwards 3.8s}
.demo-badge.task svg{color:#bfdbfe}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes waveDance{0%,100%{height:30%}50%{height:100%}}
@keyframes lineIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes badgePop{0%{opacity:0;transform:scale(.8) translateY(8px)}70%{transform:scale(1.05) translateY(0)}100%{opacity:1;transform:scale(1)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* STATS */
section.stats{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-soft)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:28px 0}
@media(max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:24px}}
.stat{text-align:center;border-right:1px solid var(--border);padding:0 16px}
.stat:last-child{border-right:none}
@media(max-width:760px){.stat:nth-child(2){border-right:none}}
.stat-num{font:700 32px 'JetBrains Mono',monospace;letter-spacing:-.03em;color:var(--vl-primary-700);line-height:1}
[data-theme="dark"] .stat-num{color:var(--vl-primary-300)}
.stat-label{font:500 12px 'Inter',sans-serif;color:var(--text-3);margin-top:6px;text-transform:uppercase;letter-spacing:.06em}

section{padding:var(--section-pad) 0}
@media(max-width:760px){section{padding:64px 0}}

.section-eyebrow{display:inline-block;font:600 11px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--vl-primary-700);margin-bottom:14px}
[data-theme="dark"] .section-eyebrow{color:var(--vl-primary-300)}
.section-title{font-family:'DM Sans',sans-serif;font-size:clamp(28px,3.5vw,42px);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin-bottom:14px;max-width:740px}
.section-lead{font-size:17px;color:var(--text-2);max-width:640px;line-height:1.6}

/* HOW IT WORKS */
section.how{position:relative}
.how-head{text-align:center;margin-bottom:48px}
.how-head .section-title,.how-head .section-lead{margin-left:auto;margin-right:auto}

.how-tabs{display:flex;gap:8px;padding:6px;max-width:760px;margin:0 auto 32px;background:var(--bg-muted);border-radius:14px;overflow-x:auto;scroll-snap-type:x mandatory}
.how-tab{flex:1;min-width:0;padding:14px 16px;border:none;cursor:pointer;background:transparent;border-radius:10px;font:600 14px 'Inter',sans-serif;color:var(--text-3);text-align:left;transition:all .2s;scroll-snap-align:start;white-space:nowrap;display:flex;align-items:center;gap:10px}
.how-tab .num{width:24px;height:24px;border-radius:6px;background:var(--bg);color:var(--text-3);display:inline-flex;align-items:center;justify-content:center;font:600 11px 'JetBrains Mono',monospace;flex-shrink:0}
.how-tab.active{background:var(--bg);color:var(--text);box-shadow:var(--shadow)}
.how-tab.active .num{background:var(--vl-primary-600);color:#fff}

.how-panel{display:none;animation:fadeIn .3s}
.how-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:900px){.how-panel.active{grid-template-columns:1fr;gap:32px}}
.how-mock{background:var(--bg-soft);border:1px solid var(--border);border-radius:16px;aspect-ratio:16/10;padding:24px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.how-mock-label{position:absolute;top:14px;left:14px;font:500 11px 'JetBrains Mono',monospace;color:var(--text-3);letter-spacing:.04em}
.how-content h3{font-family:'DM Sans',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:14px;line-height:1.2}
.how-content p{color:var(--text-2);font-size:15px;line-height:1.65;margin-bottom:16px}
.how-tip{background:var(--vl-primary-50);border:1px solid var(--vl-primary-200);border-radius:10px;padding:12px 14px;font:400 13px 'Inter',sans-serif;color:var(--vl-primary-900);display:flex;gap:10px;align-items:flex-start}
[data-theme="dark"] .how-tip{background:rgba(37,99,235,0.15);border-color:rgba(37,99,235,0.3);color:var(--vl-primary-200)}
.how-tip strong{color:var(--vl-primary-700);font-weight:600}
[data-theme="dark"] .how-tip strong{color:var(--vl-primary-300)}

.mock-record{width:100%;max-width:280px;background:#0f172a;border-radius:16px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 12px 28px rgba(15,23,42,0.18)}
.mock-record-time{font:700 32px 'JetBrains Mono',monospace;color:#fff;letter-spacing:-.03em}
.mock-record-wave{display:flex;gap:3px;height:36px;align-items:center}
.mock-record-wave span{width:4px;background:var(--vl-primary-400);border-radius:2px;animation:waveDance 1.4s ease-in-out infinite}
.mock-record-wave span:nth-child(2){animation-delay:.1s;background:var(--vl-primary-300)}
.mock-record-wave span:nth-child(3){animation-delay:.2s}
.mock-record-wave span:nth-child(4){animation-delay:.3s;background:var(--vl-primary-300)}
.mock-record-wave span:nth-child(5){animation-delay:.4s}
.mock-record-wave span:nth-child(6){animation-delay:.5s;background:var(--vl-primary-300)}
.mock-record-wave span:nth-child(7){animation-delay:.6s}
.mock-record-wave span:nth-child(8){animation-delay:.7s;background:var(--vl-primary-300)}
.mock-record-wave span:nth-child(9){animation-delay:.8s}
.mock-record-wave span:nth-child(10){animation-delay:.9s;background:var(--vl-primary-300)}
.mock-record-wave span:nth-child(11){animation-delay:1s}
.mock-record-btn{width:64px;height:64px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,0.2);border:none}

.mock-transcript{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px}
.mock-transcript-row{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.mock-transcript-spk{flex-shrink:0;padding:2px 8px;border-radius:9999px;font:600 10px 'Inter',sans-serif;background:var(--vl-primary-100);color:var(--vl-primary-800)}
.mock-transcript-row:nth-child(2) .mock-transcript-spk{background:#dcfce7;color:#15803d}
.mock-transcript-row p{font:400 12px 'Inter',sans-serif;color:var(--text-2);line-height:1.5;margin:0}

.mock-ai{width:100%;max-width:340px;background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.mock-ai-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.mock-ai-head .sparkle{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#7c3aed,#2563eb);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.mock-ai-head .label{font:700 13px 'Inter',sans-serif;color:var(--text)}
.mock-ai-row{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--border);font-size:13px}
.mock-ai-row:first-of-type{border-top:none;padding-top:0}
.mock-ai-check{width:18px;height:18px;border-radius:5px;background:var(--vl-primary-600);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

.mock-share{width:100%;max-width:340px;background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:18px}
.mock-share-hash{font:500 11px 'JetBrains Mono',monospace;color:var(--text-3);display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg-muted);border-radius:6px;margin-bottom:10px}
.mock-share-hash::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--vl-success)}

/* STRENGTHS */
section.strengths{background:var(--bg-soft)}
.strengths-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
@media(max-width:900px){.strengths-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.strengths-grid{grid-template-columns:1fr}}
.card-strength{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:28px;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.card-strength:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--vl-primary-300)}
.card-strength::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--vl-primary-600),var(--vl-primary-400));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.card-strength:hover::after{transform:scaleX(1)}
.card-strength-icon{width:48px;height:48px;border-radius:12px;background:var(--vl-primary-100);color:var(--vl-primary-700);display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px}
[data-theme="dark"] .card-strength-icon{background:rgba(37,99,235,0.2);color:var(--vl-primary-300)}
.card-strength h3{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.card-strength p{font-size:14px;color:var(--text-2);line-height:1.6}

/* SPOTLIGHT */
section.spotlight{position:relative;overflow:hidden}
.spotlight-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
@media(max-width:900px){.spotlight-grid{grid-template-columns:1fr;gap:48px}}
.spotlight-content h2{font-family:'DM Sans',sans-serif;font-size:clamp(28px,3.5vw,40px);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin-bottom:18px}
.spotlight-list{margin:24px 0;display:flex;flex-direction:column;gap:14px;list-style:none}
.spotlight-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text-2)}
.spotlight-list svg{color:var(--vl-success);flex-shrink:0;margin-top:3px}
.spotlight-list strong{color:var(--text);font-weight:600}

.extract-vis{background:var(--bg-soft);border:1px solid var(--border);border-radius:20px;padding:32px;position:relative}
.extract-sentence{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:14px;box-shadow:var(--shadow-sm);font-size:14px;color:var(--text-2);line-height:1.5;display:flex;gap:12px;align-items:flex-start}
.extract-sentence-spk{flex-shrink:0;padding:2px 8px;border-radius:9999px;font:600 10px 'Inter',sans-serif;background:#dcfce7;color:#15803d;white-space:nowrap}
.extract-sentence .highlight{background:linear-gradient(180deg,transparent 60%,rgba(37,99,235,0.18) 60%);color:var(--text);font-weight:500}
.extract-arrow{display:flex;justify-content:center;padding:8px 0;color:var(--vl-primary-600);animation:arrowDown 2s ease-in-out infinite}
@keyframes arrowDown{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.extract-task{background:#fff;border:2px solid var(--vl-primary-600);border-radius:12px;padding:16px;box-shadow:0 12px 24px -4px rgba(29,78,216,0.25);position:relative}
[data-theme="dark"] .extract-task{background:var(--bg-muted)}
.extract-task::before{content:'Új feladat';position:absolute;top:-10px;left:14px;background:var(--vl-primary-600);color:#fff;padding:2px 10px;border-radius:9999px;font:600 10px 'Inter',sans-serif;letter-spacing:.04em;text-transform:uppercase}
.extract-task-title{font:600 14px 'Inter',sans-serif;color:var(--text);margin-bottom:10px}
.extract-task-meta{display:flex;flex-wrap:wrap;gap:8px;font:500 11px 'Inter',sans-serif}
.extract-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:9999px;background:var(--bg-muted);color:var(--text-2)}
.extract-chip.due{background:#fef3c7;color:#92400e}

/* COMPLIANCE */
section.compliance{background:var(--bg-inverse);color:#f1f5f9;padding:64px 0;position:relative;overflow:hidden}
[data-theme="dark"] section.compliance{background:#020617}
section.compliance::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(37,99,235,0.15),transparent 50%),radial-gradient(circle at 80% 50%,rgba(124,58,237,0.1),transparent 50%)}
.compliance-inner{position:relative;z-index:1;text-align:center}
.compliance-eyebrow{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#93c5fd;margin-bottom:12px}
.compliance-title{font-family:'DM Sans',sans-serif;font-size:clamp(22px,2.5vw,28px);font-weight:600;max-width:560px;margin:0 auto 32px;letter-spacing:-.02em}
.compliance-badges{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.comp-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);font:500 13px 'Inter',sans-serif;color:#e2e8f0}
.comp-badge svg{color:#93c5fd}
.compliance-foot{font:500 13px 'Inter',sans-serif;color:rgba(255,255,255,0.55);max-width:560px;margin:0 auto}

/* ROI */
section.roi{background:var(--bg-soft)}
.roi-head{text-align:center;margin-bottom:40px}
.roi-head .section-title,.roi-head .section-lead{margin-left:auto;margin-right:auto}
.roi-card{max-width:880px;margin:0 auto;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:var(--shadow)}
@media(max-width:760px){.roi-card{grid-template-columns:1fr}}
.roi-inputs{padding:32px}
.roi-result{padding:32px;background:linear-gradient(135deg,var(--vl-primary-700),var(--vl-primary-900));color:#fff;display:flex;flex-direction:column;gap:18px}
.roi-field{margin-bottom:18px}
.roi-field label{display:block;font:500 13px 'Inter',sans-serif;color:var(--text-2);margin-bottom:8px}
.roi-field .row{display:flex;gap:12px;align-items:center}
.roi-field input[type="range"]{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:var(--bg-muted);border-radius:3px;outline:none;cursor:pointer}
.roi-field input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--vl-primary-600);cursor:pointer;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,0.2)}
.roi-field input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--vl-primary-600);cursor:pointer;border:3px solid #fff}
.roi-field input[type="number"]{width:120px;padding:8px 12px;border:1px solid var(--border-strong);border-radius:8px;font:600 14px 'JetBrains Mono',monospace;background:var(--bg);color:var(--text);outline:none;text-align:right}
.roi-field .value{font:600 14px 'JetBrains Mono',monospace;color:var(--vl-primary-700);min-width:90px;text-align:right}
[data-theme="dark"] .roi-field .value{color:var(--vl-primary-300)}
.roi-result-row{display:flex;justify-content:space-between;align-items:baseline}
.roi-result-row .label{font-size:13px;color:rgba(255,255,255,0.7)}
.roi-result-row .num{font:600 18px 'JetBrains Mono',monospace}
.roi-result-net{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,0.15)}
.roi-result-net .label{font:600 12px 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#bfdbfe;margin-bottom:4px}
.roi-result-net .num{font:700 36px 'DM Sans',sans-serif;letter-spacing:-.03em;line-height:1.1}
.roi-result-net .num small{font-size:18px;font-weight:500;opacity:.85}

/* PRICING */
section.pricing-sec{position:relative}
.pricing-head{text-align:center;margin-bottom:32px}
.pricing-head .section-title,.pricing-head .section-lead{margin-left:auto;margin-right:auto}
.pricing-toggle{display:inline-flex;padding:4px;background:var(--bg-muted);border-radius:10px;margin:24px auto 0;gap:0}
.pricing-toggle button{border:none;background:transparent;padding:10px 20px;cursor:pointer;border-radius:7px;font:600 14px 'Inter',sans-serif;color:var(--text-3);transition:background .15s,color .15s;display:inline-flex;align-items:center;gap:8px}
.pricing-toggle button.active{background:var(--bg);color:var(--text);box-shadow:var(--shadow-sm)}
.pricing-toggle .badge-save{background:#dcfce7;color:#15803d;padding:2px 8px;border-radius:9999px;font-size:10px;font-weight:700}

.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;align-items:stretch}
@media(max-width:1100px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pricing-grid{grid-template-columns:1fr}}
.plan{background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:16px;transition:transform .2s,box-shadow .2s;position:relative}
.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.plan.featured{border:2px solid var(--vl-primary-600);transform:scale(1.02);box-shadow:var(--shadow-brand)}
.plan.featured:hover{transform:scale(1.02) translateY(-3px)}
.plan-pop{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--vl-primary-600);color:#fff;padding:5px 14px;border-radius:9999px;font:700 10px 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.plan-head{display:flex;flex-direction:column;gap:6px}
.plan-name{font:700 18px 'DM Sans',sans-serif;letter-spacing:-.01em}
.plan-sub{font-size:13px;color:var(--text-3);line-height:1.5}
.plan-price{display:flex;align-items:baseline;gap:4px;padding:14px 0;border-bottom:1px solid var(--border)}
.plan-price .num{font:700 36px 'DM Sans',sans-serif;letter-spacing:-.02em;line-height:1}
.plan-price .num.free{color:var(--vl-success)}
.plan-price .unit{font-size:14px;color:var(--text-3)}
.plan-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;flex:1}
.plan-features li{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-2);line-height:1.5}
.plan-features li svg{flex-shrink:0;margin-top:2px}
.plan-features li.check svg{color:var(--vl-success)}
.plan-features li.x svg{color:var(--text-muted)}
.plan-features li.x{color:var(--text-muted)}
.plan-features li.highlight{background:var(--vl-primary-50);padding:6px 8px;border-radius:6px;color:var(--vl-primary-900);font-weight:500}
[data-theme="dark"] .plan-features li.highlight{background:rgba(37,99,235,0.15);color:var(--vl-primary-200)}
.plan-cta{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.plan-cta .btn{width:100%;height:44px}
.plan-trust{font:500 11px 'Inter',sans-serif;color:var(--text-3);text-align:center;margin-top:6px}
.plan-foot{margin:32px auto 0;padding:18px 24px;background:var(--bg-muted);border-radius:12px;font:400 13px 'Inter',sans-serif;color:var(--text-2);line-height:1.6;text-align:center;max-width:880px}

/* PILOT */
section.pilot{background:linear-gradient(135deg,var(--vl-primary-800),var(--vl-primary-900) 60%,#1e1b4b);color:#fff;position:relative;overflow:hidden}
section.pilot::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(147,197,253,0.15),transparent 40%),radial-gradient(circle at 90% 90%,rgba(124,58,237,0.2),transparent 50%)}
.pilot-inner{position:relative;z-index:1;max-width:900px;margin:0 auto;text-align:center}
.pilot-eyebrow{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#bfdbfe;margin-bottom:14px}
.pilot-title{font-family:'DM Sans',sans-serif;font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin-bottom:18px}
.pilot-sub{font-size:18px;color:rgba(255,255,255,0.78);max-width:620px;margin:0 auto 32px;line-height:1.6}
.pilot-perks{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin-bottom:36px}
.pilot-perks div{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:140px}
.pilot-perks .num{font:700 32px 'DM Sans',sans-serif;letter-spacing:-.03em;color:#fff;line-height:1}
.pilot-perks .lbl{font-size:13px;color:rgba(255,255,255,0.7);max-width:160px}

/* FAQ */
.faq-grid{max-width:760px;margin:48px auto 0;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--bg);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.faq-q{width:100%;padding:18px 22px;border:none;background:transparent;cursor:pointer;text-align:left;font:600 15px 'Inter',sans-serif;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:16px;transition:background .15s}
.faq-q:hover{background:var(--bg-muted)}
.faq-q .chevron{flex-shrink:0;transition:transform .25s;color:var(--text-3)}
.faq-item.open .faq-q .chevron{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:400px}
.faq-a-inner{padding:0 22px 20px;font-size:14px;color:var(--text-2);line-height:1.65}

/* FINAL CTA */
section.final-cta{background:linear-gradient(135deg,var(--vl-primary-600),var(--vl-primary-900));color:#fff;padding:80px 0;position:relative;overflow:hidden}
section.final-cta::before{content:'';position:absolute;top:-50%;right:-10%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(147,197,253,0.2),transparent 70%)}
.final-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;z-index:1}
@media(max-width:900px){.final-grid{grid-template-columns:1fr;gap:32px}}
.final-left h2{font-family:'DM Sans',sans-serif;font-size:clamp(28px,3.5vw,38px);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin-bottom:14px}
.final-left p{font-size:17px;color:rgba(255,255,255,0.85);margin-bottom:24px;max-width:480px}
.final-left .trust-list{display:flex;flex-direction:column;gap:8px}
.final-left .trust-list span{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,0.85)}
.final-left .trust-list svg{color:#86efac}

.demo-form{background:#fff;color:var(--text);padding:28px;border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,0.3)}
.demo-form h3{font:700 18px 'DM Sans',sans-serif;margin-bottom:6px;letter-spacing:-.01em}
.demo-form p.lead{font-size:14px;color:var(--text-3);margin-bottom:20px}
.demo-form .field{margin-bottom:14px}
.demo-form label{display:block;font:500 12px 'Inter',sans-serif;color:var(--text-2);margin-bottom:5px}
.demo-form input,.demo-form textarea{width:100%;padding:0 14px;border:1px solid var(--border-strong);border-radius:8px;font:400 14px 'Inter',sans-serif;background:#fff;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}
.demo-form input{height:42px}
.demo-form textarea{min-height:96px;padding-top:10px;resize:vertical;line-height:1.5}
.demo-form input:focus,.demo-form textarea:focus{border-color:var(--vl-primary-600);box-shadow:var(--focus)}
.demo-form .consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--text-3);line-height:1.5;margin:14px 0}
.demo-form .consent input{width:auto;height:auto;margin-top:2px}
.demo-form .btn{width:100%;height:46px}
.demo-form .btn:disabled{opacity:.65;cursor:not-allowed;box-shadow:none}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.form-status{min-height:18px;margin-top:12px!important;margin-bottom:0!important;font-size:12px!important;line-height:1.5!important;color:var(--text-2)!important}

/* FOOTER */
footer.site{background:var(--bg-soft);border-top:1px solid var(--border);padding:64px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
@media(max-width:760px){.footer-grid{grid-template-columns:repeat(2,1fr);gap:32px}}
.footer-brand p{font-size:14px;color:var(--text-2);line-height:1.6;max-width:260px;margin-top:14px}
.footer-brand .byline{font:500 11px 'JetBrains Mono',monospace;color:var(--text-3);letter-spacing:.04em;margin-top:14px}
.footer-col h4{font:600 12px 'Inter',sans-serif;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-col a{color:var(--text-2);text-decoration:none;font-size:14px;transition:color .15s}
.footer-col a:hover{color:var(--vl-primary-700)}
[data-theme="dark"] .footer-col a:hover{color:var(--vl-primary-300)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--border);flex-wrap:wrap;gap:16px}
.footer-bottom p{font-size:13px;color:var(--text-3)}
.footer-bottom .legal{display:flex;gap:18px;flex-wrap:wrap}
.footer-bottom .legal a{font-size:13px;color:var(--text-3);text-decoration:none}
.footer-bottom .legal a:hover{color:var(--text)}

/* WAVE DIVIDER */
.wave-divider{display:flex;gap:4px;height:14px;align-items:center;justify-content:center;padding:8px 0;opacity:.3}
.wave-divider span{width:3px;background:var(--vl-primary-500);border-radius:1.5px}
.wave-divider span:nth-child(1){height:6px}
.wave-divider span:nth-child(2){height:10px}
.wave-divider span:nth-child(3){height:14px}
.wave-divider span:nth-child(4){height:10px}
.wave-divider span:nth-child(5){height:6px}

/* MOBILE DRAWER */
.mobile-drawer{display:none;position:fixed;inset:0;z-index:200;background:rgba(15,23,42,0.5)}
.mobile-drawer.open{display:block}
.mobile-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:280px;background:var(--bg);padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:-12px 0 32px rgba(15,23,42,0.2)}
.mobile-drawer-panel a{padding:12px 14px;color:var(--text);text-decoration:none;font-weight:500;border-radius:8px}
.mobile-drawer-panel a:hover{background:var(--bg-muted)}
.mobile-drawer-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:8px;background:transparent;border:1px solid var(--border);cursor:pointer;color:var(--text);font-size:18px}

@media(max-width:520px){
  .container{padding:0 18px}
  .header-inner{height:62px;gap:12px}
  .brand-wordmark{font-size:17px}
  section.hero{padding:48px 0 64px}
  .hero-grid{gap:34px}
  .hero-text{width:100%;max-width:calc(100vw - 36px)}
  .hero-pill{font-size:11px;line-height:1.4;white-space:normal}
  h1.hero-title{font-size:34px;line-height:1.08;overflow-wrap:break-word}
  h1.hero-title .accent{display:inline}
  .hero-sub{font-size:16px}
  .hero-cta{display:grid;grid-template-columns:1fr;gap:10px}
  .hero-cta .btn{width:100%}
  .hero-trust{gap:10px;font-size:12px}
  .demo-frame{transform:none;border-radius:18px}
  .hero-visual,.demo-frame,.demo-screen{max-width:100%;min-width:0}
  .demo-screen{min-height:300px;padding:18px 16px}
  .demo-badge{position:static;margin-top:10px;width:max-content;max-width:100%}
  .stats-grid{gap:0}
  .stat{padding:18px 10px;border-right:none;border-bottom:1px solid var(--border)}
  .stat:nth-child(odd){border-right:1px solid var(--border)}
  .stat:nth-child(3),.stat:nth-child(4){border-bottom:none}
  .how-tabs{margin-left:-18px;margin-right:-18px;border-radius:0;padding-left:18px;padding-right:18px}
  .how-tab{flex:0 0 auto}
  .how-mock{aspect-ratio:auto;min-height:260px;padding:22px 16px}
  .plan.featured{transform:none}
  .plan.featured:hover{transform:translateY(-3px)}
  .pilot-perks{gap:16px}
  .pilot-perks div{min-width:120px}
  .final-grid{gap:28px}
  .demo-form{padding:22px;border-radius:14px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{align-items:flex-start}
}