/* ==========================================================
   Vaironect — shared stylesheet
   ========================================================== */

:root{
  --bg:#050505;
  --bg2:#0e0e0e;
  --fg:#ffffff;
  --fg-dim:#a8a8a8;
  --fg-faint:#6a6a6a;
  --line: rgba(255,255,255,0.14);
  --line-strong: rgba(255,255,255,0.34);
  --glass: rgba(255,255,255,0.05);
  --glass-strong: rgba(255,255,255,0.09);
  --glass-border: rgba(255,255,255,0.13);
  --shadow-soft: 0 30px 70px -30px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,0.07), 0 20px 50px -20px rgba(0,0,0,0.6);
  --btn-glow: rgba(255,255,255,0.28);
  --aurora: rgba(255,255,255,1);
  --nav-bg: rgba(14,14,14,0.65);
  --term-bg: rgba(10,10,10,0.75);
  --term-bar-bg: rgba(255,255,255,0.03);
  --term-dot: rgba(255,255,255,0.2);
  --term-str: #c9c9c9;
  --term-num: #ededed;
  --display:'Space Grotesk', 'Inter', sans-serif;
  --sans:'Inter', -apple-system, sans-serif;
  --mono:'JetBrains Mono', monospace;
  --maxw:1240px;
  --r-full:999px;
  --r-lg:28px;
  --r-md:20px;
  --r-sm:14px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --spring: cubic-bezier(.22,1,.36,1);
}
:root[data-theme="light"]{
  --bg:#ffffff;
  --bg2:#f7f7f8;
  --fg:#0a0a0a;
  --fg-dim:#4d4e54;
  --fg-faint:#9a9ba1;
  --line: rgba(0,0,0,0.08);
  --line-strong: rgba(0,0,0,0.24);
  --glass: rgba(255,255,255,0.9);
  --glass-strong: #ffffff;
  --glass-border: rgba(0,0,0,0.08);
  --shadow-soft: 0 24px 60px -30px rgba(0,0,0,0.14);
  --shadow-glow: 0 0 0 1px rgba(0,0,0,0.045), 0 16px 36px -22px rgba(0,0,0,0.09);
  --btn-glow: rgba(0,0,0,0.12);
  --aurora: rgba(0,0,0,1);
  --nav-bg: rgba(255,255,255,0.78);
  --term-bg: #f2f2f3;
  --term-bar-bg: rgba(0,0,0,0.035);
  --term-dot: rgba(0,0,0,0.2);
  --term-str: #3c3d42;
  --term-num: #050505;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16.5px; line-height:1.6; overflow-x:hidden;
  cursor:none; transition: background .3s ease, color .3s ease;
}
h1,h2,h3{ font-family:var(--display); font-weight:600; margin:0; letter-spacing:-0.01em; text-wrap:balance; }
p{margin:0;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative;}
section{position:relative;}
::selection{ background:var(--fg); color:var(--bg); }
:focus-visible{ outline:1px solid var(--fg); outline-offset:4px; border-radius:4px; }
@media (hover:none){ body{ cursor:auto; } }

/* ---------------- CUSTOM CURSOR ---------------- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{ width:6px; height:6px; background:var(--fg); }
.cursor-ring{ width:36px; height:36px; border:1px solid var(--line-strong); transition: width .35s var(--spring), height .35s var(--spring), border-color .35s ease, background .35s ease; }
.cursor-ring.hover{ width:70px; height:70px; background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.5); }
@media (hover:none){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------------- BACKDROP LAYERS ---------------- */
.aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aurora span{ position:absolute; border-radius:50%; filter:blur(110px); background: radial-gradient(circle, var(--aurora) 0%, transparent 70%); opacity:0.14; }
.aurora .a1{ width:640px; height:640px; top:-220px; left:-120px; animation:float1 26s ease-in-out infinite; }
.aurora .a2{ width:560px; height:560px; top:20%; right:-160px; opacity:0.10; animation:float2 32s ease-in-out infinite; }
.aurora .a3{ width:520px; height:520px; bottom:-200px; left:30%; opacity:0.08; animation:float3 38s ease-in-out infinite; }
:root[data-theme="light"] .aurora{ display:none; }
:root[data-theme="light"] .grain{ display:none; }
@keyframes float1{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(60px,80px);} }
@keyframes float2{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-70px,50px);} }
@keyframes float3{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(50px,-60px);} }

