/* ===== TOKENS ===== */
:root{
  --bg: #050505;
  --bg-soft: #0d0d0d;
  --card: #111111;
  --card-2: #161616;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);
  --text: #f5f5f3;
  --muted: #9a9a96;
  --muted-2: #6f6f6b;
  --accent: #7a67e0;
  --accent-ink: #ffffff;
  --radius: 22px;
  --radius-sm: 14px;
  --container: 1200px;
  --font: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Space Grotesk", "Manrope", -apple-system, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
/* Lenis premium smooth scroll */
html.lenis,html.lenis body{ height:auto; }
html.lenis-on{ scroll-behavior:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  font-weight:500;
  letter-spacing:-0.02em;
  font-feature-settings:"cv09" on,"cv03" on,"cv04" on,"cv11" on,"ss01" on;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ===== premium film grain overlay ===== */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.04;
  mix-blend-mode:overlay; background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.05; letter-spacing:-0.03em; font-weight:600; }
.brand__name{ font-family:var(--font-display); }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.accent{ color:var(--accent); }

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:15px; font-weight:600; letter-spacing:-0.01em; padding:12px 20px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; transition:.25s cubic-bezier(.16,1,.3,1); white-space:nowrap;
}
.btn--sm{ padding:10px 17px; font-size:14px; }
.btn--block{ width:100%; }
.btn--primary{ background:linear-gradient(180deg,#8b79ec,#7a67e0); color:var(--accent-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 24px rgba(122,103,224,.22); }
.btn--primary:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 14px 38px rgba(122,103,224,.34); }
.btn--ghost{ background:rgba(255,255,255,0.05); color:var(--text); border-color:var(--line-2); }
.btn--ghost:hover{ background:rgba(255,255,255,0.1); transform:translateY(-1px); }
/* arrow icon (↗) */
.arrow{ width:15px; height:15px; display:inline-block; flex:0 0 auto; transition:transform .25s ease; }
.btn:hover .arrow{ transform:translate(2px,-2px); }

/* CTA button rows (hero + final CTA - replaced the old waitlist email forms) */
.cta-row{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.hero__cta{ margin-top:6px; }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--muted); padding:7px 15px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,0.03);
}
.pill svg, .eyebrow svg{ width:13px; height:13px; flex:none; color:var(--accent); }
.pill svg .waves{ animation:liveWaves 2.6s ease-in-out infinite; }
@keyframes liveWaves{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .pill svg .waves{ animation:none; }
}

.eyebrow{
  display:inline-block; font-size:13px; letter-spacing:.02em; color:var(--accent);
  padding:5px 13px; border:1px solid rgba(122,103,224,.25); border-radius:999px; margin-bottom:18px;
  background:rgba(122,103,224,.05);
}

/* ===== NAV ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; padding:16px 0;
  transition:transform .45s cubic-bezier(.16,1,.3,1), padding .35s ease;
}
.nav__inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
  padding:9px 9px 9px 18px; border:1px solid var(--line); border-radius:18px;
  background:rgba(13,13,13,.5); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  transition:max-width .45s cubic-bezier(.16,1,.3,1), padding .35s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
  max-width:100%; margin-inline:auto;
}
/* condense into a narrower, centered pill once scrolled */
.nav.scrolled{ padding:9px 0; }
.nav.scrolled .nav__inner{
  max-width:880px; padding:7px 7px 7px 16px;
  background:rgba(9,9,9,.86); border-color:var(--line-2); box-shadow:0 18px 48px rgba(0,0,0,.5);
}
.nav__beta{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); background:rgba(122,103,224,.12); border:1px solid rgba(122,103,224,.35); padding:2px 7px; border-radius:6px; margin-left:4px; }
.nav__cta{ gap:8px; }
.nav__menucta{ display:none; }
.nav__menusignin{ display:none; } /* desktop: Sign in is a button in nav__actions instead */
@keyframes navPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.5); } 70%,100%{ box-shadow:0 0 0 6px rgba(255,255,255,0); } }
@keyframes navItemIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; letter-spacing:-.03em; }
.brand__mark{ width:30px; height:30px; border-radius:8px; object-fit:cover; display:block; }
.brand__mark--sm{ width:20px; height:20px; border-radius:6px; }
.nav__links{ display:flex; gap:24px; justify-self:center; }
.nav__actions{ justify-self:end; }
.nav__links-label{ display:none; }
.nav__links a{ position:relative; font-size:14.5px; color:var(--muted); padding:8px 2px; transition:color .2s; }
.nav__links a:hover{ color:var(--text); }
.nav__links a svg{ display:none; }
.nav__links a::after{ content:""; position:absolute; left:2px; right:2px; bottom:2px; height:2px; border-radius:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.16,1,.3,1); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__actions{ display:flex; align-items:center; gap:12px; }
.nav__backdrop{ display:none; }
.nav__toggle{ display:none; position:relative; width:38px; height:38px; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:11px; cursor:pointer; padding:0; transition:.22s ease; }
.nav__toggle span{ width:18px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .2s; }

