/* =========================================================
   FIXED SIX — v2 design tokens
   Deep-space glass + violet/cyan gradient glow, amber signal
   accent kept for continuity. Built for motion.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=Manrope:wght@700;800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:            #07060d;
  --bg-2:          #0b0918;
  --bg-3:          #100d20;

  --glass:         rgba(255,255,255,0.045);
  --glass-hi:      rgba(255,255,255,0.08);
  --glass-border:  rgba(255,255,255,0.10);
  --hairline:      rgba(255,255,255,0.08);

  --violet:        #8b5cf6;
  --cyan:          #3ec9ff;
  --amber:         #ffb347;
  --mint:          #35e2a0;
  --coral:         #ff5470;

  --grad-primary:  linear-gradient(135deg, var(--violet), var(--cyan));
  --grad-amber:    linear-gradient(135deg, #ffcf7a, var(--amber));
  --grad-text:     linear-gradient(100deg, #fff 10%, #c9b8ff 45%, #8bdcff 80%);

  --text:          #f6f5ff;
  --text-dim:      #ada6cf;
  --text-faint:    #6f6890;

  --font-display: 'Space Grotesk', sans-serif;
  --font-hero: 'Manrope', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius-panel: 22px;
  --radius-field: 12px;
  --radius-pill:  999px;

  --wrap: 1200px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.no-scroll{ overflow:hidden; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* ---------- ambient gradient mesh / glass orbs ---------- */
.mesh{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.orb{
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:0.34;
  animation:drift 22s ease-in-out infinite alternate;
}
.orb-1{ width:560px; height:560px; top:-180px; right:-120px; background:radial-gradient(circle at 35% 35%, var(--violet), transparent 70%); }
.orb-2{ width:480px; height:480px; top:220px; left:-160px; background:radial-gradient(circle at 40% 40%, var(--cyan), transparent 70%); animation-delay:-8s; }
.orb-3{ width:420px; height:420px; bottom:-160px; right:12%; background:radial-gradient(circle at 40% 40%, var(--amber), transparent 72%); opacity:0.22; animation-delay:-14s; }
@keyframes drift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(-30px,40px) scale(1.08); }
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
@media (prefers-reduced-motion:reduce){ .orb{ animation:none; } }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; position:relative; z-index:2; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.015em;
  margin:0;
  color:var(--text);
}
h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); line-height:1.04; font-weight:800; }

/* the homepage hero headline runs on Manrope; every other heading keeps
   the shared --font-display (Space Grotesk) */
#heroHeadline{ font-family:var(--font-hero); font-weight:800; }
h2{ font-size:clamp(1.8rem, 3.6vw, 2.6rem); line-height:1.14; }
h3{ font-size:1.2rem; }

.grad-text{
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

p{ margin:0; }
.lede{ color:var(--text-dim); font-size:1.1rem; max-width:54ch; }
.mono{ font-family:var(--font-mono); }

:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

/* ---------- badge pill ---------- */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:var(--radius-pill);
  background:var(--glass); border:1px solid var(--glass-border);
  font-size:0.85rem; color:var(--text-dim);
  backdrop-filter:blur(12px);
}
.badge b{ color:var(--text); font-weight:600; }
.badge .flare{ width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint); }

/* ---------- buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 28px;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-weight:700;
  font-size:0.98rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease, background .2s ease;
  isolation:isolate;
}
.btn:active{ transform:scale(0.96); }

.btn-solid{
  background:var(--grad-primary);
  color:#0a0716;
  box-shadow:0 1px 0 rgba(255,255,255,0.35) inset, 0 16px 34px -14px rgba(139,92,246,0.65);
}
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,0.4) inset, 0 22px 44px -14px rgba(62,201,255,0.6); }
/* Shimmer sweep. Uses an animation rather than a hover-only transition:
   a transition declared inside :hover disappears on un-hover, which snaps
   the highlight back and flashes it against the left edge. Parked fully
   outside the button at rest, so an interrupted sweep can never be seen. */
.btn-solid::after{
  content:""; position:absolute; z-index:-1;
  top:0; bottom:0; left:-140%; width:110%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  pointer-events:none;
}
.btn-solid:hover::after{ animation:btnSweep .75s ease; }
@keyframes btnSweep{
  from{ transform:translateX(0); }
  to{ transform:translateX(300%); }
}
@media (prefers-reduced-motion:reduce){
  .btn-solid:hover::after{ animation:none; }
}

.btn-ghost{
  background:var(--glass);
  color:var(--text);
  border-color:var(--glass-border);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{ border-color:rgba(139,92,246,0.5); box-shadow:0 0 0 1px rgba(139,92,246,0.25), 0 12px 28px -16px rgba(139,92,246,0.5); transform:translateY(-2px); }

.btn-lg{ padding:18px 34px; font-size:1.05rem; }
.btn-block{ width:100%; justify-content:center; }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(18px) saturate(160%);
  background:rgba(7,6,13,0.6);
  border-bottom:1px solid var(--hairline);
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px; position:relative; }
/* Links are centred against the bar itself rather than sitting in a flex/grid
   track — that way neither the brand nor the buttons can shift them. */