.grain{
  position:fixed; inset:-50px; z-index:2; pointer-events:none; opacity:0.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grid-bg{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px; opacity:0.28; transition: transform .4s var(--ease);
  mask-image: radial-gradient(circle at 50% 15%, black, transparent 70%);
}

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-weight:700; font-size:16.5px;
  padding:19px 36px; border-radius:var(--r-full); border:1px solid transparent;
  cursor:none; position:relative; will-change:transform;
  transition: box-shadow .35s var(--spring), background .3s ease, border-color .3s ease, transform .2s var(--spring);
}
.btn-sm{ padding:12px 22px; font-size:13.5px; }
.btn-primary{ background:var(--fg); color:var(--bg); }
.btn-primary:hover{ box-shadow:0 10px 36px var(--btn-glow); transform:translateY(-1px); }
.btn-primary .arrow{ transition: transform .35s var(--spring); }
.btn-primary:hover .arrow{ transform:translateX(5px); }
.btn-ghost{ background:var(--glass); backdrop-filter:blur(10px); color:var(--fg); border-color:var(--glass-border); }
.btn-ghost:hover{ background:var(--glass-strong); border-color:var(--line-strong); }

/* ---------------- NAV (floating) ---------------- */
.nav-spacer{ height:106px; }
.nav-float{
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  width:min(1080px, 92%); z-index:80;
  background:var(--nav-bg); backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--glass-border); border-radius:var(--r-full); box-shadow:var(--shadow-soft);
}
nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 14px 26px; }
.logo{ font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:0.02em; display:flex; align-items:center; gap:9px; }
.logo .dot{ width:7px; height:7px; border-radius:50%; background:var(--fg); box-shadow:0 0 14px rgba(255,255,255,0.9); }
.nav-links{ display:flex; gap:30px; font-size:14px; color:var(--fg-dim); }
.nav-links a{ position:relative; transition:color .25s ease; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--fg); transition:width .3s var(--spring); }
.nav-links a:hover, .nav-links a.active{ color:var(--fg); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-cta{ padding:11px 22px; font-size:13.5px; }
.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--glass-border);
  background:var(--glass); display:flex; align-items:center; justify-content:center;
  cursor:none; flex-shrink:0; padding:0; margin:0; appearance:none; -webkit-appearance:none;
  font-family:inherit; transition:background .25s ease, border-color .25s ease;
}
.theme-toggle:hover{ background:var(--glass-strong); }
.theme-toggle svg{ width:16px; height:16px; stroke:var(--fg); fill:none; stroke-width:2; }
.theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:block; }

