/* ==========================================================================
   KoeDraft — marketing site design system  v2
   Multi-theme (6 colour themes) x light/dark. Stripe-grade, premium, light-first.
   Token names kept stable; values vary by [data-theme] + [data-appearance].
   ========================================================================== */

/* ----- BASE = light appearance, "aurora" theme --------------------------- */
:root {
  --bg:#FBFBFD; --bg-2:#F3F4FA; --surface:#FFFFFF; --surface-2:#F6F7FC; --surface-3:#EDEFF7;
  --line:rgba(22,26,45,.10); --line-2:rgba(22,26,45,.17);
  --tx:#191C2B; --tx-soft:#535A75; --tx-mute:#8A90A8;
  --cream:#F4F5FB; --cream-2:#ECEFF8; --ivory:#FFFFFF;
  --tx-dk:#191C2B; --tx-dk-soft:#535A75; --tx-dk-mute:#8A90A8;
  --header-bg:rgba(255,255,255,.78);
  --ink-1:#141728; --ink-2:#0C0E1B;

  --accent-rgb:99,102,241;
  --gold:#6366F1; --gold-bright:#818CF8; --gold-deep:#4F46E5; --gold-ink:#FFFFFF;
  --gold-grad:linear-gradient(120deg,#6366F1 0%,#8B5CF6 50%,#EC4899 100%);
  --gold-grad-soft:linear-gradient(135deg, rgba(99,102,241,.14), rgba(236,72,153,.05));
  --accent-tint:rgba(99,102,241,.10);
  --c1:#6366F1; --c2:#8B5CF6; --c3:#EC4899; --c4:#22D3EE;

  --ok:#16A34A; --warn:#D97706; --soon:#2563EB; --danger:#E11D48;

  --r-sm:9px; --r:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --shadow:0 22px 60px -26px rgba(20,24,55,.30);
  --shadow-sm:0 10px 30px -16px rgba(20,24,55,.20);
  --glow:0 0 0 1px rgba(var(--accent-rgb),.20), 0 20px 48px -18px rgba(var(--accent-rgb),.42);
  --ease:cubic-bezier(.4,.14,.3,1); --maxw:1200px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ----- dark appearance --------------------------------------------------- */
[data-appearance="dark"]{
  --bg:#0B0D18; --bg-2:#0F1124; --surface:#151829; --surface-2:#1B1F35; --surface-3:#242A45;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
  --tx:#ECEEF9; --tx-soft:#AEB4CF; --tx-mute:#7B8199;
  --cream:#151829; --cream-2:#1B1F35; --ivory:#151829;
  --tx-dk:#ECEEF9; --tx-dk-soft:#AEB4CF; --tx-dk-mute:#7B8199;
  --header-bg:rgba(11,13,24,.72);
  --shadow:0 34px 80px -34px rgba(0,0,0,.78);
  --shadow-sm:0 12px 34px -20px rgba(0,0,0,.66);
}

/* ----- colour themes (accent only; valid on light AND dark) -------------- */
[data-theme="sunset"]{ --accent-rgb:244,63,94; --gold:#F43F5E; --gold-bright:#FB7185; --gold-deep:#E11D48;
  --gold-grad:linear-gradient(120deg,#F59E0B,#F43F5E 55%,#A855F7); --gold-grad-soft:linear-gradient(135deg,rgba(244,63,94,.15),rgba(168,85,247,.05));
  --accent-tint:rgba(244,63,94,.10); --c1:#F59E0B; --c2:#F43F5E; --c3:#A855F7; --c4:#FB923C; }
[data-theme="ocean"]{ --accent-rgb:14,165,233; --gold:#0EA5E9; --gold-bright:#38BDF8; --gold-deep:#0284C7;
  --gold-grad:linear-gradient(120deg,#06B6D4,#3B82F6 55%,#6366F1); --gold-grad-soft:linear-gradient(135deg,rgba(14,165,233,.15),rgba(99,102,241,.05));
  --accent-tint:rgba(14,165,233,.10); --c1:#06B6D4; --c2:#3B82F6; --c3:#6366F1; --c4:#22D3EE; }
[data-theme="emerald"]{ --accent-rgb:16,185,129; --gold:#10B981; --gold-bright:#34D399; --gold-deep:#059669;
  --gold-grad:linear-gradient(120deg,#84CC16,#10B981 55%,#06B6D4); --gold-grad-soft:linear-gradient(135deg,rgba(16,185,129,.15),rgba(6,182,212,.05));
  --accent-tint:rgba(16,185,129,.10); --c1:#84CC16; --c2:#10B981; --c3:#06B6D4; --c4:#A3E635; }
[data-theme="berry"]{ --accent-rgb:219,39,119; --gold:#DB2777; --gold-bright:#F472B6; --gold-deep:#BE185D;
  --gold-grad:linear-gradient(120deg,#F43F5E,#DB2777 55%,#7C3AED); --gold-grad-soft:linear-gradient(135deg,rgba(219,39,119,.15),rgba(124,58,237,.05));
  --accent-tint:rgba(219,39,119,.10); --c1:#F43F5E; --c2:#DB2777; --c3:#7C3AED; --c4:#FB7185; }
[data-theme="gold"]{ --accent-rgb:202,138,4; --gold:#CA8A04; --gold-bright:#EAB308; --gold-deep:#A16207;
  --gold-grad:linear-gradient(120deg,#FBBF24,#D4AF37 55%,#B45309); --gold-grad-soft:linear-gradient(135deg,rgba(202,138,4,.15),rgba(180,83,9,.05));
  --accent-tint:rgba(202,138,4,.10); --c1:#FBBF24; --c2:#D4AF37; --c3:#B45309; --c4:#F59E0B; }

/* ----- reset ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; } *{ margin:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg); }
body{ font-family:var(--font); background:var(--bg); color:var(--tx); line-height:1.6; font-size:17px;
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease); }
img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; } ul{ list-style:none; padding:0; }
h1,h2,h3,h4{ line-height:1.08; letter-spacing:-.03em; font-weight:800; }

/* ----- layout ------------------------------------------------------------ */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.section{ padding:96px 0; position:relative; }
.section--tight{ padding:64px 0; }
.section--light{ background:var(--cream); color:var(--tx-dk); }
.section--light h1,.section--light h2,.section--light h3,.section--light h4{ color:var(--tx-dk); }
.section--cream2{ background:var(--cream-2); color:var(--tx-dk); }
.section--alt{ background:linear-gradient(180deg,var(--bg),var(--bg-2)); }
.center{ text-align:center; } .mx-auto{ margin-inline:auto; }
.measure{ max-width:720px; } .measure-sm{ max-width:560px; }

/* ----- type -------------------------------------------------------------- */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.section--light .eyebrow,.section--cream2 .eyebrow{ color:var(--gold-deep); }
.eyebrow::before{ content:""; width:22px; height:2px; background:currentColor; opacity:.6; }
.eyebrow--center{ justify-content:center; }
h1,.h1{ font-size:clamp(2.4rem,5.2vw,4rem); } h2,.h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
h3,.h3{ font-size:clamp(1.25rem,2vw,1.6rem); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--tx-soft); }
.section--light .lead,.section--cream2 .lead{ color:var(--tx-dk-soft); }
.muted{ color:var(--tx-mute); } .section--light .muted{ color:var(--tx-dk-mute); }
.gold-text,.grad{ background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ----- buttons ----------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px; border-radius:var(--r-pill);
  border:1px solid transparent; font-weight:600; font-size:16px; letter-spacing:-.01em;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s, color .2s; white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--gold-grad); color:var(--gold-ink); box-shadow:var(--glow); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.4), 0 24px 50px -16px rgba(var(--accent-rgb),.55); }
.btn--ghost{ background:var(--surface); color:var(--tx); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.section--light .btn--ghost{ color:var(--tx-dk); border-color:var(--line-2); }
.section--light .btn--ghost:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }
.btn--lg{ padding:17px 34px; font-size:17px; } .btn--sm{ padding:10px 18px; font-size:14.5px; } .btn--block{ width:100%; }

.storebtn{ display:inline-flex; align-items:center; gap:12px; padding:12px 22px 12px 18px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line-2); color:var(--tx); box-shadow:var(--shadow-sm);
  transition:border-color .2s, transform .2s var(--ease), background .2s; }
.storebtn:hover{ border-color:var(--gold); transform:translateY(-2px); }
.storebtn .ic{ width:26px; height:26px; color:var(--gold); flex:none; }
.storebtn .l1{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-mute); line-height:1.2; }
.storebtn .l2{ font-size:17px; font-weight:600; line-height:1.15; }
.storebtn[aria-disabled="true"]{ opacity:.55; pointer-events:none; }

/* ----- header ------------------------------------------------------------ */
.site-header{ position:sticky; top:0; z-index:60; background:var(--header-bg);
  backdrop-filter:blur(16px) saturate(1.4); border-bottom:1px solid var(--line); transition:background .4s; }
.nav{ display:flex; align-items:center; gap:24px; height:70px; }
.nav__links{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav__links a{ padding:8px 13px; border-radius:var(--r-sm); font-size:15px; color:var(--tx-soft); font-weight:500; transition:color .15s, background .15s; }
.nav__links a:hover{ color:var(--tx); background:var(--surface-2); }
.nav__links a.is-active{ color:var(--gold); }
.nav__cta{ display:flex; align-items:center; gap:10px; }
.nav__toggle{ display:none; background:none; border:0; color:var(--tx); padding:8px; } .nav__toggle svg{ width:26px; height:26px; }

/* theme controls */
.theme-ctrls{ display:flex; align-items:center; gap:6px; }
.appearance-toggle,.theme-btn{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line-2); color:var(--tx); transition:.2s var(--ease); }
.appearance-toggle:hover,.theme-btn:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-1px); }
.appearance-toggle svg,.theme-btn svg{ width:19px; height:19px; }
.appearance-toggle .i-moon{ display:none; } [data-appearance="dark"] .appearance-toggle .i-sun{ display:none; }
[data-appearance="dark"] .appearance-toggle .i-moon{ display:block; }
.theme-pop{ position:relative; }
.theme-menu{ position:absolute; top:48px; right:0; display:flex; gap:9px; padding:13px; border-radius:16px;
  background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97); transform-origin:top right; transition:.22s var(--ease); z-index:80; }
.theme-pop.open .theme-menu{ opacity:1; visibility:visible; transform:none; }
.theme-dot{ width:30px; height:30px; border-radius:50%; border:2px solid transparent; background:var(--g); position:relative; transition:transform .15s; }
.theme-dot:hover{ transform:scale(1.12); } .theme-dot.active{ border-color:var(--tx); }

/* logo */
.logo{ display:inline-flex; align-items:center; gap:11px; } .logo__mark{ width:34px; height:34px; flex:none; }
.logo__word{ font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--tx); }
.logo__word b{ background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section--light .logo__word{ color:var(--tx-dk); }

/* legacy hero (sub-pages) */
.hero{ position:relative; padding:84px 0 72px; overflow:hidden; }
.hero__glow{ position:absolute; inset:-30% 0 auto 0; height:700px; pointer-events:none; z-index:0;
  background:radial-gradient(60% 55% at 50% 0%, rgba(var(--accent-rgb),.18), transparent 70%); }
.hero .container{ position:relative; z-index:1; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1{ margin-bottom:22px; } .hero .lead{ margin-bottom:30px; max-width:540px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero__note{ margin-top:18px; font-size:14px; color:var(--tx-mute); display:flex; align-items:center; gap:8px; }
.hero__note svg{ width:16px; height:16px; color:var(--gold); }

.pillrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.pill{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line-2); font-size:13.5px; color:var(--tx-soft); box-shadow:var(--shadow-sm); }
.pill svg{ width:15px; height:15px; color:var(--gold); }

/* legacy phone (sub-pages) */
.phone{ width:300px; max-width:100%; margin-inline:auto; background:var(--ink-2); border:1px solid var(--line-2);
  border-radius:38px; padding:12px; box-shadow:var(--shadow); position:relative; }
.phone::before{ content:""; position:absolute; top:16px; left:50%; transform:translateX(-50%); width:110px; height:22px; background:var(--ink-2); border-radius:var(--r-pill); z-index:2; }
.phone__screen{ background:linear-gradient(180deg,#1b1f33,#11131f); border-radius:28px; padding:40px 16px 18px; min-height:540px; display:flex; flex-direction:column; gap:14px; color:#ECEEF9; }
.appbar{ display:flex; align-items:center; justify-content:space-between; } .appbar .t{ font-weight:700; font-size:15px; }
.recdot{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#AEB4CF; }
.recdot i{ width:9px; height:9px; border-radius:50%; background:#E0533F; animation:pulse 2s infinite var(--ease); }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(224,83,63,.55)} 70%{box-shadow:0 0 0 9px rgba(224,83,63,0)} 100%{box-shadow:0 0 0 0 rgba(224,83,63,0)} }
.wave{ display:flex; align-items:center; justify-content:center; gap:4px; height:60px; }
.wave i{ width:4px; border-radius:var(--r-pill); background:var(--gold-grad); animation:eq 1.3s ease-in-out infinite; }
.wave i:nth-child(1){height:22%}.wave i:nth-child(2){height:55%}.wave i:nth-child(3){height:90%}.wave i:nth-child(4){height:60%}
.wave i:nth-child(5){height:100%}.wave i:nth-child(6){height:45%}.wave i:nth-child(7){height:75%}.wave i:nth-child(8){height:30%}
.wave i:nth-child(9){height:65%}.wave i:nth-child(10){height:40%}
@keyframes eq{ 0%,100%{transform:scaleY(.5)} 50%{transform:scaleY(1)} }
.bubble{ border-radius:var(--r); padding:12px 13px; font-size:13.5px; line-height:1.5; }
.bubble--raw{ background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.2); color:#AEB4CF; }
.bubble--clean{ background:var(--gold-grad-soft); border:1px solid var(--gold); color:#ECEEF9; }
.bubble .tag{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#7B8199; display:block; margin-bottom:5px; }
.bubble--clean .tag{ color:var(--gold-bright); }
.uncertain{ text-decoration:underline wavy var(--gold); text-underline-offset:3px; }

/* ----- cards & grids ----------------------------------------------------- */
.grid{ display:grid; gap:20px; } .grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px;
  box-shadow:var(--shadow-sm); transition:border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.card:hover{ border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--shadow); }
.card h3{ margin-bottom:8px; } .card p{ color:var(--tx-soft); font-size:15.5px; }
.section--light .card{ background:var(--ivory); }
.section--light .card p{ color:var(--tx-dk-soft); }
.card--feature{ padding:26px; } .card--pad-lg{ padding:36px; }
.ico{ width:48px; height:48px; border-radius:var(--r); display:grid; place-items:center; background:var(--gold-grad-soft);
  border:1px solid var(--line-2); color:var(--gold); margin-bottom:18px; } .ico svg{ width:24px; height:24px; }
.section--light .ico{ color:var(--gold-deep); }

.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill); font-size:12px; font-weight:600; letter-spacing:.02em; }
.badge i{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge--live{ color:var(--ok); background:rgba(22,163,74,.12); border:1px solid rgba(22,163,74,.3); }
.badge--beta{ color:var(--warn); background:rgba(217,119,6,.12); border:1px solid rgba(217,119,6,.3); }
.badge--soon{ color:var(--soon); background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.3); }
.badge--gold{ color:var(--gold-deep); background:var(--gold-grad-soft); border:1px solid var(--line-2); }

.checklist li{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; color:var(--tx-soft); font-size:15.5px; }
.checklist li svg{ width:20px; height:20px; color:var(--gold); flex:none; margin-top:2px; }
.section--light .checklist li{ color:var(--tx-dk-soft); } .section--light .checklist li svg{ color:var(--gold-deep); }

/* ----- steps ------------------------------------------------------------- */
.steps{ display:grid; gap:22px; } .step{ display:grid; grid-template-columns:56px 1fr; gap:20px; align-items:start; }
.step__n{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:22px; font-weight:800; color:var(--gold-ink); background:var(--gold-grad); flex:none; }
.step h3{ margin-bottom:6px; } .step p{ color:var(--tx-soft); } .section--light .step p{ color:var(--tx-dk-soft); }

/* ----- comparison table -------------------------------------------------- */
.table-wrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
table.cmp{ width:100%; border-collapse:collapse; min-width:620px; background:var(--surface); }
.cmp th,.cmp td{ padding:16px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:15px; }
.cmp thead th{ background:var(--surface-2); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--tx-soft); }
.cmp thead th.koe{ color:var(--gold); }
.cmp tbody td:not(:first-child){ text-align:center; }
.cmp td.koe{ background:var(--accent-tint); color:var(--tx); font-weight:600; }
.cmp tr:last-child td{ border-bottom:0; } .cmp .yes{ color:var(--ok); font-weight:700; } .cmp .no{ color:var(--tx-mute); }
.section--light table.cmp{ background:var(--ivory); }

/* ----- pricing ----------------------------------------------------------- */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.price{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); }
.price--feature{ border-color:var(--gold); box-shadow:var(--glow); position:relative; }
.price__tag{ position:absolute; top:-13px; left:32px; }
.price h3{ font-size:1.35rem; margin-bottom:6px; } .price__amt{ font-size:2.6rem; font-weight:800; letter-spacing:-.03em; margin:12px 0 4px; }
.price__amt small{ font-size:1rem; font-weight:500; color:var(--tx-mute); } .price__sub{ color:var(--tx-mute); font-size:14px; margin-bottom:22px; }
.price .checklist{ flex:1; margin-bottom:24px; } .price .checklist li{ font-size:14.5px; padding:7px 0; }

/* ----- faq --------------------------------------------------------------- */
.faq{ max-width:820px; margin-inline:auto; } .faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ width:100%; background:none; border:0; color:inherit; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 4px; font-size:17.5px; font-weight:600; }
.faq__q .pm{ width:24px; height:24px; flex:none; color:var(--gold); transition:transform .3s var(--ease); }
.faq__item.open .faq__q .pm{ transform:rotate(45deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); } .faq__a>div{ padding:0 4px 22px; color:var(--tx-soft); }
.section--light .faq__a>div{ color:var(--tx-dk-soft); }

/* ----- cta band ---------------------------------------------------------- */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--r-lg); padding:56px 40px; text-align:center;
  background:var(--gold-grad); color:#fff; box-shadow:var(--glow); }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 80% 0,rgba(255,255,255,.18),transparent 60%); }
.cta-band>*{ position:relative; } .cta-band h2{ margin-bottom:14px; color:#fff; } .cta-band .lead{ margin:0 auto 28px; color:rgba(255,255,255,.9); }
.cta-band .btn--primary{ background:#fff; color:var(--gold-deep); } .cta-band .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.5); background:transparent; }

/* ----- stats ------------------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat{ text-align:center; padding:18px; }
.stat__n{ font-size:clamp(1.9rem,3vw,2.6rem); font-weight:800; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat__l{ color:var(--tx-soft); font-size:14.5px; margin-top:4px; } .section--light .stat__l{ color:var(--tx-dk-soft); }

/* ----- forms ------------------------------------------------------------- */
.field{ margin-bottom:18px; } .field label{ display:block; font-size:14px; font-weight:600; margin-bottom:7px; color:var(--tx-soft); }
.field input,.field select,.field textarea{ width:100%; padding:13px 15px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line-2); color:var(--tx); font:inherit; font-size:15.5px; transition:border-color .2s; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); }
.field textarea{ resize:vertical; min-height:130px; }

/* ----- prose ------------------------------------------------------------- */
.prose{ max-width:760px; } .prose h2{ margin:40px 0 14px; } .prose h3{ margin:28px 0 10px; }
.prose p{ margin-bottom:16px; color:var(--tx-soft); } .prose ul.bul{ padding-left:0; margin-bottom:18px; }
.prose ul.bul li{ position:relative; padding-left:26px; margin-bottom:10px; color:var(--tx-soft); }
.prose ul.bul li::before{ content:""; position:absolute; left:4px; top:11px; width:7px; height:7px; border-radius:2px; background:var(--gold); transform:rotate(45deg); }
.section--light .prose p,.section--light .prose ul.bul li{ color:var(--tx-dk-soft); }
.pagehead{ padding:72px 0 36px; position:relative; }
.pagehead__glow{ position:absolute; inset:0 0 auto 0; height:360px; background:radial-gradient(50% 70% at 50% 0,rgba(var(--accent-rgb),.14),transparent 70%); pointer-events:none; }
.pagehead .container{ position:relative; } .pagehead h1{ margin-bottom:16px; }
.kb-cat{ display:flex; gap:16px; align-items:flex-start; } .kb-cat .ico{ margin-bottom:0; }
.kb-list a{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); color:var(--tx-soft); font-size:15.5px; transition:color .15s, padding .15s; }
.kb-list a:hover{ color:var(--gold); padding-left:6px; } .kb-list a svg{ width:16px; height:16px; color:var(--gold); flex:none; }
.section--light .kb-list a{ color:var(--tx-dk-soft); }

/* ----- footer ------------------------------------------------------------ */
.site-footer{ background:var(--bg-2); border-top:1px solid var(--line); padding:64px 0 32px; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:44px; }
.footer__brand p{ color:var(--tx-mute); font-size:14.5px; margin-top:16px; max-width:300px; }
.footer h4{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-mute); margin-bottom:16px; font-weight:700; }
.footer__col a{ display:block; padding:6px 0; color:var(--tx-soft); font-size:14.5px; transition:color .15s; } .footer__col a:hover{ color:var(--gold); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:26px; border-top:1px solid var(--line); color:var(--tx-mute); font-size:13.5px; flex-wrap:wrap; }
.footer__tag{ letter-spacing:.18em; text-transform:uppercase; font-size:11.5px; color:var(--gold); }

/* ----- misc -------------------------------------------------------------- */
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.note{ border-left:3px solid var(--gold); background:var(--gold-grad-soft); padding:16px 18px; border-radius:0 var(--r) var(--r) 0; font-size:14.5px; color:var(--tx-soft); }
.section--light .note{ color:var(--tx-dk-soft); }
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; }
.mt-s{margin-top:14px}.mt{margin-top:24px}.mt-l{margin-top:40px}.mb{margin-bottom:24px}.mb-l{margin-bottom:48px}

/* ----- responsive -------------------------------------------------------- */
@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; gap:40px; } .hero__media{ order:-1; }
  .grid-4{ grid-template-columns:repeat(2,1fr); } .price-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:28px; } .stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .section{ padding:68px 0; } .nav__links{ display:none; } .nav__toggle{ display:inline-flex; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } .step{ grid-template-columns:44px 1fr; gap:14px; }
  .step__n{ width:44px; height:44px; font-size:18px; } .footer__grid{ grid-template-columns:1fr 1fr; } .cta-band{ padding:40px 22px; }
  .nav.open .nav__links{ display:flex; flex-direction:column; align-items:stretch; gap:2px; position:absolute; top:70px; left:0; right:0; padding:14px 24px 22px; background:var(--header-bg); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); margin:0; }
  .nav.open .nav__links a{ padding:13px 12px; font-size:16px; }
}
@media (max-width:460px){ .footer__grid{ grid-template-columns:1fr; } .stats{ grid-template-columns:1fr 1fr; } body{ font-size:16px; } }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto; } }