.site-nav .nav-links{ position:absolute; left:50%; transform:translateX(-50%); }
.brand{ display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:800; font-size:1.2rem; letter-spacing:0.06em; }
.nav-links{ display:flex; align-items:center; justify-content:center; gap:36px; }
/* direct children only — keeps the mobile dropdown's CTA buttons clear of row-link styling */
.nav-links > a{ color:var(--text-dim); font-size:0.95rem; font-weight:500; transition:color .15s ease; }
.nav-links > a:hover, .nav-links > a.active{ color:var(--text); }
/* mobile-only CTA block inside the hamburger dropdown (shown at max-width:900px) */
.nav-mobile-cta{ display:none; }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-toggle{
  display:none; width:40px; height:40px; border-radius:9px;
  border:1px solid var(--hairline); background:var(--glass);
  color:var(--text); cursor:pointer;
}
@media (max-width:900px){
  /* mobile header: logo centred, hamburger right, header CTAs moved into the dropdown.
     Scoped to .site-nav — the footer .brand must stay in normal flow. */
  .site-nav .wrap{ display:flex; justify-content:flex-end; }
  /* reset the desktop centring or the dropdown sits half off-screen —
     left must be reset too: .site-nav .nav-links out-specifies .nav-links */
  .site-nav .nav-links{ transform:none; left:0; }
  .site-nav .brand{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
  .site-nav .brand-logo{ width:96px; }
  .nav-cta .btn{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; font-size:1.2rem; }
  .nav-links{
    position:absolute; top:76px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg-2); border-bottom:1px solid var(--hairline);
    padding:4px 20px 22px; display:none;
    max-height:calc(100vh - 76px); overflow-y:auto;
  }
  .nav-links.open{ display:flex; }
  .nav-links > a{ padding:15px 0; width:100%; border-bottom:1px solid var(--hairline); font-size:1rem; }
  .nav-mobile-cta{ display:flex; flex-direction:column; gap:12px; padding-top:20px; }
  .nav-mobile-cta .btn{ width:100%; }
  /* labelled dark/light switch inside the dropdown */
  .nav-mobile-cta .theme-toggle{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    width:100%; min-height:48px; border-radius:var(--radius-pill);
  }
  .nav-mobile-cta .theme-toggle .theme-toggle-label{
    display:block; font-size:.92rem; font-weight:600; color:var(--text-dim);
    transition:color .15s ease;
  }
  .nav-mobile-cta .theme-toggle:hover .theme-toggle-label,
  .nav-mobile-cta .theme-toggle[aria-label="Switch to dark mode"] .theme-toggle-label{ color:var(--text); }
}

/* ---------- glass panel ---------- */
.panel{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-panel);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 60px -30px rgba(0,0,0,0.6);
}
.panel-glow{ position:relative; }
.panel-glow::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:var(--grad-primary); opacity:0.35; filter:blur(18px);
}

/* centred CTA panel — replaces the inline padding that used to sit on the
   homepage/products/socials CTA blocks so breakpoints can adjust it */
.cta-panel{ padding:56px 40px; text-align:center; }

/* ---------- tilt wrapper ---------- */
.tilt{ transform-style:preserve-3d; transition:transform .25s ease; will-change:transform; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- hero ---------- */
.hero{ padding:96px 0 40px; text-align:center; position:relative; }
.hero-badge{ margin-bottom:26px; }
.hero h1{ max-width:960px; margin:0 auto 22px; }
.hero .lede{ margin:0 auto 38px; max-width:56ch; }
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:64px; }

/* stat strip under hero copy */
.stat-row{
  display:flex; justify-content:center; gap:0; flex-wrap:wrap;
  max-width:760px; margin:0 auto 60px;
}
.stat{ flex:1; min-width:150px; padding:0 24px; border-left:1px solid var(--hairline); }
.stat:first-child{ border-left:none; }
.stat .num{ font-family:var(--font-display); font-size:2rem; font-weight:800; }
.stat .lbl{ font-size:0.85rem; color:var(--text-faint); margin-top:4px; }

/* dashboard mockup */
.dash{
  max-width:1000px; margin:0 auto; padding:8px;
  border-radius:26px;
}
.dash-inner{
  border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
}
.dash-bar{
  display:flex; align-items:center; gap:8px;
  padding:14px 18px; border-bottom:1px solid var(--hairline);
}
.dash-bar span{ width:10px; height:10px; border-radius:50%; background:var(--hairline); }
.dash-bar .sym{ margin-left:auto; font-family:var(--font-mono); font-size:0.8rem; color:var(--text-faint); }
.dash-body{ padding:26px 28px 30px; text-align:left; }
.dash-chart{ width:100%; height:auto; display:block; margin-bottom:18px; }
.chart-line{
  fill:none; stroke-width:2.5;
  stroke-dasharray:1200; stroke-dashoffset:1200;
  animation:draw 2.6s cubic-bezier(.2,.7,.2,1) 0.3s forwards;
}
.chart-fill{ opacity:0; animation:fadeIn 1.2s ease 1.8s forwards; }
.chart-dot{ opacity:0; animation:fadeIn .5s ease 2.6s forwards, pulse 2.2s ease 2.9s infinite; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ to{ opacity:1; } }
@keyframes pulse{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(62,201,255,0)); } 50%{ filter:drop-shadow(0 0 8px rgba(62,201,255,0.9)); } }
@media (prefers-reduced-motion:reduce){ .chart-line,.chart-fill,.chart-dot{ animation:none!important; opacity:1; stroke-dashoffset:0; } }

.dash-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:760px){ .dash-grid{ grid-template-columns:repeat(2,1fr); } }
.dash-cell .k{ font-size:0.72rem; color:var(--text-faint); margin-bottom:4px; }
.dash-cell .v{ font-family:var(--font-mono); font-size:0.95rem; }
.v-mint{ color:var(--mint); } .v-amber{ color:var(--amber); } .v-cyan{ color:var(--cyan); }

/* ---------- marquee ticker ---------- */
.ticker-wrap{
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  background:var(--bg-2); overflow:hidden; padding:16px 0;
}
/* Spacing lives on the items, NOT as a flex gap. A gap adds an extra
   space between the two duplicated halves, which makes translateX(-50%)
   land off the seam and the row visibly jump each loop. */