/* ---------------- MARQUEE ---------------- */
.marquee-outer{ padding:0 32px; max-width:var(--maxw); margin:0 auto; }
.marquee{
  border-radius:var(--r-full); border:1px solid var(--glass-border);
  background:var(--glass); backdrop-filter:blur(14px); overflow:hidden; white-space:nowrap; padding:15px 0;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track{ display:inline-flex; animation:scroll 24s linear infinite; }
.marquee span{ font-family:var(--mono); font-size:12.5px; letter-spacing:0.08em; color:var(--fg-dim); padding:0 22px; }
.marquee span b{ color:var(--fg); font-weight:500; }
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------------- PAGE HERO (sub-pages) ---------------- */
.page-hero{ padding:70px 0 60px; text-align:center; position:relative; z-index:3; }
.page-hero .kicker{ justify-content:center; display:flex; }
.page-hero h1{ font-size:clamp(34px,5vw,56px); line-height:1.08; max-width:760px; margin:0 auto; }
.page-hero p.lead{ font-size:17px; color:var(--fg-dim); max-width:560px; margin:22px auto 0; line-height:1.7; }

/* ---------------- HOME HERO ---------------- */
.hero{ padding:96px 0 70px; text-align:center; position:relative; z-index:3; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:0.08em; color:var(--fg-dim);
  background:var(--glass); backdrop-filter:blur(10px); border:1px solid var(--glass-border); padding:9px 18px; border-radius:var(--r-full); margin-bottom:38px;
}
.eyebrow .pulse{ width:6px; height:6px; border-radius:50%; background:var(--fg); animation:blink 1.8s infinite; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }
.hero h1{ font-size:clamp(46px, 7vw, 92px); line-height:1.02; max-width:960px; margin:0 auto; font-weight:700; }
.hero .word{ display:inline-block; opacity:0; transform:translateY(24px); animation: reveal .9s var(--spring) forwards; }
@keyframes reveal{ to{ opacity:1; transform:translateY(0);} }
.hero p.lead{ font-size:20px; color:var(--fg-dim); max-width:580px; margin:30px auto 0; line-height:1.6; }
.hero-actions{ margin-top:44px; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.hero-sub{ margin-top:28px; font-family:var(--mono); font-size:12.5px; color:var(--fg-faint); letter-spacing:0.03em;}
.hero-sub b{ color:var(--fg-dim); }

/* ---------------- STATS ---------------- */
.stats-outer{ padding:0 32px; max-width:var(--maxw); margin:60px auto 0; }
.stats-panel{ border-radius:var(--r-lg); border:1px solid var(--glass-border); background:var(--glass); backdrop-filter:blur(14px); box-shadow:var(--shadow-glow); overflow:hidden; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:44px 30px; border-left:1px solid var(--line); text-align:center; }
.stat:first-child{ border-left:none; }
.stat-num{ font-family:var(--display); font-size:56px; font-weight:700; }
.stat-label{ margin-top:8px; font-size:13.5px; color:var(--fg-dim); font-weight:500; }

/* ---------------- SECTION HEAD ---------------- */
.section-pad{ padding:130px 0; }
.section-pad.tight{ padding:90px 0; }
.section-head{ max-width:720px; margin-bottom:60px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.kicker{ font-family:var(--mono); font-size:12px; letter-spacing:0.08em; color:var(--fg-faint); margin-bottom:18px; }
.section-head h2{ font-size:clamp(32px,4.4vw,48px); line-height:1.15; font-weight:700; }
.section-head p{ margin-top:16px; font-size:17px; color:var(--fg-dim); line-height:1.65; }

.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--spring), transform .8s var(--spring); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------------- GLASS CARD BASE ---------------- */
.glass-card{
  border-radius:var(--r-md); border:1px solid var(--glass-border); background:var(--glass); backdrop-filter:blur(14px);
  box-shadow:var(--shadow-glow); position:relative; overflow:hidden; transition: transform .1s linear, border-color .3s ease, opacity .4s ease;
  transform-style:preserve-3d; will-change:transform;
}
.glass-card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s ease; pointer-events:none;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.10), transparent 62%);
}
.glass-card:hover::before{ opacity:1; }
.glass-card:hover{ border-color:var(--line-strong); }

/* ---------------- RECEIPT ---------------- */
.receipt-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:36px; align-items:center; }
.receipt{ padding:36px 34px; }
.receipt h3{ font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em; color:var(--fg-dim); margin-bottom:22px; font-weight:400; }
.receipt-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed var(--line); font-size:15px; }
.receipt-row:last-of-type{ border-bottom:none; }
.receipt-row .price{ font-family:var(--mono); color:var(--fg-dim); font-size:14px; }
.receipt-total{ display:flex; justify-content:space-between; margin-top:18px; padding-top:18px; border-top:1px solid var(--line-strong); font-weight:600; font-size:17px; }
.receipt-note{ margin-top:14px; font-size:12.5px; color:var(--fg-faint); }
.equals{ font-family:var(--display); font-size:34px; color:var(--fg-faint); text-align:center; }

