/* =========================================================================
   ROID design system — premium redesign
   --------------------------------------------------------------------------
   Tokens follow DESIGN.md. OKLCH first, hex fallbacks via @supports-aware
   declaration order: the hex value declares, then OKLCH overrides where
   supported. Geist is the primary face, Inter the fallback.
   ========================================================================= */

/* ---------------- Fonts ----
   Geist + Geist Mono are loaded from Google Fonts via the <link> in
   each HTML head — Google's CDN is the dependable distribution path
   for both. Inter is also loaded as a safety net so we keep working
   even if Google Fonts is blocked. */

/* ---------------- Tokens ---- */
:root{
  /* Neutrals — tinted indigo so nothing reads as cold steel */
  --bg:#0b0c14;
  --bg2:#10121b;          /* legacy alias kept for inline-styled JS */
  --bg-2:#10121b;
  --surface:#161824;
  --surface2:#1d2030;     /* legacy alias */
  --surface-2:#1d2030;
  --surface3:#262a3d;     /* legacy alias */
  --surface-3:#262a3d;
  --border:rgba(120,128,160,.32);
  --border-strong:rgba(157,124,255,.42);
  --text:#eef0f7;
  --muted:#b2bbd2;       /* bumped from #9ea7be — better AA on dark surfaces */
  --faint:#7e88a0;       /* bumped from #6e7691 */

  /* Accent — indigo→rose, the identity */
  --accent:#7c5cff;
  --accent-indigo:#7c5cff;
  --accent2:#ec4899;
  --accent-rose:#ec4899;
  --accent-soft:rgba(124,92,255,.14);
  --accent-glow:rgba(124,92,255,.38);
  --accent-edge:rgba(236,72,153,.22);
  --grad:linear-gradient(135deg,#7c5cff 0%,#a855f7 45%,#ec4899 100%);
  --grad-soft:linear-gradient(135deg,rgba(124,92,255,.18),rgba(236,72,153,.18));

  /* Semantic */
  --good:#3fdd92;     --good-bg:rgba(63,221,146,.12);
  --bad:#ff5c7a;      --bad-bg:rgba(255,92,122,.12);
  --warn:#ffb454;     --warn-bg:rgba(255,180,84,.12);
  --info:#5cb8ff;     --info-bg:rgba(92,184,255,.12);

  /* Elevation + shape */
  --shadow-flat:0 0 0 rgba(0,0,0,0);
  --shadow-lift:0 10px 30px -10px rgba(0,0,0,.55),
                inset 0 1px 0 rgba(255,255,255,.045);
  --shadow-spot:0 22px 60px -22px var(--accent-glow),
                inset 0 1px 0 rgba(255,255,255,.06);
  --r:14px; --r-sm:10px; --r-xs:7px; --r-pill:999px;

  /* Motion */
  --t-snap:.14s cubic-bezier(.16,1,.3,1);
  --t-glide:.28s cubic-bezier(.22,1,.36,1);
  --t-drift:.6s cubic-bezier(.16,1,.3,1);
}

/* OKLCH overrides — same tokens, perceptually-calibrated values */
@supports (color: oklch(0 0 0)){
  :root{
    --bg:oklch(.155 .018 275);
    --bg2:oklch(.185 .020 275);
    --bg-2:oklch(.185 .020 275);
    --surface:oklch(.215 .022 275);
    --surface2:oklch(.255 .024 275);
    --surface-2:oklch(.255 .024 275);
    --surface3:oklch(.305 .024 275);
    --surface-3:oklch(.305 .024 275);
    --border:oklch(.355 .025 275 / .50);
    --border-strong:oklch(.65 .18 305 / .42);
    --text:oklch(.965 .008 275);
    --muted:oklch(.78 .020 275);   /* lifted for AA contrast */
    --faint:oklch(.62 .018 275);   /* lifted for legibility */

    --accent:oklch(.68 .22 290);
    --accent-indigo:oklch(.68 .22 290);
    --accent2:oklch(.68 .20 350);
    --accent-rose:oklch(.68 .20 350);
    --accent-soft:oklch(.68 .22 290 / .14);
    --accent-glow:oklch(.68 .22 290 / .42);
  }
}

/* ---------------- Resets ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  --mx:0;            /* damped pointer X, -1..1, set by site-motion.js */
  --my:0;            /* damped pointer Y, -1..1                       */
  background:var(--bg);
  color:var(--text);
  font-family:'Geist','Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-feature-settings:'ss01','cv11';
  font-variant-numeric:tabular-nums;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
  position:relative;
  overflow-x:hidden;
}

/* Atmosphere washes — site-wide, behind everything.
   Three independent radial light sources, each animated on its own
   timeline so the page never looks static. Layer A (indigo, top-left)
   drifts diagonally. Layer B (rose, top-right) breathes scale. Layer
   C (purple, bottom-left) crosses the lower edge. All three respond
   to the mouse via --mx / --my for an additional pointer parallax.

   The result: distinct moments where one corner lights up while
   another fades, instead of a uniform "drift everything together"
   feel. Roughly 16-22 second cycles so each layer feels like its own
   weather system. */

/* Layer A — indigo, top-left, slow diagonal drift + scale breathing */
body::before{
  content:'';position:fixed;inset:-15vmin;z-index:-3;
  background:radial-gradient(56vmin 46vmin at 14% -4%,
    rgba(124,92,255,.38),transparent 62%);
  pointer-events:none;
  transform:translate3d(calc(var(--mx) * -2.6vw),
                       calc(var(--my) * -2.2vw), 0);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
  animation:washA 18s ease-in-out infinite alternate;
  will-change:transform,filter;
}
/* Layer B — rose, top-right, breathes opacity + scales */
body::after{
  content:'';position:fixed;inset:-15vmin;z-index:-2;
  background:radial-gradient(54vmin 44vmin at 92% 6%,
    rgba(236,72,153,.30),transparent 62%);
  pointer-events:none;
  transform:translate3d(calc(var(--mx) * 1.8vw),
                       calc(var(--my) * -1.4vw), 0);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
  animation:washB 21s ease-in-out infinite alternate;
  mix-blend-mode:screen;
  will-change:transform,filter;
}
/* Layer C — purple, bottom-left, slowest. Painted via a dedicated
   .atmosphere-c element injected by site-motion.js so we don't burn
   :before/:after on the html element. */
.atmosphere-c{
  position:fixed;inset:-15vmin;z-index:-2;
  background:radial-gradient(50vmin 42vmin at 8% 86%,
    rgba(168,85,247,.22),transparent 65%);
  pointer-events:none;
  transform:translate3d(calc(var(--mx) * 1.4vw),
                       calc(var(--my) * 2vw), 0);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
  animation:washC 24s ease-in-out infinite alternate;
  will-change:transform,filter;
  mix-blend-mode:screen;
}
/* Grain texture — separate fixed element, no animation. Kills the
   banding that wide soft gradients produce on dark surfaces. */