.ticker{
  display:flex; width:max-content;
  will-change:transform;
  animation:scroll var(--ticker-dur, 42s) linear infinite;
}
.tick{
  display:flex; align-items:center; gap:10px;
  margin-right:44px;
  font-family:var(--font-mono); font-size:0.86rem;
  white-space:nowrap; color:var(--text-dim);
  flex:0 0 auto;
}
.tick .up{ color:var(--mint); } .tick .down{ color:var(--coral); }
@keyframes scroll{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion:reduce){ .ticker{ animation:none; } }

/* ---------- section shell ---------- */
section{ padding:100px 0; position:relative; }
.section-head{ max-width:680px; margin:0 auto 56px; text-align:center; }
.section-head.left{ margin:0 0 48px; text-align:left; }
.section-head h2{ margin-bottom:16px; }
.eyebrow{ display:inline-block; font-family:var(--font-mono); font-size:0.8rem; color:var(--cyan); margin-bottom:16px; }

/* ---------- feature bento ---------- */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
/* two-column variant (FAQ grid) — was an inline style that overrode breakpoints */
.bento-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:860px){ .bento, .bento-2{ grid-template-columns:1fr; } }
.bento-card{
  padding:32px 28px; position:relative; overflow:hidden;
}
.bento-card .icon{
  width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-primary); margin-bottom:20px;
  font-size:1.3rem;
  box-shadow:0 10px 26px -10px rgba(139,92,246,0.7);
}
.bento-card h3{ margin-bottom:10px; }
.bento-card p{ color:var(--text-dim); font-size:0.95rem; }

/* ---------- bot cards ---------- */
.bot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:920px){ .bot-grid{ grid-template-columns:1fr; } }
.bot-card{
  padding:0; overflow:hidden; position:relative;
}
.bot-card.featured{ border-color:rgba(139,92,246,0.5); }
.bot-card .ribbon{
  position:absolute; top:18px; right:18px;
  background:var(--grad-amber); color:#241605;
  font-size:0.72rem; font-weight:700; padding:5px 12px; border-radius:var(--radius-pill);
}
.bot-card-head{ padding:26px 26px 18px; border-bottom:1px solid var(--hairline); }
.bot-status{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:0.75rem; margin-bottom:14px; }
.bot-status .dot{ width:7px; height:7px; border-radius:50%; }
.dot-live{ background:var(--mint); box-shadow:0 0 8px var(--mint); }
.dot-test{ background:var(--amber); box-shadow:0 0 8px var(--amber); }
.stage-pill{
  font-family:var(--font-mono); font-size:0.7rem; font-weight:600;
  padding:4px 10px; border-radius:var(--radius-pill);
  border:1px solid var(--glass-border); color:var(--text-dim);
  margin-left:10px; vertical-align:middle;
}
.stage-free{ color:var(--mint); border-color:rgba(53,226,160,0.4); background:rgba(53,226,160,0.08); }
.stage-1{ color:var(--cyan); border-color:rgba(62,201,255,0.4); background:rgba(62,201,255,0.08); }
.stage-2{ color:var(--violet); border-color:rgba(139,92,246,0.4); background:rgba(139,92,246,0.08); }
.bot-card h3{ font-size:1.3rem; margin-bottom:6px; }
.bot-card .tagline{ color:var(--text-faint); font-size:0.85rem; font-family:var(--font-mono); }
.bot-card-body{ padding:22px 26px 26px; }
.bot-card-body p{ color:var(--text-dim); font-size:0.92rem; margin-bottom:20px; }
.bot-specs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.bot-specs span{
  font-family:var(--font-mono); font-size:0.74rem; color:var(--text-dim);
  border:1px solid var(--hairline); padding:5px 10px; border-radius:var(--radius-pill);
}
.bot-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bot-price{ font-family:var(--font-mono); }
.bot-price b{ font-size:1.15rem; color:var(--text); }
.bot-price span{ color:var(--text-faint); font-size:0.8rem; }

/* ---------- pricing ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
@media (max-width:920px){ .price-grid{ grid-template-columns:1fr; } }
.price-card{ padding:34px 30px; display:flex; flex-direction:column; position:relative; }
.price-card.popular{ border-color:rgba(139,92,246,0.55); transform:translateY(-8px); }
.price-card.popular::before{ opacity:0.45; }
.price-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--grad-primary); color:#0a0716; font-weight:700; font-size:0.76rem;
  padding:6px 16px; border-radius:var(--radius-pill); white-space:nowrap;
}
.price-name{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; margin-bottom:6px; }
.price-amount{ font-family:var(--font-display); font-size:2.6rem; font-weight:800; margin-bottom:2px; }
.price-amount span{ font-size:1rem; color:var(--text-faint); font-weight:500; }
.price-desc{ color:var(--text-dim); font-size:0.9rem; margin-bottom:26px; }
.price-features{ list-style:none; padding:0; margin:0 0 30px; display:flex; flex-direction:column; gap:12px; flex:1; }
.price-features li{ display:flex; align-items:flex-start; gap:10px; font-size:0.92rem; color:var(--text-dim); }
.price-features li::before{ content:"✓"; color:var(--mint); font-weight:700; }

/* ---------- per-bot subscription stages ---------- */
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
@media (max-width:760px){ .tier-grid{ grid-template-columns:1fr; } }
.tier-card{
  border:1px solid var(--hairline); border-radius:16px; padding:24px 22px;
  background:rgba(255,255,255,0.02); display:flex; flex-direction:column; position:relative;
}
.tier-card.recommended{ border-color:rgba(139,92,246,0.5); background:var(--glass); }
.tier-card.locked{ opacity:0.55; }
.tier-tab{
  position:absolute; top:-11px; left:20px;
  background:var(--grad-primary); color:#0a0716; font-size:0.68rem; font-weight:700;
  padding:4px 11px; border-radius:var(--radius-pill);
}
.tier-name{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; margin-bottom:8px; }
.tier-price{ font-family:var(--font-display); font-size:1.7rem; font-weight:800; margin-bottom:4px; }
.tier-price span{ font-size:0.85rem; color:var(--text-faint); font-weight:500; font-family:var(--font-body); }
.tier-desc{ color:var(--text-dim); font-size:0.85rem; margin-bottom:16px; min-height:2.6em; }
.tier-features{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tier-features li{ display:flex; align-items:flex-start; gap:8px; font-size:0.84rem; color:var(--text-dim); }
.tier-features li::before{ content:"✓"; color:var(--mint); font-weight:700; }
.tier-card.locked .tier-features li::before{ content:"—"; color:var(--text-faint); }

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--grad-primary); z-index:100;
  box-shadow:0 0 12px rgba(139,92,246,0.8);
  transition:width .08s linear;
}