/* front-end: hide the visitor theme/colour switcher */
.theme-ctrls{display:none !important}

/* full-width header/footer — override theme .site-header/.site-footer max-width collision */
.site-header, .site-footer { max-width:none !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; }

/* ==========================================================================
   KoeDraft — premium interactive HOME layer  v2
   Stripe-grade, light-first, multi-colour, data-viz heavy. Theme-aware.
   ========================================================================== */

/* ----- ambient gradient mesh -------------------------------------------- */
.bg-fx{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:var(--bg); }
.bg-fx b{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; mix-blend-mode:normal; }
.bg-fx .b1{ width:50vw; height:50vw; top:-12vw; left:-8vw; background:radial-gradient(circle,rgba(var(--accent-rgb),.5),transparent 65%); animation:drift1 26s ease-in-out infinite; }
.bg-fx .b2{ width:42vw; height:42vw; top:8vw; right:-10vw; background:radial-gradient(circle, color-mix(in srgb, var(--c3) 55%, transparent), transparent 65%); animation:drift2 30s ease-in-out infinite; }
.bg-fx .b3{ width:38vw; height:38vw; top:60vh; left:30vw; background:radial-gradient(circle, color-mix(in srgb, var(--c1) 45%, transparent), transparent 65%); animation:drift3 34s ease-in-out infinite; }
[data-appearance="dark"] .bg-fx b{ opacity:.4; }
@keyframes drift1{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(6vw,4vw)} }
@keyframes drift2{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-5vw,6vw)} }
@keyframes drift3{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(4vw,-5vw)} }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }

.section-label{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; margin-bottom:54px; }
.section-label h2{ font-size:clamp(1.9rem,3.6vw,3rem); } .section-label p{ color:var(--tx-soft); max-width:560px; font-size:1.05rem; }
.grad{ background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ============================ HERO ====================================== */
.xhero{ position:relative; padding:64px 0 56px; overflow:hidden; }
.xhero__grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:44px; align-items:center; }
.xhero__eyebrow{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line-2); color:var(--gold-deep); box-shadow:var(--shadow-sm);
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:24px; }
.xhero__eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold-grad); animation:blip 2s infinite; }
@keyframes blip{ 0%,100%{opacity:1} 50%{opacity:.3} }
.xhero h1{ font-size:clamp(2.7rem,5.6vw,4.6rem); letter-spacing:-.04em; margin-bottom:22px; }
.xhero__sub{ font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--tx-soft); max-width:470px; margin-bottom:30px; }
.xhero__cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.xhero__pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }

/* hero stat bar */
.statbar{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:54px; }
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-sm); }
.kpi__n{ font-size:1.9rem; font-weight:800; letter-spacing:-.03em; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kpi__l{ font-size:13px; color:var(--tx-soft); margin-top:2px; }
.kpi__spark{ display:flex; align-items:flex-end; gap:3px; height:26px; margin-top:12px; }
.kpi__spark i{ flex:1; background:var(--gold-grad-soft); border-radius:3px 3px 0 0; }

/* stage + phone */
.stage{ position:relative; display:flex; justify-content:center; align-items:center; min-height:600px; }
.stage__halo{ position:absolute; width:460px; height:460px; border-radius:50%; background:var(--gold-grad); opacity:.16; filter:blur(50px); }
.device{ position:relative; width:320px; border-radius:46px; padding:13px; background:linear-gradient(160deg,#22263a,#0a0c16);
  border:1px solid rgba(255,255,255,.08); box-shadow:0 50px 100px -34px rgba(15,18,40,.6), inset 0 1px 0 rgba(255,255,255,.08), var(--glow); }
.device::after{ content:""; position:absolute; top:24px; left:50%; transform:translateX(-50%); width:104px; height:26px; background:#06070d; border-radius:var(--r-pill); z-index:5; }
.device__screen{ position:relative; border-radius:34px; overflow:hidden; background:var(--surface); min-height:600px; padding:46px 16px 18px; display:flex; flex-direction:column; gap:13px; }

.fchip{ position:absolute; display:inline-flex; align-items:center; gap:9px; padding:11px 15px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow); font-size:13.5px; font-weight:600; color:var(--tx); z-index:6; animation:float 5s ease-in-out infinite; }
.fchip svg{ width:18px; height:18px; }
.fchip--a{ top:54px; left:-40px; color:var(--c1); } .fchip--b{ top:286px; right:-46px; color:var(--c3); animation-delay:1.2s; }
.fchip--c{ bottom:64px; left:-30px; color:var(--c2); animation-delay:.6s; }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* live demo screen */
.scr-head{ display:flex; align-items:center; justify-content:space-between; }
.scr-brand{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:var(--tx); }
.scr-brand b{ background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.scr-status{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--tx-soft); }
.scr-status i{ width:8px; height:8px; border-radius:50%; background:#E0533F; box-shadow:0 0 0 0 rgba(224,83,63,.6); animation:pulse 1.8s infinite; }
.live-wave{ display:flex; align-items:center; justify-content:center; gap:4px; height:66px; margin:4px 0; }
.live-wave i{ width:4px; min-height:4px; border-radius:var(--r-pill); background:var(--gold-grad); height:30%; transition:height .12s ease; }
.demo-line{ font-size:14px; line-height:1.55; }
.demo-raw{ background:var(--surface-2); border:1px dashed var(--line-2); color:var(--tx-soft); border-radius:13px; padding:12px 13px; min-height:64px; }
.demo-clean{ background:var(--gold-grad-soft); border:1px solid var(--gold); border-radius:13px; padding:12px 13px; color:var(--tx); opacity:0; transform:translateY(10px); transition:all .5s var(--ease); min-height:64px; }
.demo-clean.show{ opacity:1; transform:none; }
.demo-tag{ font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-mute); display:block; margin-bottom:5px; }
.demo-clean .demo-tag{ color:var(--gold-deep); }
.caret{ display:inline-block; width:2px; height:1em; background:var(--gold); margin-left:1px; vertical-align:-2px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0} }
.hl{ color:var(--gold-deep); font-weight:700; }
.demo-actions{ display:flex; gap:8px; margin-top:auto; }
.demo-actions span{ flex:1; text-align:center; padding:11px; border-radius:12px; font-size:13.5px; font-weight:600; }
.demo-ghost{ background:var(--surface-2); border:1px solid var(--line-2); color:var(--tx-soft); }
.demo-go{ background:var(--gold-grad); color:#fff; }
.demo-go.pulse{ animation:gopulse 1.2s var(--ease); }
@keyframes gopulse{ 0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)} 40%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),.25)} }