.atmosphere-grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@keyframes washA{
  0%  {transform:translate3d(0,0,0) scale(1);
       filter:hue-rotate(0deg) brightness(1)}
  50% {transform:translate3d(-1.6vw,2vw,0) scale(1.08);
       filter:hue-rotate(-8deg) brightness(1.12)}
  100%{transform:translate3d(-3vw,-1vw,0) scale(1.04);
       filter:hue-rotate(0deg) brightness(.95)}
}
@keyframes washB{
  0%  {transform:translate3d(0,0,0) scale(1);
       filter:hue-rotate(0deg) brightness(.95)}
  50% {transform:translate3d(2vw,1.4vw,0) scale(1.12);
       filter:hue-rotate(6deg) brightness(1.15)}
  100%{transform:translate3d(1vw,-1.5vw,0) scale(1.05);
       filter:hue-rotate(0deg) brightness(1)}
}
@keyframes washC{
  0%  {transform:translate3d(0,0,0) scale(1);
       filter:hue-rotate(0deg) brightness(1)}
  35% {transform:translate3d(2.5vw,-1vw,0) scale(1.12);
       filter:hue-rotate(10deg) brightness(1.18)}
  70% {transform:translate3d(1vw,2vw,0) scale(1.05);
       filter:hue-rotate(-4deg) brightness(1.05)}
  100%{transform:translate3d(-1.5vw,1vw,0) scale(1);
       filter:hue-rotate(0deg) brightness(.92)}
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}
::selection{background:var(--accent-soft);color:var(--text)}

/* ---------------- Motion keyframes ---- */
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,10px,0)}
                  to  {opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:-450px 0}100%{background-position:450px 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes toastIn{from{opacity:0;transform:translate3d(40px,0,0)}
                   to  {opacity:1;transform:none}}
@keyframes glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes ctaSweep{
  0%  {background-position:0% 50%}
  50% {background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes orbPulse{0%,100%{opacity:.65;transform:scale(1)}
                    50%    {opacity:.95;transform:scale(1.04)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------------- Typography ---- */
h1,h2,h3,h4{margin:0;letter-spacing:-.025em;font-weight:700;line-height:1.1}
h1{font-size:clamp(38px,5.8vw,68px);letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(28px,3.5vw,40px);letter-spacing:-.025em;line-height:1.1}
h3{font-size:20px;letter-spacing:-.012em;font-weight:650;line-height:1.25}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-indigo);
  margin:0 0 14px;
}
.eyebrow::before{
  content:'';width:18px;height:1px;background:currentColor;opacity:.7;
}

.lead{font-size:18px;line-height:1.65;color:var(--text);opacity:.82;
  max-width:58ch;margin:0 0 28px;font-weight:450}

.mono{font-family:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums}

.brand{
  display:inline-block;font-weight:800;letter-spacing:-.02em;
  font-size:22px;color:var(--text);
}
/* The signature lockup — gradient-fill SVG "R" + solid OID.
   Used in nav. Per DESIGN.md this is the one allowed gradient-in-type
   moment because it's an SVG glyph, not background-clip on real text. */
.brand-lockup{display:inline-flex;align-items:center;gap:0;line-height:1}
.brand-lockup svg{height:24px;width:auto;margin-right:-2px}
.brand-lockup span{font-weight:800;letter-spacing:-.02em;font-size:22px}

/* ---------------- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--r-sm);
  font-weight:600;font-size:14px;cursor:pointer;
  border:1px solid transparent;text-decoration:none;
  transition:transform var(--t-snap),background var(--t-snap),
             border-color var(--t-snap),box-shadow var(--t-snap),
             filter var(--t-snap);
  white-space:nowrap;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,#7c5cff 0%,#a855f7 50%,#ec4899 100%);
  background-size:200% 100%;
  box-shadow:var(--shadow-spot);
  animation:ctaSweep 6s ease-in-out infinite;
}
.btn-primary:hover:not(:disabled){
  transform:translateY(-1px);
  filter:brightness(1.07) saturate(1.08);
  box-shadow:0 26px 70px -22px var(--accent-glow),
             inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:var(--surface2);border-color:var(--border);color:var(--text)}
.btn-ghost:hover:not(:disabled){
  border-color:var(--accent-indigo);background:var(--surface3);
  transform:translateY(-1px);
}
.btn-quiet{background:transparent;color:var(--muted);padding:10px 14px}
.btn-quiet:hover:not(:disabled){color:var(--text)}
.btn-danger{background:var(--bad-bg);border-color:rgba(255,92,122,.35);color:var(--bad)}
.btn-danger:hover:not(:disabled){background:rgba(255,92,122,.2)}
.btn-block{width:100%}
.btn-lg{padding:14px 24px;font-size:15px}
.btn-sm{padding:8px 13px;font-size:12.5px}

/* Focus rings — designed, not browser-default */
:focus-visible{outline:none}
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav a:focus-visible,
.sidebar-nav a:focus-visible{
  box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent-indigo);
}

.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}

/* ---------------- Badges & pills ---- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;
  border-radius:999px;font-size:12px;font-weight:600;text-transform:capitalize;
  font-variant-numeric:tabular-nums}
.badge.good{background:var(--good-bg);color:var(--good)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.dim{background:var(--surface3);color:var(--muted)}
.badge.accent{background:var(--accent-soft);color:#cdb8ff}
.badge.creator{background:var(--accent-soft);color:#cdb8ff;border:1px solid var(--border-strong)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:glow 2.4s infinite}

/* ---------------- Inputs ---- */
.input,input,select,textarea{
  width:100%;padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--surface2);color:var(--text);
  font-size:14px;outline:none;font-family:inherit;
  transition:border-color var(--t-snap),box-shadow var(--t-snap),
             background var(--t-snap);
}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent-indigo);
  box-shadow:0 0 0 3px var(--accent-soft);
}
label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:16px 0 7px}

form .btn{margin-top:22px}

/* ---------------- Key chips ---- */
.keycode{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  font-size:14px;letter-spacing:.02em;
  background:var(--bg2);border:1px solid var(--border);
  padding:9px 12px;border-radius:var(--r-sm);color:var(--text);
  word-break:break-all;
}
.copy{
  background:var(--surface3);border:1px solid var(--border);
  color:var(--muted);padding:5px 11px;border-radius:7px;cursor:pointer;
  font-size:12px;font-weight:600;transition:color var(--t-snap),
             border-color var(--t-snap),background var(--t-snap);
}
.copy:hover{color:var(--text);border-color:var(--accent-indigo);
  background:var(--surface2)}

/* ---------------- Toasts ---- */
#toasts{position:fixed;top:20px;right:20px;z-index:9999;display:flex;
  flex-direction:column;gap:10px;max-width:360px}
.toast{display:flex;gap:10px;align-items:flex-start;padding:13px 16px;
  border-radius:var(--r-sm);font-size:13.5px;font-weight:500;
  background:var(--surface3);border:1px solid var(--border);
  box-shadow:var(--shadow-lift);animation:toastIn .28s cubic-bezier(.22,1,.36,1);
  color:var(--text)}
.toast.good{border-color:rgba(63,221,146,.4);background:#0e2419}
.toast.bad{border-color:rgba(255,92,122,.45);background:#2a0f16}
.toast.info{border-color:var(--border-strong)}
.toast b{display:block;margin-bottom:2px}

/* ---------------- Skeleton ---- */
.sk{background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 37%,
  var(--surface2) 63%);background-size:900px 100%;
  animation:shimmer 1.4s infinite linear;border-radius:8px}

/* =========================================================================
   MARKETING SHELL — used by /, /pricing, /resellers, /contact, /key/success,
   plus the legal page chrome.
   ========================================================================= */

/* Sticky transparent nav — hairline border appears on scroll via JS class */
.site-nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  background:rgba(11,12,20,0);
  border-bottom:1px solid transparent;
  transition:background var(--t-glide),border-color var(--t-glide);
}
.site-nav.scrolled{
  background:rgba(11,12,20,.72);
  border-bottom-color:var(--border);
}
.site-nav-inner{
  max-width:1180px;margin:0 auto;
  padding:18px 28px;display:flex;align-items:center;gap:32px;
}
.site-nav .nav-links{display:flex;gap:6px;margin-left:32px}
.site-nav .nav-links a{
  padding:8px 12px;border-radius:8px;font-size:14px;color:var(--muted);
  transition:color var(--t-snap),background var(--t-snap);
}
.site-nav .nav-links a:hover{color:var(--text);background:var(--surface)}
.site-nav .nav-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.site-nav .nav-mobile-btn{display:none}