/* ---------- live terminal split ---------- */
.dash-split{ display:grid; grid-template-columns:1.55fr 1fr; }
@media (max-width:820px){ .dash-split{ grid-template-columns:1fr; } }
.dash-left{ padding:22px 24px 20px; text-align:left; }
.dash-right{
  border-left:1px solid var(--hairline);
  padding:18px 20px; text-align:left;
  display:flex; flex-direction:column; min-height:0;
}
@media (max-width:820px){ .dash-right{ border-left:none; border-top:1px solid var(--hairline); } }
.log-head{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.72rem; color:var(--text-faint);
  padding-bottom:10px; border-bottom:1px solid var(--hairline); margin-bottom:12px;
}
.log-head .live-dot{
  width:6px; height:6px; border-radius:50%; background:var(--mint);
  animation:blip 1.8s ease infinite;
}
@keyframes blip{ 0%,100%{ opacity:1; box-shadow:0 0 8px var(--mint); } 50%{ opacity:0.35; box-shadow:none; } }
.log-feed{ display:flex; flex-direction:column; gap:9px; overflow:hidden; max-height:210px; }
.log-row{
  display:flex; gap:9px; align-items:baseline;
  font-family:var(--font-mono); font-size:0.76rem; line-height:1.45;
  animation:logIn .45s cubic-bezier(.2,.8,.2,1);
}
@keyframes logIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.log-row .t{ color:var(--text-faint); flex-shrink:0; }
.log-row .m{ color:var(--text-dim); }
.log-row .m b{ color:var(--text); font-weight:600; }
.log-row.up .m b{ color:var(--mint); }
.log-row.down .m b{ color:var(--coral); }

.px-live{ transition:color .25s ease; }
.px-live.flash-up{ color:var(--mint); }
.px-live.flash-down{ color:var(--coral); }

/* ---------- bot card sparkline ---------- */
.spark{ width:100%; height:44px; display:block; margin-bottom:18px; opacity:0.9; }
.spark path{ fill:none; stroke-width:1.8; stroke-linecap:round; }

/* ---------- cursor spotlight on panels ---------- */
.spotlight{ position:relative; overflow:hidden; }
.spotlight::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(139,92,246,0.16), transparent 62%);
  opacity:0; transition:opacity .3s ease;
}
.spotlight:hover::after{ opacity:1; }

/* ---------- live stats band (odometer counters) ---------- */
.livestats{
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  background:
    radial-gradient(680px 260px at 50% 0%, rgba(139,92,246,0.10), transparent 70%),
    var(--bg-2);
  padding:0; position:relative; overflow:hidden;
}

