/* Shared shell for the standalone product pages (launchpad, smart-swap,
   beendexer, overwatch). Same tokens as index.html; no scroll rig, no Three —
   these pages are read, not flown through. */
:root{
  --bg:#0a0a0a; --fg:#ffffff; --accent:#8a52ff; --muted:#8a8a8a;
  --card:#0f0f0f; --card-2:#121212;
  --line:rgba(255,255,255,0.12); --line-soft:rgba(255,255,255,0.07);
  --glass:rgba(15,15,15,0.55);
  --radius:20px; --radius-sm:12px; --radius-pill:9999px;
  --pad:clamp(20px,4vw,72px);
  --shell:1520px;
}
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:"Inter",system-ui,sans-serif;
  font-size:clamp(15px,1.05vw,17px);line-height:1.55;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,h4,.display{font-family:"Special Gothic Expanded One",sans-serif;
  text-transform:uppercase;font-weight:400;letter-spacing:0;line-height:1.02}
::selection{background:var(--accent);color:#fff}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding-inline:var(--pad)}

/* Header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);background:rgba(10,10,10,0.6);
  border-bottom:1px solid var(--line-soft)}
.hdr-in{display:flex;align-items:center;gap:clamp(16px,2vw,36px);
  height:64px;max-width:var(--shell);margin:0 auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand i{width:26px;height:26px;flex:none;background:#fff;
  -webkit-mask:url("/assets/brand/logo.svg") center/contain no-repeat;
  mask:url("/assets/brand/logo.svg") center/contain no-repeat}
.brand b{font-family:"Special Gothic Expanded One",sans-serif;text-transform:uppercase;
  font-weight:400;font-size:15px;letter-spacing:0.02em}
.hdr nav{display:flex;gap:clamp(10px,1.4vw,24px);margin-left:auto;
  overflow-x:auto;scrollbar-width:none}
.hdr nav::-webkit-scrollbar{display:none}
.hdr nav a{font-size:13px;color:var(--muted);white-space:nowrap;
  padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.hdr nav a:hover{color:var(--fg)}
.hdr nav a[aria-current]{color:var(--fg);border-bottom-color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-pill);
  padding:11px 22px;font-size:14px;font-weight:500;white-space:nowrap;
  transition:transform .18s ease,background .18s,border-color .18s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#9a68ff}
.btn-ghost{border:1px solid var(--line);color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent)}
.hdr .btn{flex:none;padding:9px 18px;margin-left:clamp(10px,1.4vw,24px)}
@media (max-width:900px){.hdr nav{display:none}}
/* Previewed inside a portfolio card on the home page — see product.js. */
.framed .hdr{display:none}
.framed .hero{padding-top:clamp(28px,4vw,56px)}
/* The card prints the same tag line above us, at the card's own padding — keeping
   ours means two rows of it, on two different levels. */
.framed .hero .tags{display:none}

/* Hero — the full screen these pages were asked for */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding-top:120px;padding-bottom:clamp(28px,4vw,56px);
  overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;opacity:0.5}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,0.55) 0%,rgba(10,10,10,0.2) 40%,var(--bg) 96%)}
.hero-glow{position:absolute;z-index:-1;left:50%;top:-10%;width:min(1100px,120vw);
  aspect-ratio:1;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(138,82,255,0.30),transparent 70%)}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