/* ===== HERO ===== */
.hero{ position:relative; padding:150px 0 60px; text-align:center; overflow:hidden; }
.hero__glow{
  position:absolute; top:300px; left:50%; transform:translateX(-50%);
  width:1100px; height:620px; pointer-events:none; z-index:1;
  background:radial-gradient(closest-side, rgba(122,103,224,.32), rgba(122,103,224,0) 72%);
  filter:blur(34px);
  animation:auroraPulse 9s ease-in-out infinite alternate;
}
.hero__glow--2{
  top:120px; width:760px; height:520px; mix-blend-mode:screen;
  background:radial-gradient(closest-side, rgba(120,90,230,.24), rgba(120,90,230,0) 70%);
  animation:auroraDrift 15s ease-in-out infinite alternate;
}
@keyframes auroraPulse{ 0%{ opacity:.8; } 100%{ opacity:1; filter:blur(40px); } }
@keyframes auroraDrift{ 0%{ transform:translateX(-64%); } 100%{ transform:translateX(-36%); } }
/* subtle dot-grid backdrop, fades out from the top */
.hero__grid{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 62% 52% at 50% 20%, #000 0%, transparent 74%);
  mask-image:radial-gradient(ellipse 62% 52% at 50% 20%, #000 0%, transparent 74%);
}
/* shimmering accent word in the headline */
.hero__title .accent{
  background:linear-gradient(100deg,#9a8bff 0%,#7a67e0 38%,#cdc3ff 52%,#7a67e0 66%,#9a8bff 100%);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:accentShimmer 7s linear infinite;
}
@keyframes accentShimmer{ to{ background-position:240% 0; } }
.hero__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.hero__title{ font-size:clamp(33px, 8.6vw, 64px); line-height:1.04; font-weight:600; letter-spacing:-0.03em; margin:22px 0 20px; text-wrap:balance; }
.hero__sub{ color:var(--muted); font-size:clamp(15.5px,1.4vw,19px); line-height:1.5; max-width:520px; text-wrap:pretty; padding-inline:8px; }
.hero__note{ color:var(--muted-2); font-size:13.5px; margin-top:16px; }
.hero__trust{ display:flex; align-items:center; gap:9px; justify-content:center; margin-top:14px; color:var(--muted); font-size:13.5px; }

/* ===== early-access / waitlist form ===== */
.signup{ width:100%; max-width:444px; margin:30px auto 0; }
.signup__row{ display:flex; gap:8px; padding:6px; border:1px solid var(--line-2); background:rgba(255,255,255,.05); border-radius:999px; transition:border-color .2s; }
.signup__row:focus-within{ border-color:rgba(122,103,224,.55); }
.signup__input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--text); font:inherit; font-size:15px; padding:10px 16px; }
.signup__input::placeholder{ color:var(--muted-2); }
.signup__btn{ flex:0 0 auto; box-shadow:0 0 44px rgba(122,103,224,.4); }
.signup__btn:hover{ box-shadow:0 0 60px rgba(122,103,224,.55); }
.signup__msg{ min-height:18px; margin-top:13px; font-size:13.5px; text-align:center; color:var(--muted); }
.signup__msg.is-ok{ color:var(--accent); }
.signup__msg.is-err{ color:#ff7a7a; }
@media (max-width:480px){
  .signup__row{ flex-direction:column; border-radius:20px; }
  .signup__btn{ width:100%; justify-content:center; }
  .signup__input{ text-align:center; }
}

.hero__visual{ position:relative; z-index:2; margin-top:40px; perspective:1700px; }
/* hero stays CRISP on load - fade/slide only, no blur (blur-in is for scroll sections) */
.hero .reveal{ filter:none !important; }
.hero__inner.reveal{ transform:translateY(22px); transition:opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.hero__visual.reveal{ transform:none; transition:opacity 1s ease; }
/* 3D tilt entrance - dashboard tilts up into place (Framer-style) */
/* dashboard transform is driven by JS on scroll (subtle scale: small → big) */
.hero__dash{ transform-origin:50% 14%; will-change:transform; }
/* progressive blur dissolving the bottom edge of the dashboard into the page */
.hero__blur{
  position:absolute; left:0; right:0; bottom:0; height:54%; pointer-events:none; z-index:5;
  overflow:hidden; border-bottom-left-radius:20px; border-bottom-right-radius:20px;
  -webkit-mask-image:linear-gradient(to top, #000 16%, transparent 100%);
  mask-image:linear-gradient(to top, #000 16%, transparent 100%);
}
.hero__blur::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(122,103,224,.2) 8%, rgba(122,103,224,.06) 38%, transparent 68%);
}
@media (prefers-reduced-motion:reduce){
  .hero__dash{ transform:none !important; }
}
.hero__dash{
  border-radius:20px; overflow:hidden; border:0;
  box-shadow:0 50px 130px rgba(0,0,0,.65), 0 0 90px rgba(122,103,224,.10);
  background:#fff; max-width:1120px; margin-inline:auto;
  /* dissolve the whole card (corners included) into the page - smooth, multi-stop */
  -webkit-mask-image:linear-gradient(to top, transparent 0%, rgba(0,0,0,.16) 9%, rgba(0,0,0,.5) 19%, rgba(0,0,0,.85) 29%, #000 42%);
  mask-image:linear-gradient(to top, transparent 0%, rgba(0,0,0,.16) 9%, rgba(0,0,0,.5) 19%, rgba(0,0,0,.85) 29%, #000 42%);
}
.sgx img{ display:block; max-width:100%; }

/* ===== SECTION ===== */
.section{ padding:96px 0; position:relative; }
.section__head{ max-width:660px; margin:0 auto 56px; text-align:center; }
.section__head h2{ font-size:clamp(29px,4.4vw,48px); line-height:1.06; font-weight:500; letter-spacing:-0.04em; text-wrap:balance; }
.section__head--left{ text-align:left; margin-inline:0; }
.section__head--row{ display:flex; align-items:flex-end; justify-content:space-between; max-width:none; text-align:left; gap:24px; }
.section__lead{ color:var(--muted); margin-top:18px; font-size:17px; line-height:1.5; text-wrap:pretty; }
.eyebrow + h2{ margin-top:6px; }

/* ===== HOW IT WORKS - connected timeline with product mockups ===== */
.hiw{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.hiw__rail{
  position:absolute; top:20px; left:6px; right:6px; height:2px; border-radius:2px; overflow:hidden;
  background:linear-gradient(90deg,rgba(122,103,224,.4),rgba(122,103,224,.1) 50%,rgba(122,103,224,.4));
  opacity:.55;
}
.hiw__rail i{ position:absolute; top:0; bottom:0; width:26%; background:linear-gradient(90deg,transparent,#a594ff,transparent); animation:hiwFlow 3.8s linear infinite; }
@keyframes hiwFlow{ from{ left:-30%; } to{ left:110%; } }
.hiw__step{ display:flex; flex-direction:column; position:relative; }
.hiw__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.hiw__node{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff;
  background:#0c0b12; border:1px solid rgba(122,103,224,.5); position:relative; z-index:1;
  box-shadow:0 0 0 6px var(--bg), 0 0 26px rgba(122,103,224,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.hiw__tag{
  display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px;
  background:#12101f; border:1px solid rgba(122,103,224,.26);
  color:var(--accent); font-size:12px; font-weight:600; white-space:nowrap;
  position:relative; z-index:1; box-shadow:0 0 0 6px var(--bg);
}
.hiw__visual{
  position:relative; margin-bottom:20px; padding:16px; aspect-ratio:16/10.5;
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,#0f0e17,#0a0a10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.hiw__step:hover .hiw__visual{
  border-color:rgba(122,103,224,.35); transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 22px 55px rgba(0,0,0,.45), 0 0 40px rgba(122,103,224,.08);
}
.hiw__visual::after{ content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:130%; height:70%; background:radial-gradient(closest-side,rgba(122,103,224,.14),transparent 70%); pointer-events:none; }
.hiw__step h3{ font-size:21px; margin-bottom:8px; }
.hiw__step > p{ color:var(--muted); font-size:14.5px; line-height:1.55; }
.hiw__points{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.hiw__points li{ display:flex; align-items:flex-start; gap:9px; color:var(--text); font-size:13.5px; line-height:1.45; }
.hiw__points li svg{ width:15px; height:15px; flex:0 0 15px; margin-top:2px; color:var(--accent); }
.how__trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:38px; }
.how__trust .trust-chip{ font-size:13.5px; color:var(--muted); }

/* mock 1: mini browser with live grade badge */
.mb{ position:relative; height:100%; display:flex; flex-direction:column; }
.mb__bar{ display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.mb__dots{ display:flex; gap:5px; }
.mb__dots i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.12); }
.mb__url{
  flex:1; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:11.5px; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:8px; padding:6px 10px;
}
.mb__url svg{ width:11px; height:11px; color:var(--accent); flex:none; }
.mb__ext{ width:28px; height:28px; flex:none; border-radius:8px; display:grid; place-items:center; background:rgba(122,103,224,.14); border:1px solid rgba(122,103,224,.35); position:relative; }
.mb__ext img{ width:17px; height:17px; border-radius:4px; }
.mb__ext::after{ content:""; position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%; background:#37d67a; border:2px solid #0a0a10; }
.mb__page{ flex:1; display:flex; flex-direction:column; gap:10px; padding-top:14px; }
.mb__hero{ height:44%; border-radius:10px; background:linear-gradient(120deg,rgba(122,103,224,.16),rgba(255,255,255,.04)); border:1px solid var(--line); }
.mb__row{ flex:1; display:flex; gap:10px; }
.mb__row i{ flex:1; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.mb__badge{
  position:absolute; right:12px; bottom:12px; display:flex; align-items:center; gap:9px;
  padding:9px 14px; border-radius:13px; color:#fff;
  background:linear-gradient(180deg,#8b79ec,#7a67e0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 12px 30px rgba(122,103,224,.45);
  animation:mockFloat 4.5s ease-in-out infinite;
}
.mb__badge b{ font-family:var(--font-display); font-size:22px; font-weight:700; line-height:1; }
.mb__badge span{ font-size:10.5px; font-weight:700; opacity:.85; letter-spacing:.03em; }
@keyframes mockFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

/* mock 2: audit snapshot - gauge + metric chips + scan sweep */
.ma{ position:relative; height:100%; display:flex; flex-direction:column; }
.ma__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.ma__t{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--muted); min-width:0; overflow:hidden; white-space:nowrap; }
.ma__t img{ width:16px; height:16px; border-radius:4px; flex:none; }
.ma__live{
  display:inline-flex; align-items:center; gap:6px; flex:none; white-space:nowrap;
  font-size:10.5px; font-weight:700; color:#8ee6a8;
  background:rgba(55,214,122,.1); border:1px solid rgba(55,214,122,.28); padding:4px 9px; border-radius:999px;
}
.ma__live i{ width:6px; height:6px; border-radius:50%; background:#37d67a; box-shadow:0 0 8px #37d67a; animation:navPulse 1.8s ease-out infinite; }
.ma__body{ flex:1; display:flex; align-items:center; gap:16px; padding-top:12px; min-height:0; }
.ma__gauge{ position:relative; width:98px; height:98px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.ma__gauge::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(#8b79ec 0 346deg, rgba(255,255,255,.08) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8.5px));
  filter:drop-shadow(0 0 12px rgba(122,103,224,.4));
}
.ma__gauge b{ font-family:var(--font-display); font-size:27px; font-weight:700; line-height:1; color:#fff; }
.ma__gauge span{ font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.ma__chips{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.ma__chip{
  display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--muted);
  background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:9px; padding:7px 10px;
}
.ma__chip b{ margin-left:auto; color:#fff; font-weight:700; }
.ma__chip::before{ content:""; width:6px; height:6px; border-radius:50%; flex:none; }
.ma__chip.ok::before{ background:#37d67a; }
.ma__chip.warn::before{ background:#f5b301; }
.ma__chip.rev::before{ background:#a594ff; }
.ma__scan{ position:absolute; left:-16px; right:-16px; height:34%; top:-40%; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(122,103,224,.09),transparent); animation:maScan 4.2s ease-in-out infinite; }
@keyframes maScan{ 0%{ top:-40%; } 60%,100%{ top:120%; } }

/* mock 3: white-label PDF + sent toast + leads row */
.ms{ position:relative; height:100%; }
.ms__pdf{
  position:absolute; left:10px; top:14px; bottom:10px; width:52%;
  background:#fff; border-radius:12px; padding:14px; transform:rotate(-3deg);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.ms__pdfhead{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.ms__pdfhead img{ width:20px; height:20px; border-radius:6px; flex:none; }
.ms__pdfhead span{ flex:1; height:8px; border-radius:4px; background:#e7e5f2; }
.ms__pdf > i{ display:block; height:7px; border-radius:4px; background:#eceaf5; margin-bottom:8px; }
.ms__pdf > i.short{ width:60%; }
.ms__grade{
  position:absolute; bottom:12px; left:14px; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:16px; color:#fff;
  background:linear-gradient(180deg,#8b79ec,#7a67e0); box-shadow:0 8px 18px rgba(122,103,224,.4);
}
.ms__toast{
  position:absolute; top:14px; right:8px; display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; color:#8ee6a8;
  background:rgba(10,14,11,.92); border:1px solid rgba(55,214,122,.3);
  padding:8px 12px; border-radius:11px; box-shadow:0 10px 26px rgba(0,0,0,.4);
  animation:mockFloat 4.5s ease-in-out infinite;
}
.ms__toast svg{ width:13px; height:13px; color:#37d67a; flex:none; }
.ms__lead{
  position:absolute; right:8px; bottom:12px; display:flex; align-items:center; gap:9px;
  font-size:11.5px; color:var(--muted);
  background:rgba(17,16,24,.92); border:1px solid var(--line-2); border-radius:12px; padding:9px 12px;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.ms__lead img{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none; }
.ms__lead b{ color:#fff; font-weight:700; }
.ms__lead em{
  font-style:normal; margin-left:4px; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); background:rgba(122,103,224,.12); border:1px solid rgba(122,103,224,.3); padding:3px 7px; border-radius:6px;
}

/* ===== REAL MEASUREMENT - data bento with live CSS visuals ===== */
.mbento{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.mcard{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:16px;
  padding:26px; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 45%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.mcard:hover{
  transform:translateY(-4px); border-color:rgba(122,103,224,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 22px 55px rgba(0,0,0,.4), 0 0 0 1px rgba(122,103,224,.14);
}
.mcard--gauge, .mcard--rev{ grid-column:span 5; }
.mcard--cwv, .mcard--payload{ grid-column:span 7; }
.mcard__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mcard__k{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.mcard__pill{
  font-size:11px; font-weight:700; color:var(--accent); white-space:nowrap;
  background:rgba(122,103,224,.1); border:1px solid rgba(122,103,224,.28); padding:4px 10px; border-radius:999px;
}
.mcard__pill--good{ color:#8ee6a8; background:rgba(55,214,122,.08); border-color:rgba(55,214,122,.25); }
.mcard__body{ flex:1; display:flex; align-items:center; padding:4px 0; min-height:0; }
.mcard__txt{ margin-top:auto; }
.mcard__txt h3{ font-size:20px; margin-bottom:7px; }
.mcard__txt p{ color:var(--muted); font-size:14.5px; line-height:1.5; }

/* big score gauge */
.mgauge{ position:relative; width:164px; height:164px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; }
.mgauge::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(#8b79ec 0 346deg, rgba(255,255,255,.07) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10.5px));
  filter:drop-shadow(0 0 18px rgba(122,103,224,.4));
}
.mgauge::after{ content:""; position:absolute; inset:14px; border-radius:50%; background:radial-gradient(closest-side,rgba(122,103,224,.16),transparent 78%); pointer-events:none; }
.mgauge b{ font-family:var(--font-display); font-size:48px; font-weight:700; line-height:1; letter-spacing:-.03em; }
.mgauge__grade{
  font-size:11px; font-weight:700; letter-spacing:.04em; color:#8ee6a8;
  background:rgba(55,214,122,.1); border:1px solid rgba(55,214,122,.28); padding:3px 10px; border-radius:999px;
}

/* core web vitals tiles */
.mcwv{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; }
.mcwv .m{
  display:flex; flex-direction:column; gap:5px; padding:12px 13px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--muted-2);
  transition:border-color .25s ease, background .25s ease;
}
.mcwv .m:hover{ border-color:rgba(122,103,224,.3); background:rgba(122,103,224,.05); }
.mcwv .m > span{ display:flex; align-items:center; gap:6px; }
.mcwv .m > span::before{ content:""; width:6px; height:6px; border-radius:50%; flex:none; }
.mcwv .m--g > span::before{ background:#37d67a; box-shadow:0 0 7px rgba(55,214,122,.6); }
.mcwv .m--w > span::before{ background:#f5b301; box-shadow:0 0 7px rgba(245,179,1,.55); }
.mcwv .m b{ font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-.01em; color:#fff; }

/* payload bars */
.mbars{ display:flex; flex-direction:column; gap:12px; width:100%; }
.mbars__row{ display:grid; grid-template-columns:56px 1fr 62px; align-items:center; gap:12px; font-size:12px; font-weight:600; color:var(--muted); }
.mbars__row b{ text-align:right; color:#fff; font-weight:700; font-size:12px; white-space:nowrap; }
.mbars__track{ height:8px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.mbars__track i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#7a67e0,#9a8bff); width:0; transition:width 1.1s cubic-bezier(.16,1,.3,1) .35s; }
.mcard.in .mbars__track i{ width:var(--w,50%); }
.mbars__flag{ display:flex; align-items:center; gap:8px; margin-top:2px; font-size:11.5px; font-weight:600; color:var(--muted); }
.mbars__flag img{ width:18px; height:18px; border-radius:5px; background:#fff; padding:2px; object-fit:contain; flex:none; }
.mbars__flag b{ color:#f5b301; font-weight:700; }

/* revenue readout */
.mrev{ display:flex; flex-direction:column; gap:13px; width:100%; }
.mrev__num{
  font-family:var(--font-display); font-size:46px; font-weight:700; letter-spacing:-.03em; line-height:1;
  background:linear-gradient(120deg,#ffffff,#a594ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.mrev__num em{ font-style:normal; font-size:15px; font-weight:600; letter-spacing:0; -webkit-text-fill-color:var(--muted); }
.mrev__prog{ height:9px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.mrev__prog i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#7a67e0,#9a8bff); width:0; transition:width 1.1s cubic-bezier(.16,1,.3,1) .35s; }
.mcard.in .mrev__prog i{ width:62%; }
.mrev__lift{ font-size:12.5px; font-weight:700; color:#8ee6a8; }

/* ===== FEATURES - seamless matrix with embedded UI fragments ===== */
.fx{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.fx__cell{ position:relative; background:#0a0a0d; padding:28px; display:flex; flex-direction:column; gap:10px; overflow:hidden; transition:background .3s ease; }
.fx__cell:hover{ background:#0d0c13; }
/* 4-up slim variant (trust strip) */
.fx--4{ grid-template-columns:repeat(4,1fr); }
.fx--slim .fx__cell{ padding:24px; gap:9px; }
.fx--slim .fx__cell h3{ font-size:16px; }
.fx--slim .fx__cell p{ font-size:13.5px; }
.fx__frag{ height:96px; display:flex; align-items:center; margin-bottom:10px; position:relative; }
.fx__title{ display:flex; align-items:center; gap:10px; }
.fx__title svg{ width:18px; height:18px; color:var(--accent); flex:none; }
.fx__cell h3{ font-size:18.5px; }
.fx__cell p{ color:var(--muted); font-size:14px; line-height:1.55; }

/* fragment: check rows */
.frag-checks{ display:flex; flex-direction:column; gap:8px; width:100%; }
.frag-check{ display:flex; align-items:center; gap:9px; font-size:12px; font-weight:600; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px; padding:8px 12px; }
.frag-check i{ width:17px; height:17px; flex:none; display:grid; place-items:center; border-radius:50%; font-style:normal; font-size:10px; font-weight:800; }
.frag-check--ok i{ background:rgba(55,214,122,.15); color:#37d67a; }
.frag-check--warn i{ background:rgba(245,179,1,.15); color:#f5b301; }

/* fragment: head-to-head bars */
.frag-vs{ display:flex; flex-direction:column; gap:10px; width:100%; }
.frag-vs__row{ display:grid; grid-template-columns:46px 1fr 28px; gap:10px; align-items:center; font-size:11px; font-weight:700; color:var(--muted); }
.frag-vs__row b{ color:#fff; text-align:right; }
.frag-vs .frag-track{ height:7px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.frag-vs .frag-track i{ display:block; height:100%; border-radius:99px; width:0; transition:width 1s cubic-bezier(.16,1,.3,1) .4s; }
.frag-vs__row--you .frag-track i{ background:linear-gradient(90deg,#7a67e0,#9a8bff); }
.frag-vs__row--them .frag-track i{ background:rgba(255,255,255,.22); }
.fx.in .frag-vs .frag-track i{ width:var(--w,50%); }

/* fragment: leads-library rows */
.frag-leads{ display:flex; flex-direction:column; gap:8px; width:100%; }
.frag-lead{ display:flex; align-items:center; gap:9px; font-size:12px; font-weight:600; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:11px; padding:8px 11px; }
.frag-lead img{ width:20px; height:20px; border-radius:50%; object-fit:cover; flex:none; }
.frag-lead b{ color:var(--text); font-weight:700; }
.frag-lead__grade{ margin-left:auto; width:20px; height:20px; flex:none; display:grid; place-items:center; border-radius:6px; font-family:var(--font-display); font-size:11px; font-weight:700; }
.frag-lead__grade.g{ color:#37d67a; background:rgba(55,214,122,.12); }
.frag-lead__grade.w{ color:#f5b301; background:rgba(245,179,1,.12); }
.frag-lead em{ font-style:normal; flex:none; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); background:rgba(122,103,224,.12); border:1px solid rgba(122,103,224,.3); padding:3px 7px; border-radius:6px; }

/* fragment: score-trend bars */
.frag-trend{ display:flex; align-items:flex-end; gap:14px; width:100%; }
.frag-trend__bars{ display:flex; align-items:flex-end; gap:6px; height:72px; flex:1; }
.frag-trend__bars i{ flex:1; border-radius:5px 5px 2px 2px; background:rgba(122,103,224,.25); height:0; transition:height .9s cubic-bezier(.16,1,.3,1) .35s; }
.frag-trend__bars i.hi{ background:linear-gradient(180deg,#9a8bff,#7a67e0); box-shadow:0 0 18px rgba(122,103,224,.35); }
.fx.in .frag-trend__bars i{ height:var(--h,40%); }
.frag-trend__delta{ flex:none; font-size:11.5px; font-weight:700; color:#8ee6a8; background:rgba(55,214,122,.08); border:1px solid rgba(55,214,122,.25); padding:5px 10px; border-radius:8px; margin-bottom:4px; }

/* fragment: share chips */
.frag-share{ display:flex; flex-direction:column; gap:8px; width:100%; align-items:flex-start; }
.frag-link{ display:inline-flex; align-items:center; gap:8px; max-width:100%; font-size:11.5px; font-weight:600; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:999px; padding:7px 8px 7px 13px; }
.frag-link svg{ width:12px; height:12px; color:var(--accent); flex:none; }
.frag-link i{ font-style:normal; flex:none; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:linear-gradient(180deg,#8b79ec,#7a67e0); padding:4px 9px; border-radius:999px; }
.frag-sent{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; color:#8ee6a8; background:rgba(55,214,122,.08); border:1px solid rgba(55,214,122,.25); padding:5px 11px; border-radius:999px; }
.frag-sent svg{ width:12px; height:12px; flex:none; }

/* fragment: branded PDF chip */
.frag-pdf{ display:inline-flex; align-items:center; gap:10px; padding:11px 14px; border-radius:13px; border:1px solid var(--line); background:rgba(255,255,255,.03); }
.frag-pdf img{ width:22px; height:22px; border-radius:6px; flex:none; }
.frag-pdf span{ display:flex; flex-direction:column; font-size:12px; font-weight:700; color:var(--text); line-height:1.3; }
.frag-pdf span em{ font-style:normal; color:var(--muted-2); font-weight:600; font-size:10.5px; }
.frag-pdf i{
  font-style:normal; margin-left:4px; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); background:rgba(122,103,224,.12); border:1px solid rgba(122,103,224,.3); border-radius:6px; padding:4px 8px;
}

/* ===== STATS ===== */
.stats{
  display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:center;
  margin-top:50px; padding:30px 40px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-soft);
}
.stat{ display:flex; flex-direction:column; max-width:320px; }
.stat strong{ font-size:40px; letter-spacing:-.03em; }
.stat span{ color:var(--muted); font-size:14px; }
.stat__divider{ width:1px; height:46px; background:var(--line-2); }
.stats .btn{ margin-left:auto; }

/* ===== APP DETECTION STRIP ===== */
.apps-strip{ padding:34px 0 6px; }
.apps-strip__label{ text-align:center; color:var(--muted); font-size:14.5px; margin-bottom:24px; }
.apps-strip__label span{ color:var(--accent); }
.apps-marquee .marquee__track{ animation-duration:40s; }
.appchip{ flex:0 0 auto; margin-right:14px; display:inline-flex; align-items:center; gap:10px; padding:9px 18px 9px 9px; border:1px solid var(--line); border-radius:999px; background:var(--bg-soft); color:var(--text); font-size:15px; font-weight:500; white-space:nowrap; }
.appimg{ width:24px; height:24px; flex:0 0 24px; border-radius:7px; object-fit:contain; background:#fff; padding:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }

/* ===== INSIDE THE REPORT - document table of contents ===== */
.reportx{ display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center; }
.reportx__copy h2, .aix__copy h2{ font-size:clamp(28px,3.6vw,42px); line-height:1.05; font-weight:500; letter-spacing:-.04em; margin-top:6px; }
.reportx__copy .section__lead, .aix__copy .section__lead{ margin-top:16px; }
.reportx__stats{ display:flex; gap:32px; margin:28px 0 30px; }
.reportx__stats div{ display:flex; flex-direction:column; gap:3px; }
.reportx__stats b{
  font-family:var(--font-display); font-size:30px; font-weight:700; letter-spacing:-.02em;
  background:linear-gradient(120deg,#ffffff,#a594ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.reportx__stats span{ color:var(--muted); font-size:13px; }
.toc{
  position:relative; overflow:hidden; padding:26px 28px;
  border:1px solid var(--line-2); border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 40%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.45);
}
.toc::after{ content:""; position:absolute; top:-80px; right:-60px; width:280px; height:280px; background:radial-gradient(circle,rgba(122,103,224,.16),transparent 65%); pointer-events:none; }
.toc__head{ display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.toc__head img{ width:34px; height:34px; border-radius:9px; flex:none; }
.toc__title{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.toc__title b{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toc__title span{ font-size:12px; color:var(--muted-2); }
.toc__badge{ margin-left:auto; flex:none; font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--accent); border:1px solid rgba(122,103,224,.35); background:rgba(122,103,224,.1); padding:4px 9px; border-radius:7px; }
.toc__list{ list-style:none; display:flex; flex-direction:column; padding:6px 0; }
.toc__list li{
  display:flex; align-items:center; gap:14px; padding:11px 8px; border-radius:9px;
  border-bottom:1px dashed var(--line); font-size:14px; color:var(--text);
  transition:background .2s ease, padding-left .25s ease;
}
.toc__list li:hover{ background:rgba(122,103,224,.05); padding-left:14px; }
.toc__list li:last-child{ border-bottom:0; }
.toc__list i{ font-style:normal; font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--accent); flex:none; }
.toc__list li > span{ flex:1; min-width:0; }
.toc__list em{ font-style:normal; font-size:12px; color:var(--muted-2); flex:none; }
.toc__foot{ display:flex; align-items:center; gap:8px; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:var(--muted-2); }
.toc__foot b{ font-size:11px; font-weight:700; color:var(--muted); border:1px solid var(--line); background:rgba(255,255,255,.03); padding:4px 10px; border-radius:999px; }
.report__pro{ font-size:11px; font-weight:700; color:var(--accent-ink); background:var(--accent); padding:1px 7px; border-radius:5px; margin-left:6px; vertical-align:middle; }
@media (max-width:980px){ .reportx{ grid-template-columns:1fr; gap:36px; } }

/* ===== AI DIAGNOSIS - generated-diagnosis mockup ===== */
.aix{ display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; }
.aix__rows{ list-style:none; display:flex; flex-direction:column; gap:18px; margin-top:28px; }
.aix__rows li{ display:flex; gap:14px; align-items:flex-start; }
.aix__ico{
  width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; color:var(--accent);
  background:linear-gradient(135deg,rgba(122,103,224,.22),rgba(122,103,224,.05)); border:1px solid rgba(122,103,224,.3);
}
.aix__ico svg{ width:18px; height:18px; }
.aix__rows li > div{ display:flex; flex-direction:column; gap:3px; }
.aix__rows b{ font-size:15.5px; font-weight:700; letter-spacing:-.01em; }
.aix__rows li > div span{ color:var(--muted); font-size:14px; line-height:1.5; }
.aim{
  position:relative; overflow:hidden; padding:24px;
  border:1px solid var(--line-2); border-radius:var(--radius);
  background:radial-gradient(130% 110% at 0% 0%, rgba(122,103,224,.12), rgba(122,103,224,0) 58%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 30px 80px rgba(0,0,0,.45);
}
.aim::after{ content:""; position:absolute; top:-70px; left:-50px; width:280px; height:280px; background:radial-gradient(circle,rgba(122,103,224,.2),transparent 65%); pointer-events:none; }
.aim__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; }
.aim__title{ display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700; }
.aim__meta{ display:inline-flex; align-items:center; gap:9px; }
.aim__meta em{ font-style:normal; font-size:11px; color:var(--muted-2); font-weight:600; white-space:nowrap; }
.aim__sum{ margin-top:16px; font-size:14px; line-height:1.6; color:var(--muted); position:relative; }
.aim__sum b{ color:#8ee6a8; font-weight:700; }
.aim__plan{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:16px; position:relative; }
.aim__plan li{ display:flex; align-items:center; gap:11px; font-size:13px; color:var(--text); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:10px 13px; }
.aim__plan i{
  font-style:normal; width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:7px;
  font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--accent);
  background:rgba(122,103,224,.13); border:1px solid rgba(122,103,224,.3);
}
.aim__plan li > span{ flex:1; min-width:0; }
.aim__plan em{ font-style:normal; flex:none; font-size:10.5px; font-weight:700; color:#8ee6a8; background:rgba(55,214,122,.08); border:1px solid rgba(55,214,122,.25); padding:3px 8px; border-radius:6px; white-space:nowrap; }
.aim__code{ margin-top:16px; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:#0a0a10; position:relative; }
.aim__codehead{ display:flex; align-items:center; justify-content:space-between; padding:9px 13px; border-bottom:1px solid var(--line); font-size:11px; font-weight:600; color:var(--muted-2); }
.aim__codehead i{ font-style:normal; font-size:10.5px; font-weight:700; color:var(--accent); border:1px solid rgba(122,103,224,.3); background:rgba(122,103,224,.1); padding:3px 9px; border-radius:6px; }
.aim__code pre{ margin:0; padding:13px 15px; font-family:"SF Mono", ui-monospace, Menlo, monospace; font-size:11.5px; line-height:1.65; color:#b9b0e8; overflow-x:auto; }
@media (max-width:980px){
  .aix{ grid-template-columns:1fr; gap:36px; }
  .aim{ order:2; }
}

/* ===== COMPARISON - table ===== */
.cmp{
  max-width:960px; margin-inline:auto; overflow:hidden;
  border:1px solid var(--line-2); border-radius:var(--radius); background:var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.3);
}
.cmp__row{ display:grid; grid-template-columns:172px 1fr 1.12fr; }
.cmp__row + .cmp__row{ border-top:1px solid var(--line); }
.cmp__row > span{ padding:18px 22px; font-size:14px; line-height:1.45; display:flex; align-items:center; gap:10px; }
.cmp__row > span:last-child{
  background:linear-gradient(180deg,rgba(122,103,224,.09),rgba(122,103,224,.045));
  border-left:1px solid rgba(122,103,224,.28); color:var(--text); font-weight:600;
}
.cmp__row--head > span{ padding:15px 22px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.cmp__row--head > span:last-child{ font-size:13.5px; letter-spacing:-.01em; text-transform:none; color:var(--text); font-weight:700; }
.cmp__k{ color:var(--muted-2); font-size:12.5px; font-weight:700; letter-spacing:.02em; }
.cmp__old{ color:var(--muted); }
.cmp__new i{ font-style:normal; flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:800; background:var(--accent); color:#fff; }
.cmp__brand{ display:inline-flex; align-items:center; gap:8px; }
@media (max-width:760px){
  .cmp__row{ grid-template-columns:1fr 1fr; }
  .cmp__row--head{ display:none; }
  .cmp__k{ grid-column:1 / -1; padding:14px 16px 0; }
  .cmp__row > span{ padding:12px 16px 16px; font-size:13px; }
  .cmp__old, .cmp__row:not(.cmp__row--head) > span:last-child{ flex-direction:column; align-items:flex-start; gap:7px; }
  .cmp__old::before{ content:"Manual way"; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
  .cmp__row:not(.cmp__row--head) > span:last-child::before{ content:"ShopGrade"; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
  .cmp__new i{ display:none; }
}

/* ===== MARQUEE (used by the app-detection strip) ===== */
.marquee{ overflow:hidden; padding:10px 0 14px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:0; width:max-content; animation:scroll 46s linear infinite; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ===== EARLY FEEDBACK - editorial quote bento ===== */
.quotes{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; max-width:1120px; margin-inline:auto; }
.quote{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:24px; padding:30px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 42%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.quote:hover{ border-color:rgba(122,103,224,.3); transform:translateY(-3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 45px rgba(0,0,0,.35); }
.quote:not(.quote--lead){ grid-column:span 5; }
.quote::after{
  content:"\201C"; position:absolute; top:12px; right:22px; pointer-events:none;
  font-family:var(--font-display); font-size:54px; line-height:1; color:rgba(122,103,224,.22);
}
.quote blockquote{ font-size:15px; line-height:1.65; color:var(--muted); }
.quote blockquote em{ font-style:normal; color:var(--text); font-weight:600; }
/* featured pull-quote: spans two rows, display type, gradient highlight */
.quote--lead{
  grid-column:span 7; grid-row:span 2; padding:38px; justify-content:space-between;
  border-color:rgba(122,103,224,.28);
  background:radial-gradient(130% 110% at 0% 0%, rgba(122,103,224,.12), rgba(122,103,224,0) 58%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 30px 80px rgba(0,0,0,.4);
}
.quote--lead::after{ font-size:120px; top:6px; right:26px; color:rgba(122,103,224,.16); }
.quote--lead blockquote{
  font-family:var(--font-display); font-size:clamp(21px,2.1vw,27px); line-height:1.42;
  letter-spacing:-.015em; font-weight:500; color:var(--text); max-width:24ch; position:relative;
}
.quote--lead blockquote em{
  font-weight:600;
  background:linear-gradient(120deg,#cdc3ff,#8b78f0);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.quote figcaption{ display:flex; align-items:center; gap:12px; margin-top:auto; position:relative; }
.quote__avatar{
  width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:16px; color:#fff;
  background:linear-gradient(135deg,#8b79ec,#5b49c4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 2px rgba(122,103,224,.25), 0 6px 16px rgba(122,103,224,.25);
}
.quote__who{ display:flex; flex-direction:column; font-size:13px; color:var(--muted); min-width:0; }
.quote__who strong{ color:var(--text); font-size:14.5px; font-weight:600; }
.quote__tag{
  margin-left:auto; flex:none; white-space:nowrap;
  font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent); background:rgba(122,103,224,.1); border:1px solid rgba(122,103,224,.28);
  padding:5px 10px; border-radius:7px;
}
.quotes__note{ text-align:center; color:var(--muted-2); font-size:13px; margin-top:28px; }
@media (max-width:980px){
  .quotes{ grid-template-columns:1fr; max-width:560px; }
  .quote:not(.quote--lead), .quote--lead{ grid-column:auto; grid-row:auto; }
  .quote--lead{ padding:30px; }
  .quote--lead blockquote{ max-width:none; font-size:20px; }
}
@media (max-width:560px){
  .quote__tag{ display:none; }
}

/* ===== AI PAGE TEARDOWN - annotated storefront mock ===== */
/* three-engine coverage cards */
.tear__scope{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:44px; }
.scope{
  position:relative; overflow:hidden; padding:24px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 45%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.scope:hover{ border-color:rgba(122,103,224,.3); transform:translateY(-3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 45px rgba(0,0,0,.35); }
.scope__head{ display:flex; align-items:center; gap:10px; margin-bottom:15px; }
.scope__ico{
  width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; color:var(--accent);
  background:linear-gradient(135deg,rgba(122,103,224,.22),rgba(122,103,224,.05)); border:1px solid rgba(122,103,224,.3);
}
.scope__ico svg{ width:17px; height:17px; }
.scope h3{ font-size:16px; letter-spacing:-.01em; }
.scope__head em{
  margin-left:auto; flex:none; font-style:normal; white-space:nowrap;
  font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); background:rgba(122,103,224,.1); border:1px solid rgba(122,103,224,.28);
  padding:4px 9px; border-radius:7px;
}
.scope ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.scope li{ display:flex; gap:8px; font-size:13px; color:var(--muted); line-height:1.5; }
.scope li::before{ content:"✓"; color:var(--accent); font-weight:700; font-size:11px; flex:none; margin-top:1px; }
.stats--worth{ margin-top:44px; flex-wrap:nowrap; gap:28px; }
.stats--worth .stat{ max-width:250px; }
.stats--worth .stat strong{ font-size:34px; white-space:nowrap; }
.stats--worth .stat span{ font-size:13px; }
@media (max-width:980px){
  .stats--worth{ flex-wrap:wrap; flex-direction:column; align-items:flex-start; }
  .stats--worth .stat{ max-width:none; }
}
@media (max-width:980px){
  .tear__scope{ grid-template-columns:1fr; }
}

.tear{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.tear__mock{
  position:relative; overflow:hidden; padding:18px;
  border:1px solid var(--line-2); border-radius:var(--radius);
  background:linear-gradient(180deg,#0f0e17,#0a0a10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.45);
}
.tear__bar{ display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.tear__url{
  flex:1; min-width:0; text-align:center; font-size:11.5px; font-weight:600; color:var(--muted);
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:8px; padding:6px 10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tear__page{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:16px; padding-top:16px; }
.tear__gallery{ aspect-ratio:4/4.6; border-radius:12px; border:1px solid var(--line); background:linear-gradient(135deg,rgba(122,103,224,.15),rgba(255,255,255,.03)); }
.tear__info{ display:flex; flex-direction:column; gap:11px; padding-top:6px; }
.t-line{ display:block; height:9px; border-radius:5px; background:rgba(255,255,255,.07); }
.t-line.w85{ width:85%; } .t-line.w70{ width:70%; } .t-line.w60{ width:60%; } .t-line.w40{ width:40%; }
.t-price{ font-family:var(--font-display); font-size:21px; font-weight:700; color:#fff; margin:2px 0; }
.t-btn{
  font-style:normal; display:inline-flex; justify-content:center; align-items:center; width:82%;
  font-size:12.5px; font-weight:700; color:#fff; padding:11px 0; border-radius:10px;
  background:linear-gradient(180deg,#8b79ec,#7a67e0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 20px rgba(122,103,224,.3);
}
.tear__pin{
  position:absolute; z-index:2; width:26px; height:26px; display:grid; place-items:center;
  font-family:var(--font-display); font-size:12px; font-weight:700; color:#fff; border-radius:50%;
  background:linear-gradient(180deg,#8b79ec,#7a67e0);
  box-shadow:0 0 0 5px rgba(122,103,224,.2), 0 8px 20px rgba(122,103,224,.45);
  animation:pinPulse 2.6s ease-out infinite;
}
@keyframes pinPulse{
  0%,100%{ box-shadow:0 0 0 5px rgba(122,103,224,.22), 0 8px 20px rgba(122,103,224,.45); }
  55%{ box-shadow:0 0 0 11px rgba(122,103,224,0), 0 8px 20px rgba(122,103,224,.45); }
}
.tear__findings{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.tear__findings li{
  display:flex; gap:14px; align-items:flex-start; padding:18px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 50%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .3s ease, transform .3s ease;
}
.tear__findings li:hover{ border-color:rgba(122,103,224,.3); transform:translateX(4px); }
.tear__num{
  width:26px; height:26px; flex:none; margin-top:2px; display:grid; place-items:center; border-radius:50%;
  font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--accent);
  background:rgba(122,103,224,.12); border:1px solid rgba(122,103,224,.35);
}
.tear__findings li > div{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.tear__tags{ display:flex; gap:6px; flex-wrap:wrap; }
.t-tag{ font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:6px; }
.t-tag--copy{ color:#b6a9f6; background:rgba(122,103,224,.14); }
.t-tag--urgency{ color:#f5b301; background:rgba(245,179,1,.12); }
.t-tag--seo{ color:#8ee6a8; background:rgba(55,214,122,.1); }
.t-tag--impact{ color:#ff8d8d; background:rgba(255,107,107,.1); }
.tear__findings b{ font-size:15px; letter-spacing:-.01em; }
.tear__findings li > div > span{ color:var(--muted); font-size:13.5px; line-height:1.55; }
.tear__note{ text-align:center; margin-top:28px; color:var(--muted-2); font-size:13px; }
@media (max-width:980px){
  .tear{ grid-template-columns:1fr; gap:28px; }
  .tear__mock{ max-width:560px; margin-inline:auto; width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .tear__pin{ animation:none; }
}

/* ===== BUILT RIGHT - split trust panel ===== */
.trustx{ display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center; }
.trustx__copy h2{ font-size:clamp(28px,3.6vw,42px); line-height:1.05; font-weight:500; letter-spacing:-.04em; margin-top:6px; text-wrap:balance; }
.trustx__copy .section__lead{ margin-top:16px; }
.trustx__chips{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 28px; }
.trust-panel{
  position:relative; overflow:hidden; padding:10px 28px;
  border:1px solid var(--line-2); border-radius:var(--radius);
  background:radial-gradient(130% 110% at 100% 0%, rgba(122,103,224,.1), rgba(122,103,224,0) 58%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.4);
}
.trust-panel__row{ display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); position:relative; }
.trust-panel__row:last-child{ border-bottom:0; }
.trust-panel__row > div{ display:flex; flex-direction:column; gap:3px; }
.trust-panel__row b{ font-size:15px; font-weight:700; letter-spacing:-.01em; }
.trust-panel__row span:not(.aix__ico){ color:var(--muted); font-size:13.5px; line-height:1.55; }
@media (max-width:980px){
  .trustx{ grid-template-columns:1fr; gap:34px; }
  .trust-panel{ padding:6px 20px; }
}

/* ===== LEGAL PAGES (terms / privacy / refunds) ===== */
.legal-hero{ position:relative; padding:150px 0 30px; text-align:center; overflow:hidden; }
.legal-hero__glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 75% at 50% 20%, rgba(122,103,224,.17), transparent 72%);
}
.legal-hero .container{ position:relative; }
.legal-hero h1{
  font-size:clamp(30px,4.6vw,50px); line-height:1.05; font-weight:500; letter-spacing:-.04em; margin-top:18px;
  background:linear-gradient(180deg,#ffffff 0%,#ececf4 55%,#b3b1c4 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.legal-hero__meta{ margin-top:14px; color:var(--muted-2); font-size:13.5px; }
.legal{ max-width:760px; margin-inline:auto; padding:26px 24px 90px; counter-reset:law; }
.legal-card{
  position:relative; overflow:hidden; margin-bottom:44px; padding:22px 24px;
  border:1px solid rgba(122,103,224,.28); border-radius:16px;
  background:radial-gradient(120% 130% at 0% 0%, rgba(122,103,224,.12), rgba(122,103,224,0) 60%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.legal-card b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.legal-card p{ color:var(--text); font-size:15px; line-height:1.65; margin:0; }
.legal h2{
  counter-increment:law; display:flex; align-items:baseline; gap:12px;
  font-size:21px; letter-spacing:-.02em; margin:44px 0 14px;
}
.legal h2::before{ content:counter(law,decimal-leading-zero); font-size:13px; font-weight:700; color:var(--accent); flex:none; }
.legal p{ color:var(--muted); font-size:15px; line-height:1.7; margin-bottom:14px; }
.legal strong{ color:var(--text); font-weight:600; }
.legal a{ color:var(--accent); }
.legal a:hover{ text-decoration:underline; }
.legal ul{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.legal ul li{ position:relative; padding-left:22px; color:var(--muted); font-size:15px; line-height:1.65; }
.legal ul li::before{ content:""; position:absolute; left:4px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.75; }
.legal-note{
  margin-top:48px; padding:18px 20px; border:1px solid var(--line); border-radius:14px;
  color:var(--muted-2); font-size:13.5px; line-height:1.6; background:rgba(255,255,255,.02);
}
.legal-note a{ color:var(--accent); }

/* ===== PRICING ===== */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.plan{ display:flex; flex-direction:column; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:30px; position:relative; transition:.3s; }
.plan:hover{ border-color:var(--line-2); }
.plan--popular{ background:linear-gradient(180deg, rgba(122,103,224,.08), rgba(13,13,13,.4)); border-color:rgba(122,103,224,.35); }
.plan__badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); white-space:nowrap; z-index:2;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg,#8b79ec,#7a67e0); padding:6px 14px; border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 22px rgba(122,103,224,.4);
}
.plan__top{ display:flex; align-items:center; gap:11px; }
.plan__icon{
  width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; color:var(--accent);
  background:linear-gradient(135deg,rgba(122,103,224,.22),rgba(122,103,224,.05)); border:1px solid rgba(122,103,224,.3);
}
.plan__icon svg{ width:18px; height:18px; }
.plan h3{ font-size:19px; }
.plan__desc{ color:var(--muted); font-size:13.5px; margin-top:12px; }
.plan__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 7px; margin-top:16px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.plan__price .per{ white-space:nowrap; }
.plan__price .amount{ font-family:var(--font-display); font-size:44px; letter-spacing:-.03em; font-weight:600; }
.plan__price .per{ color:var(--muted); font-size:14px; }
.plan__list{ list-style:none; margin:18px 0 26px; display:flex; flex-direction:column; gap:12px; }
.plan__list li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--muted); line-height:1.4; }
.plan__list li::before{ content:"✓"; flex:0 0 19px; height:19px; border-radius:50%; background:rgba(122,103,224,.14); color:var(--accent); font-weight:700; font-size:10px; display:grid; place-items:center; margin-top:1px; }
.plan__list li.plan__group{ margin-top:4px; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); }
.plan__list li.plan__group::before{ display:none; }
.plan .btn{ margin-top:auto; }
.plans__foot{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px; }
.plans__foot .trust-chip{ font-size:12.5px; color:var(--muted); }

/* ===== FAQ ===== */
.faq__wrap{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start; }
.faq{ display:flex; flex-direction:column; gap:12px; }
.faq__item{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; transition:.3s; }
.faq__item[open]{ border-color:var(--line-2); }
.faq__item summary{ list-style:none; cursor:pointer; padding:22px 24px; font-size:16.5px; font-weight:500; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary i{ position:relative; width:16px; height:16px; flex:0 0 16px; }
.faq__item summary i::before,.faq__item summary i::after{ content:""; position:absolute; background:var(--accent); border-radius:2px; transition:.3s; }
.faq__item summary i::before{ top:7px; left:0; width:16px; height:2px; }
.faq__item summary i::after{ left:7px; top:0; width:2px; height:16px; }
.faq__item[open] summary i::after{ transform:rotate(90deg); opacity:0; }
.faq__a{ padding:0 24px 24px; color:var(--muted); font-size:15px; }
/* numbered questions */
.faq__item summary{ justify-content:flex-start; gap:14px; counter-increment:faq; }
.faq{ counter-reset:faq; }
.faq__item summary::before{ content:counter(faq,decimal-leading-zero); font-family:var(--font-display); font-size:12.5px; font-weight:700; color:var(--accent); flex:none; opacity:.9; }
.faq__item summary i{ margin-left:auto; }
.faq__item .faq__a{ padding-left:60px; }
/* support card under the FAQ intro */
.faq__cta{
  display:flex; align-items:center; gap:14px; margin-top:28px; padding:18px; max-width:400px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 60%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.faq__cta img{ width:38px; height:38px; border-radius:10px; flex:none; }
.faq__cta > div{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.faq__cta b{ font-size:14px; }
.faq__cta span{ font-size:12.5px; color:var(--muted); }

/* ===== FINAL CTA - centered closer with floating proof ===== */
.finalcta{
  position:relative; text-align:center; padding:88px 40px 92px; border-radius:var(--radius);
  border:1px solid rgba(122,103,224,.3); overflow:hidden;
  background:
    radial-gradient(ellipse 62% 58% at 50% 0%, rgba(122,103,224,.14), transparent 72%),
    linear-gradient(180deg, rgba(122,103,224,.05), var(--bg-soft));
}
/* faint blueprint grid, fading out towards the edges */
.finalcta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:54px 54px; opacity:.45;
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 42%, #000, transparent 78%);
  mask-image:radial-gradient(ellipse 78% 72% at 50% 42%, #000, transparent 78%);
}
/* top light line */
.finalcta::after{
  content:""; position:absolute; top:0; left:90px; right:90px; height:2px; border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg,transparent,#a594ff,transparent); opacity:.7;
}
.finalcta__glow{ position:absolute; top:-130px; left:50%; transform:translateX(-50%); width:640px; height:420px; background:radial-gradient(closest-side, rgba(122,103,224,.26), transparent 70%); filter:blur(12px); pointer-events:none; }

.finalcta__inner{ position:relative; max-width:640px; margin-inline:auto; }
.finalcta h2{ font-size:clamp(32px,4.4vw,54px); margin:20px 0 16px; }
.finalcta p{ color:var(--muted); max-width:500px; margin:0 auto; }
.finalcta .signup{ max-width:520px; margin:30px auto 0; }
.finalcta .signup__msg{ text-align:center; }
.finalcta__perks{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:24px; }
.finalcta__perks .trust-chip{ font-size:12.5px; color:var(--muted); }
.finalcta p.finalcta__contact{ margin:26px auto 0; color:var(--muted-2); font-size:13px; }
.finalcta__contact a{ color:var(--accent); }
.finalcta__contact a:hover{ text-decoration:underline; }

/* floating proof pinned to the card edges */
.finalcta__deco{ position:absolute; inset:0; pointer-events:none; }
.cta-gauge{
  position:absolute; right:52px; top:50%; margin-top:-72px; width:144px; height:144px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  rotate:5deg; animation:mockFloat 6s ease-in-out infinite;
}
.cta-gauge::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(#8b79ec 0 346deg, rgba(255,255,255,.08) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10.5px));
  filter:drop-shadow(0 0 24px rgba(122,103,224,.5));
}
.cta-gauge::after{ content:""; position:absolute; inset:14px; border-radius:50%; background:radial-gradient(closest-side,rgba(122,103,224,.18),transparent 78%); pointer-events:none; }
.cta-gauge b{ font-family:var(--font-display); font-size:42px; font-weight:700; line-height:1; letter-spacing:-.03em; }
.cta-gauge span{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; color:#8ee6a8;
  background:rgba(55,214,122,.1); border:1px solid rgba(55,214,122,.28); padding:3px 10px; border-radius:999px;
}
.cta-chip{
  position:absolute; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:11.5px; font-weight:700; padding:8px 12px; border-radius:11px;
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.cta-chip svg{ width:13px; height:13px; flex:none; }
.cta-chip--url{ left:48px; top:54px; rotate:-4deg; color:var(--muted); background:rgba(17,16,24,.92); border:1px solid var(--line-2); animation:mockFloat 5.4s ease-in-out .2s infinite; }
.cta-chip--url img{ width:16px; height:16px; border-radius:4px; flex:none; }
.cta-chip--sent{ left:64px; bottom:60px; rotate:3deg; color:#8ee6a8; background:rgba(10,14,11,.92); border:1px solid rgba(55,214,122,.3); animation:mockFloat 5s ease-in-out .6s infinite; }
.cta-chip--sent svg{ color:#37d67a; }
.cta-chip--rev{ right:64px; bottom:60px; rotate:-3deg; color:#8ee6a8; background:rgba(10,14,11,.92); border:1px solid rgba(55,214,122,.3); animation:mockFloat 5.8s ease-in-out 1s infinite; }

@media (max-width:1120px){
  .cta-gauge{ right:20px; scale:.82; }
  .cta-chip--url{ left:22px; top:34px; }
  .cta-chip--sent{ left:32px; bottom:44px; }
  .cta-chip--rev{ right:32px; bottom:44px; }
}
@media (max-width:900px){
  .finalcta{ padding:60px 24px 64px; }
  .finalcta__deco{ display:none; }
}

/* ===== FOOTER ===== */
.footer{ position:relative; isolation:isolate; border-top:1px solid var(--line); padding:0 0 24px; background:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 40%); overflow:hidden; }
.footer::before{ content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:min(680px,80%); height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.55; }
.footer__glow{ position:absolute; z-index:-1; bottom:-40%; left:50%; transform:translateX(-50%); width:120%; height:80%; background:radial-gradient(ellipse at center,rgba(122,103,224,.18),transparent 60%); filter:blur(20px); pointer-events:none; }
.footer__grid-overlay{ position:absolute; inset:0; z-index:-1; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent 75%); opacity:.5; pointer-events:none; }

/* Link columns */
.footer__inner{ display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:48px; margin-top:76px; }
.footer__brand p{ color:var(--muted); font-size:14.5px; max-width:320px; margin-top:18px; line-height:1.55; }

.footer__social{ display:flex; gap:10px; margin-top:24px; }
.footer__social-link{ display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--muted); border:1px solid var(--line); background:rgba(255,255,255,.03); transition:.22s ease; }
.footer__social-link:hover{ color:var(--text); border-color:var(--accent); background:rgba(122,103,224,.12); transform:translateY(-2px); box-shadow:0 8px 20px rgba(122,103,224,.22); }

.footer__col h4{ font-size:11px; margin-bottom:18px; color:var(--muted-2); font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.footer__col a{ position:relative; display:block; width:fit-content; color:var(--muted); font-size:14.5px; padding:6px 0; transition:color .2s, padding-left .25s cubic-bezier(.16,1,.3,1); }
.footer__col a::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%) scaleX(0);
  width:10px; height:2px; border-radius:2px; background:var(--accent);
  transform-origin:left; transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.footer__col a:hover{ color:var(--text); padding-left:16px; }
.footer__col a:hover::before{ transform:translateY(-50%) scaleX(1); }

/* Giant wordmark */
.footer__wordmark{
  margin-top:56px; font-size:clamp(56px,15.5vw,210px); font-weight:800; line-height:.82; letter-spacing:-.045em;
  text-align:center; white-space:nowrap; user-select:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(122,103,224,.06) 68%,rgba(255,255,255,0));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.footer__bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:40px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted-2); font-size:13px; flex-wrap:wrap; gap:16px; }
.footer__top{ display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; padding:7px 14px; border-radius:999px; border:1px solid var(--line-2); background:rgba(255,255,255,.04); transition:.22s ease; }
.footer__top:hover{ color:var(--text); border-color:var(--accent); }
.footer__top svg{ transition:transform .22s ease; }
.footer__top:hover svg{ transform:translateY(-2px); }

/* ===== REVEAL ANIM (blur-in on scroll) ===== */
.reveal{
  opacity:0; transform:translateY(30px); filter:blur(12px);
  transition:opacity .8s ease, transform .85s cubic-bezier(.16,1,.3,1), filter .85s ease;
}
.reveal.in{ opacity:1; transform:none; filter:blur(0); }

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .fx{ grid-template-columns:repeat(2,1fr); }
  .hiw{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .hiw__rail{ display:none; }
  .hiw__visual{ aspect-ratio:16/9.5; }
  .stats{ flex-direction:column; align-items:flex-start; gap:24px; }
  .stat__divider{ display:none; }
  .stats .btn{ margin-left:0; }
  .mcard--gauge,.mcard--cwv,.mcard--payload,.mcard--rev{ grid-column:span 6; }
  .plans{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .faq__wrap{ grid-template-columns:1fr; gap:30px; }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:36px 40px; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:880px){
  /* menu becomes a fixed overlay, so revert the bar to a simple flex row */
  .nav__inner{ display:flex; justify-content:space-between; }

  /* dim backdrop behind the menu */
  .nav__backdrop{
    display:block; position:fixed; inset:0; z-index:40;
    background:rgba(4,4,4,.6); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .nav__backdrop.open{ opacity:1; pointer-events:auto; }

  /* keep the nav bar (and toggle) tappable above the backdrop */
  .nav__wrap{ position:relative; z-index:50; }

  /* slide-down sheet */
  .nav__links{
    position:fixed; inset:78px 14px auto 14px; z-index:60; flex-direction:column; gap:4px;
    background:linear-gradient(180deg,rgba(20,20,22,.98),rgba(12,12,14,.98));
    backdrop-filter:blur(18px); border:1px solid var(--line-2);
    border-radius:22px; padding:16px;
    box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
    transform:translateY(-14px) scale(.97); transform-origin:top right;
    opacity:0; pointer-events:none; visibility:hidden;
    transition:transform .34s cubic-bezier(.16,1,.3,1), opacity .26s ease, visibility 0s linear .34s;
  }
  .nav__links.open{ transform:none; opacity:1; pointer-events:auto; visibility:visible; transition:transform .34s cubic-bezier(.16,1,.3,1), opacity .26s ease, visibility 0s; }

  .nav__links-label{ display:block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); padding:4px 12px 10px; }

  .nav__links a{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    font-size:16px; color:var(--text); padding:15px 14px; border-radius:13px;
    background:rgba(255,255,255,.02); border:1px solid transparent;
    opacity:0; transform:translateY(8px); transition:background .2s, border-color .2s, color .2s;
  }
  .nav__links a svg{ display:block; color:var(--muted-2); transition:transform .2s, color .2s; }
  .nav__links a:active{ background:rgba(122,103,224,.14); border-color:var(--line-2); }
  .nav__links a:active svg{ transform:translateX(3px); color:var(--accent); }
  .nav__links a::after{ display:none; }

  /* staggered entrance for each row */
  .nav__links.open a{ animation:navItemIn .4s cubic-bezier(.16,1,.3,1) forwards; }
  .nav__links.open a:nth-child(2){ animation-delay:.05s; }
  .nav__links.open a:nth-child(3){ animation-delay:.1s; }
  .nav__links.open a:nth-child(4){ animation-delay:.15s; }
  .nav__links.open a:nth-child(5){ animation-delay:.2s; }
  .nav__links.open a:nth-child(6){ animation-delay:.25s; }
  .nav__links.open a:nth-child(7){ animation-delay:.3s; }

  .nav__cta{ display:none; }
  .nav__signin{ display:none; } /* mobile: Sign in lives inside the menu instead */
  .nav__inner{ padding:9px 9px 9px 16px; }
  .nav__links a.nav__menucta{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:12px; background:linear-gradient(180deg,#8b79ec,#7a67e0); border:1px solid transparent; color:#fff; text-align:center; border-radius:15px; padding:16px; font-weight:600; font-size:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 12px 28px rgba(122,103,224,.35); }
  .nav__links a.nav__menucta:active{ background:linear-gradient(180deg,#7a67e0,#6a57d0); transform:translateY(1px); }
  .nav__links a.nav__menucta svg{ display:block; width:17px; height:17px; color:#fff; transform:none; }
  .nav__toggle{ display:flex; }
  .nav__toggle.open{ background:rgba(122,103,224,.14); border-color:var(--accent); }
  .nav__toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav__toggle.open span:nth-child(2){ opacity:0; }
  .nav__toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:760px){
  .section{ padding:64px 0; }
  .hero{ padding:120px 0 40px; }
  .fx{ grid-template-columns:1fr; }
  .mcard--gauge,.mcard--cwv,.mcard--payload,.mcard--rev{ grid-column:span 12; }
  .section__head--row{ flex-direction:column; align-items:flex-start; }
  .stats{ flex-direction:column; align-items:flex-start; }
  .stat__divider{ display:none; }
  .stats .btn{ margin-left:0; }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:32px 24px; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__wordmark{ margin-top:40px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; filter:none; transition:none; }
  .hero__dash{ transform:none; }
  .nav__links.open a{ animation:none; opacity:1; transform:none; }
}

/* ===== EXPRESSIVE POLISH (depth, gradients & micro-interactions) ===== */
/* ambient purple depth behind the whole page */
body{
  background:
    radial-gradient(900px 520px at 12% -4%, rgba(122,103,224,.12), transparent 55%),
    radial-gradient(1000px 620px at 100% 10%, rgba(122,103,224,.07), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
/* gradient accent word */
.accent{ background:linear-gradient(120deg,#a594ff,#6f5ad8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#8b78f0; }
/* eyebrow gets a glowing dot */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; }
/* premium card hover: lift + purple edge glow */
.plan{ transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease, background .3s ease; }
/* elevate the popular pricing plan */
.plan--popular{ transform:scale(1.035); box-shadow:0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(122,103,224,.32); z-index:2; }
.plan--popular:hover{ transform:scale(1.035) translateY(-2px); }
/* hero trust chips */
.hero__trust{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; align-items:center; margin-top:18px; color:var(--muted); font-size:13px; }
.trust-chip{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:rgba(255,255,255,.03); padding:7px 13px; border-radius:999px; }
.trust-chip svg{ width:14px; height:14px; color:var(--accent); flex:0 0 14px; }
@media (max-width:980px){ .plan--popular{ transform:none; } .plan--popular:hover{ transform:translateY(-2px); } }

/* ===== premium sheen: top highlight hairline on cards ===== */
.plan, .faq__item{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.plan--popular{ box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(122,103,224,.32); }
/* trust chips: subtle interactive lift */
.trust-chip{ transition:border-color .25s ease, background .25s ease, transform .25s ease; }
.trust-chip:hover{ border-color:rgba(122,103,224,.4); background:rgba(122,103,224,.08); transform:translateY(-1px); }

/* respect reduced-motion for all the new ambient animation */
@media (prefers-reduced-motion:reduce){
  .hero__glow, .hero__glow--2, .hero__title .accent{ animation:none; }
}

/* ============================================================
   HERO LIVE AUDIT DASHBOARD (sgx) - modern, animated mockup
   ============================================================ */
/* ----- app shell: dark sidebar + light main ----- */
.sgx{ display:flex; background:#f5f6f3; color:#11130f; text-align:left; position:relative; overflow:hidden; padding:0; }
.sgx__nav{ flex:0 0 72px; background:#0e0e10; display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 0; }
.sgx__navlogo{ width:40px; height:40px; display:grid; place-items:center; margin-bottom:14px; }
.sgx__navlogo img{ width:40px; height:40px; border-radius:11px; object-fit:cover; }
.sgx__navi{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; color:#76777e; cursor:pointer; transition:.2s; }
.sgx__navi svg{ width:21px; height:21px; }
.sgx__navi.is-active{ background:rgba(122,103,224,.2); color:#b6a9f6; }
.sgx__navi:hover{ color:#fff; background:rgba(255,255,255,.06); }
.sgx__navi--end{ margin-top:auto; }

.sgx__main{ flex:1; min-width:0; padding:22px 26px 46px; display:flex; flex-direction:column; }
.sgx__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sgx__title h4{ font-size:19px; font-weight:700; letter-spacing:-.02em; color:#11130f; }
.sgx__title .sgx__url{ display:inline-flex; align-items:center; gap:7px; margin-top:4px; font-size:13px; font-weight:600; color:#83867d; white-space:nowrap; }
.sgx .sgx__logo{ width:18px; height:18px; flex:0 0 18px; border-radius:5px; object-fit:cover; }
.sgx__bar-r{ display:flex; align-items:center; gap:10px; }
.sgx__status{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#6b6f66; white-space:nowrap; background:#fff; border:1px solid #eaece4; padding:6px 12px; border-radius:999px; }
.sgx__run{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:700; letter-spacing:-.01em; color:#fff; background:linear-gradient(180deg,#8b79ec,#7a67e0); border:0; border-radius:999px; padding:8px 14px; cursor:pointer; white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(122,103,224,.3); transition:transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.sgx__run:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 22px rgba(122,103,224,.4); }
.sgx__run:active{ transform:translateY(0); }
.sgx__run:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }
.sgx__run svg{ width:14px; height:14px; }
.sgx.is-scanning .sgx__run svg{ animation:sgxSpin .9s linear infinite; }
@keyframes sgxSpin{ to{ transform:rotate(360deg); } }
.sgx__live{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; background:#7a67e0; box-shadow:0 0 0 0 rgba(122,103,224,.5); animation:sgxLive 1.5s ease-out infinite; }
@keyframes sgxLive{ 70%,100%{ box-shadow:0 0 0 7px rgba(122,103,224,0); } }
.sgx.is-done .sgx__live{ background:#37b520; animation:none; }
.sgx.is-done .sgx__status{ color:#2f7a00; }

/* live scan progress bar */
.sgx__scan{ height:4px; border-radius:99px; background:#e7e9e2; overflow:hidden; margin:16px 0 18px; }
.sgx__scan i{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#7a67e0,#9a8bff); }
.sgx.is-scanning .sgx__scan i{ width:100%; transition:width 1.7s cubic-bezier(.4,0,.2,1); }
.sgx.is-done .sgx__scan{ opacity:0; height:0; margin:6px 0 10px; transition:opacity .45s ease, height .45s ease, margin .45s ease; }

/* ----- content grid: 3 columns ----- */
.sgx__grid{ display:grid; grid-template-columns:1.05fr 1fr 1fr; gap:14px; }
.sgx__panel{ background:#fff; border:1px solid #eaece4; border-radius:18px; padding:18px; box-shadow:0 1px 2px rgba(0,0,0,.03); display:flex; flex-direction:column; gap:13px; }
.sgx__panel-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13.5px; font-weight:700; color:#11130f; }
.sgx__dots3{ color:#bcbfb6; font-style:normal; letter-spacing:1px; }

/* featured dark score card (spans both rows) */
.sgx__feature{ background:linear-gradient(165deg,#202024,#0e0e10); color:#fff; border-radius:18px; padding:20px; display:flex; flex-direction:column; align-items:center; gap:16px; box-shadow:0 14px 34px rgba(0,0,0,.28); }
.sgx__feature-h{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.sgx__fmark{ width:32px; height:32px; border-radius:9px; object-fit:cover; }
.sgx__fgrade{ font-size:13px; font-weight:600; color:rgba(255,255,255,.6); }
.sgx__fgrade b{ font-size:15px; font-weight:800; color:#fff; }
.sgx__feature .sgx__gauge{ width:152px; height:152px; margin:6px 0; }
.sgx__feature .sgx__track{ stroke:rgba(255,255,255,.12); }
.sgx__feature .sgx__grade{ color:#fff; font-size:44px; }
.sgx__feature .sgx__score{ color:rgba(255,255,255,.55); }
.sgx__feature-meta{ display:flex; gap:10px; width:100%; }
.sgx__feature-meta div{ flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:13px; padding:11px 13px; display:flex; flex-direction:column; gap:3px; }
.sgx__feature-meta span{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.sgx__feature-meta b{ font-size:13px; font-weight:700; color:#fff; }
.sgx__chip-good{ color:#7ee07a !important; }

/* gauge (shared) */
.sgx__gauge{ position:relative; width:152px; height:152px; }
.sgx__gauge::before{ content:""; position:absolute; inset:16%; border-radius:50%; background:radial-gradient(closest-side, rgba(122,103,224,.22), transparent 72%); pointer-events:none; }
.sgx__gauge svg{ position:relative; width:100%; height:100%; display:block; }
.sgx__track{ fill:none; stroke:#ededed; stroke-width:10; }
.sgx__arc{ fill:none; stroke:#7a67e0; stroke-width:10; stroke-linecap:round; }
.sgx__readout{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sgx__grade{ font-size:48px; font-weight:800; letter-spacing:-.04em; line-height:1; color:#11130f; transition:opacity .35s ease; }
.sgx__grade i{ font-style:normal; }
.sgx.is-scanning .sgx__grade{ opacity:.3; }
.sgx__score{ font-size:11.5px; font-weight:600; color:#83867d; margin-top:4px; text-transform:uppercase; letter-spacing:.04em; }

/* AI Expert Diagnosis panel */
.sgx__ai{ background:linear-gradient(165deg, rgba(122,103,224,.13), rgba(122,103,224,.03)); border-color:rgba(122,103,224,.26); gap:12px; }
.sgx__ai-title{ display:inline-flex; align-items:center; gap:8px; }
.sgx__ai-ico{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; background:linear-gradient(180deg,#8b79ec,#7a67e0); color:#fff; box-shadow:0 4px 12px rgba(122,103,224,.4); }
.sgx__ai-ico svg{ width:15px; height:15px; }
.sgx__ai-badge{ font-size:10px; font-weight:800; letter-spacing:.03em; color:#fff; background:linear-gradient(180deg,#8b79ec,#7a67e0); padding:3px 8px; border-radius:6px; }
.sgx__ai-gen{ display:none; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:#7a67e0; }
.sgx__ai-gen svg{ width:15px; height:15px; animation:sgxSpin .9s linear infinite; }
.sgx.is-scanning .sgx__ai-gen{ display:inline-flex; }
.sgx.is-scanning .sgx__ai-text, .sgx.is-scanning .sgx__ai-list{ display:none; }
.sgx__ai-text{ font-size:12.5px; line-height:1.55; color:#3f433b; opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.sgx__ai-text b{ color:#2f7a00; font-weight:800; }
.sgx.is-done .sgx__ai-text{ opacity:1; transform:none; transition-delay:.1s; }
.sgx__ai-list{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-top:auto; }
.sgx__ai-list li{ display:flex; align-items:flex-start; gap:9px; font-size:12px; line-height:1.35; color:#3f433b; opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.sgx.is-done .sgx__ai-list li{ opacity:1; transform:none; transition-delay:calc(.22s + var(--i) * .12s); }
.sgx__ai-list li svg{ width:16px; height:16px; flex:0 0 16px; margin-top:1px; color:#7a67e0; }

/* revenue at risk */
.sgx__rev-num{ font-size:27px; font-weight:800; letter-spacing:-.03em; color:#11130f; }
.sgx__rev-num em{ font-style:normal; font-size:13px; font-weight:600; color:#83867d; }
.sgx__prog{ height:9px; border-radius:99px; background:#ededed; overflow:hidden; }
.sgx__prog i{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#7a67e0,#9a8bff); transition:width 1.1s cubic-bezier(.16,1,.3,1) .3s; }
.sgx.is-done .sgx__prog i{ width:62%; }
.sgx__lift{ font-size:12px; font-weight:700; color:#2f7a00; }

/* core web vitals */
.sgx__cwv{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.sgx__cwv .m{ display:flex; align-items:center; gap:7px; font-size:12px; color:#6b6f66; background:#f6f7f3; border:1px solid #eceee6; border-radius:10px; padding:9px 10px; }
.sgx__cwv .m b{ margin-left:auto; color:#11130f; font-weight:700; }
.sgx__cwv .m::before{ content:""; width:7px; height:7px; border-radius:50%; flex:0 0 7px; }
.sgx__cwv .m--g::before{ background:#37b520; }
.sgx__cwv .m--w::before{ background:#f5b301; }
.sgx__pass{ font-size:12px; font-weight:600; color:#6b6f66; opacity:0; transition:opacity .4s ease; }
.sgx.is-done .sgx__pass{ opacity:1; }

/* severity pills */
.sgx__sev{ display:inline-flex; gap:5px; }
.sgx__sev .sev{ font-style:normal; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:7px; opacity:0; transform:translateY(-3px); transition:opacity .4s ease, transform .4s ease; }
.sgx.is-done .sgx__sev .sev{ opacity:1; transform:none; }
.sgx.is-done .sev--m{ transition-delay:.08s; }
.sgx.is-done .sev--l{ transition-delay:.16s; }
.sev--h{ color:#c0143c; background:rgba(192,20,60,.1); }
.sev--m{ color:#9a5b00; background:rgba(181,107,0,.12); }
.sev--l{ color:#2563a8; background:rgba(37,99,168,.11); }

/* finding rows - stagger in when audit completes */
.sgx__rows{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.sgx__rows li{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:#3f433b; opacity:0; transform:translateY(7px); transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.sgx.is-done .sgx__rows li{ opacity:1; transform:none; transition-delay:calc(.2s + var(--i) * .13s); }
.sgx__rows li b{ margin-left:auto; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#a4a89e; }
.rdot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.rdot--h{ background:#c0143c; } .rdot--m{ background:#f5b301; } .rdot--l{ background:#2563a8; }

/* activity feed */
.sgx__feed{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.sgx__feed li{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:#3f433b; }
.sgx__feed img{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex:0 0 28px; }
.sgx__feed b{ color:#11130f; font-weight:700; }
.sgx__feed i{ margin-left:auto; font-style:normal; font-size:11px; color:#a4a89e; }

@media (max-width:820px){
  .sgx__grid{ grid-template-columns:1fr 1fr; }
  .sgx__feature{ grid-row:auto; grid-column:span 2; flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .sgx__feature .sgx__gauge{ margin:0; }
  .sgx__feature-meta{ flex:1 1 100%; }
}
@media (max-width:560px){
  .sgx__nav{ flex-basis:52px; }
  .sgx__main{ padding:18px 16px 40px; }
  .sgx__grid{ grid-template-columns:1fr; }
  .sgx__feature{ grid-column:auto; }
  /* stack the dashboard header so the status + run button don't clip off-screen */
  .sgx__head{ flex-wrap:wrap; gap:12px; }
  .sgx__title{ flex:1 1 auto; min-width:0; }
  .sgx__bar-r{ flex:1 1 100%; justify-content:space-between; }
  .sgx__status{ flex:1 1 auto; justify-content:center; }
  .sgx__run span{ display:none; } .sgx__run{ padding:8px 10px; flex:0 0 auto; }
}
@media (prefers-reduced-motion:reduce){
  .sgx__live{ animation:none; }
  .sgx__scan{ display:none; }
  .sgx__arc{ stroke-dashoffset:13 !important; }
  .sgx__prog i{ width:62%; transition:none; }
}

/* ============================================================
   MID-PAGE SECTION UPGRADES - rhythm, depth & richer cards
   ============================================================ */

/* --- section rhythm: centered accent hairline between sections --- */
main .section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(560px,78%); height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(122,103,224,.38) 50%,transparent);
}
main .section#how::before{ display:none; } /* apps strip flows straight into it */

/* --- ambient purple washes behind key sections --- */
.section:has(.fx)::after,
.section:has(.mbento)::after,
.section:has(.tear)::after,
.section:has(.plans)::after,
.section:has(.cmp)::after{
  content:""; position:absolute; z-index:-1; top:-40px; left:50%; transform:translateX(-50%);
  width:min(940px,100%); height:460px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(122,103,224,.09), transparent 72%);
  filter:blur(24px);
}

/* --- premium silver-gradient headlines --- */
.section__head h2, .finalcta h2{
  background:linear-gradient(180deg,#ffffff 0%,#ececf4 55%,#b3b1c4 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* --- card base: faint top-light gradient instead of flat fill --- */
.plan{
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 42%), var(--bg-soft);
}
.plan--popular{ background:linear-gradient(180deg, rgba(122,103,224,.1), rgba(13,13,13,.4)); }

/* --- cursor-tracked spotlight on cards (set via JS: --mx / --my) --- */
.spotlight{ position:relative; }
.spotlight::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .4s ease; z-index:1;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(122,103,224,.1), transparent 65%);
}
.spotlight:hover::before{ opacity:1; }

/* --- stats band: gradient numbers on a tinted panel --- */
.stats{
  background:linear-gradient(135deg, rgba(122,103,224,.09), rgba(255,255,255,.02)), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.3);
  position:relative; overflow:hidden;
}
.stats::after{
  content:""; position:absolute; top:-70%; right:-6%; width:320px; height:320px; pointer-events:none;
  background:radial-gradient(circle, rgba(122,103,224,.2), transparent 65%);
}
.stat strong{
  background:linear-gradient(120deg,#ffffff,#a594ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stats .btn{ position:relative; z-index:1; }

/* --- app detection chips: react on hover --- */
.appchip{ transition:border-color .25s ease, background .25s ease; }
.appchip:hover{ border-color:rgba(122,103,224,.42); background:rgba(122,103,224,.08); }

/* --- pricing: accent hairline + gradient price on the popular plan --- */
.plan:hover{ transform:translateY(-4px); border-color:rgba(122,103,224,.3); box-shadow:0 22px 55px rgba(0,0,0,.4); }
.plan--popular::after{
  content:""; position:absolute; top:0; left:24px; right:24px; height:2px; border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg,transparent,#a594ff,transparent);
}
.plan--popular .plan__price .amount{
  background:linear-gradient(120deg,#ffffff,#a594ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
@media (max-width:980px){ .plan:hover{ transform:translateY(-2px); } }

/* --- FAQ: tinted open state + answer ease-in --- */
.faq__item summary{ transition:color .2s ease; }
.faq__item summary:hover{ color:#fff; }
.faq__item[open]{
  background:linear-gradient(180deg, rgba(122,103,224,.07), var(--bg-soft) 60%);
  border-color:rgba(122,103,224,.3);
}
.faq__item[open] .faq__a{ animation:faqIn .35s ease both; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* --- final CTA: dot-grid texture like the hero --- */
.finalcta{ border-color:rgba(122,103,224,.28); }
.finalcta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 0%, #000, transparent 78%);
  mask-image:radial-gradient(ellipse 75% 65% at 50% 0%, #000, transparent 78%);
}
.finalcta .pill, .finalcta .signup{ position:relative; }

@media (prefers-reduced-motion:reduce){
  .spotlight::before{ display:none; }
  .faq__item[open] .faq__a{ animation:none; }
  .hiw__rail i, .mb__badge, .ms__toast, .ma__scan, .ma__live i{ animation:none; }
  .mbars__track i, .mrev__prog i, .frag-track i{ transition:none; }
  .mcard .mbars__track i{ width:var(--w,50%); }
  .mcard .mrev__prog i{ width:62%; }
  .frag-vs .frag-track i{ width:var(--w,50%); }
  .frag-trend__bars i{ transition:none; height:var(--h,40%); }
  .cta-gauge, .cta-chip{ animation:none; }
}

/* ============================================================
   RESPONSIVE REFINEMENTS - tablet & mobile polish
   ============================================================ */

/* --- tablet (761–980): keep things airy --- */
@media (min-width:761px) and (max-width:980px){
  .hiw{ max-width:640px; }
  .mbento{ gap:16px; }
  .aim, .toc{ max-width:640px; margin-inline:auto; width:100%; }
}

/* --- mobile (≤760): tighter cards, aligned text --- */
@media (max-width:760px){
  .reportx__stats{ flex-wrap:wrap; gap:18px 28px; margin:24px 0 26px; }
  .reportx__stats b{ font-size:26px; }
  .toc{ padding:20px 16px; }
  .toc__list li{ font-size:13px; gap:10px; }
  .toc__head{ gap:10px; }
  .aim{ padding:18px; }
  .aix, .reportx{ gap:30px; }
  .faq__item summary{ padding:18px 18px; gap:11px; }
  .faq__item .faq__a{ padding:0 18px 20px 18px; }
  .faq__cta{ max-width:none; }
  .plans__foot{ gap:8px; }
  .hiw{ max-width:480px; }
  .mcard{ padding:22px; }
  .cmp__k{ font-size:11.5px; }
  .stats{ padding:26px 24px; gap:20px; }
  .stat strong{ font-size:32px; }
  .quote{ padding:24px; }
}

/* --- small phones (≤560): slim hero + compact sections --- */
@media (max-width:560px){
  .hero{ padding:112px 0 36px; }
  .hero__title br{ display:none; }
  .hero__visual{ margin-top:32px; }
  /* slim the hero dashboard: drop the sidebar & secondary panels,
     keep score + AI + revenue only, and compact the score card */
  .sgx__nav{ display:none; }
  .sgx__find, .sgx__activity{ display:none; }
  .sgx__grid > .sgx__panel:has(.sgx__cwv){ display:none; }
  .sgx__main{ padding:14px 12px 24px; }
  .sgx__grid{ gap:11px; }
  .sgx__feature{ padding:16px; gap:10px; }
  .sgx__feature .sgx__gauge{ width:116px; height:116px; margin:2px 0; }
  .sgx__feature .sgx__grade{ font-size:32px; }
  .sgx__feature-meta div{ padding:9px 11px; }
  .sgx__scan{ margin:12px 0 12px; }
  .hero__trust{ gap:7px; }
  .trust-chip{ padding:6px 11px; font-size:12.5px; }
  .section{ padding:56px 0; }
  .section__head{ margin-bottom:38px; }
  .mcwv{ gap:8px; }
  .mcwv .m{ padding:10px 11px; }
  .mcwv .m b{ font-size:15px; }
  .mgauge{ width:146px; height:146px; }
  .mgauge b{ font-size:42px; }
  .mrev__num{ font-size:38px; }
  .fx__cell{ padding:24px 20px; }
  .fx__frag{ height:auto; min-height:84px; }
}

/* ===== SIGNUP BUTTON LOADING STATE ===== */
.signup__btn.is-loading{ opacity:.65; pointer-events:none; }
/* honeypot: invisible to humans, tempting to bots */
.signup__hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ===== BETA PRICING: billing toggle, strikethrough, credits note ===== */
.plans__toggle{ display:flex; justify-content:center; margin:4px 0 34px; }
.toggle{
  display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04);
}
.toggle__btn{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font);
  font-size:13.5px; font-weight:600; color:var(--muted); padding:8px 17px;
  border-radius:999px; border:none; background:transparent; cursor:pointer; transition:.22s;
}
.toggle__btn em{
  font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.02em; color:#8ee6a8;
  background:rgba(55,214,122,.12); border:1px solid rgba(55,214,122,.3); padding:2px 8px; border-radius:999px;
}
.toggle__btn:hover{ color:var(--text); }
.toggle__btn.is-active{ color:#fff; background:linear-gradient(180deg,#8b79ec,#7a67e0); box-shadow:0 6px 18px rgba(122,103,224,.3); }
.toggle__btn.is-active em{ color:#a5f2bd; background:rgba(16,46,28,.6); border-color:rgba(55,214,122,.55); }

.plan__price .was{
  font-size:17px; font-weight:600; color:var(--muted-2);
  text-decoration:line-through; margin-right:9px;
}
.plan__beta{
  display:inline-flex; width:fit-content; margin:14px 0 4px; font-size:11px; font-weight:700;
  letter-spacing:.02em; color:#a99df0; background:rgba(122,103,224,.12);
  border:1px solid rgba(122,103,224,.35); padding:4px 10px; border-radius:999px;
}
.credits-note{ margin-top:20px; text-align:center; color:var(--muted); font-size:13.5px; }
.credits-note b{ color:var(--text); }
.credits-note a{ color:var(--accent); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(122,103,224,.4); }
.credits-note a:hover{ border-bottom-color:var(--accent); }

/* ===== PLAN PICKER MODAL ===== */
.planmodal{ position:fixed; inset:0; z-index:200; display:none; }
.planmodal.is-open{ display:block; }
.planmodal__overlay{ position:absolute; inset:0; background:rgba(4,4,6,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.planmodal__dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(100% - 32px); max-width:900px; max-height:calc(100vh - 40px); overflow-y:auto;
  background:var(--bg-soft); border:1px solid var(--line-2); border-radius:var(--radius);
  box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(122,103,224,.14);
  padding:36px 36px 30px;
}
.planmodal.is-open .planmodal__dialog{ animation:planpop .34s cubic-bezier(.16,1,.3,1); }
@keyframes planpop{ from{ opacity:0; transform:translate(-50%,-46%) scale(.97); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
.planmodal__close{
  position:absolute; top:18px; right:18px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:.2s;
}
.planmodal__close svg{ width:17px; height:17px; }
.planmodal__close:hover{ color:var(--text); background:rgba(255,255,255,.08); }
.planmodal__head{ text-align:center; max-width:560px; margin:0 auto; }
.planmodal__head h2{ font-size:clamp(24px,3.4vw,32px); line-height:1.1; font-weight:500; letter-spacing:-.03em; margin-top:6px; }
.planmodal__sub{ color:var(--muted); font-size:14.5px; line-height:1.6; margin-top:12px; }
.planmodal__sub b{ color:var(--text); font-weight:600; }
.planmodal__toggle{ display:flex; justify-content:center; margin:20px 0 4px; }
.planmodal__tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }
.ptier{
  position:relative; text-align:left; display:flex; flex-direction:column; gap:6px; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:20px 18px 18px; font:inherit; color:var(--text); transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ptier:hover{ border-color:rgba(122,103,224,.5); }
.ptier--popular{ border-color:rgba(122,103,224,.4); }
.ptier.is-selected{ border-color:#7a67e0; box-shadow:0 0 0 1px #7a67e0, 0 16px 40px rgba(122,103,224,.2); background:rgba(122,103,224,.06); }
.ptier__check{ position:absolute; top:14px; right:14px; width:20px; height:20px; border-radius:50%; border:2px solid var(--line-2); transition:.18s; }
.ptier__check::after{ content:""; position:absolute; left:5px; top:2px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); opacity:0; transition:.15s; }
.ptier.is-selected .ptier__check{ border-color:#7a67e0; background:#7a67e0; }
.ptier.is-selected .ptier__check::after{ opacity:1; }
.ptier__badge{
  position:absolute; top:-10px; left:18px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; background:linear-gradient(180deg,#8b79ec,#7a67e0); padding:3px 9px; border-radius:999px;
}
.ptier__name{ font-size:15px; font-weight:700; padding-right:26px; }
.ptier__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin:2px 0 2px; }
.ptier__price b{ font-family:var(--font-display); font-size:30px; font-weight:600; letter-spacing:-.03em; }
.ptier__price s{ color:var(--muted-2); font-size:14px; }
.ptier__price em{ font-style:normal; color:var(--muted); font-size:12.5px; }
.ptier__desc{ color:var(--muted); font-size:12.5px; line-height:1.5; flex:1; }

.planmodal__form{ margin-top:22px; }
.planmodal__row{ display:flex; gap:10px; }
.planmodal__email{
  flex:1; min-width:0; background:var(--card); border:1px solid var(--line-2); border-radius:12px;
  padding:14px 16px; color:var(--text); font:inherit; font-size:15px; transition:border-color .2s ease;
}
.planmodal__email::placeholder{ color:var(--muted-2); }
.planmodal__email:focus{ outline:none; border-color:rgba(122,103,224,.6); }
.planmodal__submit{ flex:none; }
.planmodal__submit.is-loading{ opacity:.65; pointer-events:none; }
.planmodal__captcha{ display:flex; justify-content:center; margin-top:14px; min-height:0; }
.planmodal__captcha:empty{ margin-top:0; }
.planmodal__msg{ text-align:center; min-height:0; margin-top:12px; font-size:13.5px; }
.planmodal__msg.is-err{ color:#ff8a8a; }
.planmodal__msg.is-ok{ color:#8ee6a8; }

.planmodal__done{ text-align:center; padding:26px 10px 12px; max-width:440px; margin:0 auto; }
.planmodal__done-ico{
  display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%;
  color:#8ee6a8; background:rgba(55,214,122,.1); border:1px solid rgba(55,214,122,.32); margin-bottom:18px;
}
.planmodal__done-ico svg{ width:30px; height:30px; }
.planmodal__done h2{ font-size:26px; font-weight:500; letter-spacing:-.03em; }
.planmodal__done p{ color:var(--muted); font-size:14.5px; line-height:1.6; margin:12px auto 22px; }
body.modal-open{ overflow:hidden; }
@media (max-width:720px){
  .planmodal__dialog{ padding:30px 20px 24px; }
  .planmodal__tiers{ grid-template-columns:1fr; gap:10px; }
  .ptier{ flex-direction:row; flex-wrap:wrap; align-items:center; padding:16px 16px; }
  .ptier__check{ position:static; order:5; margin-left:auto; }
  .ptier__name{ width:64px; padding-right:0; }
  .ptier__price{ margin:0; }
  .ptier__price b{ font-size:24px; }
  .ptier__desc{ flex-basis:100%; order:6; }
  .ptier__badge{ top:-8px; }
  .planmodal__row{ flex-direction:column; }
  .planmodal__submit{ width:100%; justify-content:center; }
}