/* shooting stars — parameters injected per-run from JS so no two repeat */
.stars{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.shoot{
  position:absolute; top:0; left:0;
  width:var(--size,3px); height:var(--size,3px); border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px 1px rgba(255,255,255,0.55);
  opacity:0;
  animation-name:shoot;
  animation-timing-function:cubic-bezier(.3,.45,.35,1);
  animation-fill-mode:forwards;
  animation-iteration-count:1;
}
.shoot::after{
  content:""; position:absolute; top:50%; right:1px;
  width:var(--tail,120px); height:1px; transform:translateY(-50%);
  background:linear-gradient(270deg, rgba(255,255,255,0.7), var(--tint, rgba(139,92,246,0.35)), transparent);
}
@keyframes shoot{
  0%   { transform:translate3d(0,0,0) rotate(var(--ang,28deg)); opacity:0; }
  12%  { opacity:var(--op,0.85); }
  68%  { opacity:var(--op,0.85); }
  100% { transform:translate3d(var(--dx,700px), var(--dy,330px), 0) rotate(var(--ang,28deg)); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .stars{ display:none; } }

.livestats .wrap{ position:relative; z-index:2; }

.live-head{
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; padding:30px 0 4px;
}
.live-pill{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:0.78rem; color:var(--text-dim);
  border:1px solid var(--glass-border); background:var(--glass);
  padding:7px 14px; border-radius:var(--radius-pill);
  backdrop-filter:blur(10px);
}
.live-pill .pulse{
  width:7px; height:7px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 10px var(--mint);
  animation:blip 1.8s ease infinite;
}
.live-note{
  font-family:var(--font-mono); font-size:0.7rem; color:var(--text-faint);
  text-align:center; width:100%; padding-bottom:26px;
}

.live-grid{
  display:grid; grid-template-columns:1fr 1fr;
  max-width:940px; margin:0 auto; padding:14px 0 52px;
}
@media (max-width:720px){
  .live-grid{ grid-template-columns:1fr; gap:44px; padding-bottom:44px; }
}
.live-stat{ text-align:center; padding:0 34px; position:relative; }
.live-stat + .live-stat::before{
  content:""; position:absolute; left:0; top:8%; bottom:8%; width:1px;
  background:linear-gradient(180deg, transparent, var(--hairline) 25%, var(--hairline) 75%, transparent);
}
@media (max-width:720px){ .live-stat + .live-stat::before{ display:none; } }

.live-label{
  font-family:var(--font-mono); font-size:0.74rem; color:var(--text-faint);
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-bottom:18px; letter-spacing:0.04em; text-transform:uppercase;
}
.tag-live{
  font-size:0.6rem; font-weight:700; letter-spacing:0.08em;
  color:var(--mint); border:1px solid rgba(53,226,160,0.4);
  background:rgba(53,226,160,0.1); padding:2px 7px; border-radius:var(--radius-pill);
}
.live-value{
  font-family:var(--font-mono); font-weight:600;
  font-size:clamp(2.1rem, 5.2vw, 3.5rem); line-height:1;
  letter-spacing:-0.03em; margin-bottom:14px;
  display:flex; align-items:baseline; justify-content:center;
  text-shadow:0 0 34px rgba(139,92,246,0.35);
}
.live-sub{ font-size:0.86rem; color:var(--text-dim); max-width:30ch; margin:0 auto; }
.odo-digit{ display:inline-block; transition:color .35s ease; }
.odo-digit.flash{ animation:digitFlash .55s cubic-bezier(.2,.8,.2,1); }
@keyframes digitFlash{
  0%{ color:var(--mint); transform:translateY(-4px); }
  60%{ color:var(--mint); transform:none; }
  100%{ color:inherit; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .odo-digit.flash{ animation:none; }
  .live-pill .pulse{ animation:none; }
}

/* ---------- boot intro: curtain lifts to unfold the page ---------- */
html.sb-skip .boot{ display:none !important; }
body.booting{ overflow:hidden; }

/* the curtain — clips upward to unfold the page */
.boot{
  position:fixed; inset:0; z-index:9998;
  background:var(--bg);
  clip-path:inset(0 0 0 0);
  transition:clip-path .9s cubic-bezier(.76,0,.24,1);
  will-change:clip-path;
}
.boot.done{ clip-path:inset(0 0 100% 0); }

/* faint hairline that rides the curtain edge as it lifts */
.boot::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(139,92,246,0.5), transparent);
  opacity:0; transition:opacity .3s ease;
}
.boot.done::after{ opacity:1; }

.boot-meta{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  transition:opacity .35s ease;
  animation:bootMetaIn .5s ease both;
}
.boot.done .boot-meta{ opacity:0; }
@keyframes bootMetaIn{ from{ opacity:0; } to{ opacity:1; } }

/* faint boot log — fixed height so nothing shifts as lines arrive */
/* binary field that writes itself in behind the log */
#bootBinary{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
.boot-meta{ z-index:2; }

.boot-log{
  width:min(330px, 76vw);
  height:110px;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:5px;
  overflow:hidden;
  mask-image:linear-gradient(to bottom, transparent, #000 42%);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 42%);
}
.boot-line{
  font-family:var(--font-mono);
  font-size:0.64rem;
  letter-spacing:0.02em;
  color:var(--text-faint);
  white-space:nowrap;
  display:flex; align-items:baseline; gap:7px;
  animation:bootLineIn .3s ease both;
}
.boot-line .tick{ color:var(--violet); opacity:0.8; }
.boot-line .val{ color:var(--text-dim); margin-left:auto; }
@keyframes bootLineIn{
  from{ opacity:0; transform:translateY(5px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .boot-line{ animation:none; } }

.boot-track{
  width:118px; height:1px;
  background:rgba(255,255,255,0.1); overflow:hidden;
}
.boot-fill{ height:100%; width:0%; background:var(--violet); }

.boot-pct{
  font-family:var(--font-mono); font-size:0.72rem; font-weight:400;
  color:var(--text-faint); letter-spacing:0.08em;
  font-variant-numeric:tabular-nums;
}

/* page unfolds: nav, then hero, in quick succession */
body.booting .site-nav, body.booting .hero{ opacity:0; }
.unfold-nav{ animation:unfoldFade .5s ease .12s both; }
.unfold-hero{ animation:unfoldRise .7s cubic-bezier(.2,.75,.2,1) .18s both; }
@keyframes unfoldFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes unfoldRise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .boot{ display:none !important; }
  .unfold-nav, .unfold-hero{ animation:none; }
}

/* ---------- hero ambient canvas: connected stars + signal waves ---------- */
.hero{ position:relative; }
#heroFx{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
  display:block;
}
.hero > .wrap{ position:relative; z-index:2; }
@media (prefers-reduced-motion:reduce){ #heroFx{ opacity:0.4; } }

/* ---------- custom cursor + trail ---------- */
html.has-custom-cursor,
html.has-custom-cursor * { cursor:none !important; }

#cursorTrail{
  position:fixed; top:0; left:0;
  width:100%; height:100%;        /* canvas is a replaced element — must be sized explicitly */
  z-index:10000;
  pointer-events:none; display:block;
}

.cursor-dot{
  position:fixed; top:0; left:0; z-index:10001;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 12px rgba(62,201,255,0.9);
  pointer-events:none;
  transition:width .18s ease, height .18s ease, margin .18s ease,
             background .18s ease, box-shadow .18s ease, opacity .2s ease;
  will-change:transform;
}

/* over a link or button */
.cursor-dot.is-active{
  width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  background:var(--violet);
  box-shadow:0 0 18px rgba(139,92,246,0.95);
}

/* over text inputs: slim caret bar */
.cursor-dot.is-text{
  width:2px; height:20px; margin:-10px 0 0 -1px;
  border-radius:1px;
}

.cursor-hidden{ opacity:0 !important; }

/* stay hidden until the boot curtain has cleared */
html:not(.boot-done) .cursor-dot,
html:not(.boot-done) #cursorTrail{ opacity:0 !important; }

/* ---------- page transitions ---------- */
.page-fade{
  position:fixed; inset:0; z-index:9995;
  background:var(--bg);
  opacity:1;
  pointer-events:none;
  transition:opacity .38s cubic-bezier(.4,0,.2,1);
}
html.page-ready .page-fade{ opacity:0; }
html.page-leaving .page-fade{ opacity:1; transition-duration:.3s; }

/* while leaving, stop the page from reacting to further clicks */
html.page-leaving{ cursor:none; }
html.page-leaving body{ pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  .page-fade{ transition:none; }
}

/* ---------- twinkling starfield (background sections) ---------- */
.starfield{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
.has-stars{ position:relative; }
/* keep section content above the stars */
.has-stars > .wrap{ position:relative; z-index:2; }
.has-stars > .auth-visual,
.has-stars > .auth-form-side{ position:relative; z-index:2; }
@media (prefers-reduced-motion:reduce){ .starfield{ opacity:0.6; } }

/* ---------- socials: broadcast terminal ---------- */
.socials-hero{ padding-bottom:0; }

.broadcast{
  position:relative;
  max-width:1100px; margin:26px auto 0;
  height:clamp(340px, 46vw, 480px);
}
#broadcastFx{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  display:block; z-index:1;
}
.broadcast-core{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:2; text-align:center; pointer-events:none;
}
.core-ring{
  display:block; width:84px; height:84px; margin:0 auto 14px;
  border-radius:50%;
  border:1px solid rgba(139,92,246,0.5);
  background:radial-gradient(circle, rgba(139,92,246,0.22), transparent 70%);
  position:relative;
}
.core-ring::before,
.core-ring::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(139,92,246,0.45);
  animation:coreWave 3.4s ease-out infinite;
}
.core-ring::after{ animation-delay:1.7s; }
@keyframes coreWave{
  0%{ transform:scale(1); opacity:0.8; }
  100%{ transform:scale(2.1); opacity:0; }
}
.core-label{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:0.92rem; letter-spacing:0.14em;
}
.core-sub{
  display:block; font-family:var(--font-mono); font-size:0.68rem;
  color:var(--text-faint); letter-spacing:0.1em; margin-top:5px;
}
@media (prefers-reduced-motion:reduce){ .core-ring::before, .core-ring::after{ animation:none; opacity:0; } }

/* ---------- socials: channel cards ---------- */
.channels-section{ padding-top:70px; }
.channel-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;
}
@media (max-width:820px){ .channel-grid{ grid-template-columns:1fr; } }

