/* ════════════════════════════════════════════════════════════════════════
   OptiLink — "Future" design layer for the landing page.
   Load AFTER style.css and landing.css. Pure presentation: no content,
   markup hooks or behaviour of the page are changed by this file.
   Light with a white first screen is the default; the theme button switches to the dark "link-space" variant.
   ════════════════════════════════════════════════════════════════════════ */
@property --fx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

html { background: #f6f6ff; scroll-padding-top: 96px; }
:root[data-theme=dark] { background: #04031a; }

body.landing {
  --f-bg: #04031a;
  --f-card: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  --f-panel: rgba(13,10,52,.72);
  --f-in: rgba(255,255,255,.07);
  --f-hi: rgba(255,255,255,.09);
  --f-line: rgba(160,150,255,.18);
  --f-line-2: rgba(160,150,255,.34);
  --f-text: #f3f2ff;
  --f-text-2: rgba(233,231,255,.76);
  --f-mute: rgba(233,231,255,.54);
  --f-spot: rgba(138,92,255,.24);
  --f-shadow: 0 40px 80px -45px rgba(0,0,0,.9);
  --f-grad: linear-gradient(100deg, #3bf0b0 0%, #4fd8ff 36%, #8a7bff 70%, #c58bff 100%);
  --f-ease: cubic-bezier(.2,.8,.2,1);
  /* site tokens, re-tuned so every existing component (results, badges, tables) fits */
  --paper: #04031a; --surface: #0f0c3a; --cloud: transparent;
  --ink: #f3f2ff; --ink-2: rgba(233,231,255,.78); --muted: rgba(233,231,255,.56);
  --line: rgba(160,150,255,.16); --line-2: rgba(160,150,255,.3); --info-soft: rgba(138,92,255,.17);
  --live: #3bf0b0; --live-soft: rgba(59,240,176,.13); --warn: #ffc46b; --warn-soft: rgba(255,196,107,.13);
  --bad: #ff8a80; --bad-soft: rgba(255,138,128,.13);
  --btn: #f3f2ff; --btn-ink: #0b0835; --blue: #8379ff; --deep: #0b0835; --navy-ink: #0b0835;
  background: transparent; color: var(--f-text); overflow-x: clip; color-scheme: dark;
}
:root:not([data-theme=dark]) body.landing {
  --f-bg: #f6f6ff;
  --f-card: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.62));
  --f-panel: rgba(255,255,255,.86);
  --f-in: rgba(43,28,245,.06);
  --f-hi: rgba(255,255,255,.9);
  --f-line: rgba(43,28,245,.14);
  --f-line-2: rgba(43,28,245,.3);
  --f-text: #0f0a3d; --f-text-2: #3a3f6b; --f-mute: #5d6483;
  --f-spot: rgba(43,28,245,.1);
  --f-shadow: 0 40px 80px -50px rgba(43,28,245,.55);
  --f-grad: linear-gradient(100deg, #06a878 0%, #1f8cff 36%, #4a2cf5 70%, #9b4dff 100%);
  --paper: #f6f6ff; --surface: #ffffff; --ink: #0f0a3d; --ink-2: #3a3f6b; --muted: #5d6483;
  --line: #dcd9f5; --line-2: #c9c5ee; --info-soft: #e8e6fb;
  --live: #0e9f74; --live-soft: #def5ec; --warn: #a76300; --warn-soft: #fff1dc; --bad: #c2352b; --bad-soft: #fde9e7;
  --btn: #0f0a3d; --btn-ink: #fff; --blue: #2b1cf5; --deep: #120b6b; --navy-ink: #0f0a3d;
  color-scheme: light;
}
/* sections that are always "night", also in the light variant */
:root:not([data-theme=dark]) body.landing :is(.finder-sec, .ap-sec, .checker-sec, .final) {
  --f-card: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); --f-panel: rgba(13,10,52,.72);
  --f-in: rgba(255,255,255,.09); --f-hi: rgba(255,255,255,.09); --f-line: rgba(160,150,255,.2); --f-line-2: rgba(160,150,255,.36);
  --f-text: #f3f2ff; --f-text-2: rgba(233,231,255,.78); --f-mute: rgba(233,231,255,.56);
  --f-grad: linear-gradient(100deg, #3bf0b0 0%, #4fd8ff 36%, #a99bff 70%, #d6a8ff 100%);
  background: radial-gradient(900px 600px at 85% 10%, rgba(138,92,255,.5), transparent 60%), linear-gradient(160deg, #2414d6, #0b0835 72%);
}
body.landing ::selection { background: #3bf0b0; color: #0b0835; }

/* ── Fixed atmosphere (elements are created by future.js) ── */
.fx-net, .fx-aurora, .fx-cursor { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.fx-net { width: 100%; height: 100%; }
.fx-aurora { overflow: hidden; }
.fx-aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.fx-aurora i:nth-child(1) { width: 52vw; height: 52vw; left: 58%; top: -22%; background: #3a22ff; animation: fxDrift1 26s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(2) { width: 40vw; height: 40vw; left: -14%; top: 34%; background: #0c8f8a; opacity: .32; animation: fxDrift2 32s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(3) { width: 36vw; height: 36vw; left: 46%; top: 62%; background: #7a2cff; opacity: .3; animation: fxDrift1 38s ease-in-out infinite alternate-reverse; }
:root:not([data-theme=dark]) .fx-aurora i { opacity: .2; }
@keyframes fxDrift1 { to { transform: translate3d(-14vw, 12vh, 0) scale(1.18); } }
@keyframes fxDrift2 { to { transform: translate3d(16vw, -14vh, 0) scale(.86); } }
.fx-cursor { inset: auto; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; opacity: 0; transition: opacity .6s;
  background: radial-gradient(closest-side, rgba(96,120,255,.2), rgba(59,240,176,.06) 45%, transparent 70%); will-change: transform; }
.fx-progress { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--f-grad, linear-gradient(90deg,#3bf0b0,#8a7bff)); box-shadow: 0 0 14px rgba(59,240,176,.7); pointer-events: none; }

/* ── Layout rhythm ── */
body.landing .wrap { max-width: 1240px; padding: 0 22px; }
body.landing .wrap.narrow { max-width: 840px; }
body.landing section { padding: 112px 0; background: transparent; }
body.landing main { counter-reset: sec; }
body.landing main > section { counter-increment: sec; }
body.landing p, body.landing li, body.landing dd { text-wrap: pretty; }

/* ── Headlines: second line is living gradient ink ── */
body.landing h1, body.landing h2 { color: var(--f-text); text-wrap: balance; }
body.landing h2.linked { font-size: clamp(2rem, 4.3vw, 3.5rem); line-height: 1.08; max-width: 17em; margin-bottom: 26px; }
body.landing section h2.linked::before { content: counter(sec, decimal-leading-zero) '  ／  ' ; display: block; font: 700 .74rem var(--disp); letter-spacing: .34em; margin-bottom: 20px; color: var(--f-mute); }
body.landing .linked span { background-image: none; padding-bottom: .08em; }
body.landing .linked span:nth-child(2), body.landing .guarantee h2 {
  background-image: var(--f-grad); background-size: 220% 100%; background-position: 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
  transition: none; animation: fxInk 8s ease-in-out infinite alternate; }
@keyframes fxInk { to { background-position: 100% 0; } }
body.landing .eyebrow { color: #3bf0b0; letter-spacing: .26em; font-family: var(--disp); font-size: .72rem; }
:root:not([data-theme=dark]) body.landing section:not(.finder-sec) .eyebrow { color: var(--blue); }
body.landing .muted { color: var(--f-mute); }

/* ── Buttons ── */
body.landing .btn { position: relative; overflow: hidden; background: var(--f-in); color: var(--f-text); border: 1px solid var(--f-line-2); font-weight: 700;
  transition: transform .25s var(--f-ease), box-shadow .3s, background .3s, border-color .3s; }
body.landing .btn:hover { border-color: #3bf0b0; box-shadow: 0 0 0 4px rgba(59,240,176,.12); }
html body.landing .btn.go { background: linear-gradient(100deg, #3bf0b0, #62e0ff 60%, #9d8cff 130%) !important; color: #06042a !important; border-color: transparent !important; font-weight: 800;
  box-shadow: 0 10px 34px -10px rgba(59,240,176,.7), inset 0 1px 0 rgba(255,255,255,.55); }
html body.landing .btn.go:hover { box-shadow: 0 16px 44px -8px rgba(59,240,176,.9), 0 0 0 5px rgba(59,240,176,.16), inset 0 1px 0 rgba(255,255,255,.6); }
body.landing .btn.go::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform: translateX(-120%); animation: fxSweep 4.5s var(--f-ease) infinite; pointer-events: none; }
@keyframes fxSweep { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
html body.landing .plan.trial .btn.go { background: transparent !important; color: var(--f-text) !important; border-color: var(--f-line-2) !important; box-shadow: none; }
html body.landing .plan.trial .btn.go::after { display: none; }
body.landing .btn.big { padding: 15px 28px; }

/* ── Top bar: a floating glass capsule ── */
body.landing .top { top: 12px; margin: 12px auto 0; width: min(1420px, calc(100% - 24px)); border-radius: 22px; z-index: 50;
  background: rgba(9,7,42,.58); border: 1px solid rgba(160,150,255,.22); color: #fff;
  -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1); transition: background .4s, box-shadow .4s, border-color .4s; }
body.landing .top.fx-scrolled { background: rgba(7,5,34,.84); border-color: rgba(59,240,176,.3); box-shadow: 0 24px 60px -24px rgba(0,0,0,.95), 0 0 40px -18px rgba(59,240,176,.6), inset 0 1px 0 rgba(255,255,255,.1); }
body.landing .top .wrap { max-width: none; padding: 0 18px; min-height: 60px; gap: 10px; }
body.landing .top .logo { font-size: 1.05rem; }
body.landing .top .logo img { filter: drop-shadow(0 0 10px rgba(59,240,176,.55)); }
body.landing .top nav a { color: rgba(255,255,255,.76); font-size: .93rem; white-space: nowrap; position: relative; transition: color .25s, background .25s; }
body.landing .top nav a:hover, body.landing .top nav a.active { color: #fff; background: rgba(255,255,255,.09); box-shadow: none; }
body.landing .top nav a.active::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #3bf0b0, #8a7bff); box-shadow: 0 0 10px #3bf0b0; }
body.landing .top .theme-btn, body.landing .status-pill > button { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #fff; }
body.landing .top .btn.ghost { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
body.landing .status-pop { color: var(--ink); }
@media (min-width: 1400px) { body.landing .top .wrap { flex-wrap: nowrap; } }
@media (max-width: 860px) {
  body.landing .top.menu-open nav { background: rgba(9,7,42,.97); border: 1px solid rgba(160,150,255,.22); border-radius: 18px; margin-top: 8px; }
  body.landing .top.menu-open nav a { color: #fff !important; }
  body.landing .nav-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
  body.landing .nav-toggle span { background: #fff; }
  body.landing .top.menu-open .nav-extra a:last-child { background: #3bf0b0; color: #06042a !important; }
}

/* ── Hero ── */
body.landing .hero { background: transparent; color: var(--f-text); padding: 84px 0 0 !important; }
body.landing .hero::before { background: radial-gradient(760px 620px at 76% 44%, rgba(98,74,255,.5), transparent 62%), radial-gradient(520px 380px at 12% 8%, rgba(59,240,176,.12), transparent 70%); }
body.landing .hero::after { content: ''; position: absolute; left: -25%; right: -25%; bottom: 0; height: 58%; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(140,130,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(140,130,255,.35) 1px, transparent 1px); background-size: 72px 72px;
  transform: perspective(620px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(transparent 4%, #000 55%, transparent 98%); mask-image: linear-gradient(transparent 4%, #000 55%, transparent 98%);
  animation: fxFloor 5s linear infinite; }
@keyframes fxFloor { to { background-position: 0 72px, 0 0; } }
body.landing .hero-grid, body.landing .proofbar { z-index: 1; }
@media (min-width: 1060px) { body.landing .hero-grid { min-height: 680px; grid-template-columns: 1.02fr 1fr; } }
body.landing .hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.9rem); line-height: 1.04; letter-spacing: -.045em; margin: 22px 0 26px; text-shadow: 0 0 80px rgba(120,100,255,.55); }
body.landing .hero h1 span:nth-child(2) { text-shadow: none; filter: drop-shadow(0 0 28px rgba(59,240,176,.35)); }
body.landing .hero .lead { color: var(--f-text-2); font-size: 1.2rem; line-height: 1.6; }
body.landing .hero .lead strong { color: #3bf0b0; }
body.landing .pill-note { background: var(--f-in); border-color: rgba(59,240,176,.4); padding: 7px 15px; letter-spacing: .02em; box-shadow: 0 0 30px -8px rgba(59,240,176,.6), inset 0 1px 0 rgba(255,255,255,.12); }

/* glass command bars (hero launch, finder, checker) with an orbiting light on the rim */
body.landing :is(.launch, .finder, .checker) { position: relative; padding: 9px; border-radius: 22px; background: var(--f-panel); border: 1px solid var(--f-line-2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 70px -35px rgba(0,0,0,.9), 0 0 60px -30px rgba(98,74,255,.9); }
body.landing :is(.launch, .finder, .checker, .plan.highlight, .ap-panel)::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--fx-a), transparent 0 52%, #3bf0b0 68%, #7c6bff 84%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: fxOrbit 6s linear infinite; }
@keyframes fxOrbit { to { --fx-a: 360deg; } }
body.landing :is(.launch, .finder, .checker) input { background: var(--f-in); color: var(--f-text); border: 1px solid transparent; border-radius: 14px; transition: background .25s, border-color .25s, box-shadow .25s; }
body.landing :is(.launch, .finder, .checker) input::placeholder { color: var(--f-mute); }
body.landing :is(.launch, .finder, .checker) input:focus { outline: 0; background: rgba(255,255,255,.12); border-color: #3bf0b0; box-shadow: 0 0 0 4px rgba(59,240,176,.16); }
body.landing .hero-facts { color: var(--f-text-2); gap: 10px 12px; margin-top: 22px; }
body.landing .hero-facts li { padding: 6px 13px; border-radius: 999px; background: var(--f-in); border: 1px solid var(--f-line); }

body.landing .globe-wrap::before { content: ''; position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(98,74,255,.5), rgba(59,240,176,.07) 58%, transparent 72%); animation: fxBreathe 7s ease-in-out infinite; }
body.landing .globe-wrap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 104%; aspect-ratio: 1; margin: -52% 0 0 -52%; border-radius: 50%; pointer-events: none;
  border: 1px dashed rgba(160,150,255,.34); box-shadow: inset 0 0 0 46px rgba(160,150,255,.03), 0 0 0 46px rgba(160,150,255,.03); animation: fxTurn 70s linear infinite; }
@keyframes fxBreathe { 50% { transform: translate(-50%, -50%) scale(1.07); opacity: .8; } }
@keyframes fxTurn { to { transform: rotate(360deg); } }
body.landing #globe { z-index: 1; filter: drop-shadow(0 0 40px rgba(98,74,255,.55)); }
body.landing .console { z-index: 2; color: #fff; background: rgba(8,6,38,.74); border-color: rgba(59,240,176,.32); border-radius: 22px; padding: 16px 18px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.95), 0 0 60px -22px rgba(59,240,176,.55), inset 0 1px 0 rgba(255,255,255,.1); animation: fxFloat 8s ease-in-out infinite; }
@keyframes fxFloat { 50% { transform: translateY(-10px); } }
body.landing #cLog li { padding: 5px 8px; margin: 0 -8px; border-radius: 9px; }
body.landing #cLog li:first-child { background: rgba(59,240,176,.09); }
body.landing #cLog li em { font-variant-numeric: tabular-nums; }

body.landing .proofbar { margin-top: 56px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border-top: 1px solid var(--f-line); border-bottom: 1px solid var(--f-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.landing .proof-row { color: var(--f-mute); padding-top: 26px; padding-bottom: 26px; gap: 18px 26px; }
body.landing .proof-row > span { padding-left: 16px; border-left: 2px solid transparent; border-image: linear-gradient(180deg, #3bf0b0, rgba(124,107,255,.2)) 1; transition: transform .35s var(--f-ease); }
body.landing .proof-row > span:hover { transform: translateY(-3px); }
body.landing .proof-row a { color: inherit; }
body.landing .proof-row b { color: var(--f-text); font-family: var(--disp); font-weight: 700; font-size: .92rem; margin-bottom: 3px; }

/* ── Glass cards (shared) ── */
body.landing :is(.kind, .plan, .trust-grid > div, .feat > div, .quote, .founder, .guarantee, .custom-plan, .mention-card, .eng-card, .shot, .three-steps li, .faq-sec details, .proof-stats .stat, .fo-box, .result) {
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, -60%), var(--f-spot), transparent 62%), var(--f-card);
  border: 1px solid var(--f-line); border-radius: 24px; color: var(--f-text);
  box-shadow: var(--f-shadow), inset 0 1px 0 var(--f-hi);
  transition: transform .45s var(--f-ease), border-color .35s, box-shadow .45s; }
body.landing :is(.kind, .plan, .trust-grid > div, .feat > div, .quote, .three-steps li, .proof-stats .stat):hover { border-color: rgba(59,240,176,.5); box-shadow: var(--f-shadow), 0 0 50px -24px rgba(124,107,255,.9), inset 0 1px 0 var(--f-hi); }
body.landing :is(.fo-box, .result) { background: var(--surface); }

/* ── Finder + checker bands ── */
body.landing :is(.finder-sec, .checker-sec) { color: var(--f-text); }
body.landing :is(.finder-sec, .checker-sec)::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 320px at 20% 50%, rgba(98,74,255,.3), transparent 70%), linear-gradient(180deg, transparent, rgba(255,255,255,.025) 20%, rgba(255,255,255,.025) 80%, transparent);
  border-top: 1px solid var(--f-line); border-bottom: 1px solid var(--f-line); }
body.landing :is(.finder-sec, .checker-sec) .wrap { position: relative; }
body.landing .finder-intro, body.landing .checker-intro { color: var(--f-text-2) !important; }
body.landing .finder-foot { color: var(--f-mute) !important; }
body.landing .fo-item { background: var(--f-in); border-color: var(--f-line); }
body.landing .fo-score, body.landing .score-ring { box-shadow: 0 0 24px -4px rgba(124,107,255,.9); }
body.landing .scan-steps { background: var(--f-panel); border: 1px solid var(--f-line); }

/* ── See inside ── */
body.landing .three-steps { gap: 16px; margin-bottom: 44px; }
body.landing .three-steps li { padding: 20px; }
body.landing .three-steps b { width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(140deg, #3bf0b0, #6f63ff); color: #06042a; box-shadow: 0 10px 30px -8px rgba(59,240,176,.7); }
body.landing :is(.shot-tabs, .eng-tabs) button { background: var(--f-in); border: 1px solid var(--f-line); color: var(--f-text-2); transition: all .3s var(--f-ease); }
body.landing :is(.shot-tabs, .eng-tabs) button:hover { border-color: var(--f-line-2); color: var(--f-text); transform: translateY(-2px); }
body.landing :is(.shot-tabs, .eng-tabs) button[aria-selected=true] { background: linear-gradient(100deg, #5b4dff, #8a5cff); border-color: transparent; color: #fff; box-shadow: 0 10px 30px -10px rgba(124,107,255,.95); }
body.landing .shot-tabs { position: relative; z-index: 3; }
body.landing .shot { position: relative; border-radius: 22px; padding-top: 38px; transform-origin: 50% 0; transform: perspective(1800px) rotateX(calc(var(--fx-t, 0) * 1deg)) scale(calc(1 - var(--fx-t, 0) * .006));
  box-shadow: 0 80px 120px -60px rgba(74,58,255,.85), 0 0 0 1px var(--f-line), inset 0 1px 0 var(--f-hi); transition: transform .2s linear; }
body.landing .shot::before { content: ''; position: absolute; left: 18px; top: 14px; width: 11px; height: 11px; border-radius: 50%; background: #ff6b6b; box-shadow: 18px 0 0 #ffc46b, 36px 0 0 #3bf0b0; }
body.landing .shot::after { content: 'optilinkai.com/app'; position: absolute; left: 50%; top: 9px; transform: translateX(-50%); font: 600 .74rem var(--body); color: var(--f-mute); padding: 3px 44px; border-radius: 999px; background: var(--f-in); border: 1px solid var(--f-line); }
body.landing .shot figcaption { color: var(--f-text-2); border-top-color: var(--f-line); }

/* ── Link kinds ── */
body.landing .kinds-sec { padding: 112px 0; }
body.landing .kinds { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
@media (min-width: 980px) { body.landing .kinds { grid-template-columns: repeat(3, 1fr); } }
body.landing .kind { padding: 28px 24px 24px; overflow: hidden; }
body.landing .kind .k-ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; font-size: 1.65rem; background: linear-gradient(150deg, rgba(124,107,255,.4), rgba(59,240,176,.14)); border: 1px solid var(--f-line-2); box-shadow: 0 14px 34px -14px rgba(124,107,255,.95), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .5s var(--f-ease); }
body.landing .kind:hover .k-ic { transform: translateY(-4px) rotate(-6deg) scale(1.08); }
body.landing .kind h3 { font-size: 1.22rem; margin-top: 18px; }
body.landing .kind p { color: var(--f-text-2); }
body.landing .kind li::before, body.landing .mention-list li::before, body.landing .plan li::before { color: #3bf0b0; }
:root:not([data-theme=dark]) body.landing :is(.kind, .mention-list, .plan) li::before { color: var(--live); }
body.landing .kind .k-tag { background: var(--f-in); color: var(--f-text-2); border: 1px solid var(--f-line); letter-spacing: .1em; }
body.landing .kind.hl { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, -60%), rgba(59,240,176,.2), transparent 62%), linear-gradient(150deg, rgba(98,74,255,.6), rgba(30,20,120,.5) 60%, rgba(59,240,176,.16)); border-color: rgba(124,107,255,.55); color: #fff; }
body.landing .kind.hl p { color: rgba(255,255,255,.82); }
body.landing .kind.hl .k-tag { color: #3bf0b0; border-color: rgba(59,240,176,.4); background: rgba(59,240,176,.1); }
body.landing .kind.hl li::before { color: #3bf0b0; }

/* ── Brand mentions ── */
body.landing .mention-sec { padding: 112px 0; }
body.landing .mention-sec .lead-s { color: var(--f-text); font-size: 1.2rem; }
body.landing .mention-card { padding: 26px; transform: rotate(-1.5deg); animation: fxHover 9s ease-in-out infinite; box-shadow: 0 60px 110px -50px rgba(74,58,255,.9), 0 0 0 1px var(--f-line), inset 0 1px 0 var(--f-hi); }
@keyframes fxHover { 50% { transform: rotate(.6deg) translateY(-14px); } }
body.landing .mc-article { border-bottom-color: var(--f-line-2); }
body.landing .mc-who .avatar, body.landing .eng-who .avatar { background: linear-gradient(140deg, #3bf0b0, #6f63ff); color: #06042a; }
body.landing .mc-reply mark { background: linear-gradient(100deg, rgba(59,240,176,.55), rgba(124,107,255,.55)); color: var(--f-text); padding: 1px 7px; border-radius: 7px; box-shadow: 0 0 22px -4px rgba(59,240,176,.8); }
body.landing .mc-stats span { background: rgba(59,240,176,.1); color: #3bf0b0; border: 1px solid rgba(59,240,176,.3); }
:root:not([data-theme=dark]) body.landing .mc-stats span { color: var(--live); }

/* ── Autopilot ── */
body.landing .ap-sec { background: transparent; color: var(--f-text); }
body.landing .ap-sec::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(760px 520px at 78% 50%, rgba(59,240,176,.14), transparent 65%), radial-gradient(600px 500px at 70% 60%, rgba(98,74,255,.35), transparent 70%); }
body.landing .ap-sec p { color: var(--f-text-2); }
body.landing .ap-sec .muted { color: var(--f-mute) !important; }
body.landing .ap-panel { position: relative; background: var(--f-panel); color: var(--f-text); border-radius: 28px; padding: 30px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 60px 120px -50px rgba(0,0,0,.95), 0 0 90px -40px rgba(59,240,176,.6), inset 0 1px 0 rgba(255,255,255,.1); }
body.landing .ap-row { border-bottom-color: var(--f-line); }
body.landing .ap-row label b { color: #3bf0b0; font-size: 1.1rem; }
body.landing .ap-panel input[type=range] { height: 8px; background: linear-gradient(90deg, #3bf0b0, #7c6bff var(--f, 50%), rgba(255,255,255,.12) 0); box-shadow: 0 0 18px -4px rgba(59,240,176,.6); }
body.landing .ap-panel input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; background: #fff; border: 0; box-shadow: 0 0 0 5px rgba(124,107,255,.35), 0 0 22px rgba(124,107,255,.95); transition: transform .2s; }
body.landing .ap-panel input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.18); }
body.landing .ap-panel input[type=range]::-moz-range-thumb { background: #fff; border: 0; box-shadow: 0 0 0 5px rgba(124,107,255,.35), 0 0 22px rgba(124,107,255,.95); }
body.landing .switch span { background: rgba(255,255,255,.16); }
body.landing .switch input:checked + span { background: linear-gradient(100deg, #12b886, #3bf0b0); box-shadow: 0 0 26px -2px rgba(59,240,176,.85); }
body.landing .tl-head { color: var(--f-mute); }
body.landing .tl-head span:nth-child(2) { color: var(--f-text); }
body.landing .tl { height: 62px; border-radius: 14px; border: 1px solid var(--f-line); background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 calc(100%/24 - 1px), rgba(160,150,255,.2) calc(100%/24 - 1px) calc(100%/24)); }
body.landing .tl i.pt { background: #8f85ff; box-shadow: 0 0 10px #8f85ff; }
body.landing .tl i.pt.df { background: #3bf0b0; box-shadow: 0 0 12px #3bf0b0; }
body.landing .tl i.pt.done { box-shadow: 0 0 0 4px rgba(124,107,255,.22), 0 0 12px #8f85ff; }
body.landing .tl i.now { background: #fff; box-shadow: 0 0 14px #fff; }
body.landing .ap-foot { color: var(--f-mute) !important; }
body.landing .ap-foot b { color: #3bf0b0; }

/* ── Pipeline ── */
body.landing .pipe { margin-top: 54px; }
body.landing .pipe::before { background: var(--f-line); height: 2px; top: 26px; }
body.landing .pipe::after { background: linear-gradient(90deg, #3bf0b0, #7c6bff); height: 2px; top: 26px; box-shadow: 0 0 18px #3bf0b0, 0 0 4px #fff; }
body.landing .pipe li { padding-top: 78px; }
body.landing .pipe li::before { width: 54px; height: 54px; border-radius: 18px; background: var(--f-panel); border: 1px solid var(--f-line-2); color: var(--f-mute); transition: all .5s var(--f-ease); }
body.landing .pipe li.lit::before { background: linear-gradient(140deg, #3bf0b0, #6f63ff); border-color: transparent; color: #06042a; transform: rotate(-6deg) scale(1.08); box-shadow: 0 0 0 7px rgba(59,240,176,.12), 0 14px 40px -8px rgba(59,240,176,.85); }
body.landing .pipe h3 { font-family: var(--disp); font-size: 1.12rem; transition: color .4s; }
body.landing .pipe li.lit h3 { color: #3bf0b0; }
:root:not([data-theme=dark]) body.landing .pipe li.lit h3 { color: var(--blue); }
body.landing .pipe p { color: var(--f-text-2); }
@media (max-width: 760px) { body.landing .pipe::before, body.landing .pipe::after { top: 0; left: 26px; width: 2px; } body.landing .pipe li { padding: 8px 0 0 76px; min-height: 54px; } }

/* ── AI engines ── */
body.landing .eng-card { border-radius: 26px; box-shadow: 0 70px 120px -55px rgba(74,58,255,.95), 0 0 0 1px var(--f-line), inset 0 1px 0 var(--f-hi); }
body.landing .eng-article { background: linear-gradient(120deg, #3a2bff, #8a5cff 60%, #3bd6c0 140%); background-size: 180% 100%; animation: fxInk 9s ease-in-out infinite alternate; }
body.landing #engBadge { background: rgba(59,240,176,.14); color: #3bf0b0; border: 1px solid rgba(59,240,176,.4); }
:root:not([data-theme=dark]) body.landing #engBadge { color: var(--live); }
body.landing #engText { color: var(--f-text); }

/* ── Feature bento ── */
body.landing .feat { border-top: 0; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 40px; }
body.landing .feat > div { padding: 24px; border-radius: 20px; }
body.landing .feat dt { font-size: 1.08rem; margin-bottom: 8px; }
body.landing .feat dt::before { width: 9px; height: 9px; background: #3bf0b0; box-shadow: 0 0 0 4px rgba(59,240,176,.16), 0 0 14px #3bf0b0; margin-right: 12px; }
body.landing .feat dd { color: var(--f-text-2); }

/* ── Compare ── */
body.landing .compare { border-radius: 24px; border: 1px solid var(--f-line); box-shadow: var(--f-shadow); background: var(--f-card); }
body.landing .compare table { background: transparent; border-radius: 0; }
body.landing .compare :is(th, td) { padding: 17px 18px; border-bottom-color: var(--f-line); color: var(--f-text-2); transition: background .25s; }
body.landing .compare th { color: var(--f-text); font-family: var(--disp); font-size: .8rem; letter-spacing: .04em; }
body.landing .compare td:first-child { color: var(--f-text); }
body.landing .compare tbody tr:hover td { background: var(--f-in); }
body.landing .compare tbody tr:last-child td { border-bottom: 0; }
body.landing .compare .us, body.landing .compare tbody tr:hover td.us { background: linear-gradient(180deg, rgba(59,240,176,.13), rgba(59,240,176,.08)); color: var(--f-text); box-shadow: inset 1px 0 0 rgba(59,240,176,.4), inset -1px 0 0 rgba(59,240,176,.4); }
body.landing .compare th.us { background: linear-gradient(100deg, #3bf0b0, #62e0ff); color: #06042a; box-shadow: 0 0 40px -6px rgba(59,240,176,.8); }

/* ── Trust + founder ── */
body.landing .trust-grid { gap: 16px; }
body.landing .trust-grid > div { padding: 26px 24px; border-left: 1px solid var(--f-line); position: relative; overflow: hidden; }
body.landing .trust-grid > div::before { content: ''; position: absolute; left: 24px; top: 0; width: 46px; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #3bf0b0, #7c6bff); box-shadow: 0 0 16px #3bf0b0; transition: width .5s var(--f-ease); }
body.landing .trust-grid > div:hover::before { width: calc(100% - 48px); }
body.landing .trust-grid h3 { font-family: var(--disp); font-size: 1.02rem; margin-bottom: 10px; }
body.landing .trust-grid p, body.landing .founder p, body.landing .guarantee p, body.landing .three-steps p { color: var(--f-text-2); }
body.landing .founder { padding: 28px; max-width: 900px; }
body.landing .founder-mark { position: relative; width: 72px; height: 72px; background: #0b0835; color: #3bf0b0; isolation: isolate; }
body.landing .founder-mark::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; z-index: -1; background: conic-gradient(from var(--fx-a), #3bf0b0, #7c6bff, #c58bff, #3bf0b0); animation: fxOrbit 5s linear infinite; }
body.landing .founder-mark::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #0b0835; z-index: -1; }
body.landing .founder-contact a, body.landing .guarantee a, body.landing .finder-foot a { color: #3bf0b0; text-decoration-color: rgba(59,240,176,.4); }
:root:not([data-theme=dark]) body.landing :is(.founder-contact, .guarantee) a { color: var(--blue); }

/* ── Live numbers ── */
body.landing .proof-sec { padding: 40px 0 !important; }
body.landing .proof-stats { gap: 16px; }
body.landing .proof-stats .stat { padding: 34px 30px; text-align: center; }
body.landing .proof-stats .value { font-size: clamp(2.6rem, 6.4vw, 5rem); background: var(--f-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(98,74,255,.5)); }
body.landing .proof-stats .label { color: var(--f-text-2); font-size: 1rem; letter-spacing: .04em; margin-top: 8px; }
body.landing .proof-note { text-align: center; }

/* ── Guarantee ── */
body.landing .guarantee-sec { padding: 56px 0 0 !important; background: transparent; }
body.landing .guarantee { max-width: none; padding: 34px; border-color: rgba(59,240,176,.45); background: radial-gradient(600px 300px at 0 0, rgba(59,240,176,.16), transparent 70%), var(--f-card); box-shadow: var(--f-shadow), 0 0 80px -40px rgba(59,240,176,.8), inset 0 1px 0 var(--f-hi); }
body.landing .g-badge { color: #3bf0b0; filter: drop-shadow(0 0 16px rgba(59,240,176,.7)); animation: fxFloat 6s ease-in-out infinite; }
body.landing .g-pill a { background: rgba(59,240,176,.1); border: 1px solid rgba(59,240,176,.35); color: var(--f-text); padding: 8px 16px; transition: box-shadow .3s; }
body.landing .g-pill a:hover { box-shadow: 0 0 30px -6px rgba(59,240,176,.8); }

/* ── Pricing ── */
body.landing .plans.three { max-width: none; gap: 18px; }
body.landing .plan { border-radius: 28px; padding: 34px 30px; }
body.landing .plan.trial { border-style: dashed; border-color: var(--f-line-2); }
body.landing .plan.highlight { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, -60%), rgba(59,240,176,.18), transparent 62%), linear-gradient(165deg, rgba(98,74,255,.55), rgba(20,14,90,.72) 55%, rgba(59,240,176,.12)); border-color: transparent; color: #fff;
  box-shadow: 0 60px 120px -50px rgba(74,58,255,1), 0 0 90px -40px rgba(59,240,176,.7), inset 0 1px 0 rgba(255,255,255,.14); }
body.landing .plan.highlight .muted, body.landing .plan.highlight .per { color: rgba(255,255,255,.7); }
body.landing .plan h3 { font-size: 1.2rem; letter-spacing: .01em; }
body.landing .plan .price { font-size: 4.2rem; background: var(--f-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
body.landing .plan.highlight .price { background-image: linear-gradient(100deg, #fff, #3bf0b0); }
body.landing .plan .per { color: var(--f-mute); }
body.landing .plan li { border-bottom-color: var(--f-line); color: var(--f-text-2); }
body.landing .plan.highlight li { color: rgba(255,255,255,.86); border-bottom-color: rgba(255,255,255,.12); }
body.landing .plan li strong { color: var(--f-text); }
body.landing .plan.highlight li strong { color: #fff; }
body.landing .plan .tag { background: linear-gradient(100deg, #3bf0b0, #62e0ff); color: #06042a; padding: 5px 13px; font-weight: 800; box-shadow: 0 8px 26px -6px rgba(59,240,176,.85); }
body.landing .plan .trial-tag { background: var(--f-panel); color: var(--f-text); border: 1px solid var(--f-line-2); box-shadow: none; }
body.landing .trial-note { background: rgba(59,240,176,.1); border: 1px solid rgba(59,240,176,.3); color: var(--f-text); }
body.landing .custom-plan { border: 1px dashed var(--f-line-2); padding: 30px 32px; }
body.landing .cp-tag { background: linear-gradient(100deg, #5b4dff, #8a5cff); color: #fff; }

/* ── FAQ ── */
body.landing .faq-sec details { padding: 0 24px; margin-bottom: 10px; border-radius: 18px; }
body.landing .faq-sec details[open] { border-color: rgba(59,240,176,.4); box-shadow: var(--f-shadow), 0 0 60px -30px rgba(59,240,176,.7), inset 0 1px 0 var(--f-hi); }
body.landing .faq-sec summary { padding: 21px 48px 21px 0; font-size: 1.08rem; transition: color .25s; }
body.landing .faq-sec summary:hover { color: #3bf0b0; }
:root:not([data-theme=dark]) body.landing .faq-sec summary:hover { color: var(--blue); }
body.landing .faq-sec summary::after { content: '+'; right: 0; top: 50%; width: 32px; height: 32px; margin-top: -16px; display: grid; place-items: center; border-radius: 50%; font: 400 1.25rem var(--body); color: var(--f-text); background: var(--f-in); border: 1px solid var(--f-line-2); transition: transform .4s var(--f-ease), background .3s, color .3s; }
body.landing .faq-sec details[open] summary::after { transform: rotate(135deg); background: #3bf0b0; color: #06042a; border-color: transparent; }
body.landing .faq-sec details p { color: var(--f-text-2); margin-bottom: 22px; }
@supports (interpolate-size: allow-keywords) {
  body.landing .faq-sec { interpolate-size: allow-keywords; }
  body.landing .faq-sec details::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size .45s var(--f-ease), opacity .45s, content-visibility .45s allow-discrete; }
  body.landing .faq-sec details[open]::details-content { block-size: auto; opacity: 1; }
}

/* ── Final call ── */
body.landing .final { background: transparent; padding: 150px 0 !important; text-align: center; }
body.landing .final::before { background: radial-gradient(closest-side, rgba(98,74,255,.6), rgba(59,240,176,.1) 55%, transparent 72%); inset: auto; left: 50%; top: 50%; width: min(1100px, 120vw); aspect-ratio: 1.5; transform: translate(-50%, -50%); animation: fxBreathe 8s ease-in-out infinite; }
body.landing .final::after { content: ''; position: absolute; left: 50%; top: 50%; width: min(820px, 92vw); aspect-ratio: 1; margin: calc(min(820px, 92vw) / -2) 0 0 calc(min(820px, 92vw) / -2); border-radius: 50%; border: 1px dashed rgba(160,150,255,.3); box-shadow: 0 0 0 70px rgba(160,150,255,.03), 0 0 0 150px rgba(160,150,255,.02); animation: fxTurn 90s linear infinite; pointer-events: none; }
body.landing .final .wrap { z-index: 1; }
body.landing .final h2.linked { font-size: clamp(2.3rem, 6.4vw, 5.4rem); line-height: 1.03; letter-spacing: -.045em; margin: 0 auto 38px; max-width: 14em; }
body.landing .final h2.linked::before { display: none; }
body.landing .final .btn.big { padding: 19px 38px; font-size: 1.15rem; }
body.landing .final-note { color: var(--f-text-2); }
body.landing .final-note a { color: #3bf0b0; }

/* ── Footer ── */
body.landing footer.sfoot { margin-top: 0; background: linear-gradient(180deg, transparent, rgba(6,4,32,.82) 40%); border-top: 0; position: relative; color: var(--f-mute); }
:root:not([data-theme=dark]) body.landing footer.sfoot { background: linear-gradient(180deg, transparent, rgba(255,255,255,.75) 40%); }
body.landing footer.sfoot::before { content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #3bf0b0, #7c6bff, transparent); box-shadow: 0 0 20px rgba(59,240,176,.8); }
body.landing .sf-brand .logo { font-family: var(--disp); }
body.landing .sf-status { background: var(--f-in); border-color: var(--f-line); }
body.landing .sf-col h4 { font-family: var(--disp); font-size: .7rem; letter-spacing: .22em; }
body.landing .sf-col a { transition: color .25s, transform .25s var(--f-ease); }
body.landing .sf-col a:hover { color: #3bf0b0; text-decoration: none; transform: translateX(5px); }
:root:not([data-theme=dark]) body.landing .sf-col a:hover { color: var(--blue); }
body.landing .sf-bottom { border-top-color: var(--f-line); }

/* ── Motion: clean scroll reveals + entrance (only when future.js is running). No blur. ── */
.fx-on [data-fx] { opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity .6s var(--f-ease), transform .6s var(--f-ease), clip-path .9s var(--f-ease) !important; transition-delay: calc(var(--i, 0) * 55ms) !important; }
.fx-on [data-fx=left] { transform: translate3d(-28px, 0, 0); }
.fx-on [data-fx=right] { transform: translate3d(28px, 0, 0); }
.fx-on [data-fx=zoom] { transform: scale(.97); }
.fx-on [data-fx=wipe] { opacity: 1; transform: none; clip-path: inset(-20% 100% -20% -5%); }
.fx-on [data-fx].fx-in { opacity: 1; transform: none; clip-path: inset(-20% -5% -20% -5%); }
.fx-on .hero-copy > * { animation: fxRise .8s var(--f-ease) both; }
.fx-on .hero-copy > :nth-child(2) { animation-delay: .08s; } .fx-on .hero-copy > :nth-child(3) { animation-delay: .18s; }
.fx-on .hero-copy > :nth-child(4) { animation-delay: .28s; } .fx-on .hero-copy > :nth-child(5) { animation-delay: .38s; }
.fx-on .globe-wrap { animation: fxBloom 1.2s var(--f-ease) .1s both; }
.fx-on .top { animation: fxDrop .8s var(--f-ease) both; }
@keyframes fxRise { from { opacity: 0; transform: translateY(26px); } }
@keyframes fxBloom { from { opacity: 0; transform: scale(.9); } }
@keyframes fxDrop { from { opacity: 0; transform: translateY(-22px); } }

/* ── Live extras (elements are created by future.js) ── */
/* shooting links across the night sky */
.fx-aurora b { position: absolute; top: 0; width: 2px; height: 150px; border-radius: 2px; opacity: 0; filter: none; background: linear-gradient(transparent, #7cf5d0 70%, #fff); box-shadow: 0 0 12px rgba(59,240,176,.8); animation: fxMeteor 11s linear infinite; }
.fx-aurora b:nth-of-type(1) { left: 34%; }
.fx-aurora b:nth-of-type(2) { left: 66%; animation-duration: 14s; animation-delay: 3.4s; }
.fx-aurora b:nth-of-type(3) { left: 92%; animation-duration: 17s; animation-delay: 7.1s; }
.fx-aurora b:nth-of-type(4) { left: 118%; animation-duration: 13s; animation-delay: 9.3s; }
:root:not([data-theme=dark]) .fx-aurora b { display: none; }
@keyframes fxMeteor { 0% { transform: rotate(40deg) translateY(-30vh); opacity: 0; } 2% { opacity: 1; } 11% { opacity: 1; } 13%, 100% { transform: rotate(40deg) translateY(150vh); opacity: 0; } }

/* cursor ring + click burst */
.fx-ring { position: fixed; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1.5px solid rgba(59,240,176,.85); pointer-events: none; z-index: 70; opacity: 0; mix-blend-mode: screen;
  transition: width .35s var(--f-ease, ease), height .35s var(--f-ease, ease), margin .35s var(--f-ease, ease), background .3s, border-color .3s, opacity .4s; will-change: transform; }
.fx-ring.on { opacity: 1; }
.fx-ring.hot { width: 68px; height: 68px; margin: -34px 0 0 -34px; background: rgba(59,240,176,.14); border-color: rgba(255,255,255,.9); }
.fx-ring.down { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: rgba(59,240,176,.4); }
:root:not([data-theme=dark]) .fx-ring { mix-blend-mode: normal; border-color: rgba(43,28,245,.6); }
.fx-burst { position: fixed; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; z-index: 69; border: 2px solid #3bf0b0; box-shadow: 0 0 24px rgba(59,240,176,.9), inset 0 0 12px rgba(124,107,255,.9); animation: fxBurst .8s var(--f-ease, ease) forwards; }
.fx-burst + .fx-burst { animation-delay: .12s; border-color: #8a7bff; }
@keyframes fxBurst { to { transform: scale(13); opacity: 0; border-width: .5px; } }

/* section rail on the right edge */
.fx-rail { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 15px; align-items: flex-end; }
.fx-rail a { position: relative; display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(160,150,255,.4); transition: transform .35s var(--f-ease, ease), background .3s, box-shadow .3s, height .35s var(--f-ease, ease); }
.fx-rail a:hover { background: #fff; transform: scale(1.5); }
.fx-rail a.on { height: 30px; border-radius: 6px; background: linear-gradient(180deg, #3bf0b0, #7c6bff); box-shadow: 0 0 16px rgba(59,240,176,.9); }
.fx-rail a::before { content: attr(data-l); position: absolute; right: 22px; top: 50%; transform: translate(8px, -50%); white-space: nowrap; font: 700 .72rem var(--body, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 5px 11px; border-radius: 999px; background: rgba(9,7,42,.85); border: 1px solid rgba(160,150,255,.3); opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--f-ease, ease); }
.fx-rail a:hover::before { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 1340px) { .fx-rail { display: none; } }

/* hero depth: satellites orbiting the globe, layers that follow the pointer, a scan over the live console */
.fx-orbits { position: absolute; inset: -36px 0 36px 0; left: 40px; pointer-events: none; z-index: 1; perspective: 1100px; translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -8px); transition: translate .5s ease-out; }
.fx-orbits i { position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; margin: -46% 0 0 -46%; border-radius: 50%; border: 1px solid rgba(160,150,255,.28); animation: fxOrbA 14s linear infinite; }
.fx-orbits i:nth-child(2) { width: 112%; margin: -56% 0 0 -56%; border-color: rgba(59,240,176,.22); animation: fxOrbB 22s linear infinite; }
.fx-orbits i:nth-child(3) { width: 74%; margin: -37% 0 0 -37%; animation: fxOrbC 9s linear infinite; }
.fx-orbits i::after { content: ''; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #3bf0b0; box-shadow: 0 0 20px 6px rgba(59,240,176,.75), 0 0 0 4px rgba(59,240,176,.2); }
.fx-orbits i:nth-child(2)::after { background: #a99bff; box-shadow: 0 0 20px 6px rgba(138,123,255,.8), 0 0 0 4px rgba(138,123,255,.2); }
.fx-orbits i:nth-child(3)::after { background: #fff; box-shadow: 0 0 18px 5px rgba(255,255,255,.7); width: 8px; height: 8px; top: -4px; margin-left: -4px; }
@keyframes fxOrbA { from { transform: rotateX(72deg) rotateY(-14deg) rotateZ(0); } to { transform: rotateX(72deg) rotateY(-14deg) rotateZ(360deg); } }
@keyframes fxOrbB { from { transform: rotateX(66deg) rotateY(22deg) rotateZ(360deg); } to { transform: rotateX(66deg) rotateY(22deg) rotateZ(0); } }
@keyframes fxOrbC { from { transform: rotateX(78deg) rotateY(38deg) rotateZ(0); } to { transform: rotateX(78deg) rotateY(38deg) rotateZ(360deg); } }
.fx-on #globe { translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -12px); transition: translate .5s ease-out; }
.fx-on .console { translate: calc(var(--px, 0) * 22px) calc(var(--py, 0) * 16px); transition: translate .5s ease-out; overflow: hidden; }
.fx-on .hero h1 { translate: calc(var(--px, 0) * 7px) calc(var(--py, 0) * 5px); transition: translate .6s ease-out; }
.fx-on .console::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 38%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(59,240,176,.13) 60%, rgba(59,240,176,.3) 98%, transparent); animation: fxScan 4.8s linear infinite; }
@keyframes fxScan { from { transform: translateY(-110%); } to { transform: translateY(300%); } }

/* headlines draw a light bar when they arrive; screens swap with depth; rays behind the final call */
body.landing h2.linked::after { content: ''; display: block; height: 3px; width: 96px; margin-top: 22px; border-radius: 3px; background: linear-gradient(90deg, #3bf0b0, #7c6bff); box-shadow: 0 0 16px rgba(59,240,176,.8); }
body.landing .final h2.linked::after { margin-inline: auto; }
body.landing .shot.fx-swap { animation: fxShot .75s var(--f-ease); }
@keyframes fxShot { from { opacity: 0; transform: perspective(1800px) rotateX(8deg) translateY(24px) scale(.97); } }
body.landing .eng-card.fx-swap { animation: fxPulse .7s var(--f-ease); }
@keyframes fxPulse { 30% { transform: scale(.985); box-shadow: 0 70px 120px -55px rgba(59,240,176,.9), 0 0 0 1px rgba(59,240,176,.6); } }
body.landing .final .wrap::before { content: ''; position: absolute; left: 50%; top: 50%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(150,140,255,.13) 0 3deg, transparent 3deg 13deg);
  -webkit-mask: radial-gradient(closest-side, #000 8%, transparent 72%); mask: radial-gradient(closest-side, #000 8%, transparent 72%); animation: fxTurn 140s linear infinite; }
body.landing .plan .price, body.landing .plan li strong { font-variant-numeric: tabular-nums; }


/* ── White first screen (default look) ── */
:root:not([data-theme=dark]) body.landing .hero { background: linear-gradient(180deg, #fff 0, #fff 92%, rgba(255,255,255,0)); }
:root:not([data-theme=dark]) body.landing .hero::before { background: radial-gradient(700px 560px at 80% 40%, rgba(98,74,255,.13), transparent 62%), radial-gradient(520px 380px at 6% 0, rgba(59,240,176,.13), transparent 70%); }
:root:not([data-theme=dark]) body.landing .hero::after { opacity: .7; background-image: linear-gradient(rgba(43,28,245,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(43,28,245,.13) 1px, transparent 1px); }
:root:not([data-theme=dark]) body.landing .hero h1 { text-shadow: none; }
:root:not([data-theme=dark]) body.landing .hero h1 span:nth-child(2) { filter: none; }
:root:not([data-theme=dark]) body.landing .hero .lead strong { color: var(--blue); }
:root:not([data-theme=dark]) body.landing .pill-note { background: #fff; border-color: rgba(43,28,245,.22); box-shadow: 0 12px 30px -16px rgba(43,28,245,.55); }
:root:not([data-theme=dark]) body.landing .hero-facts li { background: #fff; box-shadow: 0 8px 20px -14px rgba(43,28,245,.6); }
:root:not([data-theme=dark]) body.landing .hero-facts li::before { color: var(--live); }
:root:not([data-theme=dark]) body.landing .launch { background: #fff; box-shadow: 0 34px 70px -38px rgba(43,28,245,.6), 0 0 0 1px rgba(43,28,245,.06); }
:root:not([data-theme=dark]) body.landing .launch input { background: #f1f0fd; }
:root:not([data-theme=dark]) body.landing .launch input:focus { background: #fff; }
:root:not([data-theme=dark]) body.landing .proofbar { background: rgba(246,246,255,.85); }
:root:not([data-theme=dark]) body.landing .console { background: rgba(11,8,53,.95); }
:root:not([data-theme=dark]) body.landing .globe-wrap::before { background: radial-gradient(closest-side, rgba(98,74,255,.2), rgba(59,240,176,.06) 58%, transparent 72%); }
/* the globe keeps its night side: a deep-blue planet on the white page (radius matches the canvas drawing) */
:root:not([data-theme=dark]) body.landing #globe { background: radial-gradient(circle at 50% 44%, #2a1bd8 0, #1a10a0 120px, #0b0835 226px, rgba(11,8,53,0) 231px); filter: drop-shadow(0 34px 44px rgba(43,28,245,.38)); }
@media (max-width: 1059px) { :root:not([data-theme=dark]) body.landing #globe { background: radial-gradient(circle at 50% 44%, #2a1bd8 0, #1a10a0 80px, #0b0835 150px, rgba(11,8,53,0) 155px); } }
@media (min-width: 1060px) {
  body.landing .globe-wrap::before { left: calc(50% + 40px); top: calc(50% - 36px); }
  body.landing .globe-wrap::after { left: calc(50% + 40px); top: calc(50% - 36px); }
}


/* ════════ Hero: the two-column layout (text left, live globe right) with the extra live features ════════ */
.fx-spot { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(rgba(43,28,245,.42) 1.2px, transparent 1.6px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(380px circle at var(--hx, 30%) var(--hy, 30%), #000, transparent 72%); mask-image: radial-gradient(380px circle at var(--hx, 30%) var(--hy, 30%), #000, transparent 72%); }
:root[data-theme=dark] .fx-spot { background-image: radial-gradient(rgba(160,150,255,.55) 1.2px, transparent 1.6px); }
.fx-back, .fx-chip, .fx-fade { display: none; }
body.landing .hero { overflow: clip; } /* clip, not hidden: the hero must never become a scroll container */
@media (min-width: 1060px) {
  /* light behind the globe: a turning colour rim and slow rays (globe centre is 330px / 224px inside its box, radius 228px) */
  .fx-back { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 0; translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -12px - var(--hs, 0) * 40px); transition: translate .5s ease-out; }
  .fx-back::before { content: ''; position: absolute; left: 330px; top: 224px; width: 1150px; height: 1150px; margin: -575px 0 0 -575px;
    background: repeating-conic-gradient(from 0deg, rgba(98,74,255,.1) 0 2.5deg, transparent 2.5deg 11deg); -webkit-mask: radial-gradient(closest-side, #000 34%, transparent 80%); mask: radial-gradient(closest-side, #000 34%, transparent 80%); animation: fxTurn 160s linear infinite; }
  .fx-back::after { content: ''; position: absolute; left: 330px; top: 224px; width: 474px; height: 474px; margin: -237px 0 0 -237px; border-radius: 50%;
    background: conic-gradient(#3bf0b0, #4fd8ff, #7c6bff, #e08bff, #3bf0b0); filter: blur(13px); opacity: .95; animation: fxTurn 9s linear infinite; }
  .fx-on body.landing #globe { translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -12px - var(--hs, 0) * 40px); }
  :root:not([data-theme=dark]) body.landing #globe { filter: none; }
  .fx-orbits { z-index: 2; }
  body.landing .console { z-index: 4; }
  /* real placements from the live feed rise off the globe */
  .fx-chip { display: block; position: absolute; z-index: 3; padding: 7px 13px; border-radius: 999px; white-space: nowrap; pointer-events: none; font: 600 .8rem var(--body); color: #fff;
    background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); animation: fxChip 4.4s ease-out forwards; }
  .fx-chip b { color: #3bf0b0; margin-right: 6px; }
  .fx-chip::before { content: ''; position: absolute; left: 20px; top: 100%; width: 1px; height: 38px; background: linear-gradient(rgba(59,240,176,.9), transparent); }
}
@keyframes fxLine { from { opacity: 0; transform: translateY(70%); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(-10% -5% -15% -5%); } }
@keyframes fxPlanet { from { opacity: 0; transform: translateY(180px) scale(.94); } }
@keyframes fxChip { 0% { opacity: 0; transform: translateY(26px) scale(.9); } 12% { opacity: 1; transform: translateY(0) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-130px) scale(1); } }

/* ── Infographic: every link type flowing into your website ── */
.fx-hub { position: relative; height: 400px; margin: 10px 0 44px; border-radius: 28px; border: 1px solid var(--f-line); overflow: hidden;
  background: radial-gradient(520px 300px at 50% 50%, var(--f-spot), transparent 70%), var(--f-card); box-shadow: var(--f-shadow), inset 0 1px 0 var(--f-hi); }
.fx-hub::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(var(--f-line-2) 1px, transparent 1.4px); background-size: 26px 26px; opacity: .55;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.fx-hub svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-hub path { fill: none; vector-effect: non-scaling-stroke; }
.fx-hub .ln { stroke: var(--f-line-2); stroke-width: 1.5; stroke-dasharray: 4 7; animation: fxFlow 1.2s linear infinite; }
.fx-hub .pl { stroke: #3bf0b0; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 93; stroke-dashoffset: 100; animation: fxPulseIn 2.6s cubic-bezier(.5,0,.3,1) infinite; animation-delay: calc(var(--n) * .43s); filter: drop-shadow(0 0 6px #3bf0b0); }
:root:not([data-theme=dark]) .fx-hub .pl { stroke: #2b1cf5; filter: drop-shadow(0 0 5px rgba(43,28,245,.7)); }
@keyframes fxFlow { to { stroke-dashoffset: -11; } }
@keyframes fxPulseIn { 0% { stroke-dashoffset: 100; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.fx-hub-core { position: absolute; left: 50%; top: 50%; width: 148px; height: 148px; margin: -74px 0 0 -74px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 18px;
  font: 800 .95rem/1.2 var(--disp); color: #fff; background: radial-gradient(circle at 35% 30%, #5b4dff, #1a10a0 60%, #0b0835); box-shadow: 0 0 0 10px rgba(98,74,255,.14), 0 0 0 26px rgba(98,74,255,.07), 0 30px 60px -20px rgba(43,28,245,.8); animation: fxCore 2.6s ease-in-out infinite; }
.fx-hub-core::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; padding: 2px; background: conic-gradient(from var(--fx-a), #3bf0b0, #7c6bff, transparent 60%, #3bf0b0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: fxOrbit 4s linear infinite; }
@keyframes fxCore { 50% { box-shadow: 0 0 0 16px rgba(98,74,255,.16), 0 0 0 40px rgba(98,74,255,.05), 0 30px 60px -20px rgba(43,28,245,.8); } }
.fx-hub-node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; white-space: nowrap;
  font: 700 .95rem var(--body); color: var(--f-text); background: var(--f-panel); border: 1px solid var(--f-line-2); box-shadow: 0 16px 34px -18px rgba(43,28,245,.7); cursor: pointer;
  animation: fxBob 6s ease-in-out infinite; animation-delay: calc(var(--n) * -1s); transition: border-color .3s, box-shadow .3s; }
.fx-hub-node:hover { border-color: #3bf0b0; box-shadow: 0 0 0 5px rgba(59,240,176,.16), 0 16px 34px -18px rgba(43,28,245,.7); }
.fx-hub-node b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 1.1rem; background: linear-gradient(150deg, rgba(124,107,255,.4), rgba(59,240,176,.2)); }
@keyframes fxBob { 50% { transform: translate(-50%, calc(-50% - 9px)); } }
body.landing .kind.fx-lit { border-color: #3bf0b0; box-shadow: var(--f-shadow), 0 0 0 4px rgba(59,240,176,.18), 0 0 60px -20px rgba(59,240,176,.9); transform: translateY(-6px); }
@media (max-width: 860px) { .fx-hub { display: none; } }

/* ── Infographic: the two paid plans side by side, built from the plan lists themselves ── */
.fx-bars { margin: 34px 0 6px; padding: 30px 32px; border-radius: 28px; border: 1px solid var(--f-line); background: var(--f-card); box-shadow: var(--f-shadow), inset 0 1px 0 var(--f-hi); }
.fx-bars-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: 22px; font: 800 1.15rem var(--disp); color: var(--f-text); }
.fx-bars-head span { display: inline-flex; align-items: center; gap: 8px; font: 700 .86rem var(--body); color: var(--f-text-2); }
.fx-bars-head span::before { content: ''; width: 22px; height: 8px; border-radius: 8px; background: #8f85ff; }
.fx-bars-head span + span::before { background: linear-gradient(90deg, #3bf0b0, #4fd8ff); }
.fx-bars-head em { font-style: normal; flex: 1; }
.fx-bar-row { display: grid; grid-template-columns: minmax(150px, 250px) 1fr 62px; gap: 6px 18px; align-items: center; padding: 13px 0; border-top: 1px solid var(--f-line); }
.fx-bar-row > span { font-weight: 700; color: var(--f-text); font-size: .95rem; }
.fx-bar-row > div { display: grid; gap: 6px; }
.fx-bar { position: relative; height: 18px; border-radius: 10px; background: var(--f-in); }
.fx-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 10px; background: #8f85ff; transition: width 1.3s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--n) * 90ms); }
.fx-bar + .fx-bar i { background: linear-gradient(90deg, #3bf0b0, #4fd8ff); box-shadow: 0 0 18px -2px rgba(59,240,176,.8); }
.fx-bar b { position: absolute; left: calc(var(--w) + 10px); top: 50%; transform: translateY(-50%); font: 800 .8rem var(--body); color: var(--f-text); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity .5s 1s; }
.fx-bars.fx-go .fx-bar i { width: var(--w); }
.fx-bars.fx-go .fx-bar b { opacity: 1; }
.fx-bar.fx-full b { left: auto; right: 10px; color: #06042a; }
.fx-bar-row > strong { justify-self: end; font: 800 .95rem var(--disp); padding: 5px 10px; border-radius: 999px; color: #06042a; background: linear-gradient(100deg, #3bf0b0, #62e0ff); transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(var(--n) * 90ms + .9s); }
.fx-bars.fx-go .fx-bar-row > strong { transform: scale(1); }
@media (max-width: 640px) { .fx-bar-row { grid-template-columns: 1fr 56px; } .fx-bar-row > div { grid-column: 1 / -1; grid-row: 2; } .fx-bars { padding: 22px 18px; } }

/* ── Kinetic word bands between sections ── */
.fx-marquee { overflow: hidden; padding: 26px 0; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.fx-marquee > div { transform: translate3d(calc(var(--mq, 0) * -1px), 0, 0); will-change: transform; }
.fx-marquee.rev > div { transform: translate3d(calc(var(--mq, 0) * 1px - 30%), 0, 0); }
.fx-marquee p { display: flex; gap: 46px; width: max-content; margin: 0; white-space: nowrap; font: 800 clamp(2.4rem, 6.4vw, 5.6rem)/1.1 var(--disp); letter-spacing: -.04em; animation: fxMarq 38s linear infinite; }
.fx-marquee.rev p { animation-direction: reverse; }
.fx-marquee span { color: transparent; -webkit-text-stroke: 1.5px var(--f-line-2); }
.fx-marquee span:nth-child(3n+1) { -webkit-text-stroke: 0; background: var(--f-grad); -webkit-background-clip: text; background-clip: text; }
.fx-marquee i { font-style: normal; color: #3bf0b0; -webkit-text-stroke: 0; }
@keyframes fxMarq { to { transform: translateX(-50%); } }

/* ── Small living details ── */
body.landing .kind .k-ic { animation: fxIdle 5s ease-in-out infinite; }
body.landing .kind:nth-child(2n) .k-ic { animation-delay: -1.6s; } body.landing .kind:nth-child(3n) .k-ic { animation-delay: -3.1s; }
@keyframes fxIdle { 50% { translate: 0 -6px; } }
body.landing .feat dt::before { animation: fxDot 3.2s ease-in-out infinite; }
body.landing .feat > div:nth-child(3n+2) dt::before { animation-delay: -1s; } body.landing .feat > div:nth-child(3n) dt::before { animation-delay: -2s; }
@keyframes fxDot { 50% { transform: scale(1.5); box-shadow: 0 0 0 7px rgba(59,240,176,.1), 0 0 20px #3bf0b0; } }
body.landing .compare th.us { background: linear-gradient(100deg, #3bf0b0, #62e0ff, #fff 50%, #62e0ff, #3bf0b0); background-size: 300% 100%; animation: fxShim 4.5s linear infinite; }
@keyframes fxShim { from { background-position: 100% 0; } to { background-position: -50% 0; } }
/* a light runs along the six-step line */
body.landing .pipe::before { background: linear-gradient(90deg, transparent, #3bf0b0, #fff, #3bf0b0, transparent) -160px 0 / 160px 100% no-repeat, var(--f-line); animation: fxRun 3.4s linear infinite; }
@keyframes fxRun { to { background-position: calc(100% + 160px) 0, 0 0; } }
@media (max-width: 760px) { body.landing .pipe::before { animation: none; background: var(--f-line); } }
body.landing .proof-stats .stat { position: relative; overflow: hidden; }
body.landing .proof-stats .stat::before { content: ''; position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; border: 1px solid var(--f-line-2); animation: fxSonar 3.6s ease-out infinite; pointer-events: none; }
body.landing .proof-stats .stat:nth-child(2)::before { animation-delay: -1.8s; }
@keyframes fxSonar { from { transform: scale(.3); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }

@media (max-width: 760px) {
  body.landing section { padding: 76px 0; }
  body.landing .hero { padding-top: 48px !important; }
  body.landing .final { padding: 96px 0 !important; }
  body.landing .shot::after { display: none; }
  .fx-cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fx-net, .fx-cursor, .fx-ring, .fx-aurora b { display: none; } }
@media print { .fx-net, .fx-aurora, .fx-cursor, .fx-progress, .fx-ring, .fx-rail, .fx-orbits, .fx-marquee, .fx-back, .fx-chip, .fx-spot, .fx-fade { display: none; } .fx-on [data-fx] { opacity: 1 !important; transform: none !important; filter: none !important; } }