.tags .sep{opacity:0.45}
.tags .on{color:var(--accent)}
.hero h1{margin-top:22px;font-size:clamp(34px,6.4vw,100px);max-width:19ch}
.hero h1 .dim{opacity:0.38}
.hero-sub{margin-top:24px;max-width:62ch;font-size:clamp(16px,1.35vw,21px);
  color:#c9c9c9;line-height:1.5}
.hero-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.hero-strip{margin-top:clamp(40px,6vw,72px);display:grid;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.hero-strip div{background:var(--bg);padding:20px 22px}
.hero-strip b{display:block;font-family:"Special Gothic Expanded One",sans-serif;
  text-transform:uppercase;font-weight:400;font-size:clamp(19px,1.9vw,27px);color:var(--fg)}
.hero-strip span{display:block;margin-top:6px;font-size:13px;color:var(--muted)}

/* Sections */
section.band{padding-block:clamp(64px,9vw,150px);border-top:1px solid var(--line-soft)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent)}
.band h2{margin-top:18px;font-size:clamp(26px,3.5vw,52px);max-width:22ch}
.band-head p{margin-top:18px;max-width:60ch;color:#b3b3b3;font-size:clamp(15px,1.2vw,19px)}

.grid{display:grid;gap:clamp(14px,1.5vw,22px);margin-top:clamp(34px,4vw,60px)}
/* Fixed column counts, not auto-fit: every grid here holds a multiple of its
   column count, so a wide screen fitting one extra column leaves orphans. */
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.g2,.g3{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(22px,2.2vw,34px);transition:border-color .2s,background .2s}
.card:hover{border-color:var(--line);background:var(--card-2)}
.card h3{font-size:clamp(17px,1.5vw,22px)}
.card p{margin-top:12px;color:#a8a8a8;font-size:15px}
.card .num{font-family:"Special Gothic Expanded One",sans-serif;font-size:13px;
  color:var(--accent);letter-spacing:0.08em}
.card ul{margin-top:16px;padding:0;list-style:none;display:grid;gap:9px}
.card ul li{position:relative;padding-left:18px;font-size:14px;color:#a8a8a8}
.card ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}

/* Two-column feature panels (For Users / For Creators) */
.panel{background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--radius);overflow:hidden}
.panel.accent{background:linear-gradient(180deg,rgba(138,82,255,0.16),#0f0f0f 55%)}
.panel-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(22px,2.2vw,32px);border-bottom:1px solid var(--line-soft)}
.panel-top h3{font-size:clamp(19px,1.8vw,26px)}
.pill{border:1px solid var(--line);background:var(--glass);border-radius:var(--radius-pill);
  padding:7px 15px;font-size:12px;color:var(--muted);white-space:nowrap;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.feat{list-style:none;margin:0;padding:0}
.feat li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:clamp(18px,1.8vw,26px) clamp(22px,2.2vw,32px);
  border-bottom:1px solid var(--line-soft)}
.feat li:last-child{border-bottom:0}
.feat li i{width:30px;height:30px;flex:none;border-radius:9px;background:rgba(138,82,255,0.14);
  border:1px solid rgba(138,82,255,0.35);color:var(--accent);font-style:normal;
  font-size:12px;display:flex;align-items:center;justify-content:center}
.feat li b{display:block;font-weight:500;font-size:16px}
.feat li span{display:block;margin-top:6px;color:#a0a0a0;font-size:14.5px}

/* Flow rail (3-stage pipelines) */
.flow{display:grid;gap:clamp(14px,1.5vw,22px);margin-top:clamp(40px,4vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.step{position:relative;background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:clamp(26px,2.2vw,34px)}
.step::before{content:attr(data-step);position:absolute;top:-12px;left:clamp(22px,2.2vw,32px);
  background:var(--accent);color:#fff;border-radius:var(--radius-pill);
  padding:4px 12px;font-size:11px;letter-spacing:0.1em;text-transform:uppercase}
.step h3{font-size:clamp(17px,1.5vw,22px)}
.step p{margin-top:12px;color:#a8a8a8;font-size:15px}
.step ul{margin-top:18px;list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.step ul li{border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:6px 13px;font-size:12.5px;color:#cfcfcf}

/* Spec list */
.spec{margin-top:clamp(34px,4vw,60px);border:1px solid var(--line-soft);
  border-radius:var(--radius);overflow:hidden}
.spec>div{display:grid;grid-template-columns:minmax(160px,22%) 1fr;gap:clamp(14px,2vw,32px);
  padding:clamp(16px,1.7vw,24px) clamp(20px,2.2vw,32px);border-bottom:1px solid var(--line-soft)}
.spec>div:last-child{border-bottom:0}
.spec dt{font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent)}
.spec dd{margin:0;color:#b3b3b3;font-size:15.5px}
@media (max-width:640px){.spec>div{grid-template-columns:1fr;gap:8px}}

/* Token rail — the band is sized here, the coins are drawn by assets/coin-rail.js. */
.coin-rail{position:relative;margin-top:clamp(34px,4vw,60px);
  height:clamp(230px,30vw,340px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.coin-rail canvas{position:absolute;inset:0;width:100%;height:100%}

/* Closing CTA */
.close{padding-block:clamp(70px,10vw,160px);text-align:center;
  border-top:1px solid var(--line-soft);position:relative;overflow:hidden;isolation:isolate}
.close .hero-glow{top:auto;bottom:-45%}
.close h2{font-size:clamp(28px,4.8vw,70px);max-width:16ch;margin-inline:auto}
.close h2 .dim{opacity:0.38}
.close p{margin:20px auto 0;max-width:52ch;color:#b3b3b3}
.close .hero-cta{justify-content:center}

/* Footer */
.ftr{border-top:1px solid var(--line-soft);padding-block:36px;font-size:13px;color:var(--muted)}
.ftr-in{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.ftr nav{display:flex;flex-wrap:wrap;gap:18px;margin-left:auto}
.ftr a:hover{color:var(--fg)}

/* Reveal on scroll — one IntersectionObserver, no library. */
[data-rise]{opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
[data-rise].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-rise]{opacity:1;transform:none;transition:none}}

/* ── Products menu (mobile only) ─────────────────────────────────────────────
   The header nav is hidden below 900px, which left a phone with no way to get
   from one product page to another. This is the StaggeredMenu idea ported to
   the shell we already have: the stagger is transition-delay per layer instead
   of a GSAP timeline, so it adds no dependency and no runtime. Above 900px the
   whole thing is display:none and the normal nav does the job. */
.pm-toggle{display:none}
.pm{display:none}

@media (max-width:900px){
  .hdr .btn{margin-left:auto}
  .pm-toggle{display:inline-flex;flex-direction:column;justify-content:center;
    gap:5px;flex:none;margin-left:14px;width:34px;height:34px;padding:0;
    background:none;border:0;cursor:pointer;color:var(--fg);
    -webkit-tap-highlight-color:transparent}
  /* Three lines open it and the same three close it — the bars never morph. */
  .pm-toggle i{display:block;width:22px;height:2px;border-radius:2px;
    background:currentColor;transition:background .25s ease}
  .pm-toggle[aria-expanded="true"]{color:var(--accent)}

  /* Under the header (z 50) on purpose: the bar keeps its blur and the toggle
     stays reachable without juggling stacking contexts. */
  .pm{display:block;position:fixed;inset:0;z-index:45;pointer-events:none}
  .pm-layer,.pm-panel{position:absolute;inset:0;transform:translateX(100%);
    transition:transform .55s cubic-bezier(.16,1,.3,1)}
  .pm-layer:nth-child(1){background:#1b1030}
  .pm-layer:nth-child(2){background:var(--accent)}
  .pm-panel{background:var(--bg);border-left:1px solid var(--line-soft);
    display:flex;flex-direction:column;padding:84px var(--pad) calc(var(--pad) + 16px);
    overflow-y:auto;pointer-events:none}

  .pm.is-open .pm-layer,.pm.is-open .pm-panel{transform:translateX(0)}
  .pm.is-open .pm-panel{pointer-events:auto}
  .pm.is-open .pm-layer:nth-child(2){transition-delay:.07s}
  .pm.is-open .pm-panel{transition-delay:.14s}
  /* Closing runs the other way and quicker, so the panel leads it out. */
  .pm .pm-panel{transition-duration:.32s;transition-timing-function:cubic-bezier(.7,0,.84,0)}
  .pm.is-open .pm-panel{transition-duration:.55s;transition-timing-function:cubic-bezier(.16,1,.3,1)}

  .pm-list{list-style:none;margin:0;padding:0;counter-reset:pmItem}
  .pm-item{position:relative;overflow:hidden;line-height:1}
  /* The number hangs off the panel's right edge, not the link's — anchored to the
     link it sat wherever that word happened to end, and ran off-screen on the
     longest one. */
  .pm-item::after{counter-increment:pmItem;content:counter(pmItem,decimal-leading-zero);
    position:absolute;top:14px;right:0;font-family:"Inter",system-ui,sans-serif;
    font-size:13px;font-weight:400;letter-spacing:0;color:var(--accent);
    opacity:0;transition:opacity .4s ease;pointer-events:none}
  .pm.is-open .pm-item::after{opacity:1;transition-delay:.42s}
  .pm-item + .pm-item{margin-top:6px}
  /* nowrap: the display face is wide, and the longest label broke onto a second
     line at the old size, which threw the whole rhythm out. */
  .pm-link{position:relative;display:inline-block;padding:10px 2.2em 10px 0;
    font-family:"Special Gothic Expanded One",sans-serif;text-transform:uppercase;
    white-space:nowrap;
    font-size:clamp(24px,7.6vw,42px);line-height:1;letter-spacing:-0.01em;color:var(--fg);
    transform:translateY(130%) rotate(8deg);transform-origin:50% 100%;
    transition:transform .85s cubic-bezier(.16,1,.3,1),color .25s ease}
  .pm.is-open .pm-link{transform:none}
  .pm-item:nth-child(1) .pm-link{transition-delay:.22s}
  .pm-item:nth-child(2) .pm-link{transition-delay:.30s}
  .pm-item:nth-child(3) .pm-link{transition-delay:.38s}
  .pm-item:nth-child(4) .pm-link{transition-delay:.46s}
  .pm:not(.is-open) .pm-link{transition-delay:0s;transition-duration:.2s}
  .pm-link[aria-current]{color:var(--accent)}

  .pm-foot{margin-top:auto;padding-top:28px;border-top:1px solid var(--line-soft);
    font-size:13px;color:var(--muted);opacity:0;transform:translateY(14px);
    transition:opacity .45s ease,transform .45s ease}
  .pm.is-open .pm-foot{opacity:1;transform:none;transition-delay:.5s}

  body.pm-open{overflow:hidden}
}

/* Previewed inside a portfolio card on the home page — the header is hidden
   there (see product.js), so its menu must be too. */
.framed .pm-toggle,.framed .pm{display:none}

@media (prefers-reduced-motion:reduce){
  .pm-layer,.pm-panel,.pm-link,.pm-foot,.pm-item::after{transition-duration:.01ms !important;
    transition-delay:0s !important}
}