.channel{
  position:relative; overflow:hidden;
  display:block; padding:26px 26px 24px;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-panel);
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(140%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),
             border-color .28s ease, background .28s ease;
}
.channel:hover{
  transform:translateY(-5px);
  border-color:var(--net-soft);
  background:rgba(255,255,255,0.06);
}
/* a sweep of the platform's own colour across the card on hover */
.channel-beam{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(420px circle at 82% 0%, var(--net-soft), transparent 66%);
  transition:opacity .35s ease;
}
.channel:hover .channel-beam{ opacity:1; }

.channel-top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.channel-glyph{
  width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--net-soft);
  background:rgba(255,255,255,0.03);
  color:var(--net);
  transition:background .28s ease, box-shadow .28s ease, transform .28s ease;
}
.channel-glyph svg{ width:23px; height:23px; display:block; }
.channel:hover .channel-glyph{
  background:var(--net-soft);
  box-shadow:0 0 26px -6px var(--net);
  transform:scale(1.06);
}
.channel-sym{
  font-family:var(--font-mono); font-size:0.72rem;
  color:var(--text-faint); letter-spacing:0.08em;
  border:1px solid var(--hairline); padding:4px 10px; border-radius:var(--radius-pill);
  transition:color .28s ease, border-color .28s ease;
}
.channel:hover .channel-sym{ color:var(--net); border-color:var(--net-soft); }

.channel h3{ font-size:1.32rem; margin-bottom:4px; }
.channel-handle{
  font-family:var(--font-mono); font-size:0.82rem;
  color:var(--net); opacity:0.85; margin-bottom:12px;
}
.channel-desc{ color:var(--text-dim); font-size:0.93rem; margin-bottom:18px; }

.channel-spark{ width:100%; height:40px; display:block; margin-bottom:18px; opacity:0.75; }
.channel-spark path{ fill:none; stroke:var(--net); stroke-width:1.6; stroke-linecap:round; }

.channel-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:0.92rem; color:var(--net);
}
.channel-cta .arr{ transition:transform .28s cubic-bezier(.2,.8,.2,1); display:inline-block; }
.channel:hover .channel-cta .arr{ transform:translateX(5px); }

@media (prefers-reduced-motion:reduce){
  .channel, .channel-glyph, .channel-cta .arr{ transition:none; }
  .channel:hover{ transform:none; }
}