/* ============================ MARQUEE =================================== */
.marquee{ border-block:1px solid var(--line); background:var(--surface); padding:20px 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee__track{ display:flex; gap:46px; width:max-content; animation:slide 32s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ display:inline-flex; align-items:center; gap:11px; color:var(--tx-soft); font-size:16px; font-weight:600; white-space:nowrap; }
.marquee__item svg{ width:20px; height:20px; color:var(--gold); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ====================== DATA: speed chart ============================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.chartcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:34px; box-shadow:var(--shadow); }
.chart-h{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; }
.chart-h h3{ font-size:1.15rem; } .chart-h span{ font-size:13px; color:var(--tx-mute); }
.barpair{ display:grid; gap:18px; }
.bar{ }
.bar__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:14px; }
.bar__top b{ font-weight:700; } .bar__top .v{ font-weight:800; color:var(--gold-deep); }
.bar__track{ height:18px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; }
.bar__fill{ height:100%; width:0; border-radius:var(--r-pill); transition:width 1.3s var(--ease); }
.bar__fill.is-mute{ background:var(--surface-3); border:1px solid var(--line-2); }
.bar__fill.is-accent{ background:var(--gold-grad); }
.in .bar__fill[data-w]{ width:var(--w); }

/* big number column chart */
.cols{ display:flex; align-items:flex-end; gap:14px; height:200px; padding-top:10px; }
.col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:10px; height:100%; }
.col__bar{ width:100%; max-width:64px; border-radius:10px 10px 0 0; height:0; transition:height 1.2s var(--ease); }
.in .col__bar[data-h]{ height:var(--h); }
.col__v{ font-weight:800; font-size:1.1rem; } .col__l{ font-size:12.5px; color:var(--tx-mute); text-align:center; }

