/* landing.css — shared landing/feature-page styles, extracted from Home/Index.cshtml
   so feature pages render with the IDENTICAL dark theme, nav, footer and section
   components as the home page. Keep in sync if the home's inline styles change. */


:root{
  --dark:#03030a;--dark2:#07071a;--dark3:#0d0d1f;--dark4:#12122a;
  --purple:#6c2fef;--purple2:#8b5cf6;--purple3:#a78bfa;
  --cyan:#05d4f5;--green:#00e5a0;--amber:#f5a623;--pink:#ff4f9b;
  --text:#f0f0ff;--muted:rgba(240,240,255,.5);--dim:rgba(240,240,255,.25);
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.12);
  --grad-hero:linear-gradient(135deg,#6c2fef 0%,#05d4f5 100%);
  --grad-purple:linear-gradient(135deg,#6c2fef,#8b5cf6);
  --font-display:'Inter Tight',sans-serif;--font-body:'Inter Tight',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--dark);color:var(--text);font-family:var(--font-body);line-height:1.6}
/* Snappy single-tap on mobile: kill the 300ms double-tap-zoom delay that makes
   buttons/links feel like they need a second tap, and give a light tap flash.
   Applies to everything interactive (nav, chat button, CTAs, drawer links). */
a,button,[role="button"],[onclick],input,select,textarea,label,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(124,58,237,.18)}
a{text-decoration:none;color:inherit}
a,button,input[type=submit],[onclick]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* BACKGROUND */
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(108,47,239,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(108,47,239,.04) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0}
.bg-orb{position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0;animation:orbFloat 20s ease-in-out infinite}
.bg-orb-1{width:700px;height:700px;background:radial-gradient(circle,rgba(108,47,239,.18),transparent 70%);top:-200px;left:-200px}
.bg-orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(5,212,245,.12),transparent 70%);bottom:-100px;right:-100px;animation-delay:-8s}
.bg-orb-3{width:400px;height:400px;background:radial-gradient(circle,rgba(255,79,155,.08),transparent 70%);top:50%;left:60%;animation-delay:-16s}
@keyframes orbFloat{0%,100%{transform:translate(0,0)}33%{transform:translate(50px,-70px)}66%{transform:translate(-40px,50px)}}