/* ---------- chart panel ---------- */
#dash{ scroll-margin-top:96px; }   /* sticky nav must not cover it */
.dash-left{ padding:0; min-width:0; }   /* min-width:0 prevents grid overflow */
.tv-wrap{
  height:clamp(320px, 42vh, 440px);
  width:100%; max-width:100%;
  border-radius:0 0 0 20px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.tradingview-widget-container{
  flex:1; min-height:0; width:100%;
  display:flex; flex-direction:column;
}
.tradingview-widget-container__widget{ flex:1; min-height:0; width:100%; }
.tv-wrap iframe{ display:block; border:0; width:100% !important; }

/* TradingView requires visible attribution */
.tradingview-widget-copyright{
  flex:0 0 auto;
  padding:6px 14px;
  border-top:1px solid var(--hairline);
  font-family:var(--font-mono); font-size:0.62rem; color:var(--text-faint);
}
.tradingview-widget-copyright a{ color:var(--cyan); }
.tradingview-widget-copyright a:hover{ text-decoration:underline; }

.chart-offline{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; height:100%; padding:24px; text-align:center;
  font-family:var(--font-mono); font-size:0.76rem; color:var(--text-faint);
}
.chart-offline strong{ color:var(--text-dim); font-size:0.85rem; }

@media (max-width:820px){ .tv-wrap{ height:340px; border-radius:0; } }
@media (max-width:480px){ .tv-wrap{ height:300px; } }

.dash-note{
  margin-top:auto; padding-top:14px;
  border-top:1px solid var(--hairline);
  font-size:0.7rem; line-height:1.5; color:var(--text-faint);
}

/* ---------- compact risk strip ---------- */
.risk-strip{
  border-top:1px solid var(--hairline);
  padding:22px 0; text-align:center;
}
.risk-strip p{ color:var(--text-faint); font-size:0.8rem; max-width:70ch; margin:0 auto; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--hairline); padding:50px 0 34px; }
.footer-grid{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:30px; position:relative; }
/* links sit dead-centre of the page, matching the centred top nav —
   same absolute-centring pattern as .site-nav .nav-links */
.footer-links{ display:flex; gap:30px; flex-wrap:wrap; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.footer-links a{ color:var(--text-dim); font-size:0.92rem; }
.footer-links a:hover{ color:var(--text); }

/* ---------- products page ---------- */
.compare-wrap{ padding:8px 24px; overflow-x:auto; }
.compare-table{ width:100%; border-collapse:collapse; min-width:640px; }
.compare-table th, .compare-table td{ text-align:left; padding:16px; border-bottom:1px solid var(--hairline); font-size:0.9rem; }
.compare-table th{ color:var(--text-faint); font-weight:500; font-family:var(--font-mono); font-size:0.74rem; }
.compare-table td{ color:var(--text-dim); font-family:var(--font-mono); }
.compare-table td.name-cell{ color:var(--text); font-family:var(--font-body); font-weight:700; }

/* ---------- login page ---------- */
.auth-shell{
  min-height:calc(100vh - 76px);
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
}
@media (max-width:920px){ .auth-shell{ grid-template-columns:1fr; } }
.auth-visual{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:60px; overflow:hidden;
  background:linear-gradient(160deg, rgba(139,92,246,0.14), rgba(62,201,255,0.06));
  border-right:1px solid var(--hairline);
}
@media (max-width:920px){ .auth-visual{ display:none; } }
.auth-visual-inner{ position:relative; z-index:2; text-align:left; max-width:380px; }
.auth-visual-inner h2{ margin-bottom:16px; font-size:1.9rem; }
.auth-visual-inner p{ color:var(--text-dim); }
.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:60px 28px; }
.auth-card{ width:100%; max-width:400px; }
.auth-head{ margin-bottom:30px; }
.auth-head p{ color:var(--text-dim); font-size:0.94rem; margin-top:8px; }

.field{ margin-bottom:18px; }
.field label{ display:block; font-size:0.85rem; color:var(--text-dim); margin-bottom:8px; }
.field input{
  width:100%; padding:13px 15px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--hairline);
  border-radius:var(--radius-field);
  color:var(--text); font-family:var(--font-body); font-size:0.96rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder{ color:var(--text-faint); }
.field input:focus{ border-color:var(--violet); box-shadow:0 0 0 3px rgba(139,92,246,0.18); outline:none; }

.auth-row{ display:flex; justify-content:space-between; align-items:center; margin:6px 0 24px; font-size:0.87rem; }
.auth-row a{ color:var(--cyan); }
.check{ display:flex; align-items:center; gap:8px; color:var(--text-dim); }

.auth-foot{ text-align:center; margin-top:24px; font-size:0.9rem; color:var(--text-dim); }
.auth-foot a{ color:var(--cyan); font-weight:700; }

.auth-divider{ display:flex; align-items:center; gap:12px; margin:24px 0; color:var(--text-faint); font-size:0.78rem; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--hairline); }

.form-note{ font-size:0.78rem; color:var(--text-faint); text-align:center; margin-top:20px; }


/* =========================================================
   MOBILE POLISH — scoped to ≤640px phones. Desktop untouched.
   ========================================================= */
@media (max-width:640px){
  .wrap{ padding:0 20px; }
  section{ padding:64px 0; }
  .hero{ padding:60px 0 28px; }
  .hero .lede{ margin-bottom:30px; }
  .hero-actions{ flex-direction:column; align-items:stretch; margin-bottom:48px; }
  .hero-actions .btn{ width:100%; }
  .hero-badge .badge{ font-size:0.78rem; padding:7px 13px; }
  .section-head{ margin-bottom:40px; }
  .lede{ font-size:1rem; }
  .btn{ min-height:48px; }                 /* comfortable touch targets */
  .stat-row{ margin-bottom:44px; }
  .stat{ min-width:118px; padding:0 10px; }
  .stat .num{ font-size:1.6rem; }
  .bento-card{ padding:26px 22px; }
  .bot-card-foot{ flex-wrap:wrap; }
  .bot-card-foot .btn{ flex:1 1 100%; }   /* price row, full-width button under */
  .cta-panel{ padding:44px 22px; }
  .cta-panel .btn{ width:100%; }
  .live-grid{ padding-bottom:40px; }
  .live-stat{ padding:0 16px; }
  /* 1rem stops iOS Safari auto-zooming into focused inputs */
  .field input{ font-size:1rem; }
  .auth-form-side{ padding:44px 20px; }
  footer{ padding:40px 0 28px; }
  .footer-grid{ flex-direction:column; align-items:center; gap:22px; text-align:center; }
  .footer-links{ position:static; transform:none; justify-content:center; gap:14px 22px; }
  .footer-links a{ padding:6px 2px; }   /* roomier touch targets */
}

