/* Aureon Labs — early-access landing page
   Design tokens and layout ported from the Claude Design export (Aureon Labs.dc.html). */

:root {
  --bg: #040405;
  --panel: #0a0c0d;
  --ink: #F1F0EB;
  --dim: #9aa39f;
  --dim2: #7b8280;
  --line: rgba(241, 240, 235, .12);
  --accent: #D9DBDA;
  --good: #D9DBDA;
  --err: #e08a7a;
  --mono: 'JetBrains Mono', monospace;
  --head: 'Space Grotesk', Inter, sans-serif;
  --sans: 'Manrope', sans-serif;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .02));
  --gborder: rgba(255, 255, 255, .12);
  --r: 28px;
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  position: relative;
  min-height: 100vh;
  line-height: 1.55;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--bg); }

a { color: var(--accent); }
a:hover { color: #f1f1ee; text-shadow: 0 0 8px rgba(217, 219, 218, .55); }

img { max-width: 100%; }

button { font: inherit; }

input::placeholder { color: #6b7371; }

header, #main > section, footer { scroll-margin-top: 104px; }

/* ---------- FAQ / <details> ---------- */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details summary::marker { content: ''; }
summary::after {
  content: '+';
  font-family: var(--mono);
  color: #7b8280;
  font-size: 16px;
  transition: text-shadow .2s ease;
}
details[open] summary::after { content: '\2013'; }
summary:hover::after { text-shadow: 0 0 8px var(--accent); }
details[open] > p { animation: faqIn .45s cubic-bezier(.22,1,.36,1); }

/* ---------- keyframes ---------- */
/* NOTE: the hero scanline sweep is driven in js/main.js with transform/opacity
   (compositor-only). A `top` keyframe animation here would force main-thread
   layout+paint every frame and stutter mouse-wheel scrolling on desktop. */
@keyframes bubbleA { 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(180px,140px) scale(1.15)} 50%{transform:translate(40px,260px) scale(.9)} 75%{transform:translate(-140px,90px) scale(1.1)} }
@keyframes bubbleC { 0%,100%{transform:translate(0,0) scale(1)} 20%{transform:translate(150px,-160px) scale(1.08)} 50%{transform:translate(-100px,-70px) scale(1.18)} 80%{transform:translate(-210px,120px) scale(.85)} }
@keyframes bubbleE { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-170px,190px) scale(1.15)} 70%{transform:translate(-270px,40px) scale(.87)} }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes ringPulse { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.35)} }
@keyframes faqIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

/* ---------- ambient background ---------- */
.bg-orbs {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  z-index: 0; background: var(--bg); contain: strict;
}
.bg-orbs span {
  position: absolute; border-radius: 50%; mix-blend-mode: screen;
  filter: blur(20px); will-change: transform, filter;
}
.bg-orbs .orb-a { top:20%; left:20%; width:640px; height:640px; margin:-320px 0 0 -320px; background: radial-gradient(circle at center, rgba(217,219,218,.45) 0%, rgba(217,219,218,.25) 35%, rgba(217,219,218,.05) 65%, rgba(217,219,218,0) 100%); animation: bubbleA 24s ease-in-out infinite; }
.bg-orbs .orb-b { top:35%; left:65%; width:560px; height:560px; margin:-280px 0 0 -280px; background: radial-gradient(circle at center, rgba(154,163,159,.35) 0%, rgba(154,163,159,.19) 35%, rgba(154,163,159,.04) 65%, rgba(154,163,159,0) 100%); animation: bubbleC 20s ease-in-out infinite; }
.bg-orbs .orb-c { top:10%; left:80%; width:480px; height:480px; margin:-240px 0 0 -240px; background: radial-gradient(circle at center, rgba(217,219,218,.32) 0%, rgba(217,219,218,.18) 35%, rgba(217,219,218,.04) 65%, rgba(217,219,218,0) 100%); animation: bubbleE 22s ease-in-out infinite; }