/* ---------------- MODELS ---------------- */
.models-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.model-card{ padding:42px; }
.model-card.lg{ padding:48px; }
.model-tag-top{ font-family:var(--mono); font-size:11px; color:var(--fg-faint); letter-spacing:0.08em; }
.model-name{ font-family:var(--display); font-size:29px; margin-top:18px; }
.model-desc{ margin-top:14px; color:var(--fg-dim); font-size:15px; line-height:1.7; max-width:420px; }
.model-badge{
  margin-top:24px; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; color:var(--fg-dim);
  border:1px solid var(--glass-border); background:rgba(255,255,255,0.03); padding:7px 15px; border-radius:var(--r-full);
}
.model-badge .dotw{ width:5px; height:5px; border-radius:50%; background:var(--fg); }
.model-meta{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.model-meta-row{ display:flex; justify-content:space-between; font-size:13px; padding:9px 0; border-top:1px solid var(--line); }
.model-meta-row span:first-child{ color:var(--fg-faint); font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em; }
.model-meta-row span:last-child{ color:var(--fg-dim); }

/* ---------------- COMPARISON TABLE ---------------- */
.compare-wrap{ border-radius:var(--r-md); border:1px solid var(--glass-border); background:var(--glass); backdrop-filter:blur(14px); overflow:hidden; }
.compare-table{ width:100%; border-collapse:collapse; font-size:14px; }
.compare-table th, .compare-table td{ padding:18px 20px; text-align:left; border-bottom:1px solid var(--line); }
.compare-table th{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; color:var(--fg-faint); font-weight:400; }
.compare-table td{ color:var(--fg-dim); }
.compare-table td:first-child, .compare-table th:first-child{ color:var(--fg); font-weight:500; }
.compare-table tr:last-child td{ border-bottom:none; }
.compare-table tbody tr:hover{ background:rgba(255,255,255,0.02); }

/* ---------------- FEATURES ---------------- */
.feature-row{ display:grid; grid-template-columns:120px 1fr; gap:24px; padding:14px 22px; margin-bottom:12px; border-radius:var(--r-md); transition:background .3s ease; }
.feature-row:hover{ background:var(--glass); }
.feature-row-inner{ padding:18px 0; }
.feature-index{ font-family:var(--mono); font-size:13px; color:var(--fg-faint); padding-top:18px; }
.feature-title{ font-family:var(--display); font-size:21px; font-weight:600; margin-bottom:8px; transition:transform .35s var(--spring); }
.feature-row:hover .feature-title{ transform:translateX(8px); }
.feature-desc{ color:var(--fg-dim); font-size:15px; line-height:1.7; max-width:600px; }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.chip{ font-family:var(--mono); font-size:11.5px; color:var(--fg-dim); border:1px solid var(--glass-border); background:rgba(255,255,255,0.03); padding:6px 12px; border-radius:var(--r-full); }
.chip.chip-on{ color:var(--fg); border-color:var(--line-strong); }

/* ---------------- STEPS ---------------- */
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.steps-3col{ grid-template-columns:repeat(3,1fr); }
.glass-card[data-locked]{ opacity:0.55; }
.step{ padding:30px 26px; }
.step-num{ font-family:var(--mono); font-size:13px; color:var(--fg-faint); }
.step-bar{ height:2px; border-radius:2px; background:rgba(255,255,255,0.12); margin-top:16px; position:relative; overflow:hidden;}
.step-bar::after{ content:""; position:absolute; inset:0; background:var(--fg); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--spring); }
.step.in-view .step-bar::after{ transform:scaleX(1); }
.step-title{ font-size:16px; font-weight:600; margin:18px 0 8px; font-family:var(--display); }
.step-desc{ font-size:14px; color:var(--fg-dim); line-height:1.65; }