/* ====================== INTERACTIVE FEATURE BROWSER ===================== */
.browser{ display:grid; grid-template-columns:1fr 360px; gap:56px; align-items:center; }
.feat-tabs{ display:flex; flex-direction:column; gap:10px; }
.feat-tab{ display:flex; gap:16px; align-items:flex-start; text-align:left; width:100%; padding:18px 20px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:all .25s var(--ease); position:relative; }
.feat-tab:hover{ border-color:var(--line-2); transform:translateX(4px); }
.feat-tab.active{ border-color:var(--gold); box-shadow:var(--glow); }
.feat-tab__ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:none; background:var(--gold-grad-soft); border:1px solid var(--line-2); color:var(--gold); transition:all .25s; }
.feat-tab.active .feat-tab__ic{ background:var(--gold-grad); color:#fff; border-color:transparent; }
.feat-tab__ic svg{ width:24px; height:24px; }
.feat-tab h3{ font-size:1.15rem; margin-bottom:4px; } .feat-tab p{ color:var(--tx-soft); font-size:14.5px; line-height:1.5; }
.feat-tab__bar{ position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:var(--r-pill); background:var(--gold-grad); opacity:0; transition:opacity .25s; }
.feat-tab.active .feat-tab__bar{ opacity:1; }
.feat-stage{ position:relative; display:flex; justify-content:center; }
.feat-stage .stage__halo{ width:360px; height:360px; }

.scr{ position:absolute; inset:0; padding:46px 16px 18px; display:flex; flex-direction:column; gap:11px; opacity:0; transform:scale(.97) translateY(8px); transition:all .45s var(--ease); pointer-events:none; }
.scr.active{ opacity:1; transform:none; pointer-events:auto; }
.scr-title{ font-size:13px; font-weight:800; color:var(--tx); display:flex; justify-content:space-between; align-items:center; }
.scr-title small{ color:var(--tx-mute); font-weight:500; font-size:11px; }
.row{ background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:11px 12px; font-size:13px; color:var(--tx-soft); display:flex; align-items:center; gap:10px; }
.row .dotk{ width:30px; height:30px; border-radius:9px; background:var(--gold-grad-soft); border:1px solid var(--line-2); color:var(--gold); display:grid; place-items:center; flex:none; } .row .dotk svg{ width:16px; height:16px; }
.row b{ color:var(--tx); font-weight:700; }
.chip-sm{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:var(--r-pill); font-size:12px; background:var(--surface-2); border:1px solid var(--line-2); color:var(--tx-soft); }
.chip-sm.on{ background:var(--gold-grad); color:#fff; border-color:transparent; font-weight:600; }
.seg{ display:flex; gap:6px; flex-wrap:wrap; }
.scr .mini-wave{ display:flex; align-items:center; justify-content:center; gap:3px; height:48px; }
.scr .mini-wave i{ width:3px; border-radius:9px; background:var(--gold-grad); animation:eq 1.3s ease-in-out infinite; }
.scr .mini-wave i:nth-child(odd){ height:70% } .scr .mini-wave i:nth-child(even){ height:40% }
.lang-flow{ display:flex; align-items:center; gap:10px; justify-content:center; padding:6px 0; } .lang-flow .ar{ color:var(--gold); }

/* ====================== RAW → CLEAN SLIDER ============================== */
.ba{ position:relative; max-width:720px; margin-inline:auto; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line-2); background:var(--surface); box-shadow:var(--shadow); user-select:none; }
.ba__pane{ padding:40px 44px; }
.ba__tag{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; font-weight:700; }
.ba__txt{ font-size:clamp(1.05rem,1.8vw,1.4rem); line-height:1.6; }
.ba__after{ position:absolute; inset:0; background:var(--gold-grad-soft); border-right:2px solid var(--gold); width:50%; overflow:hidden; }
.ba__after .ba__pane{ width:var(--baw,680px); max-width:none; }
.ba__after .ba__tag{ color:var(--gold-deep); } .ba__before .ba__tag{ color:var(--tx-mute); } .ba__before .ba__txt{ color:var(--tx-soft); }
.ba__handle{ position:absolute; top:0; bottom:0; left:50%; width:44px; transform:translateX(-50%); cursor:ew-resize; z-index:4; display:grid; place-items:center; }
.ba__handle::before{ content:""; position:absolute; top:0; bottom:0; width:2px; background:var(--gold); }
.ba__grip{ width:44px; height:44px; border-radius:50%; background:var(--gold-grad); color:#fff; display:grid; place-items:center; box-shadow:var(--glow); } .ba__grip svg{ width:22px; height:22px; }
.ba__strike{ text-decoration:line-through; opacity:.5; }

/* ====================== WORKFLOW INFOGRAPHIC =========================== */
.flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.fnode{ position:relative; text-align:center; padding:0 10px; }
.fnode__ic{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center; margin:0 auto 16px; color:#fff; box-shadow:var(--shadow-sm); position:relative; z-index:2; }
.fnode__ic svg{ width:30px; height:30px; }
.fnode h4{ font-size:1rem; margin-bottom:6px; } .fnode p{ font-size:13px; color:var(--tx-soft); line-height:1.45; }
.fnode::before{ content:""; position:absolute; top:32px; left:-50%; width:100%; height:2px; background:linear-gradient(90deg,var(--line-2),var(--gold)); z-index:1; }
.fnode:first-child::before{ display:none; }
.fnode__step{ position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:800; color:var(--gold-deep); background:var(--surface); padding:0 8px; }

/* ====================== LANGUAGE COVERAGE ============================== */
.langwrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:54px; align-items:center; }
.donut{ width:230px; height:230px; margin-inline:auto; border-radius:50%; position:relative;
  background:conic-gradient(var(--c1) 0 46%, var(--c2) 46% 72%, var(--c3) 72% 100%); box-shadow:var(--shadow); transform:rotate(-90deg); }
.donut::after{ content:""; position:absolute; inset:26px; border-radius:50%; background:var(--surface); }
.donut__c{ position:absolute; inset:0; transform:rotate(90deg); display:grid; place-items:center; text-align:center; }
.donut__c b{ font-size:2rem; font-weight:800; } .donut__c span{ font-size:12.5px; color:var(--tx-mute); }
.leg{ display:grid; gap:14px; } .leg__row{ display:flex; align-items:center; gap:14px; }
.leg__row .sw2{ width:14px; height:14px; border-radius:4px; flex:none; }
.leg__row b{ font-weight:700; } .leg__row span{ color:var(--tx-soft); font-size:14px; }
.leg__bar{ flex:1; height:8px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; }
.leg__bar i{ display:block; height:100%; width:0; transition:width 1.2s var(--ease); }
.in .leg__bar i[data-w]{ width:var(--w); }

/* ====================== FEATURE CARDS (multicolour) ==================== */
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.fcard{ position:relative; padding:30px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.fcard::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--cc,var(--gold-grad)); }
.fcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line-2); }
.fcard__ic{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:20px; color:#fff; background:var(--cc,var(--gold-grad)); box-shadow:var(--shadow-sm); }
.fcard__ic svg{ width:27px; height:27px; }
.fcard h3{ font-size:1.2rem; margin-bottom:8px; } .fcard p{ color:var(--tx-soft); font-size:14.5px; line-height:1.55; }
.fcard .tagsoon{ margin-top:12px; }

/* ====================== PRIVACY band =================================== */
.privacy{ position:relative; border-radius:var(--r-xl); overflow:hidden; padding:64px 48px; background:var(--gold-grad); color:#fff; }
.privacy::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 85% 10%,rgba(255,255,255,.18),transparent 55%); }
.privacy__grid{ position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.privacy h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:14px; }
.privacy .eyebrow{ color:rgba(255,255,255,.85); } .privacy .eyebrow::before{ background:#fff; }
.privacy .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); }
.shield{ position:relative; width:220px; height:220px; margin-inline:auto; display:grid; place-items:center; }
.shield svg{ width:100%; height:100%; filter:drop-shadow(0 14px 30px rgba(0,0,0,.25)); }
.shield .ring2{ position:absolute; inset:-18px; border:1px dashed rgba(255,255,255,.4); border-radius:50%; animation:spin 30s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.privacy__list{ display:grid; gap:14px; }
.pchip{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:15px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px); }
.pchip svg{ width:22px; height:22px; color:#fff; flex:none; } .pchip b{ display:block; margin-bottom:2px; color:#fff; } .pchip span{ color:rgba(255,255,255,.82); font-size:14px; }

/* ====================== PLATFORMS ====================================== */
.devrow{ display:flex; justify-content:center; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.dev{ text-align:center; }
.dev__frame{ border:1px solid var(--line-2); border-radius:18px; background:var(--surface); display:grid; place-items:center; color:var(--gold); box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s; }
.dev:hover .dev__frame{ transform:translateY(-6px); box-shadow:var(--glow); }
.dev__frame svg{ width:40%; height:40%; }
.dev--phone .dev__frame{ width:90px; height:160px; } .dev--tab .dev__frame{ width:150px; height:160px; } .dev--lap .dev__frame{ width:210px; height:140px; border-radius:14px; }
.dev h4{ margin:16px 0 8px; font-size:1rem; }

/* ====================== CTA ============================================ */
.xcta{ position:relative; text-align:center; border-radius:var(--r-xl); padding:70px 40px; overflow:hidden; background:var(--gold-grad); color:#fff; box-shadow:var(--glow); }
.xcta::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 20% 0,rgba(255,255,255,.2),transparent 55%); }
.xcta>*{ position:relative; } .xcta h2{ font-size:clamp(2rem,4vw,3.2rem); margin-bottom:16px; color:#fff; }
.xcta p{ color:rgba(255,255,255,.9); max-width:520px; margin:0 auto 30px; font-size:1.1rem; }
.xcta .btn--primary{ background:#fff; color:var(--gold-deep); } .xcta .btn--ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.5); }

/* ====================== responsive ===================================== */
@media (max-width:1040px){
  .browser{ grid-template-columns:1fr; gap:40px; } .feat-tabs{ order:2; }
  .split,.langwrap{ grid-template-columns:1fr; gap:36px; } .fgrid{ grid-template-columns:repeat(2,1fr); }
  .flow{ grid-template-columns:repeat(2,1fr); gap:34px 0; } .fnode::before{ display:none; }
  .statbar{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .xhero__grid{ grid-template-columns:1fr; gap:30px; } .stage{ order:-1; min-height:520px; }
  .privacy__grid{ grid-template-columns:1fr; gap:32px; } .shield{ width:170px; height:170px; }
}
@media (max-width:640px){
  .fgrid{ grid-template-columns:1fr; } .flow{ grid-template-columns:1fr; } .statbar{ grid-template-columns:1fr 1fr; }
  .privacy{ padding:40px 22px; } .ba__pane{ padding:28px 26px; } .device{ width:288px; } .xcta{ padding:48px 22px; }
  .fchip--a{ left:-10px } .fchip--b{ right:-10px } .fchip--c{ left:-6px; bottom:40px }
}

/* ====================== VIDEO HERO + SCREENSHOTS ====================== */
.vhero{ padding:54px 0 14px; text-align:center; position:relative; }
.vhero h1{ font-size:clamp(2.6rem,5.4vw,4.5rem); letter-spacing:-.04em; margin-bottom:18px; }
.vhero__sub{ font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--tx-soft); max-width:560px; margin:0 auto 26px; }
.vhero__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.vplayer{ position:relative; max-width:980px; margin:46px auto 0; border-radius:26px; padding:10px;
  background:linear-gradient(160deg,#22263a,#0a0c16); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 60px 130px -46px rgba(15,18,40,.6), var(--glow); }
.vplayer::before{ content:""; position:absolute; inset:-3px; border-radius:28px; background:var(--gold-grad); opacity:.45; filter:blur(26px); z-index:-1; }
.vplayer video{ width:100%; display:block; border-radius:17px; background:#0b0d16; }
.vplayer__badge{ position:absolute; top:22px; left:22px; z-index:2; display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:var(--r-pill); background:rgba(10,12,22,.55); backdrop-filter:blur(8px); color:#fff; font-size:12px; font-weight:600; }
.vplayer__badge i{ width:7px; height:7px; border-radius:50%; background:#E0533F; animation:blip 2s infinite; }

.shots{ display:flex; gap:24px; overflow-x:auto; padding:10px 4px 26px; scroll-snap-type:x mandatory; }
.shots::-webkit-scrollbar{ height:8px; } .shots::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:9px; }
.shot{ flex:0 0 auto; width:238px; scroll-snap-align:center; text-align:center; transition:transform .3s var(--ease); }
.shot:hover{ transform:translateY(-8px); }
.shot img{ width:100%; display:block; border-radius:32px; filter:drop-shadow(0 30px 50px rgba(20,24,55,.26)); }
.shot figcaption{ margin-top:14px; color:var(--tx-soft); font-size:14px; font-weight:600; }
@media (max-width:640px){ .vplayer{ margin-top:30px; } .shot{ width:200px; } }