/* ---------- scroll progress bar ---------- */
.progress-track { position: fixed; top:0; left:0; right:0; height:2px; background: transparent; z-index:70; }
#progressBar {
  display:block; height:100%; width:100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(217,219,218,.3), var(--accent));
  box-shadow: 0 0 10px rgba(217,219,218,.55); will-change: transform;
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left:12px; top:-60px; z-index:90; background: var(--accent); color:#040405;
  font-family: var(--mono); font-size:12px; padding:12px 18px; border-radius:999px;
  text-decoration:none; transition: top .2s ease;
}
.skip-link:focus { top:12px; }

/* ---------- affiliate corner button ---------- */
.affiliate-btn {
  position: fixed; bottom:18px; left:18px; z-index:75; display:flex; align-items:center; gap:7px;
  font-family: var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--ink); background: rgba(217,219,218,.08); border:1px solid var(--gborder);
  border-radius:999px; padding:9px 16px; cursor:pointer; backdrop-filter: blur(10px);
}
.affiliate-btn:hover { border-color: var(--accent); background: rgba(217,219,218,.14); }
.affiliate-btn .dot { width:6px; height:6px; border-radius:50%; background: var(--accent); }

/* ---------- dev menu (hidden, keyboard shortcut only) ---------- */
.dev-overlay { position: fixed; inset:0; z-index:74; }
#devAppMenu {
  position: fixed; bottom:18px; right:18px; z-index:76; display:flex; flex-direction:column; gap:2px;
  background: rgba(10,10,10,.95); border:1px dashed var(--gborder); border-radius:14px; padding:6px;
  backdrop-filter: blur(10px); min-width:180px;
}
#devAppMenu a {
  font-family: var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color: var(--dim); text-decoration:none; padding:10px 12px; border-radius:9px; display:block;
}
#devAppMenu a:hover { color: var(--ink); background: rgba(255,255,255,.06); }

/* ---------- modal (shared: privacy + affiliate) ---------- */
.modal-overlay {
  position: fixed; inset:0; background: rgba(2,2,3,.78); display:flex; align-items:center;
  justify-content:center; padding:24px; z-index:100;
}
.modal-panel {
  position: relative; max-width:560px; width:100%; max-height:86vh; overflow:auto;
  background: linear-gradient(180deg, rgba(20,20,20,.9), rgba(10,10,10,.9));
  backdrop-filter: blur(18px); border:1px solid var(--gborder); border-radius: var(--r); padding:32px;
}
.modal-panel.privacy-panel { max-height: 82vh; padding: 36px; backdrop-filter: blur(30px); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modal-close {
  position: absolute; top:18px; right:18px; background:none; border:none; color: var(--dim);
  font-size:18px; cursor:pointer; line-height:1; transition: color .2s ease, text-shadow .2s ease;
}
.modal-close:hover { color: var(--accent); text-shadow: 0 0 10px var(--accent); }
.eyebrow { font-family: var(--mono); font-size:11.5px; letter-spacing:.1em; color: var(--accent); margin:0 0 12px; }
.modal-panel h3, .modal-panel h2.modal-title { font-family: var(--head); font-weight:600; font-size:23px; margin:0 0 12px; }
.modal-panel p { color: var(--dim); font-size:14px; line-height:1.65; margin:0 0 16px; }
.modal-panel p b { color: var(--ink); }

.affiliate-stats { display:flex; flex-direction:column; gap:12px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px; margin-bottom:20px; }
.affiliate-stats .row { display:flex; justify-content:space-between; gap:10px; }
.affiliate-stats .row + .row { border-top:1px solid var(--line); padding-top:12px; }
.affiliate-stats .row span:first-child { color: var(--dim); font-size:13px; }
.affiliate-stats .row span:last-child { font-family: var(--head); font-weight:600; font-size:14px; }

#affiliateLinkRow, #affiliateEmailRow { display:flex; gap:8px; flex-wrap: wrap; }
#affiliateLinkRow { margin-bottom:8px; }
#affiliateLinkRow input {
  flex:1; background: rgba(255,255,255,.05); border:1px solid var(--gborder); border-radius:10px;
  padding:11px 14px; color: var(--ink); font-family: var(--mono); font-size:12.5px;
}
#affiliateEmailRow input {
  flex:1; min-width:180px; background: rgba(255,255,255,.05); border:1px solid var(--gborder);
  border-radius:10px; padding:12px 14px; color: var(--ink); font-family: var(--sans); font-size:13.5px;
}
.btn-solid {
  font-family: var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:#040405; background: var(--accent); border:none; padding:0 18px; border-radius:10px;
  font-weight:600; cursor:pointer; white-space:nowrap;
}
#affiliateEmailRow .btn-solid { padding:12px 20px; font-size:12.5px; }
.fine-note { color: var(--dim2); font-size:12px; margin:0; }