/* ---------------- TERMINAL / CODE WINDOWS ---------------- */
.terminal-wrap{ max-width:640px; }
.terminal-wrap.wide{ max-width:100%; }
.terminal{ border-radius:var(--r-md); border:1px solid var(--glass-border); background:var(--term-bg); backdrop-filter:blur(16px); box-shadow:var(--shadow-glow); overflow:hidden; }
.terminal-bar{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--term-bar-bg); }
.terminal-dot{ width:10px; height:10px; border-radius:50%; background:var(--term-dot); }
.terminal-title{ margin-left:8px; font-family:var(--mono); font-size:12px; color:var(--fg-faint); }
.terminal-body{ padding:26px 24px; font-family:var(--mono); font-size:13.5px; line-height:1.9; color:var(--fg-dim); min-height:170px; }
.terminal-body .prompt{ color:var(--fg); }
.terminal-body .key{ color:var(--fg); }
.terminal-body .str{ color:var(--term-str); }
.terminal-body .num{ color:var(--term-num); font-weight:600; }
.terminal-body .comment{ color:var(--fg-faint); }
.terminal-line{ opacity:0; }
.terminal-line.shown{ opacity:1; }

.code-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }

.endpoint-row{ display:grid; grid-template-columns:70px 1fr 160px; gap:18px; align-items:center; padding:18px 22px; border-bottom:1px solid var(--line); }
.endpoint-row:last-child{ border-bottom:none; }
.endpoint-method{ font-family:var(--mono); font-size:12px; padding:5px 0; text-align:center; border-radius:var(--r-sm); border:1px solid var(--glass-border); color:var(--fg-dim); }
.endpoint-path{ font-family:var(--mono); font-size:13.5px; color:var(--fg); }
.endpoint-desc{ font-size:13px; color:var(--fg-dim); text-align:right; }

/* ---------------- PRICING ---------------- */
.pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.price-card{ padding:40px; display:flex; flex-direction:column; }
.price-card.featured{ border-color:var(--line-strong); background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); }
.price-tag{ align-self:flex-start; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; color:var(--fg); background:rgba(255,255,255,0.08); border:1px solid var(--line-strong); padding:5px 12px; border-radius:var(--r-full); margin-bottom:18px; }
.price-name{ font-family:var(--display); font-size:22px; font-weight:600; }
.price-value{ font-family:var(--display); font-size:52px; font-weight:700; margin-top:14px; }
.price-value span{ font-family:var(--sans); font-size:15px; color:var(--fg-dim); font-weight:400; }
.price-desc{ margin-top:10px; color:var(--fg-dim); font-size:14.5px; line-height:1.6; }
.price-list{ margin-top:26px; display:flex; flex-direction:column; gap:13px; flex-grow:1; }
.price-list div{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--fg-dim); }
.price-list div::before{ content:"—"; color:var(--fg-faint); flex-shrink:0; }
.price-card .btn{ margin-top:30px; justify-content:center; width:100%; }