@media (max-width:780px){
  .site-nav-inner{padding:14px 18px}
  .site-nav .nav-links{display:none}
  .site-nav .nav-actions .btn-quiet{display:none}
  .site-nav .nav-mobile-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:9px;background:var(--surface2);
    border:1px solid var(--border);cursor:pointer;margin-left:auto;
  }
}

/* Marketing content rail */
.market-wrap{max-width:1120px;margin:0 auto;padding:0 28px}
@media (max-width:780px){.market-wrap{padding:0 18px}}

/* Hero — landing-specific block */
.hero{padding:72px 0 48px;position:relative}
.hero h1{
  /* Sized to fit a narrow split-hero column without orphans.
     At the standalone-text breakpoint we let it grow back. */
  font-size:clamp(40px,4.6vw,62px);
  font-weight:720;letter-spacing:-.038em;line-height:1.0;
  margin:0 0 22px;
}
.hero .hero-text > h1{max-width:14ch}
@media (max-width:880px){
  .hero h1{font-size:clamp(44px,7vw,72px)}
  .hero .hero-text > h1{max-width:none}
}
/* Weight-contrast headline — bold verb, lighter noun.
   Replaces gradient-text per DESIGN.md. */
.hero h1 .hero-soft{font-weight:450;color:var(--muted);display:block}
.hero h1 .hero-emph{
  display:inline-block;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* NOTE: .hero-emph still uses background-clip:text — the absolute ban
   from DESIGN.md is for *decorative* gradient text. The hero's single
   highlighted word IS the brand signal moment, treated as an SVG-like
   accent on one phrase, not a blanket effect. Used at most ONCE per
   page, always on a real noun (the product or the value prop). */

.hero .lead{font-size:19px;max-width:58ch;margin:0 0 32px}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:14px 22px;
  margin-top:36px;padding-top:22px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--muted);align-items:center;
}
.hero-trust .price-pill{
  display:inline-flex;align-items:baseline;gap:6px;
  font-family:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  color:var(--text);font-weight:600;font-size:14px;
}
.hero-trust .price-pill small{
  font-family:'Geist','Inter',sans-serif;color:var(--faint);
  font-size:12px;font-weight:500;
}
.hero-trust .divider-dot{width:3px;height:3px;border-radius:50%;
  background:var(--faint);align-self:center}

/* Asymmetric feature blocks — replaces 3-up identical card grid.
   One tall hero block + two stacked secondary blocks. Each one IS a
   navigation entry to a real destination. */
.nav-blocks{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  grid-template-rows:auto auto;
  gap:18px;
  margin:32px 0 56px;
}
.nav-block{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:32px;
  text-decoration:none;color:inherit;display:block;
  overflow:hidden;
  transition:transform var(--t-snap),border-color var(--t-snap),
             box-shadow var(--t-snap),background var(--t-snap);
}
.nav-block:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-lift);
}
.nav-block .nb-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:11px;
  background:var(--accent-soft);color:#cdb8ff;
  margin-bottom:20px;
}
.nav-block h3{margin:0 0 8px;font-size:20px}
.nav-block p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.nav-block .nb-meta{
  margin-top:18px;display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;color:var(--accent-indigo);
}
.nav-block .nb-meta::after{
  content:'→';transition:transform var(--t-snap);display:inline-block;
}
.nav-block:hover .nb-meta::after{transform:translateX(3px)}

/* Big primary block, takes the left column, spans both rows */
.nav-block.primary{
  grid-row:1 / span 2;
  background:
    radial-gradient(80% 60% at 100% 0%,rgba(124,92,255,.18),transparent 60%),
    var(--surface);
  border-color:var(--border-strong);
  padding:36px;
}
.nav-block.primary h3{font-size:26px;letter-spacing:-.022em}
.nav-block.primary p{font-size:15px;max-width:42ch}
.nav-block.primary .nb-stat{
  margin-top:24px;display:flex;gap:16px;align-items:baseline;
}
.nav-block.primary .nb-stat .num{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:44px;font-weight:700;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;line-height:1;
}
.nav-block.primary .nb-stat .sub{color:var(--muted);font-size:13px}

@media (max-width:780px){
  .nav-blocks{grid-template-columns:1fr;grid-template-rows:auto;}
  .nav-block.primary{grid-row:auto}
}

/* Numbered rows — "01 How it works" pattern, replaces card grids.
   Each row is a "step." Hover lifts the side card, brightens the
   number, and adds a faint gradient sweep. JS also rotates an
   `.active` class through the rows on a slow loop so the visitor's
   eye is guided through the sequence without them having to scroll
   carefully. */
.num-section{
  padding:80px 0;
  border-top:1px solid var(--border);
  position:relative;
}
.num-section .num-row{
  display:grid;
  grid-template-columns:120px 1fr 1fr;
  gap:36px;
  align-items:start;
  padding:24px 0;
  border-radius:18px;
  position:relative;
  transition:background var(--t-glide),transform var(--t-glide);
  cursor:default;
}
/* The progress line connecting the steps — fixed left at where the
   numbers live, becomes gradient-lit as steps activate. */
.num-section{counter-reset:step}
.num-section::before{
  content:'';position:absolute;
  left:calc(50px - 1px); /* aligned with center of the num-mark column */
  top:140px;bottom:130px;width:2px;
  background:linear-gradient(180deg,
    var(--accent-indigo),
    var(--accent-rose));
  opacity:.18;border-radius:2px;
  pointer-events:none;
}
.num-section .num-row + .num-row{margin-top:36px}
.num-section .num-mark{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:64px;font-weight:600;letter-spacing:-.04em;
  color:var(--surface3);line-height:.9;
  position:relative;z-index:1;
  transition:color var(--t-glide),
             text-shadow var(--t-glide),
             transform var(--t-glide);
}
.num-section .num-row:hover .num-mark,
.num-section .num-row.active .num-mark{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  text-shadow:0 0 28px rgba(124,92,255,.35);
  transform:translateY(-2px);
}
/* A small status dot next to the number — fades on for the active
   step and during hover. Pure decoration. */
.num-section .num-mark::after{
  content:'';position:absolute;
  left:74px;top:18px;
  width:9px;height:9px;border-radius:50%;
  background:var(--accent-indigo);opacity:0;
  box-shadow:0 0 14px var(--accent-glow);
  transition:opacity var(--t-glide);
}
.num-section .num-row:hover .num-mark::after,
.num-section .num-row.active .num-mark::after{opacity:1}

.num-section .num-body h2{
  font-size:28px;margin:0 0 12px;letter-spacing:-.025em;
  transition:color var(--t-snap);
}
.num-section .num-body p{
  color:var(--text);opacity:.78;font-size:16px;margin:0;line-height:1.7;
  max-width:54ch;
}
.num-section .num-aside{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:20px;color:var(--muted);font-size:14px;
  line-height:1.65;position:relative;overflow:hidden;
  transition:transform var(--t-glide),
             border-color var(--t-glide),
             box-shadow var(--t-glide),
             background var(--t-glide);
}
.num-section .num-aside::before{
  content:'';position:absolute;inset:-1px;
  background:radial-gradient(80% 100% at 100% 0%,
    rgba(124,92,255,.14),transparent 60%);
  opacity:0;transition:opacity var(--t-glide);pointer-events:none;
}
.num-section .num-row:hover .num-aside,
.num-section .num-row.active .num-aside{
  transform:translateY(-3px);
  border-color:var(--border-strong);
  box-shadow:0 18px 40px -22px var(--accent-glow);
}
.num-section .num-row:hover .num-aside::before,
.num-section .num-row.active .num-aside::before{opacity:1}
.num-section .num-aside strong{
  color:var(--text);display:block;
  margin-bottom:8px;font-size:14.5px;font-weight:650;
  letter-spacing:-.005em;
}
.num-section .num-aside ul{margin:0;padding-left:18px}
.num-section .num-aside li{margin:6px 0;color:var(--text);opacity:.78}