/* ---------- nav ---------- */
#siteNav {
  position: fixed; top:14px; left:50%; transform: translateX(-50%); z-index:60; display:flex;
  align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; width:min(1180px,92vw);
  padding:12px 12px 12px 22px; background: var(--glass); backdrop-filter: blur(10px);
  border:1px solid var(--gborder); border-radius:999px; box-shadow: 0 12px 34px rgba(0,0,0,.45);
  transition: box-shadow .35s ease, border-color .35s ease;
}
#siteNav.scrolled { box-shadow: 0 18px 48px rgba(0,0,0,.6); border-color: rgba(255,255,255,.2); }
.nav-logo {
  display:flex; align-items:center; gap:9px; text-decoration:none; color: var(--ink);
  font-family: var(--head); font-weight:700; font-size:14px; letter-spacing:.16em;
}
.nav-logo img, .footer-logo img {
  width:22px; height:22px; object-fit:cover; border-radius:50%; mix-blend-mode:screen; flex:none;
  filter: brightness(1.15); transition: filter .25s ease;
}
.footer-logo img { width:20px; height:20px; }
.nav-logo:hover img, .footer-logo:hover img { filter: brightness(1.5) drop-shadow(0 0 8px var(--accent)); }
.nav-logo span, .footer-logo span { color: var(--dim); font-weight:500; margin-left:6px; }

#navLinks { display:flex; gap:26px; list-style:none; margin:0; padding:0; font-family: var(--mono); font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:#c7cac6; flex-wrap:wrap; }
#navLinks a { color: inherit; text-decoration:none; padding:6px 2px; display:inline-block; transition: color .2s ease, text-shadow .2s ease; }
#navLinks a:hover, #navLinks a.active { color: var(--ink); }
#navLinks a.active { text-shadow: 0 0 10px rgba(217,219,218,.45); }

#navToggle { display:none; align-items:center; justify-content:center; width:34px; height:34px; background:none; border:none; cursor:pointer; flex-direction:column; gap:4px; }
#navToggle span { display:block; width:18px; height:2px; background: var(--ink); }

#navCta {
  font-family: var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:#040405; background: var(--accent); padding:10px 20px; border-radius:999px; text-decoration:none;
  font-weight:600; transition: box-shadow .25s ease, transform .25s ease;
}
#navCta:hover { box-shadow: 0 0 22px 2px var(--accent); transform: translateY(-1px); }
#navCta:active { transform: scale(.96); }

/* ---------- hero ---------- */
header#top {
  position: relative; min-height:92vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:170px 24px 90px; overflow:hidden;
}
.hero-radial { position:absolute; inset:0; background: radial-gradient(ellipse 60% 50% at 50% 38%, rgba(217,219,218,.10), transparent 65%); }
.hero-line { position:absolute; left:8%; right:8%; height:1px; }
.hero-line.top { top:16%; background: linear-gradient(90deg,transparent,var(--line) 15%,var(--line) 85%,transparent); }
.hero-line.bottom { top:74%; background: linear-gradient(90deg,var(--line) 0%,transparent 30%,transparent 70%,var(--line) 100%); }
.hero-vline { position:absolute; top:8%; bottom:8%; width:1px; background: var(--line); }
.hero-vline.left { left:20%; } .hero-vline.right { left:80%; }
.hero-scanline { position:absolute; top:4%; left:8%; right:8%; height:1px; background: linear-gradient(90deg,transparent,var(--accent),transparent); will-change: transform, opacity; }