.trial-panel{ border-radius:var(--r-md); border:1px solid var(--glass-border); background:var(--glass); padding:30px 32px; }
.trial-panel-row{ display:flex; justify-content:space-between; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.trial-panel-row:last-child{ border-bottom:none; }
.trial-panel-row .val{ font-family:var(--mono); color:var(--fg-dim); font-size:13px; text-align:right; }
.trial-price{ font-family:var(--display); font-size:20px; }

/* ---------------- FAQ ---------------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ border-radius:var(--r-md); border:1px solid var(--glass-border); background:var(--glass); backdrop-filter:blur(10px); padding:6px 26px; transition:background .3s ease, border-color .3s ease; }
.faq-item:hover{ background:var(--glass-strong); }
.faq-item.open{ border-color:var(--line-strong); }
.faq-q{ width:100%; text-align:left; background:none; border:none; cursor:none; padding:22px 0; display:flex; justify-content:space-between; align-items:center; font-family:var(--display); font-size:17px; font-weight:500; color:var(--fg); }
.faq-q .plus{ font-family:var(--mono); font-size:20px; color:var(--fg-dim); transition:transform .35s var(--spring); flex-shrink:0; margin-left:20px; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); color:var(--fg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--spring); }
.faq-a p{ padding-bottom:24px; color:var(--fg-dim); font-size:15px; line-height:1.7; max-width:640px; }

/* ---------------- FINAL ---------------- */
.final-outer{ padding:0 32px; max-width:var(--maxw); margin:0 auto; }
.final-panel{
  text-align:center; padding:100px 40px; border-radius:var(--r-lg); border:1px solid var(--glass-border);
  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 60%), var(--glass);
  backdrop-filter:blur(16px); box-shadow:var(--shadow-glow); position:relative; z-index:3;
}
.final-panel h2{ font-size:clamp(32px,5vw,58px); max-width:760px; margin:0 auto; line-height:1.14; }
.final-panel p{ color:var(--fg-dim); margin-top:20px; font-size:16px; font-family:var(--mono); }
.final-actions{ margin-top:44px; }

/* ---------------- BREADCRUMB / DOCS SIDE NAV ---------------- */
.docs-layout{ display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:start; }
.docs-side{ position:sticky; top:130px; display:flex; flex-direction:column; gap:4px; }
.docs-side a{ font-size:14px; color:var(--fg-dim); padding:9px 14px; border-radius:var(--r-sm); transition:all .25s ease; }
.docs-side a:hover, .docs-side a.active{ color:var(--fg); background:var(--glass); }
.docs-main > * + *{ margin-top:80px; }

/* ---------------- FOOTER ---------------- */
footer{ padding:60px 0 34px; }
.footer-panel{ border-radius:var(--r-lg); border:1px solid var(--glass-border); background:var(--glass); backdrop-filter:blur(14px); padding:48px 46px 26px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; padding-bottom:36px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.footer-cols{ display:flex; gap:72px; flex-wrap:wrap; }
.footer-col h4{ font-family:var(--mono); font-size:12px; color:var(--fg-faint); font-weight:400; letter-spacing:0.06em; margin-bottom:14px; }
.footer-col a{ display:block; font-size:14.5px; color:var(--fg-dim); padding:6px 0; transition:color .25s ease; }
.footer-col a:hover{ color:var(--fg); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-family:var(--mono); font-size:12px; color:var(--fg-faint); flex-wrap:wrap; gap:12px; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:920px){
  .nav-links{ display:none; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(odd){ border-left:none; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }
  .receipt-grid{ grid-template-columns:1fr; }
  .equals{ transform:rotate(90deg); }
  .models-grid{ grid-template-columns:1fr; }
  .steps-grid{ grid-template-columns:1fr 1fr; }
  .steps-3col{ grid-template-columns:1fr; }
  .pricing-grid{ grid-template-columns:1fr; }
  .code-grid{ grid-template-columns:1fr; }
  .docs-layout{ grid-template-columns:1fr; }
  .docs-side{ position:static; flex-direction:row; flex-wrap:wrap; }
  .footer-panel{ padding:36px 28px 24px; }
  .compare-table{ font-size:12.5px; }
  .compare-table th, .compare-table td{ padding:12px 10px; }
}
@media (max-width:560px){
  .wrap, .marquee-outer, .stats-outer, .final-outer{ padding-left:20px; padding-right:20px; }
  .hero{ padding:76px 0 56px; }
  .steps-grid{ grid-template-columns:1fr; }
  .section-pad{ padding:88px 0; }
  .final-panel{ padding:64px 26px; }
  .endpoint-row{ grid-template-columns:1fr; text-align:left; gap:6px; }
  .endpoint-desc{ text-align:left; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .hero .word{ opacity:1; transform:none; }
}