/* =========================================================
   LIGHT MODE
   Dark is the default; this overrides the tokens plus the
   handful of rules that hardcode white for the dark theme.
   ========================================================= */
html[data-theme="light"]{
  --bg:            #f6f6fa;
  --bg-2:          #ffffff;
  --bg-3:          #ececf4;

  --glass:         rgba(20,18,35,0.035);
  --glass-hi:      rgba(20,18,35,0.06);
  --glass-border:  rgba(20,18,35,0.12);
  --hairline:      rgba(20,18,35,0.10);

  /* accents darkened slightly so they hold contrast on white */
  --violet:        #6d3fe0;
  --cyan:          #0d8fc4;
  --amber:         #b8730a;
  --mint:          #10916a;
  --coral:         #d63450;

  --grad-text:     linear-gradient(100deg, #14121f 10%, #5b3fc4 45%, #0d7ea8 80%);

  --text:          #14121f;
  --text-dim:      #514c66;
  --text-faint:    #8a85a0;
}

/* page background */
html[data-theme="light"] body{
  background:
    repeating-linear-gradient(0deg, rgba(20,18,35,0.022) 0px, rgba(20,18,35,0.022) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(20,18,35,0.022) 0px, rgba(20,18,35,0.022) 1px, transparent 1px, transparent 40px),
    var(--bg);
}

/* ambient layers are tuned for a dark canvas — pull them right back */
html[data-theme="light"] .orb{ opacity:0.16; filter:blur(90px); }
html[data-theme="light"] .grain{ opacity:0.4; mix-blend-mode:multiply; }

/* nav */
html[data-theme="light"] .site-nav{ background:rgba(255,255,255,0.86); }

/* panels */
html[data-theme="light"] .panel{
  background:rgba(255,255,255,0.72);
  box-shadow:0 1px 0 rgba(255,255,255,0.9) inset, 0 20px 50px -30px rgba(20,18,35,0.28);
}
html[data-theme="light"] .panel-glow::before{ opacity:0.18; }

/* solid buttons keep white text on the violet fill */
html[data-theme="light"] .btn-solid{ color:#ffffff; }
html[data-theme="light"] .btn-solid::after{
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
}

/* terminal / dashboard */
html[data-theme="light"] .dash-inner{
  background:linear-gradient(180deg, rgba(20,18,35,0.03), rgba(20,18,35,0.01));
}
html[data-theme="light"] .ticker-wrap{ background:var(--bg-2); }

/* boot screen stays dark — it is a loading curtain, not a page surface */

/* form fields */
html[data-theme="light"] .field input{ background:rgba(20,18,35,0.03); }
html[data-theme="light"] .field input:focus{ box-shadow:0 0 0 3px rgba(109,63,224,0.15); }

/* pricing / channel cards */
html[data-theme="light"] .tier-card{ background:rgba(20,18,35,0.02); }
html[data-theme="light"] .channel{ background:rgba(255,255,255,0.7); }
html[data-theme="light"] .channel:hover{ background:rgba(255,255,255,0.95); }
html[data-theme="light"] .channel-glyph{ background:rgba(20,18,35,0.03); }

/* boot progress track */
html[data-theme="light"] .boot-track{ background:rgba(255,255,255,0.14); }

/* starfield and hero canvas are light-on-dark by nature */
html[data-theme="light"] .starfield{ opacity:0.32; }
html[data-theme="light"] #heroFx{ opacity:0.5; }

/* cursor trail dot needs to be visible on white */
html[data-theme="light"] .cursor-dot{ box-shadow:0 0 10px rgba(13,143,196,0.5); }

/* page-transition curtain */
html[data-theme="light"] .page-fade{ background:var(--bg); }

/* visually hidden but still announced by screen readers */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- theme toggle ---------- */
.theme-toggle{
  width:36px; height:36px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px;
  border:1px solid var(--glass-border);
  background:var(--glass);
  color:var(--text-dim);
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.theme-toggle:hover{ color:var(--text); border-color:var(--violet); }
.theme-toggle svg{ width:17px; height:17px; display:block; }
/* the header toggle is icon-only; the label shows only in the mobile dropdown */
.theme-toggle .theme-toggle-label{ display:none; }
.theme-toggle .icon-sun{ display:none; }
html[data-theme="light"] .theme-toggle .icon-sun{ display:block; }
html[data-theme="light"] .theme-toggle .icon-moon{ display:none; }
@media (max-width:900px){ .theme-toggle{ display:none; } }

/* ---------- brand logo ---------- */
.brand-logo{
  height:auto; width:112px; display:block; margin-right:2px;
  flex-shrink:0;
}
footer .brand-logo{ width:64px; }
.brand-logo.for-light{ display:none; }
html[data-theme="light"] .brand-logo.for-dark{ display:none; }
html[data-theme="light"] .brand-logo.for-light{ display:block; }

/* colour transition when switching themes */
body, .site-nav, .panel, .channel, .field input{
  transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}