.hero-badge {
  position: relative; display:inline-flex; align-items:center; gap:8px; font-family: var(--mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--dim); background: var(--glass);
  backdrop-filter: blur(14px); border:1px solid var(--gborder); border-radius:999px; padding:8px 16px;
  margin-bottom:26px;
}
.hero-badge .dot { width:7px; height:7px; border-radius:50%; background: var(--accent); box-shadow: 0 0 8px 2px rgba(217,219,218,.7); animation: ringPulse 2.8s ease-in-out infinite; }

.countdown { position:relative; display:flex; align-items:center; gap:14px; margin:22px 0 0; font-family: var(--mono); }
.countdown-label { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--dim); }
.countdown-units { display:flex; gap:8px; }
.countdown-unit {
  display:flex; flex-direction:column; align-items:center; gap:2px; background: var(--glass);
  backdrop-filter: blur(10px); border:1px solid var(--gborder); border-radius:10px; padding:6px 10px; min-width:46px;
}
.countdown-unit .value { font-family: var(--head); font-weight:600; font-size:17px; color: var(--ink); }
.countdown-unit .label { font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--dim2); }

.hero-wordmark { position:relative; width:min(520px,84vw); height:auto; display:block; margin:0 0 8px; mix-blend-mode:screen; }
picture.hero-wordmark img { width:100%; height:auto; display:block; }
h1.hero-title { position:relative; font-family: var(--head); font-weight:600; font-size:clamp(30px,4.6vw,50px); letter-spacing:-.01em; line-height:1.14; margin:18px 0 0; max-width:820px; }
.hero-sub { position:relative; font-size:clamp(15px,1.6vw,18px); color: var(--dim); max-width:600px; margin:20px 0 0; }