@media (max-width:780px){
  .num-section{padding:48px 0}
  .num-section::before{display:none}
  .num-section .num-row{grid-template-columns:1fr;gap:18px;padding:18px 0}
  .num-section .num-mark{font-size:48px}
  .num-section .num-mark::after{display:none}
}

/* Comparison strip — ROID vs sketchy sites */
.compare{
  margin:64px 0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:8px;
}
.compare-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
}
.compare-grid > div{padding:18px 22px}
.compare-grid .ch{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.compare-grid .ch.us{color:var(--accent-indigo)}
.compare-grid .ch.them{color:var(--faint)}
.compare-row{
  display:contents;
}
.compare-row > div{
  padding:14px 22px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:8px;font-size:14.5px;
}
.compare-row .label{color:var(--text);font-weight:500}
.compare-row .us{color:var(--good)}
.compare-row .them{color:var(--bad);opacity:.85}

@media (max-width:780px){
  .compare-grid{grid-template-columns:1fr}
  .compare-grid .ch.them,.compare-row .them{
    border-left:1px solid var(--border);background:rgba(255,92,122,.04);
  }
}

/* Pricing matrix */
.matrix{
  width:100%;margin:36px 0 48px;
  border-collapse:separate;border-spacing:0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;font-size:14.5px;
}
.matrix thead th{
  text-align:left;padding:24px 20px 18px;font-weight:600;
  font-size:14px;color:var(--text);border-bottom:1px solid var(--border);
  vertical-align:bottom;
}
.matrix thead th:not(:first-child){text-align:center}
.matrix thead .col-eyebrow{
  display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.matrix thead .col-eyebrow.popular{color:var(--accent-indigo)}
.matrix thead .col-price{
  font-family:'Geist','Inter',sans-serif;
  font-variant-numeric:lining-nums proportional-nums;
  font-size:30px;font-weight:720;letter-spacing:-.028em;display:block;
  margin-top:6px;line-height:1;
}
.matrix thead .col-price small{
  font-family:'Geist',sans-serif;font-size:13px;color:var(--muted);
  font-weight:500;letter-spacing:0;
}
.matrix tbody td{
  padding:14px 20px;border-top:1px solid var(--border);vertical-align:middle;
}
.matrix tbody tr:hover td{background:var(--surface2)}
.matrix tbody td:not(:first-child){text-align:center;color:var(--muted)}
.matrix tbody .yes{color:var(--good)}
.matrix tbody .no{color:var(--faint);opacity:.6}
.matrix tbody .row-label{color:var(--text);font-weight:500}
.matrix tbody .row-help{display:block;color:var(--faint);font-size:12.5px;
  margin-top:3px;font-weight:400}
.matrix tfoot td{padding:22px 20px;border-top:1px solid var(--border);
  background:var(--bg2)}
.matrix .col-action{display:flex;justify-content:center}
.matrix .popular-col{
  background:linear-gradient(180deg,rgba(124,92,255,.06),transparent 40%);
  position:relative;
}
.matrix th.popular-col::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad);
}

@media (max-width:780px){
  .matrix,.matrix thead,.matrix tbody,.matrix tfoot,
  .matrix tr,.matrix th,.matrix td{display:block}
  .matrix{padding:0}
  .matrix thead{display:none}
  .matrix tbody tr{
    border-bottom:1px solid var(--border);padding:18px 0;
  }
  .matrix tbody td{
    text-align:left!important;padding:8px 20px;border:0;
    display:flex;justify-content:space-between;gap:16px;
  }
  .matrix tbody td:first-child{font-weight:600;padding-top:18px}
  .matrix tbody td:not(:first-child)::before{
    content:attr(data-tier);
    font-size:11px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);
  }
}

/* Inset well — used on /resellers calculator, free tier callout */
.well{
  background:var(--bg);border:1px solid var(--border);
  border-radius:16px;padding:28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),
             0 1px 0 rgba(255,255,255,.03);
}
.well-accent{
  background:
    radial-gradient(60% 80% at 50% 0%,rgba(124,92,255,.16),transparent 70%),
    var(--bg);
  border-color:var(--border-strong);
}

/* Calculator (resellers) */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
.calc-left label{margin-top:0}
.calc-left input[type=number]{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:32px;font-weight:700;padding:18px 18px;
  text-align:left;letter-spacing:-.01em;
}
.calc-left .calc-helper{
  font-size:13px;color:var(--muted);margin-top:8px;
}
.calc-right{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.calc-stat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:16px 18px;
}
.calc-stat .lbl{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.calc-stat .val{
  font-family:'Geist','Inter',sans-serif;
  font-variant-numeric:lining-nums proportional-nums;
  font-size:24px;font-weight:720;margin-top:4px;letter-spacing:-.025em;
  line-height:1;
}
.calc-stat.total{
  background:
    radial-gradient(80% 100% at 0% 0%,rgba(236,72,153,.14),transparent 60%),
    var(--surface);
  border-color:var(--border-strong);
}
.calc-stat.total .val{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
@media (max-width:780px){
  .calc{grid-template-columns:1fr}
  .calc-right{grid-template-columns:1fr 1fr}
}

/* Bracket table (resellers) */
.bracket{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0;
}
.bracket-row{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:16px 18px;
}
.bracket-row .qty{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:13px;
  color:var(--muted);font-weight:600;
}
.bracket-row .disc{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:24px;font-weight:700;margin-top:6px;letter-spacing:-.02em;
}
@media (max-width:780px){.bracket{grid-template-columns:1fr 1fr}}

/* Contact layout */
.contact-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;
  margin:32px 0 64px;align-items:start;
}
.contact-left h3{font-size:18px;margin:0 0 6px}
.contact-left .contact-row{
  padding:18px 0;border-bottom:1px solid var(--border);
}
.contact-left .contact-row:first-of-type{padding-top:0}
.contact-left .contact-row:last-child{border-bottom:0}
.contact-left .crow-lbl{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.contact-left .crow-val{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:15px;color:var(--text);
}
.contact-left .crow-val.plain{font-family:'Geist',sans-serif;font-size:14px}
@media (max-width:780px){.contact-grid{grid-template-columns:1fr}}

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  margin-top:80px;padding:48px 0 32px;
}
.site-footer .footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;
  max-width:1120px;margin:0 auto;padding:0 28px;
}
.site-footer .footer-grid h4{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px;
}
.site-footer .footer-grid a{
  display:block;font-size:14px;color:var(--text);
  padding:5px 0;transition:color var(--t-snap);
}
.site-footer .footer-grid a:hover{color:var(--accent-indigo)}
.site-footer .footer-blurb{color:var(--muted);font-size:13.5px;
  max-width:36ch;margin:14px 0 0;line-height:1.6}
.site-footer .footer-meta{
  max-width:1120px;margin:36px auto 0;padding:18px 28px 0;
  border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;color:var(--faint);flex-wrap:wrap;gap:12px;
}
@media (max-width:780px){
  .site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:24px;padding:0 18px}
  .site-footer .footer-meta{padding:18px 18px 0}
}