/* NAVBAR — sticky (not fixed) so the announcement banner above it scrolls away naturally */
.lnav{position:sticky;top:0;z-index:1000;height:70px;display:flex;align-items:center;padding:0 28px;gap:18px;background:rgba(3,3,10,.85);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);transition:background .3s}
.lnav.scrolled{background:rgba(3,3,10,.96)}
.lnav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:1.1rem;flex-shrink:0;text-decoration:none}
.lnav-logomark{width:36px;height:36px;background:var(--grad-purple);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.9rem;box-shadow:0 0 24px rgba(108,47,239,.45)}
.lnav-logoname{background:var(--grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* ottoBrand wordmark — "otto" reads in foreground color, "Brand" always brand purple */
.otto-wordmark-text{font-weight:900;letter-spacing:-.01em;line-height:1;font-family:var(--font-display)}
.otto-wordmark-otto{color:#fff}
.otto-wordmark-brand{color:#a78bfa}
[data-theme="light"] .otto-wordmark-otto{color:#0a0a0f}
[data-theme="light"] .otto-wordmark-brand{color:#7c3aed}
.lnav-links{display:flex;align-items:center;gap:4px}
.lnav-links a{padding:7px 14px;border-radius:8px;font-size:.88rem;font-weight:500;color:var(--muted);transition:all .2s;white-space:nowrap}
.lnav-links a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.lnav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.lnav-signin{padding:8px 18px;border-radius:8px;font-size:.88rem;font-weight:600;color:var(--muted);border:1px solid var(--border2);transition:all .2s;white-space:nowrap}
.lnav-signin:hover{color:var(--text);background:rgba(255,255,255,.06)}
.lnav-cta,
.lnav .lnav-cta,
[data-theme="light"] .lnav-cta,
[data-theme="light"] .lnav .lnav-cta {
  padding:9px 24px;
  background:linear-gradient(135deg,#6c2fef 0%,#8b5cf6 50%,#05d4f5 100%) !important;
  background-size:200% 200% !important;background-position:0% 50% !important;
  border-radius:9px;font-size:.88rem;font-weight:700;white-space:nowrap;
  color:#ffffff !important;
  /* -webkit-text-fill-color OVERRIDES `color` even when color is !important.
     A global gradient-text rule (background-clip:text) was leaking onto this
     button and turning the text transparent → the purple gradient showed
     through the glyphs (purple-on-purple, invisible). Forcing text-fill-color
     to white guarantees the label is readable in every theme. */
  -webkit-text-fill-color:#ffffff !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  text-decoration:none;
  box-shadow:0 4px 20px rgba(108,47,239,.4),inset 0 1px 0 rgba(255,255,255,.18);
  transition:background-position .4s, box-shadow .25s;
  display:inline-flex;align-items:center;gap:6px
}
.lnav-cta:hover,
[data-theme="light"] .lnav-cta:hover {
  background-position:100% 50% !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 6px 28px rgba(108,47,239,.55),inset 0 1px 0 rgba(255,255,255,.24)
}
/* Mobile hamburger + slide-in drawer (home page) */
.lnav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:48px;height:48px;background:none;border:1px solid var(--border2);border-radius:10px;cursor:pointer;padding:0 12px;flex-shrink:0;position:relative;z-index:1101}
.lnav-burger span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:transform .3s,opacity .2s;pointer-events:none}
.lnav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.lnav-burger.open span:nth-child(2){opacity:0}
.lnav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.lnav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1099;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s}
.lnav-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}
.lnav-drawer{position:fixed;top:0;right:0;bottom:0;width:min(86vw,330px);background:#0a0a16;border-left:1px solid var(--border2);z-index:1100;transform:translateX(100%);pointer-events:none;transition:transform .32s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;padding:70px 18px 28px;gap:3px;overflow-y:auto;box-shadow:-24px 0 60px rgba(0,0,0,.5)}
.lnav-drawer.open{transform:translateX(0);pointer-events:auto}
.lnav-drawer a{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:11px;font-size:1rem;font-weight:600;color:#f0f0ff;border:1px solid transparent;transition:background .18s,color .18s,transform .18s,border-color .18s}
.lnav-drawer a i{width:22px;text-align:center;font-size:.95rem;color:var(--purple3,#a78bfa);transition:color .18s}
.lnav-drawer a:hover,.lnav-drawer a:active{background:rgba(124,47,239,.14);color:#fff;transform:translateX(3px)}
.lnav-drawer .dr-div{height:1px;background:rgba(255,255,255,.1);margin:10px 4px}
.lnav-drawer .dr-signin{justify-content:center;border:1.5px solid rgba(167,139,250,.55);background:rgba(124,47,239,.08);margin-top:2px}
[data-theme="light"] .lnav-drawer .dr-signin{border-color:rgba(108,47,239,.4);background:rgba(108,47,239,.05)}
.lnav-drawer .dr-selects{display:flex;flex-direction:column;gap:8px;margin:4px 0 8px}
.lnav-drawer .dr-sel-wrap{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--border2);border-radius:11px;background:rgba(255,255,255,.04)}
.lnav-drawer .dr-sel-ico{font-size:1.05rem;flex-shrink:0}
.lnav-drawer .dr-sel{flex:1;background:none;border:none;color:#f0f0ff;font-size:.95rem;font-weight:600;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.lnav-drawer .dr-sel option{background:#0a0a16;color:#f0f0ff}
[data-theme="light"] .lnav-drawer .dr-sel-wrap{background:rgba(15,23,42,.03);border-color:rgba(15,23,42,.12)}
[data-theme="light"] .lnav-drawer .dr-sel{color:#1a1a2e}
[data-theme="light"] .lnav-drawer .dr-sel option{background:#fff;color:#1a1a2e}
.lnav-drawer .dr-cta{justify-content:center;background:var(--grad-purple);color:#fff;margin-top:8px;box-shadow:0 6px 20px rgba(108,47,239,.45)}
.lnav-drawer .dr-cta i,.lnav-drawer .dr-signin i{color:#fff}
.lnav-drawer .dr-cta:hover{transform:translateY(-2px)}
.lnav-drawer-close{position:absolute;top:16px;right:16px;width:40px;height:40px;background:rgba(255,255,255,.06);border:1px solid var(--border2);border-radius:10px;color:#f0f0ff;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
[data-theme="light"] .lnav-drawer{background:#fff;border-left-color:rgba(15,23,42,.1);box-shadow:-24px 0 60px rgba(15,23,42,.18)}
[data-theme="light"] .lnav-drawer a{color:#1a1a2e}
[data-theme="light"] .lnav-drawer a:hover,[data-theme="light"] .lnav-drawer a:active{background:rgba(124,47,239,.1);color:#6c2fef}
[data-theme="light"] .lnav-drawer .dr-div{background:rgba(15,23,42,.1)}
[data-theme="light"] .lnav-drawer .dr-cta,[data-theme="light"] .lnav-drawer .dr-cta i{color:#fff}
[data-theme="light"] .lnav-drawer-close{background:rgba(15,23,42,.05);border-color:rgba(15,23,42,.12);color:#1a1a2e}

/* HERO */
.hero{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 24px 60px;text-align:center;overflow:hidden}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.25);color:var(--green);padding:6px 18px;border-radius:100px;font-size:.8rem;font-weight:600;margin-bottom:28px;animation:fadeUp .8s ease both}
.hero-eyebrow-dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
/* Font cap = 88px (5.5rem) on laptop+ widths. On smaller viewports the
   6vw scaling brings it down proportionally. Floor 2rem keeps it readable
   on phones. */
.hero-h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2rem,6vw,5.5rem);font-weight:700;line-height:1.1;letter-spacing:-.03em;margin-bottom:22px;width:100%;max-width:none;padding:0 12px;text-align:center}
.hero-h1 .hw{display:inline-block;opacity:0;transform:translateY(24px);animation:herowu .65s cubic-bezier(.22,1,.36,1) forwards}
@keyframes herowu{to{opacity:1;transform:none}}
/* Spans inside the H1 used to be display:block (which forced "Complete"
   and "Autopilot." onto their own lines for the old two-line H1). The new
   H1 is one full-width line — switch to display:inline so the gradient
   words flow with the rest of the sentence. */
.hero-h1 .grad{background:var(--grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline}
/* Force the entire H1 onto one line only on big-screen viewports
   (>=1500px) where 88px text actually fits. Smaller laptops + tablets
   wrap naturally so we never overflow horizontally. */
@media(min-width:1500px){.hero-h1{white-space:nowrap}}
.hero-p{font-family:'Space Grotesk',sans-serif;font-size:clamp(.95rem,1.5vw,1.15rem);color:var(--muted);max-width:700px;line-height:1.7;margin-bottom:36px;animation:fadeUp .8s .2s ease both}
.hero-p strong{color:var(--text);font-weight:700}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:44px;animation:fadeUp .8s .3s ease both}
.btn-xl-purple{
  display:inline-flex;align-items:center;gap:10px;padding:15px 34px;
  background:linear-gradient(135deg,#6c2fef 0%,#8b5cf6 50%,#05d4f5 100%);
  background-size:200% 200%;background-position:0% 50%;
  border-radius:12px;font-size:1rem;font-weight:700;color:#fff;
  box-shadow:0 8px 32px rgba(108,47,239,.45),inset 0 1px 0 rgba(255,255,255,.18);
  transition:background-position .45s ease, box-shadow .3s ease, filter .2s ease;
  position:relative;overflow:hidden
}
.btn-xl-purple:hover{background-position:100% 50%;box-shadow:0 12px 44px rgba(108,47,239,.6),inset 0 1px 0 rgba(255,255,255,.24);filter:saturate(1.1)}
.btn-xl-purple:active{filter:brightness(.92)}
.btn-xl-outline{
  display:inline-flex;align-items:center;gap:10px;padding:15px 34px;
  border:1.5px solid var(--border2);border-radius:12px;
  font-size:1rem;font-weight:600;color:var(--text);backdrop-filter:blur(8px);
  transition:background .25s, border-color .25s, color .25s, box-shadow .25s
}
.btn-xl-outline:hover{background:rgba(108,47,239,.12);border-color:var(--purple2);color:#fff;box-shadow:0 0 0 4px rgba(108,47,239,.12)}
[data-theme="light"] .btn-xl-outline:hover{color:#6c2fef;background:rgba(108,47,239,.06);border-color:#6c2fef}
.hero-trust{display:flex;align-items:center;gap:16px;justify-content:center;margin-bottom:52px;animation:fadeUp .8s .4s ease both;flex-wrap:wrap}
.hero-avatars{display:flex}
.hero-avatars span{width:30px;height:30px;border-radius:50%;border:2px solid var(--dark);margin-left:-7px;font-size:.65rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.hero-trust-txt{font-size:.82rem;color:var(--dim)}
.hero-trust-txt strong{color:var(--text)}
.hero-stats-row{align-self:stretch;margin:48px -24px 8px;display:grid;grid-template-columns:repeat(7,1fr);gap:24px;align-items:center;padding:28px 24px;background:linear-gradient(120deg,rgba(124,58,237,.1),rgba(34,211,238,.06));border-top:1px solid var(--border);border-bottom:1px solid var(--border);animation:fadeUp .8s .45s ease both}
.hstat{text-align:center;position:relative}
.hstat-num{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:700;background:var(--grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.hstat-lbl{font-size:.86rem;color:var(--muted);margin-top:8px}

/* BROWSER MOCKUP */
.mockup-wrap{width:100%;max-width:1000px;margin:56px auto 0;animation:fadeUp .8s .55s ease both;position:relative;z-index:1}
.mockup-wrap::after{content:'';position:absolute;bottom:-40px;left:10%;right:10%;height:60px;background:radial-gradient(ellipse,rgba(108,47,239,.35),transparent 70%);filter:blur(20px);pointer-events:none}
.browser-top{background:#1a1a2e;border-radius:14px 14px 0 0;padding:10px 14px;display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-bottom:none}
.bdots{display:flex;gap:5px}
.bdots span{width:11px;height:11px;border-radius:50%}
.bdots span:nth-child(1){background:#ff5f57}
.bdots span:nth-child(2){background:#febc2e}
.bdots span:nth-child(3){background:#28c840}
.burl{background:rgba(255,255,255,.06);border-radius:5px;padding:4px 12px;font-size:.72rem;color:var(--dim);font-family:monospace;flex:1;text-align:center;margin-left:6px}
.mbody{background:#0a0a18;border:1px solid var(--border);border-top:none;border-radius:0 0 14px 14px;overflow:hidden;display:grid;grid-template-columns:50px 1fr;height:430px}
.mside{background:#060610;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:5px;padding:12px 7px;align-items:center}
.micon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.82rem;transition:all .2s;cursor:pointer}
.micon.on{background:var(--grad-purple);box-shadow:0 4px 14px rgba(108,47,239,.4)}
.micon:not(.on){color:rgba(255,255,255,.25)}
.mmain{padding:16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.mmain-hdr{display:flex;align-items:center;justify-content:space-between}
.mmain-title{font-family:var(--font-display);font-size:.85rem;font-weight:700}
.status-pill{background:rgba(0,229,160,.12);border:1px solid rgba(0,229,160,.2);color:var(--green);padding:3px 10px;border-radius:100px;font-size:.62rem;font-weight:700}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.kpi{background:#101020;border:1px solid var(--border);border-radius:9px;padding:9px;text-align:center}
.kpi-n{font-family:var(--font-display);font-size:1.1rem;font-weight:800}
.kpi-l{font-size:.54rem;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mcard{background:#101020;border:1px solid var(--border);border-radius:9px;padding:10px}
.mcard-t{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);margin-bottom:7px}
.score-wrap{display:flex;align-items:center;gap:8px}
.ring-wrap{position:relative;width:58px;height:58px;flex-shrink:0}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.8rem;font-weight:800;color:var(--green);line-height:1}
.ring-val small{font-size:.4rem;color:var(--dim);font-family:var(--font-body)}
.pillars{display:flex;flex-direction:column;gap:4px;flex:1}
.prow{display:flex;align-items:center;gap:4px}
.plbl{font-size:.54rem;color:var(--muted);width:42px;flex-shrink:0}
.ptrack{flex:1;height:3px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.pfill{height:100%;border-radius:3px}
.pval{font-size:.54rem;width:18px;text-align:right}
.fix-list{display:flex;flex-direction:column;gap:4px}
.fix-row{display:flex;align-items:center;gap:5px}
.fix-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.fix-txt{font-size:.6rem;color:var(--muted);flex:1}
.fix-chip{font-size:.52rem;font-weight:700;padding:1px 5px;border-radius:3px}
.act-log{background:#101020;border:1px solid var(--border);border-radius:9px;padding:10px}
.act-row{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.act-time{font-size:.56rem;color:var(--dim);width:30px;flex-shrink:0}
.act-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.act-txt{font-size:.6rem;color:var(--dim)}

/* ═══ Always-dark "screenshot" panels — keep light text even in light theme ═══ */
/* The hero dashboard mockup (.mbody) and the "Smarter" section screen
   (.smarter-screen) have permanently dark interior backgrounds. Without these
   overrides the --dim/--muted vars flip to dark gray in light theme and
   text becomes invisible against the dark container. */
.mbody, .smarter-screen { color: #e2e8f0; }
.mbody .mmain-title,
.mbody .kpi-n,
.mbody .ring-val,
.mbody .fix-chip,
.smarter-screen .sv-kpi-n,
.smarter-screen .sv-score-num { color: #f1f5f9; }
.mbody .kpi-l,
.mbody .mcard-t,
.mbody .burl,
.mbody .ring-val small,
.mbody .act-time,
.mbody .act-txt,
.smarter-screen .sv-kpi-l,
.smarter-screen .sv-chrome-url,
.smarter-screen .sv-logo,
.smarter-screen .sv-section-title { color: rgba(255,255,255,.55); }
.mbody .fix-txt,
.mbody .plbl,
.smarter-screen .sv-feed-text,
.smarter-screen .sv-pill-row { color: rgba(255,255,255,.75); }
.mbody .kpi,
.mbody .mcard,
.mbody .act-log,
.smarter-screen .sv-kpi,
.smarter-screen .sv-score-row { border-color: rgba(255,255,255,.08); background: #0f0f1f; }
.mbody .ptrack,
.smarter-screen .sv-pill-track { background: rgba(255,255,255,.08); }
.browser-top .burl,
.smarter-screen .sv-chrome { color: rgba(255,255,255,.55); }
.smarter-screen .sv-chrome { background: #0d0d1e; }
/* Any direct child text element that lacks its own color gets a safe default */
.mbody *:not([style*="color"]):not(i):not(svg):not(svg *) { }
[data-theme="light"] .mbody,
[data-theme="light"] .smarter-screen {
    background: #0a0a18 !important;
    border-color: rgba(255,255,255,.12);
}
[data-theme="light"] .mbody .kpi,
[data-theme="light"] .mbody .mcard,
[data-theme="light"] .mbody .act-log,
[data-theme="light"] .smarter-screen .sv-kpi,
[data-theme="light"] .smarter-screen .sv-score-row {
    background: #101020 !important;
}
[data-theme="light"] .mbody .ptrack,
[data-theme="light"] .smarter-screen .sv-pill-track { background: rgba(255,255,255,.08) !important; }
[data-theme="light"] .mbody .plbl,
[data-theme="light"] .mbody .fix-txt,
[data-theme="light"] .smarter-screen .sv-feed-text { color: rgba(255,255,255,.75) !important; }
[data-theme="light"] .mbody .kpi-l,
[data-theme="light"] .mbody .mcard-t,
[data-theme="light"] .mbody .act-time,
[data-theme="light"] .mbody .act-txt,
[data-theme="light"] .smarter-screen .sv-kpi-l,
[data-theme="light"] .smarter-screen .sv-section-title { color: rgba(255,255,255,.55) !important; }
[data-theme="light"] .mbody .mmain-title,
[data-theme="light"] .mbody .kpi-n,
[data-theme="light"] .mbody .ring-val,
[data-theme="light"] .smarter-screen .sv-kpi-n { color: #f1f5f9 !important; }
/* mockup stays a dark island in light theme — keep its labels/feed light & readable */
[data-theme="light"] .smarter-screen .sv-kpi-lbl{color:rgba(255,255,255,.62)!important}
[data-theme="light"] .smarter-screen .sv-feed-title{color:rgba(255,255,255,.55)!important}
[data-theme="light"] .smarter-screen .sv-feed-text{color:rgba(255,255,255,.78)!important}
[data-theme="light"] .smarter-screen .sv-feed-time{color:rgba(255,255,255,.5)!important}
[data-theme="light"] .smarter-screen .sv-score-val{color:#f1f5f9!important}

/* SECTIONS */
.lsec{padding:100px 24px;position:relative;z-index:1}
.lsec-inner{max-width:1800px;margin:0 auto;padding-left:40px;padding-right:40px}
@media(max-width:1024px){.lsec-inner{padding-left:24px;padding-right:24px}}
@media(max-width:640px){.lsec-inner{padding-left:16px;padding-right:16px}}
.sec-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(28,20,52,.92);border:1px solid rgba(140,92,246,.42);color:#cbbcff;padding:5px 14px;border-radius:100px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:16px}
.sec-h2{font-family:var(--font-display);font-size:clamp(1.9rem,3.5vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;margin-bottom:14px}
.sec-h2 .g{background:var(--grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sec-p{font-size:1rem;color:var(--muted);max-width:540px;line-height:1.7}

/* TRUST BAR */
.trust-bar{padding:28px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(255,255,255,.015);position:relative;z-index:1;overflow:hidden}
.trust-bar-inner{max-width:1160px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px}
.trust-lbl{font-size:.74rem;font-weight:700;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.1em}
.int-row{display:flex;align-items:stretch;gap:20px;flex-wrap:nowrap;justify-content:center;margin-top:14px;width:100%}
.int-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px 8px;aspect-ratio:1;background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:14px;min-width:0;flex:1 1 0;box-shadow:0 1px 5px rgba(15,23,42,.06);transition:transform .2s,box-shadow .2s,border-color .2s}
.int-tile:hover{transform:translateY(-3px);border-color:rgba(108,47,239,.4);box-shadow:0 10px 24px rgba(108,47,239,.15)}
.int-tile-lbl{font-size:.74rem;font-weight:600;color:#475569;text-align:center;line-height:1.25}
@media(max-width:760px){.int-row{flex-wrap:wrap}.int-tile{flex:1 0 80px;aspect-ratio:auto;padding:14px 10px}}
.trust-logos{display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:center}
.trust-logo{font-family:var(--font-display);font-size:.88rem;font-weight:700;color:rgba(255,255,255,.2);white-space:nowrap;transition:color .3s}
.trust-logo:hover{color:var(--dim)}

/* WHAT IS */
.wis-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:52px}
.wis-panel{background:var(--dark3);border:1px solid var(--border);border-radius:20px;padding:24px;position:relative;overflow:hidden}
.wis-panel::before{content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;background:radial-gradient(circle,rgba(108,47,239,.2),transparent 70%)}
.grader-hdr{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:14px}
.grader-lbl{font-family:var(--font-display);font-size:.74rem;font-weight:800;color:var(--purple3);text-transform:uppercase;letter-spacing:.07em}
.grader-score{font-family:var(--font-display);font-size:2.8rem;font-weight:900;background:var(--grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.pillar-list{display:flex;flex-direction:column;gap:10px}
.pillar-item{display:flex;align-items:center;gap:10px}
.p-ico{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.78rem;flex-shrink:0}
.p-info{flex:1}
.p-name{font-size:.74rem;font-weight:700;margin-bottom:3px}
.p-track{height:5px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden}
.p-fill{height:100%;border-radius:5px;transition:width 2s ease}
.p-val{font-size:.72rem;font-weight:700;width:26px;text-align:right}
.ap-status{background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.15);border-radius:10px;padding:12px;margin-top:12px;display:flex;align-items:center;gap:10px}
.wis-points{display:flex;flex-direction:column;gap:14px}
.wis-pt{display:flex;gap:14px;padding:16px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px;transition:all .3s}
.wis-pt:hover{background:rgba(108,47,239,.06);border-color:rgba(108,47,239,.2);transform:translateX(4px)}
.wis-pt-ico{width:38px;height:38px;border-radius:10px;background:var(--grad-purple);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;box-shadow:0 4px 14px rgba(108,47,239,.3)}
.wis-pt h4{font-size:.88rem;font-weight:700;margin-bottom:3px}
.wis-pt p{font-size:.8rem;color:var(--muted);line-height:1.55}

/* BENTO */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.bc{background:var(--dark3);border:1px solid var(--border);border-radius:18px;padding:24px;position:relative;overflow:hidden;transition:all .3s;cursor:default}
.bc:hover{border-color:rgba(108,47,239,.3);transform:translateY(-3px);box-shadow:0 20px 48px rgba(0,0,0,.45)}
.bc.wide{grid-column:span 2}
.bc.tall{grid-row:span 2}
.bc::after{content:'';position:absolute;top:-80px;right:-80px;width:200px;height:200px;border-radius:50%;opacity:0;transition:opacity .4s}
.bc:hover::after{opacity:1}
.bc.p::after{background:radial-gradient(circle,rgba(108,47,239,.2),transparent 70%)}
.bc.c::after{background:radial-gradient(circle,rgba(5,212,245,.15),transparent 70%)}
.bc.g::after{background:radial-gradient(circle,rgba(0,229,160,.15),transparent 70%)}
.bc.a::after{background:radial-gradient(circle,rgba(245,166,35,.15),transparent 70%)}
.bc.pk::after{background:radial-gradient(circle,rgba(255,79,155,.15),transparent 70%)}
.bc-ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;margin-bottom:12px;position:relative;z-index:1}
.bc-ico.p{background:rgba(108,47,239,.18);border:1px solid rgba(108,47,239,.28)}
.bc-ico.c{background:rgba(5,212,245,.12);border:1px solid rgba(5,212,245,.22)}
.bc-ico.g{background:rgba(0,229,160,.12);border:1px solid rgba(0,229,160,.22)}
.bc-ico.a{background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.22)}
.bc-ico.pk{background:rgba(255,79,155,.12);border:1px solid rgba(255,79,155,.22)}
.bc h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin-bottom:8px;position:relative;z-index:1}
.bc p{font-size:.82rem;color:var(--muted);line-height:1.6;position:relative;z-index:1}
.bc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;position:relative;z-index:1}
.bc-tag{font-size:.68rem;font-weight:600;padding:3px 9px;border-radius:100px;background:rgba(255,255,255,.06);color:var(--dim)}

/* CAPABILITIES */
.cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:44px}
.cap-item{display:flex;gap:12px;padding:18px;background:var(--dark3);border:1px solid var(--border);border-radius:14px;transition:all .25s}
.cap-item:hover{border-color:rgba(108,47,239,.25);background:rgba(108,47,239,.04)}
.cap-n{font-family:var(--font-display);font-size:1.3rem;font-weight:900;color:#a78bfa;line-height:1;width:30px;flex-shrink:0}
.cap-h{font-size:.88rem;font-weight:700;margin-bottom:4px}
.cap-p{font-size:.78rem;color:var(--muted);line-height:1.55}

/* TESTIMONIALS */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.tcard{background:var(--dark3);border:1px solid var(--border);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px;transition:all .3s}
.tcard:hover{border-color:rgba(108,47,239,.25);transform:translateY(-3px)}
.tcard.feat{background:linear-gradient(135deg,rgba(108,47,239,.1),rgba(5,212,245,.05));border-color:rgba(108,47,239,.25)}
.tstars{color:var(--amber);font-size:.78rem;letter-spacing:2px}
.ttext{font-size:.86rem;color:rgba(255,255,255,.72);line-height:1.65;flex:1}
.tmetric{background:rgba(0,229,160,.07);border:1px solid rgba(0,229,160,.14);border-radius:7px;padding:7px 11px;font-size:.76rem;color:var(--green);font-weight:600}
.tauthor{display:flex;align-items:center;gap:10px}
.tavatar{width:36px;height:36px;border-radius:50%;background:var(--grad-purple);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;flex-shrink:0}
.tname{font-size:.84rem;font-weight:700}
.trole{font-size:.72rem;color:var(--dim)}

/* HOW IT WORKS */
.hiw{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:48px;position:relative}
.hiw::before{content:'';position:absolute;top:30px;left:10%;right:10%;height:2px;background:rgba(124,58,237,.2);border-radius:2px}
.hiw-line{position:absolute;top:30px;left:10%;right:10%;height:2px;border-radius:2px;z-index:0;overflow:visible;background:linear-gradient(90deg,#7c3aed,#22d3ee);box-shadow:0 0 8px rgba(124,58,237,.4)}
.hiw-line::after{content:'';position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(34,211,238,.9),0 0 4px #fff;transform:translate(-50%,-50%);animation:hiwdot 6.5s ease-in-out infinite}
@keyframes hiwdot{
  0%{left:0%;opacity:0}
  3%{opacity:1}
  5%,14%{left:0%}
  22%,31%{left:25%}
  39%,48%{left:50%}
  56%,65%{left:75%}
  73%,93%{left:100%}
  97%,100%{left:100%;opacity:0}
}
.hiw-step{text-align:center;position:relative;z-index:1}
.hiw-num{
  width:60px;height:60px;border-radius:16px;
  background:linear-gradient(135deg,#6c2fef,#8b5cf6);
  border:1px solid rgba(108,47,239,.5);
  color:#ffffff !important;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
  font-family:var(--font-display);font-size:1.25rem;font-weight:900;
  box-shadow:0 4px 14px rgba(108,47,239,.3),inset 0 1px 0 rgba(255,255,255,.2);
  transition:background .35s, box-shadow .25s, transform .25s
}
.hiw-step:hover .hiw-num{
  background:linear-gradient(135deg,#8b5cf6,#05d4f5);
  box-shadow:0 10px 30px rgba(108,47,239,.45),inset 0 1px 0 rgba(255,255,255,.25);
  transform:scale(1.06)
}
.hiw-icon{font-size:1.6rem;margin-bottom:10px}
.hiw-step h3{font-size:.86rem;font-weight:700;margin-bottom:5px}
.hiw-step p{font-size:.76rem;color:var(--muted);line-height:1.5}

/* STATS */
.stats-bar{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--dark2);position:relative;z-index:1}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
.sblock{background:var(--dark2);padding:36px 24px;text-align:center}
.snum{font-family:var(--font-display);font-size:2.8rem;font-weight:900;background:var(--grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:6px}
.slbl{font-size:.82rem;color:var(--muted)}

/* INTEGRATIONS */
.int-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:36px}
.int-chip{background:var(--dark3);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center;transition:all .3s}
.int-chip:hover{border-color:rgba(108,47,239,.3);transform:translateY(-2px)}
.int-icon{font-size:1.4rem;margin-bottom:5px}
.int-name{font-size:.7rem;font-weight:600;color:var(--muted)}

/* PRICING */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px;align-items:start}
.pcard{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:30px 26px;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
  display:flex; flex-direction:column;
  /* overflow:visible so the absolutely-positioned Most Popular ribbon
     (top:-12px) isn't clipped by the rounded card edge. The radial glow
     is contained by a child element below. */
  overflow:visible;
}
/* Glow is on a dedicated child that clips its own overflow so the rounded
   corner shape is preserved without affecting the ribbon at top:-12px. */
.pcard::after{
  content:''; position:absolute; inset:0; border-radius:22px;
  overflow:hidden; pointer-events:none; z-index:0;
  background:radial-gradient(circle at calc(100% + 80px) calc(100% + 80px),
             rgba(108,47,239,.22), transparent 50%);
  opacity:0; transition:opacity .35s;
}
.pcard:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.18);box-shadow:0 28px 60px rgba(0,0,0,.4)}
.pcard:hover::after{opacity:.7}
.pcard.pop{background:linear-gradient(160deg,rgba(108,47,239,.18),rgba(5,212,245,.06));border-color:rgba(108,47,239,.5);box-shadow:0 28px 60px rgba(108,47,239,.28)}
.pcard.pop::after{opacity:1}
.pop-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#6c2fef,#a78bfa);color:#fff;padding:5px 18px;border-radius:100px;font-size:.68rem;font-weight:800;white-space:nowrap;box-shadow:0 4px 14px rgba(108,47,239,.45);letter-spacing:.02em;z-index:3}
.pcard-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;margin-bottom:18px;border-radius:8px;font-size:.65rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(135deg,rgba(108,47,239,.4),rgba(5,212,245,.3));color:#fff;border:1px solid rgba(255,255,255,.12);z-index:2}
.pname{font-family:var(--font-display);font-size:1.8rem;font-weight:900;color:#fff;margin-bottom:6px;letter-spacing:-.025em;position:relative;z-index:1}
.pcard.pop .pname{background:linear-gradient(135deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pdesc{font-size:.84rem;color:rgba(255,255,255,.62);line-height:1.55;margin-bottom:22px;min-height:42px;position:relative;z-index:1}

/* Price row — BIG number, .00 decimal, strikethrough beside */
.pprice-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:4px;position:relative;z-index:1}
.pprice-main{display:flex;align-items:baseline;gap:2px}
.pprice-num{font-family:var(--font-display);font-size:3.2rem;font-weight:900;line-height:1;color:#fff;letter-spacing:-.03em}
.pprice-dec{font-family:var(--font-display);font-size:1rem;font-weight:700;color:rgba(255,255,255,.6);align-self:flex-start;margin-top:.5em;margin-left:1px}
.pprice-per{font-size:.88rem;color:rgba(255,255,255,.55);font-weight:500;margin-left:4px;align-self:flex-end;margin-bottom:.45em}
.pprice-orig{font-size:1.25rem;color:rgba(255,255,255,.32);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(239,68,68,.55);align-self:flex-end;margin-bottom:.45em;font-weight:700}
.pperiod{font-size:.78rem;color:rgba(255,255,255,.55);margin-bottom:22px;position:relative;z-index:1}

/* CTA stack */
.pcta-stack{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;position:relative;z-index:1}
.pbtn{display:block;text-align:center;padding:13px;border-radius:11px;font-size:.92rem;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.pbtn.out{border:1px solid rgba(255,255,255,.16);color:#fff;background:rgba(255,255,255,.02)}
.pbtn.out:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.pbtn.fill{background:linear-gradient(135deg,#6c2fef,#8b5cf6);color:#fff;box-shadow:0 8px 22px rgba(108,47,239,.42)}
.pbtn.fill:hover{box-shadow:0 12px 30px rgba(108,47,239,.6);transform:translateY(-1px)}
.pcta-alt{text-align:center;font-size:.78rem;color:rgba(255,255,255,.55)}
.pcta-alt a{color:var(--purple3);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pcta-alt a:hover{color:#c4b5fd}

/* Divider */
.pdivider{height:1px;background:rgba(255,255,255,.08);margin-bottom:18px;position:relative;z-index:1}

/* "What's inside" header */
.pinside-label{font-family:var(--font-display);font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:14px;position:relative;z-index:1}

/* Feature list */
.pfeats{display:flex;flex-direction:column;gap:11px;margin-bottom:18px;position:relative;z-index:1;flex:1}
.pfeat{display:flex;align-items:flex-start;gap:10px;font-size:.84rem;color:rgba(255,255,255,.82);line-height:1.5}
.pfeat i{color:#fff;font-size:.6rem;flex-shrink:0;margin-top:.35em;width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#00e5a0,#10b981);box-shadow:0 0 8px rgba(0,229,160,.4)}
.pfeat i.fa-times{background:rgba(255,255,255,.04);color:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.08);box-shadow:none}
.pfeat.dim{color:rgba(255,255,255,.42)}
/* Light theme — the dark-theme cross uses .04/.35 alpha on white which
   disappears on a white background. Use red-tinted background + red icon
   so excluded features stay obvious in both themes. */
[data-theme="light"] .pfeat i.fa-times{background:#fee2e2;color:#dc2626;border-color:#fca5a5}
[data-theme="light"] .pfeat.dim{color:#6b7280}
[data-theme="light"] .pfeat{color:#374151}

/* Monthly / Annual billing toggle */
.ob-bill-toggle{display:inline-flex;align-items:center;gap:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:4px;margin-top:22px}
.ob-bill-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border:none;background:transparent;color:rgba(255,255,255,.65);font-family:inherit;font-size:.84rem;font-weight:600;border-radius:99px;cursor:pointer;transition:all .2s}
.ob-bill-btn:hover{color:#fff}
.ob-bill-btn.active{background:linear-gradient(135deg,#6c2fef,#8b5cf6);color:#fff;box-shadow:0 4px 14px rgba(108,47,239,.35)}
.ob-bill-save{font-size:.65rem;font-weight:800;padding:2px 7px;border-radius:99px;background:rgba(0,229,160,.18);color:#00e5a0;letter-spacing:.04em}
.ob-bill-btn.active .ob-bill-save{background:rgba(255,255,255,.18);color:#fff}
[data-theme="light"] .ob-bill-toggle{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.12)}
[data-theme="light"] .ob-bill-btn{color:#475569}
[data-theme="light"] .ob-bill-btn:hover{color:#1a1a2e}

/* AI engines row */
.pai-row{margin-top:auto;padding-top:16px;border-top:1px dashed rgba(255,255,255,.08);position:relative;z-index:1}
.pai-label{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}
.pai-icons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pai-icon{width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:5px}
.pai-icon svg{width:100%;height:100%;display:block}
/* Brand colors — each chip uses the engine's official palette. The SVG
   glyph inside is a stylized geometric primitive that evokes the mark
   without reproducing trademarked artwork verbatim. */
.pai-icon.gpt{background:#10a37f;border-color:#0d8c6c}
.pai-icon.gemini{background:linear-gradient(135deg,#4285f4 0%,#9c27b0 50%,#ea4335 100%);border-color:rgba(255,255,255,.15)}
.pai-icon.perp{background:#22b8cd;border-color:#1a98ab}
.pai-icon.claude{background:#cc785c;border-color:#b86547}
.pai-icon.copilot{background:linear-gradient(135deg,#0078d4,#00a4ef);border-color:rgba(255,255,255,.15)}
.pai-soc-icon{width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:.82rem;border:1px solid rgba(255,255,255,.14)}
.pbtn{display:block;text-align:center;padding:10px;border-radius:9px;font-size:.86rem;font-weight:700;transition:all .2s}
.pbtn.out{border:1px solid var(--border2);color:var(--text)}
.pbtn.out:hover{background:rgba(255,255,255,.07)}
.pbtn.fill{background:var(--grad-purple);color:#fff;box-shadow:0 4px 18px rgba(108,47,239,.35)}
.pbtn.fill:hover{box-shadow:0 6px 24px rgba(108,47,239,.5);transform:translateY(-1px)}

/* CTA FINAL */
.lcta{background:linear-gradient(160deg,var(--dark),var(--dark4));border-top:1px solid var(--border);padding:96px 24px;text-align:center;position:relative;overflow:hidden;z-index:1}
.lcta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(108,47,239,.18),transparent 70%);pointer-events:none}
.lcta h2{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.6rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:18px;position:relative;z-index:1}
.lcta p{font-size:1rem;color:var(--muted);max-width:460px;margin:0 auto 32px;line-height:1.7;position:relative;z-index:1}
.lcta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.lcta-note{margin-top:14px;font-size:.76rem;color:var(--dim);position:relative;z-index:1}

/* FOOTER */
.lfooter{background:var(--dark);border-top:1px solid var(--border);padding:56px 24px 28px;position:relative;z-index:1}
.lfooter-inner{max-width:1160px;margin:0 auto}
.lfooter-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px;padding-bottom:44px;border-bottom:1px solid var(--border)}
.lfooter-brand p{font-size:.82rem;color:var(--muted);margin-top:10px;max-width:220px;line-height:1.65}
.lfooter-col h3{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:rgba(240,240,255,.78);margin-bottom:12px}
.lfooter-col a{display:block;font-size:.85rem;color:rgba(240,240,255,.6);margin-bottom:8px;transition:color .2s, transform .2s}
.lfooter-col a:hover{color:#ffffff;transform:translateX(2px)}
[data-theme="light"] .lfooter-col h3{color:#ffffff;opacity:.9}
[data-theme="light"] .lfooter-col a{color:rgba(255,255,255,.7)}
[data-theme="light"] .lfooter-col a:hover{color:#ffffff}
.lfooter-wordmark{font-family:var(--font-display);font-weight:900;font-size:clamp(4rem,18vw,14rem);line-height:.9;letter-spacing:.01em;text-align:center;white-space:nowrap;overflow:hidden;user-select:none;pointer-events:none;margin:34px 0 4px}
.lfooter-wordmark .o{color:rgba(255,255,255,.06)}
.lfooter-wordmark .b{color:rgba(167,139,250,.12)}
.lfooter-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);padding-bottom:84px;flex-wrap:wrap;gap:10px}
.lfooter-copy{font-size:.8rem;color:rgba(240,240,255,.65);font-weight:500}
.lfooter-bottom a{color:rgba(240,240,255,.65)!important;font-weight:500;transition:color .2s}
.lfooter-bottom a:hover{color:#ffffff!important}
.lfooter-socials{display:flex;gap:8px}
.fsoc{width:32px;height:32px;border-radius:7px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--dim);transition:all .2s;font-size:.82rem}
.fsoc:hover{border-color:var(--purple);color:var(--purple3)}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
/* Reveal animation — ALWAYS visible at base; only reduce opacity while pre-scroll.
   Previous version kept elements fully invisible (opacity:0) and the IntersectionObserver
   sometimes failed to un-hide them, leaving the page looking blank. Now even with no JS
   everything is readable, and the IO just polishes the entry with a subtle slide. */
.reveal{opacity:1;transform:none;transition:opacity .55s ease, transform .55s ease}
.js-scroll-ready .reveal{opacity:.18;transform:translateY(22px)}
.js-scroll-ready .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal,.js-scroll-ready .reveal{opacity:1!important;transform:none!important;transition:none}}
.rd1{transition-delay:.08s}.rd2{transition-delay:.16s}.rd3{transition-delay:.24s}.rd4{transition-delay:.32s}

/* RESPONSIVE */
@media(max-width:1024px){
  .bento,.wis-grid,.tgrid{grid-template-columns:1fr 1fr}
  .bc.wide,.bc.tall{grid-column:span 1;grid-row:span 1}
  .pgrid{grid-template-columns:1fr 1fr}
  .int-grid{grid-template-columns:repeat(4,1fr)}
  .hiw{grid-template-columns:1fr 1fr}
  .hiw::before,.hiw-line{display:none}
}
/* Laptop widths: the full nav (8 links + 2 pickers + theme + Sign In + CTA)
   overflows before the 768px hamburger kicks in, cutting off "Get Started
   Free". Tighten spacing progressively so everything fits. */
@media(max-width:1400px){
  .lnav{padding:0 18px;gap:10px}
  .lnav-links{gap:0}
  .lnav-links a{padding:7px 9px;font-size:.83rem}
  .lnav-right{gap:7px}
  .lnav-signin{padding:7px 13px;font-size:.83rem}
  .lnav .lnav-cta{padding:8px 16px !important}
}
@media(max-width:1200px){
  .lnav-links a{padding:6px 7px;font-size:.79rem}
  .lnav-right{gap:6px}
  .lnav .ob-lang-picker{display:none}       /* keep currency (₹ INR), drop the GB EN language picker */
  .lnav .lnav-cta{padding:8px 14px !important;font-size:.83rem}
}
@media(max-width:768px){
  /* Mobile header: show ONLY logo (left) + theme toggle + hamburger (right).
     Everything else lives in the slide-in drawer, so the burger is never
     crowded off-screen. */
  .lnav-links,.lnav-signin,.lnav-cta,.lnav .ob-cur-picker{display:none !important}
  .lnav-burger{display:flex !important}
  .lnav{padding:0 14px;gap:8px;overflow:visible}
  .lnav-logo{min-width:0;overflow:hidden}
  .lnav-right{gap:8px;flex-shrink:0}
  .lnav-burger{width:44px;height:44px}
  /* Kill horizontal overflow from wide interactive showcases on phones. */
  #otto-hub{overflow-x:hidden}
  #otto-hub .hbdiagram,#otto-hub .hbcol,#otto-hub .hbcol .hbin,#otto-hub .hbcore-wrap{min-width:0;max-width:100%}
  #otto-hub .hbchips{max-width:100%}
  .hero-h1{font-size:2.3rem}
  /* Hero stat grid — 4 per row (7 stats => 2 rows, last row of 3 centered),
     compact font so it fills the width instead of a tall single/2-col list */
  .hero-stats-row{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 6px;padding:24px 12px;margin:32px -20px 8px}
  .hero-stats-row .hstat{flex:0 0 calc(25% - 6px);text-align:center}
  .hstat-num{font-size:1.3rem}
  .hstat-lbl{font-size:.57rem;margin-top:4px;line-height:1.25}
  /* Capabilities "01-06" — 2 per row (number on top) so it isn't a long
     single column; compact type keeps each card readable on phones */
  .cap-grid{grid-template-columns:1fr 1fr;gap:8px}
  .cap-item{flex-direction:column;gap:6px;padding:13px}
  .cap-n{font-size:1.1rem;width:auto}
  .cap-h{font-size:.75rem}
  .cap-p{font-size:.66rem;line-height:1.45}
  .bento,.tgrid{grid-template-columns:1fr}
  .pgrid,.stats-row{grid-template-columns:1fr 1fr}
  .int-grid{grid-template-columns:repeat(3,1fr)}
  .lfooter-top{grid-template-columns:1fr 1fr;gap:26px 18px}
  .lfooter-brand{grid-column:1 / -1}
  .lfooter-brand p{max-width:none}
  .lsec{padding:60px 20px}
  .wis-grid{grid-template-columns:1fr}
  /* Dashboard mockup — size to content instead of a fixed height that
     clipped the lower cards; stack the two cards & make KPIs 2x2 so the
     whole "AI Engine Dashboard" is visible on phones. */
  .mbody{height:auto}
  .mmain{overflow:visible;gap:9px}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .mockup-wrap{margin-top:40px}
  /* Autopilot hub — tighter side padding so the stacked cards use the width */
  #otto-hub{padding:52px 16px}
  /* "Up & Running in 5 Minutes" — turn the 5 steps into a vertical timeline
     with a vertical animated connector line (was 2-per-row, line hidden).
     Number sits on a left rail; icon/title/text/demo flow beside it. */
  .hiw{grid-template-columns:1fr;gap:6px;max-width:340px;margin:32px auto 0}
  .hiw::before{display:block;top:30px;bottom:42px;left:29px;right:auto;width:2px;height:auto}
  .hiw-line{display:block;top:30px;bottom:42px;left:29px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,#7c3aed,#22d3ee)}
  .hiw-line::after{left:0;top:0;animation:hiwdotV 6.5s ease-in-out infinite}
  .hiw-step{position:relative;text-align:left;padding:0 0 12px 76px;min-height:62px}
  .hiw-num{position:absolute;left:0;top:0;margin:0}
  .hiw-icon{font-size:1.25rem;margin:0 0 4px}
  .hiw-step h3{margin-bottom:4px}
  .hiw-step p{margin-bottom:6px}
}
/* Vertical travelling dot for the mobile "Up & Running" timeline connector */
@keyframes hiwdotV{0%{top:0%;opacity:0}3%{opacity:1}5%,14%{top:0%}22%,31%{top:25%}39%,48%{top:50%}56%,65%{top:75%}73%,93%{top:100%}97%,100%{top:100%;opacity:0}}
/* ── Phone fixes: keep the existing design, just make it fit the
      viewport with no clipped/cut-off content (design unchanged) ──
   1) Pricing grid stacks to ONE column so Growth/Agency cards are no
      longer sliced off the right edge on phones.
   2) Top nav compacts (tighter padding, smaller CTA, currency code
      hidden) so "Get Started Free" never overflows the viewport.
   3) The "3 Autopilots" unified-message CTA row shrinks/wraps instead
      of pushing past its card. */
@media(max-width:600px){
  .pgrid{grid-template-columns:1fr}
  .lnav{padding:0 12px;gap:6px}
  .lnav-right{gap:6px}
  .lnav .lnav-cta{padding:7px 12px !important;font-size:.78rem !important;white-space:nowrap}
  .ob-cur-code{display:none}
  .ob-cur-btn{padding:6px 7px}
  .lnav-logo .otto-wordmark-text{font-size:1.02rem}
  .lnav-logo img{width:32px;height:32px}
  .pillar-cta-row{flex-shrink:1 !important;width:100%}
  .pillar-cta-row a{flex:1 1 140px;justify-content:center}
  /* Modules pill cloud — phones show only the headline modules (.pill-key)
     plus a "＋ more" chip; the full list still renders on desktop. */
  .pill-cloud{gap:6px}
  .pill{padding:5px 11px;font-size:.66rem}
  .pill-cloud .pill:not(.pill-key):not(.pill-more){display:none}
  .pill-more{display:inline-flex !important}
}
@media(max-width:400px){
  .lnav .lnav-cta{padding:6px 10px !important;font-size:.74rem !important}
  .ob-cur-sym{display:none}
  .lnav-logo .otto-wordmark-text{font-size:.95rem}
}

/* ═══════════════════════════════════════════════════════════
   WORK SMARTER SECTION
═══════════════════════════════════════════════════════════ */
.smarter-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.smarter-list{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.smarter-item{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px;transition:all .35s cubic-bezier(.16,1,.3,1)}
.smarter-item:hover{border-color:rgba(108,47,239,.3);background:rgba(108,47,239,.05);transform:translateX(5px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.smarter-item-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.smarter-item-title{font-size:.88rem;font-weight:700;margin-bottom:3px}
.smarter-item-desc{font-size:.78rem;color:var(--muted);line-height:1.5}

/* Dashboard Screen */
.smarter-visual{position:relative;padding:20px 36px}
.smarter-screen{background:#0a0a1a;border:1px solid rgba(255,255,255,.12);border-radius:20px;overflow:hidden;box-shadow:0 48px 96px rgba(0,0,0,.7),0 0 0 1px rgba(108,47,239,.15),0 0 80px rgba(108,47,239,.07)}
.sv-chrome{background:#0d0d1e;padding:11px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.sv-dots{display:flex;gap:5px}
.sv-dots span{width:10px;height:10px;border-radius:50%}
.sv-dots span:nth-child(1){background:#ef4444}
.sv-dots span:nth-child(2){background:#f59e0b}
.sv-dots span:nth-child(3){background:#10b981}
.sv-url{flex:1;background:rgba(255,255,255,.05);border-radius:5px;padding:4px 12px;font-size:.68rem;color:var(--dim);font-family:monospace;text-align:center}
.sv-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.sv-header{display:flex;align-items:center;justify-content:space-between}
.sv-logo{font-family:var(--font-display);font-size:.82rem;font-weight:800;background:var(--grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sv-status-pill{display:flex;align-items:center;gap:5px;background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.2);color:var(--green);padding:3px 10px;border-radius:100px;font-size:.6rem;font-weight:700}
.sv-pulse{width:6px;height:6px;background:var(--green);border-radius:50%;animation:blink 2s infinite}
.sv-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.sv-kpi{background:#0f0f1f;border:1px solid var(--border);border-radius:8px;padding:8px 6px;text-align:center;animation:fadeUp .5s ease both}
.sv-kpi-val{font-family:var(--font-display);font-size:1rem;font-weight:800;line-height:1}
.sv-kpi-lbl{font-size:.5rem;color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.sv-kpi-trend{font-size:.52rem;font-weight:700;margin-top:2px;color:var(--green)}
.sv-feed-title{font-size:.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.55)}
.sv-feed{display:flex;flex-direction:column;gap:4px}
.sv-feed-item{display:flex;align-items:center;gap:7px;padding:6px 8px;background:rgba(255,255,255,.025);border:1px solid transparent;border-radius:7px;animation:feedSlide .5s ease both}
.sv-feed-item--active{border-color:rgba(245,166,35,.22);background:rgba(245,166,35,.04)}
.sv-feed-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sv-feed-text{font-size:.6rem;color:rgba(255,255,255,.5);flex:1}
.sv-feed-time{font-size:.52rem;color:rgba(255,255,255,.5)}
.sv-score-row{display:flex;align-items:center;gap:10px;background:#0f0f1f;border:1px solid var(--border);border-radius:10px;padding:10px}
.sv-score-ring{position:relative;width:60px;height:60px;flex-shrink:0}
.sv-score-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.85rem;font-weight:800;color:var(--green)}
.sv-pillars{flex:1;display:flex;flex-direction:column;gap:4px}
.sv-pill-row{display:flex;align-items:center;gap:5px}
.sv-pill-row span:first-child{font-size:.52rem;width:44px;flex-shrink:0}
.sv-pill-row span:last-child{font-size:.52rem;width:18px;text-align:right}
.sv-pill-track{flex:1;height:3px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.sv-pill-fill{height:100%;border-radius:3px}

/* Floating notification badges */
.sv-float{position:absolute;background:rgba(10,10,25,.95);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:9px 14px;backdrop-filter:blur(12px);white-space:nowrap;box-shadow:0 12px 32px rgba(0,0,0,.4);z-index:10}
.sv-float-1{top:8px;right:4px;animation:floatBadge 3s ease-in-out infinite}
.sv-float-2{bottom:80px;left:2px;animation:floatBadge 3.2s ease-in-out 1s infinite}
.sv-float-3{bottom:16px;right:10px;animation:floatBadge 3.5s ease-in-out 2s infinite}
@keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes feedSlide{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}

/* ═══════════════════════════════════════════════════════════
   TOOL COST COMPARISON SECTION
═══════════════════════════════════════════════════════════ */
.tool-vs-grid{display:grid;grid-template-columns:1fr 72px 1fr;gap:32px;align-items:start;margin-top:56px}
.tool-cost-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:14px}
.tool-items{display:flex;flex-direction:column;gap:5px;margin-bottom:18px}
.tool-item{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.1);border-radius:9px;transition:all .2s}
.tool-item:hover{border-color:rgba(239,68,68,.25);background:rgba(239,68,68,.07)}
.tool-item-name{font-size:.8rem;color:var(--muted)}
.tool-item-price{font-family:var(--font-display);font-size:.88rem;font-weight:800;color:#ef4444}
.tool-item-price span{font-size:.68rem;font-weight:400;color:var(--dim)}
.tool-total-bar{background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.18);border-radius:14px;padding:18px 20px}
.tool-total-label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:rgba(239,68,68,.7);margin-bottom:4px}
.tool-total-price{font-family:var(--font-display);font-size:2.2rem;font-weight:900;color:#ef4444;line-height:1}
.tool-total-price span{font-size:.88rem;font-weight:400}
.tool-total-annual{font-size:.76rem;color:var(--dim);margin-top:6px}

.vs-col{display:flex;flex-direction:column;align-items:center;gap:0;padding-top:32px}
.vs-circle{width:56px;height:56px;border-radius:50%;background:var(--dark3);border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.88rem;font-weight:900;color:var(--dim)}
.vs-line{flex:1;width:1px;background:var(--border);min-height:80px;margin:8px 0}

.airp-card{background:linear-gradient(160deg,rgba(108,47,239,.16),rgba(5,212,245,.06));border:1px solid rgba(108,47,239,.4);border-radius:22px;padding:32px;position:relative;box-shadow:0 24px 64px rgba(108,47,239,.2),0 0 0 1px rgba(108,47,239,.08)}
.airp-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad-purple);color:#fff;padding:4px 20px;border-radius:100px;font-size:.68rem;font-weight:800;white-space:nowrap;box-shadow:0 6px 20px rgba(108,47,239,.5);letter-spacing:.03em}
.airp-eyebrow{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--purple3);margin-bottom:10px}
.airp-price-row{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.airp-price-num{font-family:var(--font-display);font-size:3.8rem;font-weight:900;background:var(--grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.airp-price-mo{font-size:1.1rem;color:var(--muted)}
.airp-saves{font-size:.82rem;margin-bottom:22px}
.airp-inc-title{font-size:.72rem;font-weight:700;color:var(--purple3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.airp-inc-list{display:flex;flex-direction:column;gap:7px;margin-bottom:24px}
.airp-inc-item{display:flex;align-items:center;gap:9px;font-size:.82rem;color:rgba(255,255,255,.75)}
.airp-inc-item i{font-size:.7rem;flex-shrink:0;color:var(--green)}
.airp-cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px;background:var(--grad-purple);border-radius:11px;font-size:.9rem;font-weight:700;color:#fff;box-shadow:0 8px 28px rgba(108,47,239,.45);transition:all .25s}
.airp-cta:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(108,47,239,.6)}

/* Strikethrough animation */
.strike-price{position:relative;display:inline-block}
.strike-price::after{content:'';position:absolute;left:-4px;right:-4px;top:50%;height:3px;background:#ef4444;transform:scaleX(0);transform-origin:left;transition:transform .8s ease .3s;border-radius:2px}
.strike-price.struck::after{transform:scaleX(1)}

/* Smarter Section responsive */
@media(max-width:1024px){
  .smarter-grid{grid-template-columns:1fr;gap:40px}
  .smarter-visual{padding:0}
  .tool-vs-grid{grid-template-columns:1fr}
  .vs-col{flex-direction:row;padding-top:0;padding:16px 0}
  .vs-line{min-height:0;height:1px;width:80px;margin:0 8px;flex:none}
}
@media(max-width:768px){
  .sv-float{display:none}
  .sv-kpis{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════════════════════════════
   HERO UPGRADE — PARTICLES + WORD CYCLING
═══════════════════════════════════════════════════════════ */
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.55}
/* Hero "lamp" light — bright beam at top emitting a cyan→purple glow downward */
/* soft purple glow behind the top of the hero */
.hero-glow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:min(1100px,95%);height:560px;z-index:0;pointer-events:none;background:radial-gradient(ellipse 55% 65% at 50% 0%, rgba(124,58,237,.28) 0%, rgba(124,58,237,.10) 38%, transparent 68%);opacity:0;animation:lampOn 1.4s .15s ease forwards}
@keyframes lampOn{to{opacity:1}}
[data-theme="light"] .hero-lamp{opacity:.55}
.hero > *:not(#heroCanvas):not(.hero-glow){position:relative;z-index:2}
/* min-width was 220px with text-align:left to absorb width changes when
   the rotating word swapped between long and short ("SEO" vs "Digital
   Marketing"). The new word list is shorter (max ~"Content"/"Social"),
   so a smaller min-width keeps the sentence centered without leaving a
   big empty box on the right when the active word is short. */
.hero-word{display:inline-block;background:var(--grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:opacity .25s,transform .25s;min-width:140px;text-align:center}
.hero-word.switching{opacity:0;transform:translateY(12px)}
/* Amber-toned rotator for the H2 verb (Stop doing X) — pairs with the
   purple/cyan one in the H1 and the green "Start approving results." */
.hero-word-amber{display:inline-block;background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:opacity .25s,transform .25s;font-weight:800}
.hero-word-amber.switching{opacity:0;transform:translateY(8px)}
/* H2 sub-headline below the H1 — half the visual weight of the H1 but
   still hero-sized. Same fade-up animation, slightly delayed. */
.hero-h2{font-family:var(--font-display);font-size:clamp(1.25rem,2.6vw,2rem);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--text);max-width:760px;margin:-6px auto 26px;animation:fadeUp .8s .2s ease both;opacity:.92}
.hero-h2 .grad-green{background:linear-gradient(135deg,#14B583 0%,#06b6d4 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-theme="light"] .hero-h2{color:#1e293b}
@media(max-width:600px){.hero-h2{font-size:1.05rem;margin-top:-2px}}
.hero-new-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,rgba(108,47,239,.15),rgba(5,212,245,.08));border:1px solid rgba(108,47,239,.3);color:var(--purple3);padding:5px 14px;border-radius:100px;font-size:.72rem;font-weight:700;margin-bottom:16px;animation:fadeUp .6s ease both;letter-spacing:.03em}
.hero-new-dot{width:6px;height:6px;border-radius:50%;background:var(--purple3);animation:blink 1.5s infinite}

/* ═══════════════════════════════════════════════════════════
   MARQUEE / TICKER STRIP
═══════════════════════════════════════════════════════════ */
.marquee-strip{overflow:hidden;background:rgba(108,47,239,.06);border-top:1px solid rgba(108,47,239,.12);border-bottom:1px solid rgba(108,47,239,.12);padding:13px 0;position:relative;z-index:1}
.marquee-strip::before,.marquee-strip::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.marquee-strip::before{left:0;background:linear-gradient(90deg,var(--dark),transparent)}
.marquee-strip::after{right:0;background:linear-gradient(270deg,var(--dark),transparent)}
.marquee-track{display:flex;gap:0;width:max-content;animation:marqueeScroll 32s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:8px;padding:0 28px;font-size:.82rem;font-weight:600;color:var(--muted);white-space:nowrap;flex-shrink:0}
.marquee-item i{font-size:.78rem}
.marquee-item strong{color:var(--text)}
.marquee-sep{width:1px;height:16px;background:rgba(255,255,255,.1);flex-shrink:0;align-self:center}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══════════════════════════════════════════════════════════
   BUTTON SHIMMER & MAGNETIC EFFECT
═══════════════════════════════════════════════════════════ */
.btn-xl-purple{position:relative;overflow:hidden}
.btn-xl-purple::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg);transition:left .55s ease}
.btn-xl-purple:hover::after{left:150%}
.btn-xl-purple:active{transform:translateY(0) scale(.97)!important}

/* ═══════════════════════════════════════════════════════════
   CARD 3D TILT EFFECT
═══════════════════════════════════════════════════════════ */
.tilt-card{transform-style:preserve-3d;transition:transform .08s ease,box-shadow .3s ease}

/* ═══════════════════════════════════════════════════════════
   NAV ACTIVE LINK UNDERLINE
═══════════════════════════════════════════════════════════ */
.lnav-links a{position:relative}
.lnav-links a.active{color:var(--text)}
.lnav-links a::after{content:'';position:absolute;bottom:-2px;left:50%;right:50%;height:2px;background:var(--grad-hero);border-radius:2px;transition:left .25s,right .25s}
.lnav-links a.active::after,.lnav-links a:hover::after{left:8px;right:8px}

/* ═══════════════════════════════════════════════════════════
   SECTION GLOW DIVIDERS
═══════════════════════════════════════════════════════════ */
.glow-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(108,47,239,.4),rgba(5,212,245,.3),transparent);position:relative;z-index:1}
.glow-divider::after{content:'';position:absolute;top:-20px;left:0;right:0;height:40px;background:linear-gradient(180deg,transparent,rgba(108,47,239,.06),transparent);pointer-events:none}

/* ═══════════════════════════════════════════════════════════
   ANNOUNCEMENT BANNER (top of page)
═══════════════════════════════════════════════════════════ */
.top-banner{
  position:relative;z-index:1001;
  background:linear-gradient(90deg,#6c2fef 0%,#8b5cf6 35%,#05d4f5 100%);
  background-size:200% 100%;background-position:0% 50%;
  padding:10px 50px 10px 24px;text-align:center;
  font-size:.8rem;font-weight:600;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  animation:bannerShift 10s ease-in-out infinite alternate;
}
@keyframes bannerShift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.top-banner span{display:inline-flex;align-items:center;gap:8px;letter-spacing:.01em}
.top-banner a{
  color:#fff;text-decoration:none;
  padding:2px 10px;border-radius:100px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
  font-weight:700;font-size:.75rem;
  transition:background .2s, border-color .2s
}
.top-banner a:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.5)}
.top-banner-close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.15);border:none;color:#fff;cursor:pointer;
  width:24px;height:24px;border-radius:50%;line-height:1;font-size:.75rem;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s
}
.top-banner-close:hover{background:rgba(0,0,0,.32)}
@media (max-width:640px){.top-banner{font-size:.72rem;padding:8px 40px 8px 14px;gap:8px}.top-banner a{font-size:.68rem;padding:1px 8px}}

/* ═══════════════════════════════════════════════════════════
   PRICING CARD — ANIMATED GRADIENT BORDER
═══════════════════════════════════════════════════════════ */
@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.pcard.pop{
  background:linear-gradient(var(--dark3),var(--dark3)) padding-box,
    conic-gradient(from var(--border-angle),#6c2fef,#05d4f5,#00e5a0,#6c2fef) border-box;
  border:1px solid transparent;
  animation:borderRotate 4s linear infinite;
}
@keyframes borderRotate{to{--border-angle:360deg}}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .marquee-item{padding:0 18px;font-size:.76rem}
  .top-banner{font-size:.72rem;padding:7px 40px 7px 24px}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .bg-orb{animation:none}
  .sv-float-1,.sv-float-2,.sv-float-3{animation:none}
}



    .lnav-hasmenu{position:relative}
    .lnav-hasmenu>a .fcaret{font-size:.6rem;opacity:.7;margin-left:3px}
    .lnav-menu{position:absolute;top:calc(100% + 10px);left:0;width:300px;background:#0d0d1c;
      border:1px solid var(--border2);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.5);
      padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:1200}
    .lnav-hasmenu:hover .lnav-menu{opacity:1;visibility:visible;transform:none}
    .lnav-menu a{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:11px;color:var(--text)}
    .lnav-menu a:hover{background:rgba(124,47,239,.16)}
    .lnav-menu .di{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex-shrink:0;color:#fff}
    .lnav-menu small{display:block;color:var(--muted);font-size:.74rem;font-weight:400;margin-top:1px}
    .lnav-menu strong{font-weight:600;font-size:.92rem}
  


.scroll-top{position:fixed;right:22px;bottom:88px;z-index:1050;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;background:var(--grad-purple);color:#fff;font-size:1rem;box-shadow:0 8px 24px rgba(108,47,239,.45);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility .3s;display:flex;align-items:center;justify-content:center}
.scroll-top.show{opacity:1;visibility:visible;transform:none}
.scroll-top:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(108,47,239,.6)}



/* ─── Currency picker — flag-based, glassmorphism, smooth menu ─── */
.ob-cur-picker { position: relative; display: inline-block; }
.ob-cur-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 10px 7px 12px; border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  font-family: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; outline: none;
  transition: background .18s, border-color .18s, transform .12s;
}
.ob-cur-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
.ob-cur-btn:active { transform: scale(.97); }
.ob-cur-btn .ob-cur-flag { font-size: 1.05rem; line-height: 1; }
.ob-cur-btn .ob-cur-sym { color: var(--purple3, #a78bfa); font-weight: 700; }
.ob-cur-btn .ob-cur-code { letter-spacing: .04em; }
.ob-cur-btn .ob-cur-chev { color: rgba(255,255,255,.45); transition: transform .2s; }
.ob-cur-picker.open .ob-cur-btn .ob-cur-chev { transform: rotate(180deg); }
.ob-cur-picker.open .ob-cur-btn { border-color: rgba(124,47,239,.5); background: rgba(124,47,239,.08); }

.ob-cur-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 230px;
  padding: 6px; border-radius: 12px;
  background: rgba(20, 20, 40, .85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 12px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 200;
}
.ob-cur-picker.open .ob-cur-menu {
  opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1); pointer-events: auto;
}
.ob-cur-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: 9px;
  background: transparent; border: none; color: inherit; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: background .15s;
}
.ob-cur-opt:hover { background: rgba(124,47,239,.15); }
.ob-cur-opt .ob-cur-flag { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.ob-cur-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ob-cur-opt-name { font-size: .86rem; font-weight: 700; color: #fff; }
.ob-cur-opt-sub  { font-size: .72rem; color: rgba(255,255,255,.5); }
.ob-cur-tick { color: var(--green, #00e5a0); opacity: 0; transition: opacity .15s; flex-shrink: 0; }
.ob-cur-opt.active .ob-cur-tick { opacity: 1; }
.ob-cur-opt.active { background: rgba(124,47,239,.12); }

/* Light theme overrides */
[data-theme="light"] .ob-cur-btn { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.12); color: #1a1a2e; }
[data-theme="light"] .ob-cur-btn:hover { background: rgba(15,23,42,.07); }
[data-theme="light"] .ob-cur-menu { background: rgba(255,255,255,.96); border-color: rgba(15,23,42,.1); }
[data-theme="light"] .ob-cur-opt-name { color: #1a1a2e; }
[data-theme="light"] .ob-cur-opt-sub  { color: rgba(15,23,42,.5); }
[data-theme="light"] .ob-cur-opt:hover { background: rgba(124,47,239,.08); }

@media (prefers-reduced-motion: reduce) {
  .ob-cur-btn, .ob-cur-menu, .ob-cur-chev, .ob-cur-opt { transition: none; }
}



.pill-cloud-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 18px;border-radius:100px;background:linear-gradient(135deg,rgba(108,47,239,.2),rgba(139,92,246,.2));border:1px solid rgba(108,47,239,.35);color:#a78bfa;font-weight:800;font-size:.78rem;letter-spacing:.03em;margin-bottom:20px}
.pill-cloud-badge span{font-size:.9rem}
[data-theme="light"] .pill-cloud-badge{background:rgba(108,47,239,.08);border-color:rgba(108,47,239,.2);color:#6c2fef}
.pill-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:940px;margin:0 auto}
.pill{
  display:inline-flex;align-items:center;padding:8px 16px;border-radius:100px;white-space:nowrap;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  font-size:.84rem;font-weight:600;color:var(--text);
  transition:background .2s, border-color .2s, color .2s, transform .2s;
  cursor:default;
}
.pill:hover{background:linear-gradient(135deg,rgba(108,47,239,.16),rgba(5,212,245,.1));border-color:rgba(108,47,239,.5);color:#ffffff;transform:translateY(-1px)}
.pill-more{display:none;background:rgba(108,47,239,.14);border-color:rgba(108,47,239,.4);color:#a78bfa;font-weight:700}
[data-theme="light"] .pill{background:#ffffff;border-color:rgba(15,23,42,.12);color:#1a1a2e;box-shadow:0 1px 2px rgba(15,23,42,.04)}
[data-theme="light"] .pill:hover{background:linear-gradient(135deg,rgba(108,47,239,.08),rgba(5,212,245,.05));border-color:#6c2fef;color:#6c2fef;box-shadow:0 4px 12px rgba(108,47,239,.12)}



#otto-hub{--card:#0d0d15;--card2:#11111c;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);--tx:#f4f4f8;--tx2:rgba(244,244,248,.62);--tx3:rgba(244,244,248,.4);--purple:#8b5cf6;--cyan:#22d3ee;--green:#10e6a0;--amber:#fbbf24;--red:#ef4444;--grad:linear-gradient(120deg,#a78bfa,#22d3ee);--e:cubic-bezier(.22,1,.36,1);padding:80px 48px;background:#0a0a12}
/* Hub is a self-contained dark island — override the global light-theme text darkening so its base text stays light in both themes (the hub's own dim classes keep their tone via higher specificity). */
[data-theme="light"] #otto-hub,[data-theme="light"] #otto-hub h2,[data-theme="light"] #otto-hub h3,[data-theme="light"] #otto-hub p,[data-theme="light"] #otto-hub div,[data-theme="light"] #otto-hub span,[data-theme="light"] #otto-hub small,[data-theme="light"] #otto-hub b,[data-theme="light"] #otto-hub label{color:var(--tx)}
#otto-hub .hbwrap{max-width:none;margin:0}
#otto-hub .hbhead{text-align:center;max-width:none;margin:0 auto 8px}
#otto-hub .hbhead .sec-h2{color:#fff;margin:0 auto 10px;white-space:nowrap}
#otto-hub .hbhead .sec-p{color:rgba(244,244,248,.62);margin:0 auto;max-width:680px}
#otto-hub .hbhead .sec-p strong{color:#fff;font-weight:700}
@keyframes hbblink{50%{opacity:.35}}
@keyframes hbspin{to{transform:rotate(360deg)}}
.hbdiagram{position:relative;display:grid;grid-template-columns:minmax(180px,0.85fr) 120px minmax(320px,1.4fr);column-gap:80px;align-items:center;max-width:none;margin:40px 0 0}
.hbbeams{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hbcol{display:flex;flex-direction:column;z-index:2;position:relative}
.hbcol.in{gap:20px}.hbcol.out{gap:12px}
.hbcore-wrap{display:flex;align-items:center;justify-content:center;z-index:3}
.hbcore{width:96px;height:96px;border-radius:22px;background:linear-gradient(145deg,#7c3aed,#22d3ee);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(255,255,255,.15),0 24px 56px -16px rgba(124,58,237,.8),inset 0 1px 0 rgba(255,255,255,.3);animation:hbpulse 3.5s ease-in-out infinite}
@keyframes hbpulse{50%{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 24px 72px -12px rgba(34,211,238,.7),inset 0 1px 0 rgba(255,255,255,.3)}}
.hbcore .lgimg{width:40px;height:40px;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.25))}.hbcore b{font-family:var(--font-display);font-weight:700;color:#fff;font-size:.72rem;margin-top:4px}.hbcore small{font-size:.5rem;color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
.hbin{background:var(--card2);border:1px solid var(--line2);border-radius:12px;padding:11px 12px;box-shadow:0 10px 26px -14px rgba(0,0,0,.7)}
.hbin .lbl{display:flex;align-items:center;gap:7px;font-size:.7rem;font-weight:700;color:var(--tx2);margin-bottom:8px}
.hbin .lbl .ic{width:21px;height:21px;border-radius:7px;background:rgba(139,92,246,.2);display:flex;align-items:center;justify-content:center;font-size:.72rem}
.hbbar{display:flex;align-items:center;gap:6px;background:#07070d;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:.76rem;color:var(--tx)}
.hbbar .lock{color:var(--green);font-size:.62rem}
.hbtype{white-space:nowrap;overflow:hidden;width:17ch;border-right:2px solid transparent}
@keyframes hbtypek{0%{width:0;border-right-color:var(--cyan)}85%{width:17ch;border-right-color:var(--cyan)}100%{width:17ch;border-right-color:transparent}}
.hbdiagram.play .hbtype{animation:hbtypek 1.9s steps(17) .3s both}
.hbchips{display:flex;flex-wrap:wrap;gap:6px}
.hbchip{font-size:.68rem;font-weight:600;background:rgba(124,58,237,.14);border:1px solid rgba(124,58,237,.3);color:#c4b5fd;padding:4px 9px;border-radius:7px;opacity:1}
.hbchip.ai{background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(34,211,238,.18));border-color:rgba(34,211,238,.4);color:#fff}
@keyframes hbchipk{0%{opacity:0;transform:translateY(8px) scale(.92)}100%{opacity:1;transform:none}}
.hbdiagram.play .hbchip{opacity:0;animation:hbchipk .5s var(--e) both}
.hbdiagram.play .hbchip:nth-child(1){animation-delay:1.7s}.hbdiagram.play .hbchip:nth-child(2){animation-delay:2.0s}.hbdiagram.play .hbchip:nth-child(3){animation-delay:2.3s}.hbdiagram.play .hbchip:nth-child(4){animation-delay:2.6s}
.hbin-country{position:relative;z-index:14}
.hbsel{position:relative}
.hbsel .cur{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;font-size:.8rem;font-weight:600;background:#07070d;border:1px solid var(--line);border-radius:8px}
.hbsel .cur .ch{color:var(--tx3);font-size:.7rem}
.hbdiagram.play .hbsel .cur .ch{animation:hbrotk 3.2s 3.1s both}
@keyframes hbrotk{0%,4%{transform:rotate(0)}12%,72%{transform:rotate(180deg)}84%,100%{transform:rotate(0)}}
.hbopts{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#0b0b16;border:1px solid var(--line2);border-radius:10px;box-shadow:0 24px 50px -14px rgba(0,0,0,.85);padding:5px;z-index:30;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top}
.hbdiagram.play .hbopts{animation:hbdropk 3.2s var(--e) 3.1s both}
@keyframes hbdropk{0%,4%{opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98)}12%,70%{opacity:1;visibility:visible;transform:none}82%,100%{opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98)}}
.hbopt{padding:8px 11px;font-size:.82rem;color:var(--tx2);display:flex;align-items:center;gap:8px;border-radius:7px}
.hbopt.sel{background:transparent;color:var(--tx2);font-weight:600}
.hbdiagram.play .hbopt.sel{animation:hbselk 3.2s 3.1s both}
@keyframes hbselk{0%,26%{background:transparent;color:var(--tx2)}40%,70%{background:rgba(124,58,237,.24);color:#fff}82%,100%{background:transparent;color:var(--tx2)}}
.hbout{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;transition:border-color .3s,background .3s,box-shadow .3s,transform .3s}
.hbout:hover{border-color:var(--line2)}
.hbout.on{border-color:transparent;background:linear-gradient(155deg,rgba(124,58,237,.1),rgba(34,211,238,.05) 55%,var(--card));box-shadow:0 0 0 1px rgba(34,211,238,.4),0 20px 44px -20px rgba(34,211,238,.55)}
.hbouthd{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer}
.hbouthd .oi{position:relative;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.88rem;flex-shrink:0;background:rgba(34,211,238,.14);transition:.3s}
.hbout.on .hbouthd .oi{background:linear-gradient(135deg,rgba(124,58,237,.5),rgba(34,211,238,.34))}
.hbout.on .hbouthd .oi::after{content:"";position:absolute;inset:-3px;border-radius:10px;border:1.5px solid var(--cyan);animation:hbping 1.5s ease-out infinite}
@keyframes hbping{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.hbouthd .ot{font-size:.8rem;font-weight:600;line-height:1.25;color:var(--tx)}
.hbouthd .os{font-size:.64rem;color:var(--tx3);transition:.3s}
.hbout.on .hbouthd .os{color:var(--cyan)}
.hbouthd .dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);opacity:0;flex-shrink:0}
.hbout.on .hbouthd .dot{opacity:1;animation:hbblink 1.3s infinite}
.hboutbody{display:none;padding:2px 12px 12px}
.hbout.on .hboutbody{display:block;min-height:140px}
.hbsl{font-size:.62rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:7px}
.hbsl .sp{display:inline-block;width:12px;height:12px;border:2px solid var(--line2);border-top-color:var(--cyan);border-radius:50%;animation:hbspin .8s linear infinite}
.hbprog{height:5px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden;margin:2px 0 10px}
.hbprog i{display:block;height:100%;width:0;background:var(--grad);border-radius:4px;animation:hbfill 1.3s var(--e) forwards}
@keyframes hbfill{to{width:100%}}
.hbrow{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;margin-bottom:6px;font-size:.76rem;color:var(--tx);opacity:0;animation:hbrise .5s var(--e) forwards}
.hbrow:nth-child(2){animation-delay:1.3s}.hbrow:nth-child(3){animation-delay:1.5s}.hbrow:nth-child(4){animation-delay:1.7s}
@keyframes hbrise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hbrow .x{color:var(--red)}.hbrow .ck{color:var(--green);opacity:0;animation:hbshow .3s 2.9s forwards}
.hbrow:nth-child(3) .ck{animation-delay:3.05s}.hbrow:nth-child(4) .ck{animation-delay:3.2s}
.hbrow .x{animation:hbhide .3s 2.9s forwards}.hbrow:nth-child(3) .x{animation-delay:3.05s}.hbrow:nth-child(4) .x{animation-delay:3.2s}
@keyframes hbshow{to{opacity:1}}@keyframes hbhide{to{opacity:0}}
.hbrow .st{margin-left:auto;font-size:.64rem;font-weight:700;color:var(--tx3)}
.hbbtn{display:inline-flex;align-items:center;gap:7px;background:var(--grad);color:#0a0a10;font-family:var(--font-display);font-weight:700;font-size:.76rem;padding:8px 15px;border-radius:9px;margin-top:3px;opacity:0;animation:hbbtnk 2.5s var(--e) forwards}
@keyframes hbbtnk{0%,78%{opacity:0;transform:translateY(6px)}86%{opacity:1;transform:none}91%{transform:scale(.93)}100%{opacity:1;transform:none}}
.hbresult{margin-top:11px;font-size:.76rem;font-weight:600;color:var(--green);opacity:0;animation:hbshow .5s 3.6s forwards}
.hbresult .up{color:var(--cyan)}
.hbcode{background:#07070d;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-family:monospace;font-size:.66rem;color:#a78bfa;line-height:1.65;white-space:pre;overflow:hidden;opacity:0;margin:3px 0;animation:hbshow .5s 1.7s forwards}
.hbcompose{display:grid;grid-template-columns:70px 1fr;gap:11px}
.hbthumb{width:70px;height:70px;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#22d3ee,#10e6a0);position:relative;overflow:hidden;opacity:0;animation:hbshow .5s .2s forwards}
.hbthumb::after{content:"📸";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.hbcap{font-size:.78rem;color:var(--tx);line-height:1.5;opacity:0;animation:hbshow .5s 1s forwards}
.hbtags{font-size:.72rem;color:var(--cyan);margin-top:6px;opacity:0;animation:hbshow .5s 1.6s forwards}
.hbplatforms{display:flex;gap:8px;margin-top:12px}
.hbpf{flex:1;display:flex;align-items:center;gap:6px;justify-content:center;border:1px solid var(--line);border-radius:9px;padding:8px;font-size:.7rem;font-weight:600;color:var(--tx);opacity:0;animation:hbpf .5s var(--e) forwards}
.hbpf:nth-child(1){animation-delay:2.3s}.hbpf:nth-child(2){animation-delay:2.6s}.hbpf:nth-child(3){animation-delay:2.9s}
@keyframes hbpf{0%{opacity:0;transform:translateY(8px)}60%{opacity:1;transform:none;border-color:var(--line)}100%{opacity:1;border-color:rgba(16,230,160,.4);background:rgba(16,230,160,.07)}}
.hbpf .ok{color:var(--green);font-size:.7rem}
.hbreview{background:#07070d;border:1px solid var(--line);border-radius:10px;padding:11px;margin-top:4px}
.hbreview .rh{display:flex;align-items:center;gap:8px;font-size:.76rem;margin-bottom:5px;color:var(--tx)}
.hbreview .rs{color:var(--amber)}
.hbreview .rt{font-size:.76rem;color:var(--tx2)}
.hbreply{margin-top:9px;padding:9px 11px;border-left:2px solid var(--cyan);background:rgba(34,211,238,.06);border-radius:0 8px 8px 0;font-size:.76rem;color:var(--tx);opacity:0;animation:hbshow .6s 1.7s forwards}
.hbreply .who{font-size:.62rem;color:var(--cyan);font-weight:700;margin-bottom:4px}
.hbfest{display:grid;grid-template-columns:1fr 108px;gap:14px;align-items:center}
.hbposter{width:108px;height:108px;border-radius:12px;background:radial-gradient(circle at 50% 30%,#f5a623,#ec4899 60%,#7c3aed);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;opacity:0;transform:scale(.85);animation:hbpop .7s var(--e) 1.4s forwards}
@keyframes hbpop{to{opacity:1;transform:none}}
.hbposter .em{font-size:1.8rem}.hbposter b{font-family:var(--font-display);font-size:.86rem;margin-top:5px}.hbposter small{font-size:.56rem;opacity:.9}
.hbeditor{background:#07070d;border:1px solid var(--line);border-radius:10px;padding:12px}
.hbeditor .et{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--tx);white-space:nowrap;overflow:hidden;border-right:2px solid var(--cyan);width:0;animation:hbtitle 1.8s steps(30) 1s forwards}
@keyframes hbtitle{to{width:30ch}}
.hbeditor .eb{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.hbeditor .eb i{height:7px;border-radius:4px;background:rgba(255,255,255,.06);width:0;animation:hbline .5s var(--e) forwards}
.hbeditor .eb i:nth-child(1){animation-delay:3s}.hbeditor .eb i:nth-child(2){animation-delay:3.2s}.hbeditor .eb i:nth-child(3){animation-delay:3.4s}
@keyframes hbline{to{width:var(--w,100%)}}
.hbcron{margin:32px auto 0;display:flex;flex-wrap:nowrap;justify-content:center;gap:12px;overflow-x:auto;overflow-y:visible;padding:8px 2px}
.hbcron::-webkit-scrollbar{height:0}
.hbcc{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--tx2);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:99px;padding:9px 16px;white-space:nowrap;flex-shrink:0;cursor:default;transition:border-color .2s,color .2s,background .2s,transform .2s}
.hbcc:hover{border-color:var(--cyan);color:var(--tx);background:rgba(34,211,238,.08);transform:translateY(-2px)}
.hbcc i{color:var(--cyan)}
.hbcron-note{text-align:center;font-size:.84rem;color:var(--tx3);margin-top:16px}
@media(max-width:920px){
  #otto-hub .hbdiagram{grid-template-columns:1fr;column-gap:0;gap:20px}
  #otto-hub .hbbeams{display:none}
  #otto-hub .hbcore-wrap{order:2}#otto-hub .hbcol.out{order:3}
  #otto-hub .hbfest{grid-template-columns:1fr}#otto-hub .hbposter{margin:0 auto}
  #otto-hub .hbhead .sec-h2{white-space:normal}
  /* Keep the country picker CLOSED on mobile — its absolutely-positioned
     dropdown was animating open and overlapping the core + output cards. */
  #otto-hub .hbdiagram.play .hbopts{animation:none !important;opacity:0 !important;visibility:hidden !important}
  #otto-hub .hbdiagram.play .hbsel .cur .ch{animation:none}
  /* Make the input -> HEART -> output flow explicit with arrows around the
     core (the connecting beams are hidden when stacked). */
  #otto-hub .hbcore-wrap{position:relative;margin:4px 0}
  #otto-hub .hbcore-wrap::before,#otto-hub .hbcore-wrap::after{content:'\25BC';position:absolute;left:50%;transform:translateX(-50%);color:var(--cyan);opacity:.55;font-size:.72rem;line-height:1}
  #otto-hub .hbcore-wrap::before{top:-16px}
  #otto-hub .hbcore-wrap::after{bottom:-16px}
}



#ai-smarter .llm-cited-card{background:linear-gradient(160deg,#11111c,#0b0b13);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:26px 26px 14px;margin-top:18px;position:relative;overflow:hidden}
#ai-smarter .llm-cited-card::before{content:"";position:absolute;top:-50px;right:-50px;width:200px;height:200px;background:radial-gradient(circle,rgba(0,229,160,.16),transparent 70%);pointer-events:none}
#ai-smarter .llm-cited-ico{width:46px;height:46px;border-radius:12px;background:rgba(236,72,153,.16);border:1px solid rgba(236,72,153,.32);display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:16px;position:relative;z-index:1}
#ai-smarter .llm-cited-title{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:#fff;margin-bottom:8px;position:relative;z-index:1}
#ai-smarter .llm-cited-sub{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.55;margin-bottom:10px;max-width:440px;position:relative;z-index:1}
#ai-smarter .llm-cited-rows{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
#ai-smarter .llm-cited-row{display:flex;align-items:center;justify-content:space-between;padding:11px 2px;border-top:1px solid rgba(255,255,255,.07);font-size:.92rem}
#ai-smarter .llm-cited-row span{color:rgba(255,255,255,.5);display:flex;align-items:center;gap:9px;transition:color .35s}
#ai-smarter .llm-cited-row.cited span{color:rgba(255,255,255,.9)}
#ai-smarter .llm-cited-row b{color:#00e5a0;font-weight:700;font-size:.88rem;letter-spacing:.02em;opacity:0;transform:translateX(8px);transition:opacity .4s,transform .4s}
#ai-smarter .llm-cited-row.cited b{opacity:1;transform:none}
#ai-smarter .ai-ic{width:17px;height:17px;flex-shrink:0}
/* SEO / AEO / GEO scan animation */
#ai-smarter .llm-scan{display:flex;flex-direction:column;gap:12px;margin:6px 0 14px;position:relative;z-index:1}
#ai-smarter .llm-scan-row{opacity:.35;transition:opacity .4s}
#ai-smarter .llm-scan-row.active,#ai-smarter .llm-scan-row.done{opacity:1}
#ai-smarter .llm-scan-top{display:flex;align-items:center;gap:9px;font-size:.88rem}
#ai-smarter .llm-scan-ic{font-size:1rem;width:18px;text-align:center}
#ai-smarter .llm-scan-name{font-weight:800;color:#fff;font-size:.66rem;letter-spacing:.06em;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);padding:2px 8px;border-radius:6px}
#ai-smarter .llm-scan-row.active .llm-scan-name{background:rgba(139,92,246,.25);border-color:rgba(139,92,246,.5)}
#ai-smarter .llm-scan-row.done .llm-scan-name{background:rgba(0,229,160,.18);border-color:rgba(0,229,160,.4)}
#ai-smarter .llm-scan-msg{color:rgba(255,255,255,.72);font-size:.85rem}
#ai-smarter .llm-scan-row.done .llm-scan-msg{color:#00e5a0;font-weight:600}
#ai-smarter .llm-scan-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:8px;margin-left:27px}
#ai-smarter .llm-scan-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8b5cf6,#22d3ee);border-radius:3px}
#ai-smarter .llm-scan-row.done .llm-scan-bar i{background:linear-gradient(90deg,#10e6a0,#22d3ee)}



#how-it-works .hiw-demo{margin-top:14px;min-height:42px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}
#how-it-works .hd-field{display:inline-flex;align-items:center;max-width:100%;background:rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.35);border-radius:8px;padding:6px 10px;font-size:.74rem;color:var(--text);font-family:var(--font-display)}
#how-it-works .hd-text{display:inline-block;overflow:hidden;white-space:nowrap;animation:hdtype 3.6s steps(15) infinite}
@keyframes hdtype{0%,6%{width:0}52%,92%{width:8.6em}100%{width:0}}
#how-it-works .hd-caret{width:2px;height:1em;background:#05d4f5;margin-left:1px;animation:hdblink 1s steps(1) infinite}
@keyframes hdblink{50%{opacity:0}}
#how-it-works .hd-chip{font-size:.7rem;font-weight:600;color:var(--text);background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.3);border-radius:99px;padding:4px 9px;opacity:0;animation:hdpop 4.4s ease infinite;animation-delay:var(--d)}
#how-it-works .hd-chip.kw{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.32)}
@keyframes hdpop{0%,4%{opacity:0;transform:translateY(7px) scale(.9)}16%,82%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(7px) scale(.9)}}
#how-it-works .hd-plat{position:relative;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem;background:rgba(255,255,255,.05);border:1px solid var(--border);animation:hdconnect 4.4s ease infinite;animation-delay:var(--d)}
[data-theme="light"] #how-it-works .hd-plat{background:rgba(0,0,0,.04)}
#how-it-works .hd-plat::after{content:'✓';position:absolute;right:-4px;bottom:-4px;width:14px;height:14px;font-size:.55rem;font-weight:900;color:#fff;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;animation:hdcheck 4.4s ease infinite;animation-delay:var(--d)}
@keyframes hdconnect{0%,9%{transform:scale(1)}20%{transform:scale(1.14)}30%,86%{border-color:rgba(0,229,160,.55);background:rgba(0,229,160,.12)}100%{transform:scale(1)}}
@keyframes hdcheck{0%,18%{opacity:0}30%,86%{opacity:1}100%{opacity:0}}
#how-it-works .hd-toggle{position:relative;width:58px;height:28px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid var(--border);animation:hdtoggle 3.6s ease infinite}
[data-theme="light"] #how-it-works .hd-toggle{background:rgba(0,0,0,.08)}
#how-it-works .hd-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);animation:hdknob 3.6s ease infinite}
#how-it-works .hd-on{position:absolute;top:7px;left:9px;font-size:.6rem;font-weight:800;color:#fff;opacity:0;animation:hdon 3.6s ease infinite}
@keyframes hdtoggle{0%,28%{background:rgba(255,255,255,.12)}44%,90%{background:linear-gradient(90deg,#7c3aed,#10e6a0);border-color:transparent}100%{background:rgba(255,255,255,.12)}}
@keyframes hdknob{0%,28%{left:3px}44%,90%{left:35px}100%{left:3px}}
@keyframes hdon{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#how-it-works .hd-text,#how-it-works .hd-chip,#how-it-works .hd-plat,#how-it-works .hd-plat::after,#how-it-works .hd-toggle,#how-it-works .hd-knob,#how-it-works .hd-on,.hiw-line::after{animation:none}#how-it-works .hd-chip{opacity:1}}



#testimonials .tw-wall{margin-top:42px;display:flex;flex-direction:column;gap:16px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
#testimonials .tw-row{display:flex;width:max-content}
#testimonials .tw-row.a{animation:twmq 62s linear infinite}
#testimonials .tw-row.b{animation:twmq 78s linear infinite reverse}
#testimonials .tw-wall:hover .tw-row{animation-play-state:paused}
@keyframes twmq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){#testimonials .tw-row{animation:none}}
#testimonials .tw-card{width:330px;flex-shrink:0;margin-right:16px;background:var(--dark2);border:1px solid var(--border);border-radius:16px;padding:18px 18px 16px;white-space:normal}
#testimonials .tw-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
#testimonials .tw-stars{color:var(--amber);font-size:.82rem;letter-spacing:2px;flex-shrink:0}
#testimonials .tw-qt{font-size:.86rem;color:var(--text);line-height:1.5;margin-bottom:12px}
#testimonials .tw-metric{display:inline-block;font-size:.66rem;font-weight:700;color:var(--green);background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.22);border-radius:99px;padding:3px 9px;white-space:nowrap;flex-shrink:0}
#testimonials .tw-au{display:flex;align-items:center;gap:10px}
#testimonials .tw-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem;color:#fff;flex-shrink:0}
#testimonials .tw-meta{min-width:0}
#testimonials .tw-nm{font-weight:700;font-size:.84rem;color:var(--text);line-height:1.2}
#testimonials .tw-sub{font-size:.74rem;color:var(--muted);margin-top:2px;line-height:1.2}
#testimonials .tw-dom{color:#05d4f5;font-weight:600}



#sm-studio{--c1:#0d0d15;--c2:#13131f;--ln:rgba(255,255,255,.09);--tx:#f4f4f8;--tx2:rgba(244,244,248,.62);--tx3:rgba(244,244,248,.42);--pu:#8b5cf6;--cy:#22d3ee;--gr:#10e6a0;--am:#fbbf24;background:#0a0a12;padding:80px 24px}
#sm-studio .smwrap{max-width:1160px;margin:0 auto}
#sm-studio .smhead{text-align:center;margin-bottom:44px}
#sm-studio .smhead .sec-tag{margin:0 auto 14px}
#sm-studio .smhead .sec-h2{color:#fff;margin:0 auto 10px}
#sm-studio .smhead .sec-p{color:var(--tx2);max-width:740px;margin:0 auto}
#sm-studio .smhead .sec-p strong{color:#fff}
#sm-studio .sec-tag{color:#c4b5fd;background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.38)}
#sm-studio .smgrid{display:grid;grid-template-columns:1.35fr .8fr;gap:24px;align-items:start}
@media(max-width:900px){#sm-studio .smgrid{grid-template-columns:1fr}}
#sm-studio .smcomposer{background:linear-gradient(160deg,var(--c2),var(--c1));border:1px solid var(--ln);border-radius:18px;overflow:hidden}
#sm-studio .smc-top{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid var(--ln);background:rgba(255,255,255,.02)}
#sm-studio .smc-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16)}
#sm-studio .smc-title{margin-left:8px;font-size:.82rem;font-weight:700;color:var(--tx)}
#sm-studio .smc-mode{margin-left:auto;font-size:.7rem;font-weight:700;color:var(--gr);background:rgba(16,230,160,.12);border:1px solid rgba(16,230,160,.3);border-radius:99px;padding:3px 10px}
#sm-studio .smc-body{padding:20px;display:flex;flex-direction:column;gap:15px}
#sm-studio .smc-label{font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);margin-bottom:8px}
#sm-studio .smc-srcs,#sm-studio .smc-ctas,#sm-studio .smc-kws{display:flex;gap:8px;flex-wrap:wrap}
#sm-studio .smc-src,#sm-studio .smc-cta{font-size:.8rem;font-weight:600;color:var(--tx2);background:rgba(255,255,255,.04);border:1px solid var(--ln);border-radius:10px;padding:8px 12px;transition:.25s}
#sm-studio .smc-src.sel{color:#fff;background:rgba(139,92,246,.22);border-color:rgba(139,92,246,.55);box-shadow:0 0 0 3px rgba(139,92,246,.12)}
#sm-studio .smc-cta.sel{color:#fff;background:rgba(34,211,238,.16);border-color:rgba(34,211,238,.5);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
#sm-studio .smc-kw{font-size:.8rem;color:var(--tx2);background:rgba(255,255,255,.04);border:1px solid var(--ln);border-radius:99px;padding:6px 13px;transition:.25s}
#sm-studio .smc-kw.sel{color:#0a0a12;background:linear-gradient(120deg,#a78bfa,#22d3ee);border-color:transparent;font-weight:700}
#sm-studio .smc-caption{min-height:52px;font-size:.9rem;color:var(--tx);line-height:1.55;background:rgba(255,255,255,.03);border:1px solid var(--ln);border-radius:10px;padding:12px 14px}
#sm-studio .smc-caption .cur{display:inline-block;width:2px;height:.95em;vertical-align:-2px;background:var(--cy);margin-left:1px;animation:smblink 1s steps(1) infinite}
@keyframes smblink{50%{opacity:0}}
#sm-studio .smc-tags{display:flex;gap:7px;flex-wrap:wrap}
#sm-studio .smc-tag{font-size:.74rem;font-weight:600;color:var(--cy);background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.22);border-radius:6px;padding:3px 8px;opacity:0;transform:translateY(6px);transition:.3s}
#sm-studio .smc-tag.in{opacity:1;transform:none}
#sm-studio .smc-img-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#sm-studio .smc-img{position:relative;height:128px;border-radius:12px;overflow:hidden;border:1px solid var(--ln);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center}
#sm-studio .smc-posted{position:relative;height:128px;border-radius:12px;overflow:hidden;border:1px solid var(--ln);background:#0d0d15;display:flex;align-items:flex-end;opacity:.32;transition:opacity .55s}
#sm-studio .smc-posted.show{opacity:1}
#sm-studio .smc-posted img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#sm-studio .smc-posted-tag{position:absolute;top:8px;left:8px;background:rgba(16,230,160,.95);color:#06231a;font-size:.64rem;font-weight:800;padding:3px 9px;border-radius:99px;z-index:1}
#sm-studio .smc-posted-plats{position:relative;z-index:1;display:flex;gap:9px;padding:9px 11px;width:100%;background:linear-gradient(transparent,rgba(0,0,0,.65));font-size:.9rem}
#sm-studio .smc-posted-plats i{color:#fff}
#sm-studio .smc-img-load{font-size:.82rem;color:var(--tx2);display:flex;align-items:center;gap:9px;transition:opacity .4s}
#sm-studio .smc-img-load::before{content:"";width:14px;height:14px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--pu);border-radius:50%;animation:smspin .8s linear infinite}
@keyframes smspin{to{transform:rotate(360deg)}}
#sm-studio .smc-img-done{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;background:linear-gradient(135deg,#6d28d9,#0ea5b7);opacity:0;transition:opacity .55s}
#sm-studio .smc-img.ready .smc-img-done{opacity:1}
#sm-studio .smc-img.ready .smc-img-load{opacity:0}
#sm-studio .smc-img-done img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#sm-studio .smc-img-done span{position:relative;z-index:1;font-size:.78rem;font-weight:700;color:#fff;background:rgba(0,0,0,.5);padding:4px 10px;border-radius:6px}
#sm-studio .smc-foot{display:flex;align-items:center;gap:14px;margin-top:2px}
#sm-studio .smc-post{font-size:.85rem;font-weight:700;color:#fff;background:linear-gradient(120deg,#7c3aed,#22d3ee);border:0;border-radius:10px;padding:10px 20px}
#sm-studio .smc-post.go{animation:smpost .5s ease}
@keyframes smpost{50%{transform:scale(.93);filter:brightness(1.15)}}
#sm-studio .smc-plats{display:flex;gap:9px;margin-left:auto}
#sm-studio .smc-plat{position:relative;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;background:rgba(255,255,255,.05);border:1px solid var(--ln);opacity:.4;transition:.3s}
#sm-studio .smc-plat.posted{opacity:1;border-color:rgba(16,230,160,.5);background:rgba(16,230,160,.12);transform:translateY(-2px)}
#sm-studio .smc-plat.posted::after{content:"✓";position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;font-size:.62rem;color:#0a0a12;background:var(--gr);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900}
#sm-studio .smc-toast{font-size:.8rem;font-weight:600;color:var(--gr);background:rgba(16,230,160,.1);border:1px solid rgba(16,230,160,.25);border-radius:10px;padding:10px 14px;text-align:center;opacity:0;transform:translateY(8px);transition:.4s}
#sm-studio .smc-toast.in{opacity:1;transform:none}
#sm-studio .smside{display:flex;flex-direction:column;gap:18px}
#sm-studio .smfest,#sm-studio .smsched{background:linear-gradient(160deg,var(--c2),var(--c1));border:1px solid var(--ln);border-radius:16px;padding:20px}
#sm-studio .smfest-h{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--am);display:flex;align-items:center;gap:7px;margin-bottom:10px}
#sm-studio .smfest-name{font-family:var(--font-display);font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:12px}
#sm-studio .smfest-status{font-size:.82rem;color:var(--tx2);margin-bottom:9px}
#sm-studio .smfest.done .smfest-status{color:var(--gr);font-weight:600}
#sm-studio .smfest-bar{height:5px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
#sm-studio .smfest-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#fbbf24,#10e6a0)}
#sm-studio .smsched-h{font-size:.8rem;font-weight:700;color:var(--tx);margin-bottom:6px}
#sm-studio .smsched-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--ln);font-size:.84rem;color:var(--tx2)}
#sm-studio .smsched-row:first-of-type{border-top:0}
#sm-studio .smsched-row b{color:var(--cy);font-weight:700}
#sm-studio .smsched-note{font-size:.74rem;color:var(--tx3);margin-top:12px}
#sm-studio .smsched-note b{color:var(--tx);font-weight:700}
/* keep bare glyphs/labels light on the dark island in BOTH themes (beats global light-theme darkening) */
#sm-studio .smsched-row span{color:var(--tx2)}
#sm-studio .smc-plat{color:var(--tx)}
#sm-studio .smfest-h span{color:var(--am)}
/* social platform post previews — realistic IG / FB / LinkedIn cards */
#sm-studio .smprev{display:grid;grid-template-columns:1fr 1fr;gap:10px;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
#sm-studio .smprev.show{opacity:1;transform:none}
#sm-studio .smprev-h{grid-column:1/-1;font-size:.74rem;font-weight:700;color:var(--tx2);margin-bottom:0}
#sm-studio .smprev .smpc{font-size:.72rem}
#sm-studio .smprev .smpc-cap{font-size:.68rem;padding:4px 10px 10px}
#sm-studio .smpc{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.4);font-size:.8rem}
#sm-studio .smpc-top{display:flex;align-items:center;gap:9px;padding:10px 12px}
#sm-studio .smpc-av{width:30px;height:30px;border-radius:50%;background:url('/img/softhanky-post.jpg') center/cover, linear-gradient(135deg,#10b981,#34d399);border:1px solid rgba(0,0,0,.08);flex-shrink:0}
#sm-studio .smpc-id{display:flex;flex-direction:column;line-height:1.25}
#sm-studio .smpc-id b{font-size:.8rem;color:#111827}
#sm-studio .smpc-id small{font-size:.66rem;color:#6b7280}
#sm-studio .smpc-plat{margin-left:auto;font-size:1.15rem}
#sm-studio .smpc-img{width:100%;aspect-ratio:.82;overflow:hidden;background:#f3f4f6}
#sm-studio .smpc-img img{object-position:center}
#sm-studio .smpc-img img{width:100%;height:100%;object-fit:cover;display:block}
#sm-studio .smpc-acts{display:flex;align-items:center;gap:15px;padding:10px 12px 4px;font-size:1.05rem;color:#111827}
#sm-studio .smpc-likes{padding:0 12px;font-weight:700;font-size:.76rem;color:#111827}
#sm-studio .smpc-cap{padding:4px 12px 14px;font-size:.76rem;line-height:1.45;color:#1f2937}
#sm-studio .smpc-cap b{font-weight:700;color:#111827}
#sm-studio .smpc-tag{color:#1d4ed8}
#sm-studio .smpc-cap2{padding:2px 12px 10px;font-size:.78rem;line-height:1.45;color:#1f2937}
#sm-studio .smpc-bar{display:flex;border-top:1px solid #e5e7eb;color:#6b7280;font-size:.72rem;font-weight:600}
#sm-studio .smpc-bar span{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 0}



#gbp-studio{--g1:#0d0d15;--g2:#13131f;--gln:rgba(255,255,255,.09);--gtx:#f4f4f8;--gtx2:rgba(244,244,248,.62);--gr:#10e6a0;--gam:#fbbf24;--gbl:#8ab4f8}
#gbp-studio .gbp-grid{display:grid;grid-template-columns:.95fr 1.1fr;gap:24px;align-items:start;margin-top:42px}
@media(max-width:900px){#gbp-studio .gbp-grid{grid-template-columns:1fr;max-width:520px;margin:42px auto 0}}
#gbp-studio .gbp-card{background:#fff;border:1px solid #dadce0;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.4);font-family:arial,Roboto,sans-serif}
/* Google knowledge-panel UI */
#gbp-studio .gkp-head{display:flex;gap:12px;align-items:flex-start}
#gbp-studio .gkp-info{flex:1;min-width:0}
#gbp-studio .gkp-name{font-size:1.4rem;font-weight:500;color:#202124;line-height:1.2}
#gbp-studio .gkp-rating{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.82rem;color:#70757a;flex-wrap:wrap}
#gbp-studio .gkp-rating b{color:#202124;font-weight:500}
#gbp-studio .gkp-stars{color:#fbbc04;letter-spacing:1px}
#gbp-studio .gkp-rating a{color:#1a73e8;text-decoration:none}
#gbp-studio .gkp-cat{font-size:.82rem;color:#70757a;margin-top:5px}
#gbp-studio .gkp-logo{width:84px;height:84px;border-radius:10px;overflow:hidden;flex-shrink:0;background:#f1f3f4;border:1px solid #e8eaed}
#gbp-studio .gkp-logo img{width:100%;height:100%;object-fit:cover;display:block}
#gbp-studio .gkp-actions{display:flex;gap:8px;margin:18px 0 4px;flex-wrap:wrap}
#gbp-studio .gkp-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border:1px solid #dadce0;border-radius:99px;background:#fff;color:#1a73e8;font-size:.8rem;font-weight:500;line-height:1;cursor:pointer;transition:background .15s,border-color .15s}
#gbp-studio .gkp-btn i{font-size:.85rem}
#gbp-studio .gkp-btn:hover{background:#f0f6ff;border-color:#1a73e8}
#gbp-studio .gkp-rows{margin-top:14px;border-top:1px solid #e8eaed;padding-top:12px;display:flex;flex-direction:column;gap:11px}
#gbp-studio .gkp-row{display:flex;align-items:center;gap:14px;font-size:.82rem;color:#3c4043}
#gbp-studio .gkp-row i{color:#70757a;width:16px;text-align:center;flex-shrink:0}
#gbp-studio .gkp-row b.open{color:#188038;font-weight:600}
#gbp-studio .gkp-row b.lbl{color:#202124;font-weight:600}
#gbp-studio .gbp-cover{height:110px;background:linear-gradient(135deg,#1a73e8,#34a853);position:relative}
#gbp-studio .gbp-verified{position:absolute;top:10px;right:12px;background:rgba(255,255,255,.94);color:#1a73e8;font-size:.66rem;font-weight:700;padding:3px 9px;border-radius:99px}
#gbp-studio .gbp-body{padding:16px 18px}
#gbp-studio .gbp-name{font-size:1.1rem;font-weight:700;color:#202124}
#gbp-studio .gbp-rating{display:flex;align-items:center;gap:6px;font-size:.82rem;color:#5f6368;margin-top:3px}
#gbp-studio .gbp-stars{color:#fbbc04;letter-spacing:1px}
#gbp-studio .gbp-meta{font-size:.8rem;color:#5f6368;margin-top:4px}
#gbp-studio .gbp-meta b{color:#188038}
#gbp-studio .gbp-actions{display:flex;gap:8px;margin-top:14px}
#gbp-studio .gbp-act{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border:1px solid #dadce0;border-radius:10px;color:#1a73e8;font-size:.66rem;font-weight:600}
#gbp-studio .gbp-act i{font-size:.95rem}
#gbp-studio .gbp-ins{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
#gbp-studio .gbp-ins-c{text-align:center;background:#f1f3f4;border-radius:10px;padding:10px 4px}
#gbp-studio .gbp-ins-n{font-size:1.05rem;font-weight:800;color:#1a73e8}
#gbp-studio .gbp-ins-l{font-size:.6rem;color:#5f6368;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
#gbp-studio .gbp-feed{display:flex;flex-direction:column;gap:14px}
#gbp-studio .gbp-fc{background:linear-gradient(160deg,var(--g2),var(--g1));border:1px solid var(--gln);border-radius:14px;padding:15px 16px;opacity:.38;transform:translateY(10px);transition:opacity .5s,transform .5s}
#gbp-studio .gbp-fc.on{opacity:1;transform:none}
#gbp-studio .gbp-fc-h{display:flex;align-items:center;gap:8px;font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:11px}
#gbp-studio .gbp-fc-h .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
#gbp-studio .gbp-review{background:rgba(255,255,255,.04);border:1px solid var(--gln);border-radius:10px;padding:10px 12px}
#gbp-studio .gbp-rv-top{display:flex;align-items:center;gap:8px}
#gbp-studio .gbp-rv-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ef4444);font-size:.66rem;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center}
#gbp-studio .gbp-rv-name{font-size:.78rem;font-weight:600;color:var(--gtx)}
#gbp-studio .gbp-rv-stars{color:#fbbc04;font-size:.72rem;margin-left:auto}
#gbp-studio .gbp-rv-text{font-size:.8rem;color:var(--gtx2);margin-top:6px;line-height:1.45}
#gbp-studio .gbp-reply{margin-top:10px;border-left:2px solid var(--gr);padding-left:10px;font-size:.78rem;color:var(--gtx2);line-height:1.45;min-height:18px}
#gbp-studio .gbp-reply b{color:var(--gr)}
#gbp-studio .gbp-reply-typing{margin-top:10px;font-size:.78rem;color:var(--gr);display:flex;align-items:center;gap:7px;min-height:18px}
#gbp-studio .gbp-reply-typing::before{content:"";width:13px;height:13px;border:2px solid rgba(16,230,160,.3);border-top-color:var(--gr);border-radius:50%;animation:gbpspin .8s linear infinite}
@keyframes gbpspin{to{transform:rotate(360deg)}}
#gbp-studio .gbp-post-img{height:230px;width:fit-content;max-width:100%;border-radius:10px;overflow:hidden;background:#11151f;margin:0 auto 9px}
#gbp-studio .gbp-post-img img{width:auto;max-width:100%;height:100%;object-fit:cover;display:block}
#gbp-studio .gbp-whatsnew{margin-top:14px;border-top:1px solid #e8eaed;padding-top:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s ease,opacity .5s ease,padding-top .6s ease}
#gbp-studio .gbp-whatsnew.show{max-height:120px;opacity:1;padding-top:12px}
#gbp-studio .gbp-wn-h{font-size:.64rem;font-weight:700;color:#1a73e8;text-transform:uppercase;letter-spacing:.04em;margin-bottom:9px}
#gbp-studio .gbp-wn-post{display:flex;gap:10px;align-items:center}
#gbp-studio .gbp-wn-thumb{width:52px;height:52px;border-radius:8px;overflow:hidden;flex-shrink:0;background:#e5e7eb}
#gbp-studio .gbp-wn-thumb img{width:100%;height:100%;object-fit:cover;display:block}
#gbp-studio .gbp-wn-t{font-size:.76rem;font-weight:600;color:#202124;line-height:1.35}
#gbp-studio .gbp-post-t{font-size:.82rem;font-weight:700;color:var(--gtx)}
#gbp-studio .gbp-post-d{font-size:.74rem;color:var(--gtx2);margin-top:4px;line-height:1.4}
#gbp-studio .gbp-badge-done{margin-left:auto;font-size:.67rem;font-weight:800;color:var(--gr)}
#gbp-studio .gbp-qa-q{font-size:.8rem;color:var(--gtx);font-weight:600}
#gbp-studio .gbp-qa-a{font-size:.78rem;color:var(--gtx2);margin-top:7px;line-height:1.45;border-left:2px solid var(--gbl);padding-left:10px}
#gbp-studio .gbp-qa-a b{color:var(--gbl)}



/* AI engine badge styles */
.ai-engine-badge {
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:100px;padding:8px 18px 8px 10px;
  transition:all .3s ease;cursor:default;
  animation:fadeInUp .6s ease both;
}
.ai-engine-badge:hover {
  background:rgba(255,255,255,.08);
  border-color:color-mix(in srgb,var(--badge-color) 50%,transparent);
  transform:translateY(-2px);
  box-shadow:0 8px 24px color-mix(in srgb,var(--badge-color) 20%,transparent);
}
.ai-engine-icon {
  width:36px;height:36px;border-radius:50%;border:1px solid;
  display:flex;align-items:center;justify-content:center;
  transition:all .3s ease;
}
.ai-engine-badge span { font-size:.82rem;font-weight:600;color:rgba(255,255,255,.75); }
.ai-engine-badge:hover span { color:#fff; }
@keyframes fadeInUp {
  from { opacity:0;transform:translateY(16px); }
  to   { opacity:1;transform:translateY(0); }
}
@keyframes pulse {
  0%,100% { opacity:1;transform:scale(1); }
  50%      { opacity:.5;transform:scale(.8); }
}
/* Stagger badge animations */
.ai-engine-badge:nth-child(1) { animation-delay:.0s }
.ai-engine-badge:nth-child(2) { animation-delay:.07s }
.ai-engine-badge:nth-child(3) { animation-delay:.14s }
.ai-engine-badge:nth-child(4) { animation-delay:.21s }
.ai-engine-badge:nth-child(5) { animation-delay:.28s }
.ai-engine-badge:nth-child(6) { animation-delay:.35s }
.ai-engine-badge:nth-child(7) { animation-delay:.42s }
.ai-engine-badge:nth-child(8) { animation-delay:.49s }
.ai-engine-badge:nth-child(9) { animation-delay:.56s }
.ai-engine-badge:nth-child(10) { animation-delay:.63s }
@media(max-width:768px) {
  .ai-engine-badge { padding:6px 14px 6px 8px; }
  .ai-engine-icon { width:28px;height:28px; }
  .ai-engine-badge span { font-size:.75rem; }
}



/* ── Landing Page Light Theme Overrides ─── */
[data-theme="light"] { --dark:#f5f5fa; --dark2:#ebebf3; --dark3:#ffffff; --dark4:#f0f0f8; --text:#1a1a2e; --muted:#64748b; --dim:#94a3b8; --border:rgba(0,0,0,.1); --border2:rgba(0,0,0,.14); }
[data-theme="light"] body { background:#f5f5fa; color:#1a1a2e; }
[data-theme="light"] .lnav { background:rgba(245,245,250,.85); backdrop-filter:blur(16px); border-bottom:1px solid rgba(0,0,0,.08); }
[data-theme="light"] .lnav.scrolled { background:rgba(245,245,250,.95); box-shadow:0 2px 20px rgba(0,0,0,.06); }
/* In light theme the nav bar is light (rgba(245,245,250,.85) above), so the
   top-level links must be DARK to be readable. */
[data-theme="light"] .lnav-links a { color:#334155; }
[data-theme="light"] .lnav-links a:hover { color:#111827; }
/* The Features dropdown panel is ALWAYS dark, so its text is ALWAYS light —
   forced so a light-theme rule can never turn it dark/invisible. */
[data-theme="light"] .lnav-menu a,
[data-theme="light"] .lnav-menu strong { color:#ffffff !important; }
[data-theme="light"] .lnav-menu small { color:rgba(255,255,255,.65) !important; }
[data-theme="light"] .lnav-signin { color:#475569; }
[data-theme="light"] .hero-p { color:#64748b; }
[data-theme="light"] .hero-h1 { color:#1a1a2e; }
[data-theme="light"] .hero-h1 .grad { background:linear-gradient(135deg,#7c3aed,#14B583); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
[data-theme="light"] .hero-eyebrow { color:#475569; border-color:rgba(0,0,0,.1); }
[data-theme="light"] .hero-trust-txt { color:#475569; }
[data-theme="light"] .sec-h2 { color:#1a1a2e; }
[data-theme="light"] .sec-p { color:#64748b; }
[data-theme="light"] .sec-tag { background:rgba(124,58,237,.08); border-color:rgba(124,58,237,.2); color:#6d28d9; }
[data-theme="light"] .bg-grid { opacity:.03; }
[data-theme="light"] .bg-orb { opacity:.08; }
[data-theme="light"] .mockup-wrap, [data-theme="light"] .smarter-screen { border-color:rgba(0,0,0,.12); background:#1a1a2e; }
[data-theme="light"] .browser-top, [data-theme="light"] .sv-chrome { background:#12121a; }
[data-theme="light"] .tool-item { background:rgba(239,68,68,.04); border-color:rgba(239,68,68,.12); }
[data-theme="light"] .tool-item-name { color:#475569; }
[data-theme="light"] .airp-card { background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(16,185,129,.04)); border-color:rgba(124,58,237,.2); }
[data-theme="light"] .pcard { background:#fff; border-color:rgba(0,0,0,.1); }
[data-theme="light"] .pcard.pop { border-color:var(--brand-purple); }
[data-theme="light"] .pname { color:#1a1a2e; }
[data-theme="light"] .pprice { color:#1a1a2e; }
[data-theme="light"] .pfeat { color:#475569; }
[data-theme="light"] .tcard { background:#fff; border-color:rgba(0,0,0,.08); }
[data-theme="light"] .ttext { color:#475569; }
[data-theme="light"] .tname { color:#1a1a2e; }
[data-theme="light"] .bc { background:#fff; border-color:rgba(0,0,0,.08); }
[data-theme="light"] .bc h3 { color:#1a1a2e; }
[data-theme="light"] .bc p { color:#64748b; }
[data-theme="light"] .bc-tag { background:rgba(0,0,0,.05); color:#475569; }
[data-theme="light"] .int-chip { background:#fff; border-color:rgba(0,0,0,.08); }
[data-theme="light"] .int-name { color:#475569; }
[data-theme="light"] .hiw-step { background:transparent; border-color:transparent; }
/* light-theme: cyan dot is visible on the light background */
[data-theme="light"] .hiw-line::after { background:#06b6d4; box-shadow:0 0 12px 3px rgba(6,182,212,.55); }
[data-theme="light"] .hiw-step h3 { color:#1a1a2e; }
[data-theme="light"] .hiw-step p { color:#64748b; }
[data-theme="light"] .cap-item { background:#fff; border-color:rgba(0,0,0,.08); }
[data-theme="light"] .cap-h { color:#1a1a2e; }
[data-theme="light"] .cap-p { color:#64748b; }
[data-theme="light"] .lfooter { background:#1a1a2e; color:#e2e8f0; }
/* footer stays dark in light theme — keep the "otto" wordmark white so it's visible */
[data-theme="light"] .lfooter .otto-wordmark-otto{color:#fff}
[data-theme="light"] .stats-bar { background:linear-gradient(135deg,#7c3aed,#14B583); }
[data-theme="light"] .snum, [data-theme="light"] .slbl { color:#fff; }
[data-theme="light"] .trust-bar { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .marquee-strip { background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .marquee-item { color:#475569; }
[data-theme="light"] .marquee-item strong { color:#1a1a2e; }
[data-theme="light"] .g { background:linear-gradient(135deg,#7c3aed,#14B583); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
[data-theme="light"] .lcta { background:linear-gradient(135deg,#f5f0ff,#f0f5ff); }
[data-theme="light"] .lcta h2 { color:#1a1a2e; }
[data-theme="light"] .lcta p { color:#64748b; }
[data-theme="light"] .btn-xl-outline { border-color:rgba(0,0,0,.15); color:#1a1a2e; }
[data-theme="light"] .btn-xl-outline:hover { background:rgba(0,0,0,.04); }
/* Purple CTA keeps its gradient in light theme — force its label/icon white so it stays readable. */
[data-theme="light"] .btn-xl-purple, [data-theme="light"] .btn-xl-purple i { color:#fff !important; }

/* Pillar cards — text on light gradient backgrounds */
[data-theme="light"] #pillars h3 { color:#1a1a2e; }
[data-theme="light"] #pillars p { color:#475569; }
[data-theme="light"] #pillars strong { color:#1a1a2e !important; }
[data-theme="light"] #pillars .fas.fa-check-circle { color:inherit; }

/* Trust bar integration icons */
[data-theme="light"] .trust-bar { background:#fff; }
[data-theme="light"] .trust-lbl { color:#64748b; }
[data-theme="light"] .trust-bar span { color:#475569 !important; }

/* Tool comparison section */
[data-theme="light"] .tool-total-bar { background:rgba(239,68,68,.06); }
[data-theme="light"] .tool-total-label { color:#475569; }
[data-theme="light"] .tool-total-annual { color:#64748b; }
[data-theme="light"] .tool-cost-label { color:#475569; }
[data-theme="light"] .tool-total-price { color:#ef4444; }
[data-theme="light"] .airp-eyebrow { color:#475569; }
[data-theme="light"] .airp-saves { color:#475569; }
[data-theme="light"] .airp-inc-title { color:#475569; }
[data-theme="light"] .airp-inc-item { color:#475569; }
[data-theme="light"] .airp-inc-item i { color:#10b981; }
[data-theme="light"] .airp-badge { color:#1a1a2e; }
[data-theme="light"] .airp-price-num { color:#1a1a2e; }

/* Exclusive features section */
[data-theme="light"] #exclusive h3 { color:#1a1a2e; }
[data-theme="light"] #exclusive p { color:#475569; }

/* AI engine badges */
[data-theme="light"] .ai-engine-badge { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.08); }
[data-theme="light"] .ai-engine-badge span { color:#475569 !important; }
[data-theme="light"] .ai-engine-badge:hover span { color:#1a1a2e !important; }

/* GEO/AEO section */
[data-theme="light"] #pillars + div h2,
[data-theme="light"] section h2 { color:#1a1a2e; }

/* Smarter section */
[data-theme="light"] .smarter-item-title { color:#1a1a2e; }
[data-theme="light"] .smarter-item-desc { color:#475569; }

/* What Is section */
[data-theme="light"] .wis-pt h4 { color:#1a1a2e; }
[data-theme="light"] .wis-pt p { color:#64748b; }

/* How It Works */
[data-theme="light"] .hiw-num { color:var(--brand-purple); }

/* Testimonials */
[data-theme="light"] .tmetric { color:#1a1a2e; }
[data-theme="light"] .trole { color:#64748b; }
[data-theme="light"] .tstars { color:#f59e0b; }

/* Capabilities grid */
[data-theme="light"] .cap-n { color:var(--brand-purple); }

/* CTA section */
[data-theme="light"] .lcta-note { color:#94a3b8; }

/* All inline rgba(255,255,255,...) overrides */
[data-theme="light"] [style*="rgba(255,255,255,"] { color:var(--muted) !important; }
[data-theme="light"] [style*="color:var(--text)"] { color:#1a1a2e !important; }

/* ═════════════════════════════════════════════════════════════════════════
   LIGHT-THEME CORRECTNESS PASS — covers sections user flagged as broken:
   • Social Media Autopilot card fonts (platform chips, descriptions)
   • Festival & Event Posts card + Daily Reports card on light bg
   • "Up & Running in 5 Minutes" step number rings (.hiw-num)
   • "Integrates with tools" tiles grey background
   • "Works With Everything You Use" marquee + int-chips
   • "Optimized for every AI engine" badges hover
   • Footer links hover visibility (was black on dark bg → invisible)
   ═════════════════════════════════════════════════════════════════════════ */

/* Strong/dim text in light mode — many inline fallbacks use var(--text,#fff).
   The #fff fallback leaks through when CSS custom prop inheritance is slow, so
   pin them down explicitly. */
[data-theme="light"] strong, [data-theme="light"] b { color:#1a1a2e; }

/* Social Media Autopilot + Festival + Daily Reports cards
   (they use gradient + var(--dark3) panels with inline var(--text), var(--muted) text) */
[data-theme="light"] section#exclusive div[style*="background:linear-gradient"] { background:linear-gradient(135deg,rgba(108,47,239,.08),rgba(5,212,245,.04)) !important; border-color:rgba(108,47,239,.18) !important; }
[data-theme="light"] section#exclusive div[style*="background:var(--dark3)"],
[data-theme="light"] section#exclusive div[style*="background: var(--dark3)"] {
  background:#ffffff !important; border-color:rgba(15,23,42,.08) !important;
  box-shadow:0 2px 12px rgba(15,23,42,.04);
}
[data-theme="light"] section#exclusive div[style*="background:var(--dark4)"],
[data-theme="light"] section#exclusive div[style*="background: var(--dark4)"] {
  background:#f5f5fa !important; border-color:rgba(15,23,42,.08) !important;
}
/* Inner platform tiles (Instagram/Facebook/etc.) had rgba(255,255,255,.05) bg */
[data-theme="light"] section#exclusive div[style*="background:rgba(255,255,255,.05)"] { background:#f5f5fa !important; }
[data-theme="light"] section#exclusive h3 { color:#1a1a2e !important; }
[data-theme="light"] section#exclusive p { color:#475569 !important; }
[data-theme="light"] section#exclusive div[style*="font-size:.78rem"],
[data-theme="light"] section#exclusive div[style*="font-weight:700"] { color:#1a1a2e !important; }
[data-theme="light"] section#exclusive div[style*="font-size:.68rem"],
[data-theme="light"] section#exclusive div[style*="color:var(--dim)"] { color:#64748b !important; }
/* Festival tag chips (orange) keep their amber on light */
[data-theme="light"] section#exclusive span[style*="rgba(245,166,35"] { color:#c97a00 !important; }
/* "2M+ posts published" green success pill */
[data-theme="light"] section#exclusive div[style*="rgba(0,229,160"] { color:#047857 !important; background:rgba(16,185,129,.08) !important; border-color:rgba(16,185,129,.2) !important; }

/* "Up & Running in 5 Minutes" — step number rings were white-on-white */
[data-theme="light"] .hiw-num,
[data-theme="light"] .hiw-step .hiw-num {
  background:linear-gradient(135deg,#6c2fef,#8b5cf6) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 4px 14px rgba(108,47,239,.35);
}

/* "Integrates with tools you already use" — logos row should sit on grey */
[data-theme="light"] .trust-bar,
[data-theme="light"] .marquee-strip { background:#f5f5fa !important; border-color:rgba(15,23,42,.06) !important; }
[data-theme="light"] .trust-bar .trust-lbl { color:#64748b !important; }
[data-theme="light"] .int-chip {
  background:#ffffff !important; border-color:rgba(15,23,42,.08) !important;
  box-shadow:0 1px 4px rgba(15,23,42,.04);
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
[data-theme="light"] .int-chip:hover { border-color:#6c2fef !important; box-shadow:0 4px 14px rgba(108,47,239,.15); }

/* "Optimized for every AI engine" — badges hover in both themes was flat */
.ai-engine-badge { transition:border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.ai-engine-badge:hover { border-color:var(--purple2) !important; background:rgba(108,47,239,.12) !important; box-shadow:0 4px 14px rgba(108,47,239,.18); }
[data-theme="light"] .ai-engine-badge:hover { background:#ffffff !important; border-color:#6c2fef !important; box-shadow:0 4px 14px rgba(108,47,239,.14); }

/* Footer links — in light theme hover was `color:#1a1a2e` on dark footer bg (invisible) */
.lfooter a { transition:color .2s; }
[data-theme="light"] .lfooter a { color:#cbd5e1 !important; }
[data-theme="light"] .lfooter a:hover { color:#ffffff !important; }
[data-theme="light"] .lfooter h4, [data-theme="light"] .lfooter h5 { color:#ffffff !important; }

/* Reveal-on-scroll helper — used in "Works With Everything" and marquee */
.sv-reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.sv-reveal.visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .sv-reveal { opacity:1; transform:none; transition:none; } }

/* Make sure any inline `color:#fff` in sections with light background gets pulled back */
[data-theme="light"] section#exclusive [style*="color:#fff"],
[data-theme="light"] section#exclusive [style*="color: #fff"] { color:#1a1a2e !important; }

/* Top banner — keep white text regardless of theme (it's always on gradient bg) */
.top-banner, .top-banner *, .top-banner a, .top-banner span { color:#ffffff !important; }
[data-theme="light"] .top-banner { color:#ffffff !important; }

/* ═════════════════════════════════════════════════════════════════════════
   FINAL LIGHT-THEME CORRECTNESS — NUCLEAR OPTION
   Every section the user flagged: force inherited-text to dark, forcibly
   override inline hardcoded fallbacks, and make sure text + icons contrast.
   ═════════════════════════════════════════════════════════════════════════ */

/* 1. Base text colour for EVERY section must fall through to dark in light mode
      — cover any inline fallbacks `color:var(--text,#fff)` that might leak white. */
[data-theme="light"] section,
[data-theme="light"] section h1,
[data-theme="light"] section h2,
[data-theme="light"] section h3,
[data-theme="light"] section h4,
[data-theme="light"] section h5,
[data-theme="light"] section p,
[data-theme="light"] section span:not([style*="color:"]):not(.grad):not(.g),
[data-theme="light"] section div:not([style*="color:"]) { color:#1a1a2e; }

/* 2. EXCLUSIVE section (Social Media Autopilot + Festival + Daily Reports)
      — belt-and-suspenders text colour for every nested element. */
[data-theme="light"] #exclusive, [data-theme="light"] #exclusive * { color:#1a1a2e; }
[data-theme="light"] #exclusive [style*="color:var(--muted)"] { color:#475569 !important; }
[data-theme="light"] #exclusive [style*="color:var(--dim)"]   { color:#64748b !important; }
[data-theme="light"] #exclusive [style*="color:var(--text)"]  { color:#1a1a2e !important; }
/* Keep the purple / green / amber accents as-is */
[data-theme="light"] #exclusive [style*="color:var(--purple3)"] { color:#7c3aed !important; }
[data-theme="light"] #exclusive [style*="color:var(--amber)"]   { color:#b45309 !important; }
[data-theme="light"] #exclusive [style*="color:var(--cyan)"]    { color:#0F8F66 !important; }
[data-theme="light"] #exclusive [style*="color:var(--green)"]   { color:#047857 !important; }
/* Force platform tile background contrast */
[data-theme="light"] #exclusive [style*="rgba(255,255,255,.05)"] { background:#ffffff !important; border:1px solid rgba(15,23,42,.08) !important; }
[data-theme="light"] #exclusive [style*="background:var(--dark3)"],
[data-theme="light"] #exclusive [style*="background: var(--dark3)"] { background:#ffffff !important; border-color:rgba(15,23,42,.08) !important; box-shadow:0 2px 10px rgba(15,23,42,.04); }
[data-theme="light"] #exclusive [style*="background:var(--dark4)"],
[data-theme="light"] #exclusive [style*="background: var(--dark4)"] { background:#f5f5fa !important; border-color:rgba(15,23,42,.08) !important; }
/* Main gradient card */
[data-theme="light"] #exclusive > .lsec-inner > div > div:first-child[style*="linear-gradient"] {
  background:linear-gradient(135deg,rgba(108,47,239,.06),rgba(5,212,245,.04)) !important;
  border-color:rgba(108,47,239,.2) !important;
}

/* 3. Pricing page / All card sections — sub-text fallbacks */
[data-theme="light"] [style*="color:var(--muted)"] { color:#64748b !important; }
[data-theme="light"] [style*="color:var(--dim)"]   { color:#94a3b8 !important; }

/* 4. Footer hover — more specific selectors to beat anything else */
[data-theme="light"] .lfooter .lfooter-col a,
[data-theme="light"] .lfooter .lfooter-brand a  { color:#cbd5e1 !important; }
[data-theme="light"] .lfooter .lfooter-col a:hover,
[data-theme="light"] .lfooter .lfooter-brand a:hover,
[data-theme="light"] .lfooter a:hover { color:#ffffff !important; }
[data-theme="light"] .lfooter .lfooter-col h3 { color:#ffffff !important; opacity:.7; }

/* 5. Step numbers — already forced white in the base .hiw-num rule, but guard. */
[data-theme="light"] .hiw-num { color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; }

/* 6. Ensure hero strong tags with `color:var(--text,#fff)` fallback render dark */
[data-theme="light"] .hero-p strong { color:#1a1a2e !important; }

/* 7. Gradient-text utility — ONLY applies inside headings/labels where .g is a span/strong.
      Was breaking `.bc.g` bento cards (where `.g` is the green-card variant) by turning
      their text transparent. Keep the gradient effect, scope it tightly. */
h1 .g, h2 .g, h3 .g, h4 .g, .sec-h2 .g, .hero-h1 .g, p .g, span.g, strong.g,
h1 .grad, h2 .grad, h3 .grad, .hero-h1 .grad {
  background:linear-gradient(135deg,#6c2fef,#05d4f5);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  color:transparent;
}
[data-theme="light"] h1 .g, [data-theme="light"] h2 .g, [data-theme="light"] h3 .g,
[data-theme="light"] .sec-h2 .g, [data-theme="light"] .hero-h1 .g,
[data-theme="light"] span.g, [data-theme="light"] strong.g,
[data-theme="light"] h1 .grad, [data-theme="light"] h2 .grad, [data-theme="light"] .hero-h1 .grad {
  background:linear-gradient(135deg,#7c3aed,#0F8F66);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* Hard reset for .bc.g (bento card variant) — it must NEVER inherit gradient-text. */
.bc.g, .bc.g h3, .bc.g p, .bc.g div, .bc.g span, .bc.g strong { -webkit-text-fill-color: initial !important; color: inherit; }
.bc.g h3 { color: var(--text); }
.bc.g p  { color: var(--muted); }
[data-theme="light"] .bc.g { background:#ffffff !important; border-color:rgba(15,23,42,.08) !important; box-shadow:0 2px 10px rgba(15,23,42,.04); }
[data-theme="light"] .bc.g h3 { color:#1a1a2e !important; }
[data-theme="light"] .bc.g p  { color:#475569 !important; }
[data-theme="light"] .bc.g .bc-tag { background:rgba(15,23,42,.05) !important; color:#475569 !important; }
.bc-ico.g { -webkit-text-fill-color: initial !important; }

/* 8. Integration tile icons — colored brand icons already set inline, keep them */
/* Nothing to override — inline brand colours already look good on white */

/* 9. Reveal animation fallback — never leave text invisible */
.reveal { min-height:1px; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .kc-card { opacity:1 !important; transform:none !important; transition:none !important; }
}



  /* Suppress the Google Translate top banner + body offset so our own UI stays put. */
  .goog-te-banner-frame, .skiptranslate { display:none !important; }
  body { top:0 !important; position:static !important; }
  #goog-gt-tt, .goog-te-balloon-frame { display:none !important; }
  .goog-text-highlight { background:none !important; box-shadow:none !important; }
  /* Kill the persistent loading spinner + the little translate gadget icon Google
     injects (the endless spinner over the logo). These are its runtime classes. */
  .goog-te-spinner-pos, .goog-te-spinner, .goog-te-gadget-icon, img.goog-te-gadget-icon,
  .VIpgJd-ZVi9od-aZ2wEe, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-ZVi9od-aZ2wEe-OiiCO,
  .VIpgJd-yAWNEb-L7lbkb, .VIpgJd-ZVi9od-ORHb-OEVmcd { display:none !important; visibility:hidden !important; }
  iframe.goog-te-menu-frame, .goog-te-menu-frame { display:none !important; }
  #google_translate_element { display:none !important; }

/* ── Shared feature-page FAQ + pre-footer banner (used across all feature pages) ── */
.nsl-faqwrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.nsl-faq details{border-bottom:1px solid var(--border);padding:4px 0}
.nsl-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--text)}
.nsl-faq summary::-webkit-details-marker{display:none}
.nsl-faq summary .pm{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);flex-shrink:0;display:grid;place-items:center;font-size:1.1rem;transition:.2s;color:var(--muted)}
.nsl-faq details[open] summary .pm{background:var(--grad-purple);color:#fff;border-color:transparent;transform:rotate(45deg)}
.nsl-faq details p{color:var(--muted);padding:0 0 18px;max-width:56ch;margin:0}
.nsl-banner{background:radial-gradient(circle at 15% 0%,rgba(124,47,239,.35),transparent 55%),radial-gradient(circle at 95% 120%,rgba(5,212,245,.25),transparent 55%),#0d0d1c;border:1px solid var(--border);border-radius:28px;padding:48px 44px;display:grid;grid-template-columns:1.35fr .65fr;gap:36px;align-items:center;overflow:hidden}
.nsl-banner-vis{display:flex;align-items:center;justify-content:center}
@media (max-width:860px){
  .nsl-faqwrap{grid-template-columns:1fr!important}
  .nsl-banner{grid-template-columns:1fr!important;padding:32px 24px!important;text-align:center}
  .nsl-banner .sec-tag{display:inline-flex}
  .nsl-banner-vis{order:2}
}
/* .nsl-banner is a dark card in BOTH themes — keep its text light (beats the global light-theme section rule) */
[data-theme="light"] .nsl-banner .sec-h2{color:#fff}
[data-theme="light"] .nsl-banner .sec-p{color:rgba(255,255,255,.72)}
[data-theme="light"] .nsl-banner .sec-tag{background:rgba(124,58,237,.22);border-color:rgba(124,58,237,.45);color:#c4b5fd}
[data-theme="light"] .nsl-banner .nsl-banner-vis > div{background:#1a1a2e!important}

/* ── Reusable premium two-column feature hero ── */
.feat-hero{padding:56px 24px 46px;overflow:hidden}
.feat-hero-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:center}
.feat-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;margin:14px 0 0}
.feat-hero .fh-sub{color:var(--muted);font-size:1.12rem;margin:18px 0 26px;max-width:42ch}
.feat-hero .fh-btns{display:flex;gap:12px;flex-wrap:wrap}
.feat-hero .fh-trust{margin-top:20px;display:flex;gap:16px;flex-wrap:wrap;color:var(--text-muted,rgba(255,255,255,.5));font-size:.84rem;font-weight:500}
.feat-hero .fh-trust i{color:var(--green)}
.fh-mock{background:var(--bg-card2,#161622);border:1px solid var(--border);border-radius:20px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
@media (max-width:900px){ .feat-hero-grid{grid-template-columns:1fr;gap:26px} .feat-hero .fh-sub{max-width:none} .feat-hero .fh-vis{order:2} }

/* New feature-page sections — collapse to one column on mobile */
@media (max-width:860px){
  .fseo-comp{grid-template-columns:1fr!important;gap:30px!important}
  .nsl-problem{grid-template-columns:1fr!important;gap:20px!important}
}