/* ---------- forms (hero + early-access, shared) ---------- */
form.signup-form {
  position: relative; display:flex; flex-direction:column; gap:12px; margin-top:26px; width:100%;
  max-width:460px; background: var(--glass); backdrop-filter: blur(20px); border:1px solid var(--gborder);
  border-radius: var(--r); padding:18px;
}
#early-access form.signup-form { max-width: none; margin-top:0; background:none; backdrop-filter:none; border:none; padding:0; }
.form-row { display:flex; gap:8px; flex-wrap:wrap; }
.visually-hidden { position:absolute; left:-9999px; }
.field-text {
  flex:1 1 220px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  color: var(--ink); padding:13px 14px; border-radius:999px; font-family: var(--sans); font-size:14px;
}
#early-access .field-text { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); padding:14px; min-height:44px; }
.field-phone { flex:1 1 160px; }
#early-access .field-phone { flex:1 1 180px; }
.select-wrap { position:relative; flex:0 1 118px; display:inline-flex; }
#early-access .select-wrap { flex:0 1 130px; }
.select-wrap select {
  width:100%; background: rgba(255,255,255,.05); appearance:none; -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.14); color: var(--ink); padding:13px 24px 13px 14px;
  border-radius:999px; font-family: var(--sans); font-size:13px;
}
#early-access .select-wrap select { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); padding:14px 26px 14px 14px; min-height:44px; }
.select-wrap select option { background-color:#0a0c0d; color:#F1F0EB; }
.select-caret { position:absolute; right:12px; top:50%; transform: translateY(-50%); pointer-events:none; color:#9aa39f; font-size:10px; }
#early-access .select-caret { right:14px; }
.honeypot { position:absolute; left:-9999px; }

.btn-submit {
  background: var(--accent); color:#040405; border:none; padding:13px 22px; border-radius:999px;
  font-family: var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
  cursor:pointer; flex:1 1 180px; transition: box-shadow .25s ease, transform .2s ease;
}
#early-access .btn-submit { padding:14px 22px; flex:1 1 200px; min-height:44px; }
.btn-submit:hover { box-shadow: 0 0 18px 2px var(--accent); }
.btn-submit:active { transform: scale(.96); }
.btn-submit:disabled { opacity: .65; cursor: progress; }

.auth-divider { display:flex; align-items:center; gap:12px; margin:2px 0; color: var(--dim2); font-family: var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background: var(--line); }
.btn-google {
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background: rgba(255,255,255,.04); color: var(--ink); border:1px solid var(--gborder); border-radius:999px;
  padding:13px 22px; font-family: var(--sans); font-size:13.5px; font-weight:600; cursor:pointer;
  transition: background .2s ease, border-color .2s ease;
}
#early-access .btn-google { padding:14px 22px; min-height:44px; }
.btn-google:hover { background: rgba(255,255,255,.08); border-color: var(--accent); }
.btn-google:active { transform: scale(.98); }
.btn-google svg { flex:none; }

.form-note { font-size:11px; color: var(--dim2); margin:0; text-align:left; }
.form-note.mono { font-family: var(--mono); }
#early-access .form-note { font-size:11.5px; }
.consent-row { display:flex; gap:8px; align-items:flex-start; font-size:12px; color: var(--dim2); line-height:1.5; text-align:left; }
#early-access .consent-row { font-size:12.5px; color: var(--dim); }
.consent-row input { margin-top:2px; }
#early-access .consent-row input { width:18px; height:18px; }
.consent-row a { cursor:pointer; text-decoration:underline; }
.form-status { font-size:13px; margin:0; text-align:left; display:none; }
#early-access .form-status { text-align: left; }
.form-status.status-success { color: var(--accent); }
.form-status.status-error { color: var(--err); }
.form-status.visible { display:block; }

.hero-fine { position:relative; font-size:12.5px; color: var(--dim); margin:18px 0 0; }
.hero-fine + .hero-fine { margin:5px 0 0; }

.hero-figure { position:relative; width:min(720px,92vw); margin-top:56px; padding:36px; overflow:hidden; }
.hero-figure-glow { position:absolute; inset:0; background: radial-gradient(circle at 50% 42%, rgba(217,219,218,.16), transparent 62%); pointer-events:none; }
.hero-figure img {
  position:relative; display:block; width:min(400px,76%); height:auto; margin:0 auto; mix-blend-mode:screen;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 52%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 46%, #000 52%, transparent 76%);
  animation: floatY 8s ease-in-out infinite;
}
.hero-figure-caption { position:relative; margin:20px 0 0; font-family: var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--dim2); text-align:center; }

.hero-down {
  position: relative; margin-top:40px; color: var(--dim2); text-decoration:none; font-size:18px;
  transition: color .2s ease, text-shadow .2s ease;
}
.hero-down:hover { color: var(--accent); text-shadow: 0 0 10px var(--accent); }

/* ---------- generic sections ---------- */
#main > section {
  padding:70px 24px; max-width:1180px; margin:0 auto; position:relative; z-index:1;
}
#difference { padding-top:90px; padding-bottom:70px; max-width:1000px; }
#report { padding-bottom:90px; }
#progress { max-width:900px; padding-bottom:90px; }
#limits { max-width:900px; }
#validation { max-width:1000px; }
#early-access { max-width:none; padding-bottom:90px; }
#faq { max-width:760px; padding-bottom:90px; }
#contact { padding:0 24px; max-width:760px; text-align:center; }

.section-eyebrow { font-family: var(--mono); font-size:12px; letter-spacing:.1em; color: var(--accent); margin:0 0 14px; }
.section-title { font-family: var(--head); font-weight:600; font-size:clamp(24px,3vw,34px); margin:0 0 18px; }
.section-title.small { font-size:clamp(20px,2.4vw,26px); }
.section-lede { color: var(--dim); font-size:16px; max-width:660px; margin:0 0 14px; }
.section-lede.tight { margin-bottom:52px; }

.trio-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:30px; }
.trio-card { border-top:1px solid var(--line); padding-top:20px; }
.trio-card h3 { font-family: var(--head); font-size:16px; margin:0 0 8px; }
.trio-card p { color: var(--dim); font-size:14px; margin:0; }