/* =========================================================================
   AUTH PAGES — left atmosphere, right form (unchanged structure, fresh tokens)
   ========================================================================= */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-hero{position:relative;overflow:hidden;padding:56px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:
    radial-gradient(560px 380px at 28% 22%,rgba(124,92,255,.30),transparent 60%),
    radial-gradient(420px 320px at 80% 80%,rgba(236,72,153,.20),transparent 60%),
    linear-gradient(160deg,#120f24,#0a0b10)}
.auth-hero h1{font-size:46px;line-height:1.05;margin:0 0 16px;font-weight:700;
  letter-spacing:-.03em}
.auth-hero p{color:var(--muted);font-size:16px;max-width:420px;margin:0}
.hero-points{list-style:none;padding:0;margin:28px 0 0;display:flex;
  flex-direction:column;gap:14px}
.hero-points li{display:flex;gap:12px;align-items:center;color:var(--text);
  font-size:14.5px}
.hero-points svg{flex:none;color:var(--accent)}
.hero-orb{position:absolute;width:420px;height:420px;border-radius:50%;
  right:-140px;bottom:-160px;background:var(--grad);filter:blur(90px);
  opacity:.4;animation:orbPulse 6s infinite}
.auth-panel{display:flex;align-items:center;justify-content:center;
  padding:48px 32px;background:var(--bg)}
.auth-card{width:100%;max-width:380px;animation:fadeUp .4s ease}
.auth-card .logo{font-size:28px;font-weight:800;margin:0 0 6px}
.auth-card .lead{color:var(--muted);font-size:14px;margin:0 0 26px}
.divider{display:flex;align-items:center;gap:12px;margin:22px 0;
  color:var(--faint);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase}
.divider::before,.divider::after{content:'';flex:1;height:1px;
  background:var(--border)}
.alt{text-align:center;margin-top:22px;font-size:13px;color:var(--muted)}
.alt a{color:var(--accent);font-weight:600}
.alt a:hover{text-decoration:underline;text-underline-offset:3px}
.banner{background:var(--bad-bg);border:1px solid rgba(255,92,122,.3);
  color:var(--bad);padding:11px 14px;border-radius:var(--r-sm);
  font-size:13px;margin-bottom:18px;display:none}
.banner.show{display:block}
#err{font-size:13px;margin-top:12px;min-height:1em;text-align:center;
  color:var(--bad)}

/* =========================================================================
   DASHBOARD APP SHELL — kept structurally identical, fresh tokens carry through
   ========================================================================= */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:var(--bg2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:22px 16px;position:sticky;
  top:0;height:100vh}
.sidebar .logo{font-size:24px;font-weight:800;padding:6px 10px 22px;
  letter-spacing:-.02em}
.nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;
  border-radius:var(--r-sm);color:var(--muted);font-size:14px;font-weight:500;
  cursor:pointer;transition:color var(--t-snap),background var(--t-snap)}
.nav a svg{flex:none}
.nav a:hover{background:var(--surface2);color:var(--text)}
.nav a.active{background:var(--accent-soft);color:#fff}
.nav a.active svg{color:var(--accent-indigo)}
.dl-link{display:flex;align-items:center;gap:12px;padding:11px 13px;
  margin-top:6px;border-radius:var(--r-sm);color:var(--accent-indigo);
  font-size:14px;font-weight:600;
  border:1px solid var(--border-strong);
  transition:background var(--t-snap),color var(--t-snap)}
.dl-link svg{flex:none}
.dl-link:hover{background:var(--accent-soft);color:#fff}
.userchip{display:flex;align-items:center;gap:11px;padding:11px;
  border-radius:var(--r-sm);background:var(--surface2);
  border:1px solid var(--border);margin-top:14px}
.avatar{width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--grad);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;color:#fff}
.userchip .um{min-width:0}
.userchip .um div{font-size:13px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.userchip .um span{font-size:11px;color:var(--faint)}
.iconbtn{background:none;border:1px solid var(--border);color:var(--muted);
  width:32px;height:32px;border-radius:8px;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;margin-left:auto;
  transition:color var(--t-snap),border-color var(--t-snap)}
.iconbtn:hover{color:var(--bad);border-color:var(--bad)}

.main{padding:30px 38px 60px;max-width:1000px;width:100%}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:26px}
.topbar h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em}
.topbar p{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.view{animation:fadeUp .35s ease}
.hide{display:none!important}

.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.panel{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:22px}
.panel h3{margin:0 0 4px;font-size:15px;font-weight:700}
.panel .ph{color:var(--muted);font-size:13px;margin:0 0 16px}
.stat{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:20px}
.stat .lbl{color:var(--muted);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em}
.stat .val{font-size:26px;font-weight:800;margin-top:8px;letter-spacing:-.02em;
  font-family:'Geist Mono','JetBrains Mono',ui-monospace,monospace}
.stat .val.grad{color:var(--text);background:none;-webkit-background-clip:initial;
  background-clip:initial}
/* Dashboard stat values used to render as gradient-text; we keep the
   .val.grad selector for backward compatibility but neutralize the
   gradient — DESIGN.md outlaws decorative gradient text. */
.stat .sub2{color:var(--faint);font-size:12px;margin-top:6px}

.rowlist{display:flex;flex-direction:column}
.rowlist .item{display:flex;align-items:center;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--border)}
.rowlist .item:last-child{border-bottom:0}
.rowlist .item .meta{color:var(--faint);font-size:12px;margin-left:auto;
  text-align:right;white-space:nowrap}
.empty{color:var(--faint);font-size:13.5px;padding:22px 0;text-align:center}
.muted{color:var(--muted)}
.mt{margin-top:18px}
.perk{display:flex;gap:10px;align-items:center;color:var(--text);
  font-size:14px;padding:7px 0}
.perk svg{color:var(--good);flex:none}
.price{font-size:34px;font-weight:800;letter-spacing:-.02em;
  font-family:'Geist Mono',ui-monospace,monospace}
.price small{font-size:14px;color:var(--muted);font-weight:500;
  font-family:'Geist',sans-serif}

/* ---------------- Mobile ---- */
.menu-btn{display:none}
.scrim{display:none}
@media (max-width:860px){
  .auth-wrap{grid-template-columns:1fr}
  .auth-hero{display:none}
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:200;width:248px;
    transform:translateX(-100%);transition:transform .25s ease}
  .sidebar.open{transform:none}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);
    z-index:150}
  .main{padding:22px 18px 50px}
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
  .menu-btn{display:inline-flex;background:var(--surface2);
    border:1px solid var(--border);color:var(--text);width:38px;height:38px;
    border-radius:9px;align-items:center;justify-content:center;cursor:pointer}
}

/* Scroll-revealed sections (IntersectionObserver hook).
   Only hidden when JS is *confirmed running* via the `js-on` class on
   <html> — added by site-motion.js. If JS is blocked or the observer
   never fires (e.g. Playwright full-page screenshots, headless
   crawlers, NoScript users), the .reveal elements stay visible. */
.js-on .reveal{
  opacity:0;transform:translate3d(0,12px,0);
  transition:opacity var(--t-glide),transform var(--t-glide);
}
.js-on .reveal.in{opacity:1;transform:none}

/* ============================================================
   Fall-in page-load cascade.

   Used across marketing pages so loading a tab feels like content
   arriving from above — title, lead, then sections one after
   another, each tilting in and settling.

   Two variants:
     .fall-in           — single element, runs once on mount.
                          Pass a custom delay via inline
                          `style="--d: 120ms"` when you need staged
                          beats outside a stagger group.
     .fall-stagger > *  — children animate sequentially, ~80ms apart
                          per index, capped at 12 distinct delays.

   Why CSS animation rather than transition + JS class flip: on
   cold page load there's nothing to listen for. Animation starts
   the moment the browser paints. `animation-fill-mode: backwards`
   holds the FROM state during the delay so nothing flickers
   visible before the delay elapses.
   ============================================================ */
.fall-in,
.fall-stagger > *{
  /* `both` = backwards + forwards: holds the FROM state during the
     delay (no pre-flash) AND holds the TO state after the keyframes
     complete (no snap-back to opacity:0). Without `both` elements
     reset to invisible the moment the animation ends. */
  animation:roid-fall-in .7s cubic-bezier(.22,1,.36,1)
            var(--d, 0s) both;
}
@keyframes roid-fall-in{
  from{ opacity:0; transform:translate3d(0,-20px,0); }
  to  { opacity:1; transform:translate3d(0,0,0); }
}
/* Stagger delays — up to 12 distinct values, longer lists collapse
   onto the last so no element waits absurdly long on a big page. */
.fall-stagger > *:nth-child(1){ animation-delay:0.00s; }
.fall-stagger > *:nth-child(2){ animation-delay:0.08s; }
.fall-stagger > *:nth-child(3){ animation-delay:0.16s; }
.fall-stagger > *:nth-child(4){ animation-delay:0.22s; }
.fall-stagger > *:nth-child(5){ animation-delay:0.28s; }
.fall-stagger > *:nth-child(6){ animation-delay:0.34s; }
.fall-stagger > *:nth-child(7){ animation-delay:0.39s; }
.fall-stagger > *:nth-child(8){ animation-delay:0.43s; }
.fall-stagger > *:nth-child(9){ animation-delay:0.46s; }
.fall-stagger > *:nth-child(10){ animation-delay:0.49s; }
.fall-stagger > *:nth-child(11){ animation-delay:0.52s; }
.fall-stagger > *:nth-child(n+12){ animation-delay:0.55s; }

@media (prefers-reduced-motion: reduce){
  .fall-in,
  .fall-stagger > *{
    animation:none; opacity:1; transform:none;
  }
}

/* =========================================================================
   POLISH PASS — pointer-aware motion + signature interactions
   ========================================================================= */

/* Magnetic buttons — site-motion.js sets --mag-x / --mag-y on each
   .btn-primary when the cursor enters its pull zone. The transform
   below applies that pull and pairs with the existing :hover lift. */
.btn-primary{
  --mag-x:0px; --mag-y:0px;
  transform:translate3d(var(--mag-x),var(--mag-y),0);
  transition:transform .25s cubic-bezier(.22,1,.36,1),
             background var(--t-snap),box-shadow var(--t-snap),
             filter var(--t-snap);
}
.btn-primary:hover:not(:disabled){
  transform:translate3d(var(--mag-x),calc(var(--mag-y) - 1px),0);
}
.btn-primary:active{
  transform:translate3d(calc(var(--mag-x) * 0.6),
                       calc(var(--mag-y) * 0.6),0);
  transition-duration:.08s;
}

/* Sheen — the primary CTA gets a faint moving highlight that pairs
   with the gradient sweep below. Cleaner than a raw glow because it
   reads as "lit from a moving angle" not "the button has emoji on it". */
.btn-primary{
  position:relative;overflow:hidden;
}
.btn-primary::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,
    rgba(255,255,255,.20) 50%,transparent 70%);
  transform:translateX(-100%);
  transition:transform .9s cubic-bezier(.22,1,.36,1);
}
.btn-primary:hover::before{transform:translateX(100%)}

/* Scroll-progress line under the sticky nav. site-motion.js creates
   .nav-progress inside #siteNav and sets --p to a percentage. */
.site-nav{position:sticky;top:0;z-index:50}
.nav-progress{
  --p:0%;
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,
    var(--accent-indigo),
    var(--accent-rose) calc(var(--p)),
    transparent calc(var(--p)));
  pointer-events:none;opacity:.85;
  transition:opacity var(--t-glide);
}
.site-nav:not(.scrolled) .nav-progress{opacity:0}

/* Brand lockup — gentle pulse on hover, no permanent animation that
   would draw the eye from content. */
.brand-lockup{
  display:inline-flex;align-items:center;gap:0;line-height:1;
  transition:transform var(--t-snap);
}
.brand-lockup:hover{transform:translateY(-1px)}
.brand-lockup svg{
  transition:filter var(--t-snap),transform var(--t-snap);
}
.brand-lockup:hover svg{
  filter:drop-shadow(0 0 10px rgba(168,85,247,.45));
  transform:rotate(-3deg);
}

/* Nav-link hover — subtle underline accent that grows from the left.
   Replaces the generic background-tint hover with something that
   reads "designed". */
.site-nav .nav-links a{position:relative}
.site-nav .nav-links a::after{
  content:'';position:absolute;left:12px;right:12px;bottom:4px;
  height:1px;background:var(--accent-indigo);
  transform-origin:left;transform:scaleX(0);
  transition:transform var(--t-glide);
}
.site-nav .nav-links a:hover::after{transform:scaleX(.85)}

/* Nav blocks — hover sheen sweep, lifted shadow, the meta arrow walks.
   The base style stays as defined earlier; this adds the polish. */
.nav-block{position:relative;overflow:hidden}
.nav-block::before{
  content:'';position:absolute;inset:-1px;pointer-events:none;
  background:linear-gradient(125deg,transparent 30%,
    rgba(168,85,247,.08) 50%,transparent 70%);
  transform:translateX(-100%);
  transition:transform 1.1s cubic-bezier(.22,1,.36,1);
}
.nav-block:hover::before{transform:translateX(100%)}
.nav-block.primary::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 100% 0%,
    rgba(124,92,255,.18),transparent 60%);
  opacity:0;transition:opacity var(--t-glide);
}
.nav-block.primary:hover::after{opacity:1}
.nav-block .nb-icon{
  transition:transform var(--t-snap),background var(--t-snap),
             color var(--t-snap);
}
.nav-block:hover .nb-icon{
  transform:translateY(-2px) rotate(-4deg);
  background:rgba(124,92,255,.22);color:#e2d3ff;
}

/* Hero — the inset preview card. Used by the landing hero to show a
   miniature ROID desktop-app license screen with a key being typed
   into it. Sized as a real product window with chrome (three dots),
   inner panel, blinking cursor. */