/* ---------- how it works ---------- */
#howItWorksRow { display:flex; gap:12px; height:460px; }
.demo-step {
  position:relative; overflow:hidden; border-radius:20px; background: rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.085); display:flex; flex-direction:column; align-items:center;
  cursor:pointer; transition: flex .45s cubic-bezier(.22,1,.36,1); flex:1 1 0; min-width:64px;
}
.demo-step.active { flex:5 1 0; min-width:0; }
.demo-step video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.demo-step .video-fade { position:absolute; inset:0; background: linear-gradient(180deg,rgba(4,5,5,0) 45%,rgba(4,5,5,.85) 100%); }
.demo-step .video-caption { position:relative; margin-top:auto; padding:22px; display:flex; align-items:center; gap:14px; }
.demo-step .step-num-active { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background: var(--accent); color:#040405; font-family: var(--mono); font-size:12px; font-weight:700; flex:none; }
.demo-step .video-caption h3 { font-family: var(--head); font-size:17px; margin:0 0 3px; color: var(--ink); }
.demo-step .video-caption p { color: var(--dim); font-size:12.5px; margin:0; max-width:46ch; }
.demo-step .step-label { writing-mode:vertical-rl; transform:rotate(180deg); font-family: var(--head); font-size:14px; color: var(--dim); letter-spacing:.01em; margin-top:24px; }
.demo-step .step-num { margin-top:auto; margin-bottom:24px; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background: rgba(255,255,255,.06); border:1px solid var(--gborder); color: var(--dim); font-family: var(--mono); font-size:11px; }
.hint-text { margin-top:30px; color: var(--dim); font-size:13.5px; }

/* ---------- analysis domains ---------- */
.domains-intro { display:flex; gap:36px; flex-wrap:wrap; align-items:center; margin-bottom:48px; }
.domains-intro figure { flex:1 1 300px; max-width:340px; margin:0 auto; }
.domains-intro figure img { display:block; width:100%; height:auto; border-radius:18px; filter:grayscale(1) contrast(1.05) brightness(.92); }
.domains-intro figcaption { margin:14px 0 0; font-family: var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: var(--dim); text-align:center; }
.domains-intro .copy { flex:1 1 340px; display:flex; flex-direction:column; gap:16px; }
.domains-intro .copy p { color: var(--dim); font-size:14.5px; margin:0; }

.domain-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.domain-card {
  background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.085); border-radius:22px;
  padding:26px; transition: border-color .4s ease, background .4s ease;
}
.domain-card:hover { border-color: rgba(217,219,218,.34); background: rgba(255,255,255,.055); }
.domain-card .tag { display:block; font-family: var(--mono); font-size:11px; letter-spacing:.08em; color: var(--accent); margin-bottom:10px; }
.domain-card.dim .tag { color: var(--dim); }
.domain-card h3 { font-family: var(--head); font-size:17px; margin:0 0 8px; }
.domain-card p { color: var(--dim); font-size:13.5px; margin:0; }
.domains-footnote { margin-top:28px; font-family: var(--mono); font-size:12px; color: var(--dim); border-top:1px solid var(--line); padding-top:20px; }