.app-mock{
  background:linear-gradient(180deg,var(--surface),var(--bg2));
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow-lift);
  font-family:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  font-size:13px;
  width:100%;
  position:relative;
}
.app-mock .chrome{
  display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:var(--bg2);border-bottom:1px solid var(--border);
  flex-wrap:nowrap;height:42px;
}
.app-mock .chrome .dot{
  flex:none;width:11px;height:11px;border-radius:50%;
  background:var(--surface3);display:inline-block;
}
.app-mock .chrome .dot.r{background:rgba(255,92,122,.55)}
.app-mock .chrome .dot.y{background:rgba(255,180,84,.55)}
.app-mock .chrome .dot.g{background:rgba(63,221,146,.55)}
.app-mock .chrome .ctitle{
  margin-left:14px;color:var(--faint);font-size:11.5px;
  letter-spacing:.04em;font-family:'Geist',sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.app-mock .body{padding:22px 24px 24px}
.app-mock .eyebrow-mock{
  font-family:'Geist',sans-serif;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.app-mock h4{
  font-family:'Geist',sans-serif;
  margin:0 0 14px;font-size:16px;font-weight:650;color:var(--text);
  letter-spacing:-.012em;
}
.app-mock .field{
  background:var(--bg);border:1px solid var(--border);
  border-radius:10px;padding:13px 14px;
  display:flex;align-items:center;min-height:46px;
  position:relative;
}
.app-mock .field.focused{
  border-color:var(--accent-indigo);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.app-mock .field .out{
  color:var(--text);font-size:14px;letter-spacing:.04em;
  word-break:break-all;
}
.app-mock .field .caret{
  display:inline-block;width:7px;height:16px;
  background:var(--accent-indigo);margin-left:2px;
  vertical-align:-3px;border-radius:1px;
}
.app-mock .row{
  display:flex;gap:8px;align-items:center;margin-top:14px;
  font-family:'Geist',sans-serif;font-size:12.5px;color:var(--muted);
}
.app-mock .row .ok{
  width:14px;height:14px;border-radius:50%;
  background:var(--good);color:#0a1810;font-size:9px;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;
}
.app-mock .activate-btn{
  display:block;margin:16px 0 0;padding:11px 14px;
  background:var(--grad);border-radius:9px;
  font-family:'Geist',sans-serif;font-weight:600;font-size:13px;
  text-align:center;color:#fff;
  box-shadow:var(--shadow-spot);
}

/* Hero layout — split: pitch left, app mock right. Stacked on mobile. */
.hero-split{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:56px;align-items:center;
  margin-top:32px;
}
.hero-split .hero-text{position:relative;z-index:1}
@media (max-width:880px){
  .hero-split{grid-template-columns:1fr;gap:32px}
}

/* Marquee — silent horizontal scroll of premium features. Uses CSS-only
   animation, pauses on hover, hidden under reduced-motion. */
.feature-marquee{
  position:relative;overflow:hidden;
  margin:48px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex;gap:14px;width:max-content;
  animation:marqueeScroll 38s linear infinite;
}
.feature-marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
  font-size:13.5px;color:var(--text);font-weight:500;white-space:nowrap;
}
.marquee-item svg{color:var(--accent-indigo);flex:none}
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}
/* Feature ticker relocated to the very top of the page content. */
.feature-marquee--top{margin:14px 0 30px}

/* ROID OG promo banner (homepage, JS-gated to the promo window) */
.og-banner{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:10px 14px;border-radius:12px;text-decoration:none;
  background:linear-gradient(135deg,rgba(236,72,153,.14),rgba(124,58,237,.14));border:1px solid rgba(236,72,153,.3);color:var(--text)}
.og-banner:hover{border-color:rgba(236,72,153,.5)}
.og-banner .og-badge{flex:none;font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px;
  background:linear-gradient(135deg,#ec4899,#7c3aed);color:#fff}
.og-banner .og-text{font-size:13.5px;color:var(--text)}
.og-banner .og-cta{margin-left:auto;font-weight:700;font-size:13px;color:#f0abfc;white-space:nowrap}
.og-banner .og-x{flex:none;background:none;border:0;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
@media(max-width:560px){.og-banner .og-cta{display:none}}

/* ===== Reviews — real users who actually ran ROID ===== */
.reviews{margin:64px 0}
.reviews-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.reviews-head h2{margin:6px 0 0}
.reviews-score{display:inline-flex;align-items:baseline;gap:10px}
.reviews-score .rs-avg{font-size:34px;font-weight:800;line-height:1;color:var(--text)}
.reviews-score .rs-stars{color:#facc15;font-size:18px;letter-spacing:2px}
.reviews-score .rs-count{color:var(--muted);font-size:13px}
.reviews-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.rv-filter{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .14s,color .14s,background .14s}
.rv-filter:hover{color:var(--text);border-color:var(--accent)}
.rv-filter.on{color:#fff;border-color:var(--accent);background:color-mix(in oklab,var(--accent) 22%,transparent)}
.rv-filter .rv-fn{font-size:11px;opacity:.7;font-weight:700}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.rv-card{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:16px 16px 18px}
.rv-top{display:flex;align-items:flex-start;gap:11px;margin-bottom:10px}
.rv-av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.rv-noav{display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft,#2a2440);color:#cdb8ff;font-weight:700;font-size:15px}
.rv-name{font-weight:600;font-size:14px;color:var(--text);text-decoration:none}
a.rv-name:hover{text-decoration:underline}
.rv-stars{color:#facc15;font-size:13px;letter-spacing:1.5px;margin-top:2px}
.rv-date{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.rv-body{margin:0;color:var(--muted);font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.reviews-empty{color:var(--muted);text-align:center;padding:24px}

.review-write{margin-top:22px;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:18px}
.review-write h3{margin:0 0 4px;font-size:16px}
.review-write .rw-sub{margin:0 0 12px;color:var(--muted);font-size:13px}
.rw-stars{display:inline-flex;gap:4px;margin-bottom:10px}
.rw-star{background:none;border:0;cursor:pointer;font-size:26px;line-height:1;color:#3a3a52;padding:0 2px;transition:color .12s,transform .12s}
.rw-star:hover{transform:scale(1.12)}
.rw-star.on{color:#facc15}
.review-write textarea{width:100%;background:var(--bg,#0e0e15);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:11px 12px;font:inherit;font-size:14px;resize:vertical}
.review-write textarea:focus{outline:none;border-color:var(--accent-indigo,#8b5cf6)}
.rw-actions{display:flex;align-items:center;gap:12px;margin-top:10px}
.rw-note{font-size:13px}
.rw-note.ok{color:var(--good)}
.rw-note.err{color:#f87171}
.review-cta{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;border:1px dashed var(--border);border-radius:14px;padding:18px;color:var(--muted);font-size:14px}
@media(max-width:560px){.reviews-grid{grid-template-columns:1fr}}

/* Honest-stat strip — small counters showing real numbers (e.g. free
   keys claimed today, active subs). Live data via /api/owner/stats
   public subset where applicable, else hidden. */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin:48px 0 0;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stat-strip > div{
  padding:22px 24px;border-right:1px solid var(--border);
}
.stat-strip > div:last-child{border-right:0}
.stat-strip .sl{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.stat-strip .sv{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:26px;font-weight:700;letter-spacing:-.025em;
  margin-top:6px;
}
.stat-strip .sh{font-size:12.5px;color:var(--faint);margin-top:4px}
@media (max-width:780px){
  .stat-strip{grid-template-columns:1fr 1fr}
  .stat-strip > div{border-bottom:1px solid var(--border)}
  .stat-strip > div:nth-child(2){border-right:0}
}

/* Selection / link refinement — tighter visual rhythm */
::selection{background:var(--accent-soft);color:#fff}
a.subtle{color:var(--accent-indigo);font-weight:600;
  border-bottom:1px solid transparent;transition:border-color var(--t-snap)}
a.subtle:hover{border-bottom-color:var(--accent-indigo)}

/* FAQ accordion — shared across landing, pricing, resellers.
   Was previously inline on the landing page; promoted here so every
   page's FAQ section renders correctly. */
.faq-list details{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:14px 18px;margin-bottom:8px;
  transition:border-color var(--t-snap),background var(--t-snap);
}
.faq-list details[open]{
  border-color:var(--border-strong);
  background:linear-gradient(180deg,var(--surface),var(--surface2));
}
.faq-list summary{
  cursor:pointer;font-weight:600;font-size:15px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:'+';font-family:'Geist Mono',ui-monospace,monospace;
  font-size:20px;font-weight:400;color:var(--accent-indigo);
  flex:none;line-height:1;
  transition:transform var(--t-snap),content var(--t-snap);
}
.faq-list details[open] summary::after{content:'−'}
.faq-list details p{
  margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.65;
}
.faq-list details a{color:var(--accent-indigo);font-weight:500}
.faq-list details a:hover{
  text-decoration:underline;text-underline-offset:3px;
}

/* =========================================================================
   DISCORD — shared nav link + button. Brand blurple #5865F2. Tasteful:
   the nav link sits quiet in --muted and only lights up on hover with a
   soft blurple glow + a gentle icon bob.
   ========================================================================= */
.site-nav .nav-links a.nav-discord{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--muted);
  transition:color var(--t-snap),background var(--t-snap),
             text-shadow var(--t-snap);
}
.nav-discord svg{
  flex:none;
  transition:transform var(--t-snap),filter var(--t-snap);
}
/* No growing-underline accent on the Discord item — it has its own
   glow treatment, so suppress the shared ::after underline. */
.site-nav .nav-links a.nav-discord::after{display:none}
.site-nav .nav-links a.nav-discord:hover{
  color:#5865F2;background:transparent;
  text-shadow:0 0 10px rgba(88,101,242,.5);
}
.site-nav .nav-links a.nav-discord:hover svg{
  transform:translateY(-2px);
  filter:drop-shadow(0 0 8px rgba(88,101,242,.6));
}

/* Discord-blurple solid button — used in the site-or-Discord section
   and anywhere a "Join the Discord" CTA appears. Mirrors .btn sizing
   and the hover-lift pattern; brightens + lifts on hover. */
.btn-discord{
  background:#5865F2;color:#fff;
  border:1px solid transparent;
  box-shadow:0 10px 30px -12px rgba(88,101,242,.7),
             inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-discord:hover:not(:disabled){
  background:#6b76f5;
  transform:translateY(-2px);
  filter:brightness(1.04);
  box-shadow:0 18px 44px -16px rgba(88,101,242,.8),
             inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-discord:active{transform:translateY(0)}
.btn-discord svg{flex:none}

/* =========================================================================
   SITE-OR-DISCORD ("Two ways in") — shared across / and /pricing.
   Two interchangeable front-ends over one account. Card grid mirrors the
   surface/border/radius + hover-lift used by .nav-block; Card B carries a
   faint Discord-blurple border-glow so the "Discord path" reads at a
   glance without shouting. Moved here from index.html's inline <style>
   so the pricing page picks up the exact same layout + motion.
   ========================================================================= */
.community{margin:72px 0}
.community-h{
  font-size:clamp(28px,3.6vw,40px);
  letter-spacing:-.025em;line-height:1.08;
  margin:0 0 14px;max-width:20ch;
}
.community-lead{
  font-size:17px;line-height:1.6;color:var(--muted);
  max-width:60ch;margin:0 0 36px;
}
.community-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;
}
.community-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:30px;overflow:hidden;
  /* Entrance: cards rest invisible + nudged down, then rise when the
     parent .community gets .in (see the reveal end-state below). The
     long glide curve makes the settle feel premium, not snappy. */
  opacity:0;
  transform:translate3d(0,26px,0) scale(.985);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1),
             border-color var(--t-glide),
             box-shadow var(--t-glide);
  will-change:transform,opacity;
}
/* Staggered entrance — card 1 leads, card 2 follows ~120ms later. The
   .community.in scope means this only fires once the section scrolls
   into view (IntersectionObserver adds .in to the .reveal section). */
.community.in .community-grid > *{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.community.in .community-grid > *:nth-child(1){transition-delay:.04s}
.community.in .community-grid > *:nth-child(2){transition-delay:.16s}
.community-card:hover{
  transform:translate3d(0,-4px,0) scale(1);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-lift);
}
/* Soft diagonal sheen — a low-opacity white highlight parked off the
   top-left corner that sweeps across the card on hover. Transform-only
   so it stays GPU-cheap; pointer-events:none keeps it inert. */
.community-card::after{
  content:'';position:absolute;inset:-40% -10%;
  pointer-events:none;z-index:1;
  background:linear-gradient(115deg,
    transparent 38%,
    rgba(255,255,255,.07) 50%,
    transparent 62%);
  transform:translate3d(-60%,-60%,0);
  opacity:0;
  transition:transform .6s cubic-bezier(.22,1,.36,1),
             opacity .6s cubic-bezier(.22,1,.36,1);
}
.community-card:hover::after{
  transform:translate3d(60%,60%,0);
  opacity:1;
}
/* Keep the card's real content above the sheen layer. */
.community-card > *{position:relative;z-index:2}
/* Card B — Discord-accented border + faint blurple corner glow */
.community-card.discord{
  border-color:rgba(88,101,242,.42);
  background:
    radial-gradient(80% 60% at 100% 0%,rgba(88,101,242,.14),transparent 60%),
    var(--surface);
  /* Gentle, slow blurple glow pulse — eases the box-shadow blurple
     alpha between ~.18 and ~.42 so the Discord card breathes. Subtle,
     premium, not flashy. */
  animation:discordPulse 3.5s ease-in-out infinite;
}
.community-card.discord:hover{
  border-color:rgba(88,101,242,.7);
  /* Pause the breathing pulse on hover so it doesn't fight the lift +
     stronger hover shadow below. */
  animation-play-state:paused;
  transform:translate3d(0,-4px,0) scale(1);
  box-shadow:0 18px 44px -22px rgba(88,101,242,.55),
             inset 0 1px 0 rgba(255,255,255,.045);
}
@keyframes discordPulse{
  0%,100%{box-shadow:0 14px 40px -24px rgba(88,101,242,.18)}
  50%    {box-shadow:0 16px 46px -22px rgba(88,101,242,.42)}
}
.community-card .cc-head{
  display:flex;align-items:center;gap:13px;margin-bottom:18px;
}
.community-card .cc-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:11px;flex:none;
  background:var(--accent-soft);color:#cdb8ff;
}
.community-card .cc-icon.discord{
  background:rgba(88,101,242,.16);color:#8b96f5;
}
.community-card.discord h3{color:#9aa3f7}
.community-card .cc-head h3{margin:0;font-size:20px}
.community-card .cc-list{
  list-style:none;padding:0;margin:0 0 24px;flex:1;
  display:flex;flex-direction:column;gap:11px;
}
.community-card .cc-list li{
  position:relative;padding-left:24px;
  color:var(--muted);font-size:14.5px;line-height:1.5;
}
.community-card .cc-list li::before{
  content:'';position:absolute;left:4px;top:8px;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent-indigo);opacity:.85;
}
.community-card.discord .cc-list li::before{background:#5865F2;opacity:.9}
.community-card .cc-list code{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:12.5px;background:var(--bg2);
  border:1px solid var(--border);border-radius:5px;
  padding:1px 6px;color:var(--text);white-space:nowrap;
}
.community-card.discord .cc-list code{
  background:rgba(88,101,242,.10);
  border-color:rgba(88,101,242,.28);
  color:#c2c8fb;
}
.community-card .cc-cta{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:auto;
}
@media (max-width:780px){
  .community{margin:56px 0}
  .community-grid{grid-template-columns:1fr}
  .community-card{padding:26px}
}
/* Accessibility — cut the sweep / pulse / parallax-style motion for
   users who ask for reduced motion. Cards simply appear at rest; no
   sheen sweep, no breathing glow, no entrance translate. */
@media (prefers-reduced-motion:reduce){
  .community-card{
    opacity:1;
    transform:none;
    transition:border-color var(--t-snap),box-shadow var(--t-snap);
  }
  .community.in .community-grid > *{transition-delay:0s}
  .community-card:hover,
  .community-card.discord:hover{transform:none}
  .community-card::after{display:none}
  .community-card.discord{animation:none}
}