/* ---------- report (embedded sample) ---------- */
.report-frame {
  background: var(--glass); backdrop-filter: blur(20px); border:1px solid var(--gborder);
  border-radius: var(--r); box-shadow: 0 20px 60px rgba(0,0,0,.5); padding:14px; overflow:hidden;
}
.report-frame iframe { width:100%; height:clamp(600px,88vh,980px); border:0; display:block; background:#080808; border-radius:18px; }
.report-open-wrap { margin-top:16px; text-align:center; }
.btn-outline {
  background: rgba(255,255,255,.04); border:1px solid var(--gborder); color: var(--accent);
  font-family: var(--mono); font-size:12.5px; letter-spacing:.04em; padding:14px 24px; border-radius:999px;
  cursor:pointer; min-height:44px; transition: border-color .2s ease, background .2s ease;
  text-decoration:none; display:inline-block;
}
.btn-outline:hover { border-color: var(--accent); background: rgba(255,255,255,.08); }

/* ---------- before/after slider ---------- */
.compare-frame { position:relative; max-width:420px; margin:0 auto; background: var(--glass); backdrop-filter: blur(20px); border:1px solid var(--gborder); border-radius: var(--r); padding:16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.compare-stage { position:relative; width:100%; aspect-ratio: 1080/1329; border-radius:14px; overflow:hidden; background: var(--bg); cursor:ew-resize; touch-action:none; }
.compare-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; pointer-events:none; }
.compare-before-wrap { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
.compare-line { position:absolute; top:0; bottom:0; width:2px; background: var(--accent); box-shadow: 0 0 10px rgba(217,219,218,.6); transform: translateX(-1px); pointer-events:none; }
.compare-handle {
  position:absolute; top:50%; width:38px; height:38px; border-radius:50%; background: var(--accent);
  display:flex; align-items:center; justify-content:center; transform: translate(-50%,-50%);
  box-shadow: 0 4px 16px rgba(0,0,0,.4); pointer-events:none;
}
.compare-caption { margin-top:16px; color: var(--dim2); font-size:12.5px; font-family: var(--mono); }

/* ---------- limits / legend ---------- */
.legend-panel { background: rgba(255,255,255,.022); border:1px solid rgba(255,255,255,.07); border-radius:20px; padding:6px 22px; margin-bottom:46px; }
.legend-panel ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.legend-item { border-top:1px solid var(--line); padding:6px 0; }
.legend-item:first-child { border-top:none; }
.legend-toggle {
  display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; padding:13px 6px;
  min-height:44px; cursor:pointer; text-align:left; color: var(--ink); font-family: var(--sans); font-size:14px;
  border-radius:12px; transition: background .2s ease;
}
.legend-toggle:hover { background: rgba(255,255,255,.05); }
.legend-glyph { color: var(--accent); width:20px; flex:none; display:flex; align-items:center; justify-content:center; }
.legend-label { flex:1 1 auto; font-weight:500; }
.legend-sign { color: var(--dim); font-family: var(--mono); font-size:15px; }
.legend-note { margin:0 0 14px 34px; color: var(--dim); font-size:13.5px; display:none; }
.legend-item[data-open="true"] .legend-note { display:block; }

.limits-heading { font-family: var(--head); font-weight:600; font-size:clamp(20px,2.4vw,26px); margin:0 0 22px; }
.not-panel { background: rgba(255,255,255,.022); border:1px solid rgba(255,255,255,.07); border-radius:20px; padding:clamp(22px,4vw,32px); }
.not-panel ul { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px 28px; }
.not-panel li { display:flex; gap:12px; color: var(--dim); font-size:14.5px; }
.not-panel li span { color: var(--dim); flex:none; display:flex; align-items:center; margin-top:3px; }

/* ---------- validation / terrain ---------- */
.validation-intro { max-width:620px; }
.terrain-panel { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.07); border-radius:22px; padding:8px; margin-bottom:26px; }
#terrainCanvas { display:block; width:100%; height:auto; border-radius:16px; background: var(--bg); }
.terrain-fade { position:absolute; inset:8px; border-radius:16px; background: linear-gradient(180deg,transparent 55%,var(--bg) 100%); }
.terrain-caption { position:relative; margin:0; padding:0 16px 16px; font-family: var(--mono); font-size:11.5px; letter-spacing:.04em; color: var(--dim); text-align:center; }
.validation-fine { color: var(--dim); font-size:13.5px; margin:0; }

/* ---------- early access panel ---------- */
.access-panel {
  max-width:640px; margin:0 auto; position:relative; border:1px solid rgba(217,219,218,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  backdrop-filter: blur(24px); border-radius: var(--r); padding:clamp(28px,5vw,52px);
  box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 50px rgba(217,219,218,.08);
}
.access-list { margin:0 0 24px; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.access-list li { display:flex; gap:10px; color: var(--dim); font-size:14.5px; }
.access-list li span { color: var(--accent); flex:none; display:flex; align-items:center; margin-top:3px; }
.access-note { color: var(--dim); font-size:12.5px; margin:0 0 26px; }

/* ---------- FAQ ---------- */
#faq details {
  background: rgba(255,255,255,.022); border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:16px 22px;
}
#faq .faq-list { display:flex; flex-direction:column; gap:10px; }
#faq summary { font-family: var(--head); font-size:16px; font-weight:600; display:flex; justify-content:space-between; align-items:center; min-height:32px; }
#faq p { color: var(--dim); font-size:14.5px; margin:14px 0 0; }

/* ---------- contact ---------- */
#contact p { color: var(--dim); font-size:14.5px; margin:0; }
#contact a { text-decoration:underline; }

/* ---------- footer ---------- */
footer { border-top:1px solid var(--line); padding:70px 24px 40px; position:relative; z-index:1; }
.footer-inner { max-width:1180px; margin:0 auto; display:flex; gap:48px; flex-wrap:wrap; justify-content:space-between; }
.footer-brand { flex:2 1 320px; max-width:520px; }
.footer-logo { margin-bottom:18px; }
.footer-brand p { color: var(--dim2); font-size:13px; margin:0 0 12px; }
.footer-brand a { cursor:pointer; text-decoration:underline; }
.footer-copy { color:#5b6260; font-size:12px; margin:0; }
.footer-links { flex:1 1 200px; display:flex; flex-direction:column; gap:14px; }
.footer-links nav { display:flex; flex-direction:column; gap:10px; font-family: var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
.footer-links nav a { text-decoration:none; }
.footer-top {
  font-size:12.5px; text-decoration:none; color: var(--dim); margin-top:6px;
  transition: color .2s ease, text-shadow .2s ease;
}
.footer-top:hover { color: var(--accent); text-shadow: 0 0 8px var(--accent); }

/* ---------- scroll-reveal (JS toggles .revealed) ---------- */
.reveal { opacity:0; transform: translate3d(0,24px,0); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .95s cubic-bezier(.22,1,.36,1); }
.reveal.revealed { opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:820px) {
  #howItWorksRow { height:340px; }
}
@media (max-width:600px) {
  #howItWorksRow { flex-direction:column; height:auto !important; }
  #howItWorksRow > .demo-step {
    flex:none !important; min-width:0 !important; height:70px;
    flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; padding:0 18px;
  }
  #howItWorksRow > .demo-step .step-label {
    writing-mode:horizontal-tb; transform:none; margin-top:0; font-size:14.5px;
  }
  #howItWorksRow > .demo-step .step-num { margin:0; }
  #howItWorksRow > .demo-step.active {
    height:320px; flex-direction:column; align-items:center; justify-content:flex-start; padding:0; gap:0;
  }
}
@media (max-width:760px) {
  #navLinks {
    display:none; position:absolute; top:60px; left:0; right:0; flex-direction:column; gap:2px;
    background: var(--panel); border:1px solid var(--gborder); border-radius:16px; padding:10px;
    box-shadow: 0 16px 36px rgba(0,0,0,.55);
  }
  #navLinks[data-open="true"] { display:flex; }
  #navLinks li { width:100%; }
  #navLinks a { padding:11px 12px !important; display:block !important; }
  #navToggle { display:inline-flex !important; }
  #siteNav { padding:10px !important; gap:8px !important; }
  #navCta { padding:9px 14px !important; font-size:11px !important; }
}
@media (max-width:480px) {
  #devAppMenu a { padding:9px 10px !important; }
}
@media (max-width:400px) {
  .modal-panel { padding:22px !important; }
  #affiliateEmailRow { flex-direction:column !important; }
  #affiliateEmailRow input, #affiliateEmailRow button { width:100% !important; min-width:0 !important; }
  #affiliateLinkRow { flex-direction:column !important; }
  #affiliateLinkRow button { width:100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}