/* ============================================================
   DUMPY — COMPONENT STYLESHEET
   Every page links tokens.css first, then this file.

   Nothing here hardcodes a brand value. If you want to change
   how the site LOOKS, edit assets/tokens.css. If you want to
   change how a component is BUILT, edit it here.

   Structure and capability labelling follow P03.
   ============================================================ */

/* ============================================================
   1. RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--ink); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font); font-weight:300; color:var(--text);
  background:var(--ink); min-height:100vh; min-height:100dvh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
svg{ display:block; }
img{ max-width:100%; }
:focus-visible{ outline:2px solid var(--warm-300); outline-offset:3px; border-radius:4px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}

/* ============================================================
   2. ATMOSPHERE
   The lit environment behind the glass. Without this layer the
   panels read as flat dark cards rather than translucent glass.
   ============================================================ */
.env{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:#020306;
  transform:translateZ(0);
}
.env-base{
  position:absolute; inset:0;
  background:
    radial-gradient(90% 60% at 50% -10%, rgb(var(--warm-deep-rgb) / .14), transparent 60%),
    radial-gradient(120% 70% at 50% 110%, rgb(var(--cool-deep-rgb) / .08), transparent 60%),
    linear-gradient(180deg,#020306 0%,#030408 40%,#020306 100%);
  transform:translateZ(0);
}

.env-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1; opacity:1;
  transform:translateZ(0); will-change:transform;
}

.vignette{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(126% 88% at 50% 38%, transparent 34%,
    rgb(var(--shadow-rgb) / .5) 74%, rgb(var(--shadow-rgb) / .88) 100%);
}

/* ============================================================
   3. GLASS
   ============================================================ */
.glass{
  position:relative; border-radius:var(--r-2xl);
  background:var(--glass-fill);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:var(--glass-shadow);
  overflow:hidden;
}
/* gradient hairline: warm and bright at the top-left, cool at the
   bottom-right, the way a real glass edge catches a key light */
.glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--glass-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; pointer-events:none;
}
.sheen::after{
  content:''; position:absolute; top:-60%; left:-30%; width:42%; height:220%;
  background:linear-gradient(100deg, transparent, rgb(var(--light-rgb) / .09) 46%, transparent);
  transform:rotate(14deg) translateX(-140%);
  transition:transform 1.1s var(--ease); pointer-events:none;
}
.sheen:hover::after{ transform:rotate(14deg) translateX(420%); }

/* ============================================================
   4. METAL
   ============================================================ */
.metal-gold{ background:var(--metal-warm); }
.metal-dark{ background:var(--metal-dark); }

/* ============================================================
   5. PRIMITIVES
   ============================================================ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2; }
.mono{ font-family:var(--mono); }
.eyebrow{
  font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--warm-400);
}
.gold-text{
  background:linear-gradient(168deg,#FFF8E4 4%,var(--warm-200) 34%,var(--warm-400) 62%,#F3DFAE 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 22px rgb(var(--warm-deep-rgb) / .3));
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:50px; padding:0 26px; border-radius:var(--r-md); position:relative; overflow:hidden;
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  transition:all var(--t-med) var(--ease); white-space:nowrap;
}
.btn-gold{
  color:#231803;
  background:linear-gradient(140deg,#FFF3CE 0%,var(--warm-200) 26%,var(--warm-400) 62%,#E9CE87 100%);
  box-shadow:
    inset 0 1px 0 rgb(var(--light-rgb) / .75),
    inset 0 -2px 4px rgb(var(--warm-shade-rgb) / .4),
    0 14px 34px -14px rgb(var(--warm-deep-rgb) / .8),
    var(--glow-md);
}
.btn-gold:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.btn-glass{ color:var(--text); }
.btn-glass:hover{ color:var(--warm-100); }
.btn-sm{ height:40px; padding:0 16px; font-size:10px; }
.btn svg{ transition:transform var(--t-med) var(--ease); flex:none; }
.btn:hover svg{ transform:translateX(3px); }

/* capability labels — P03 requires an explicit state on every
   feature that is not live today */
.status{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:var(--r-pill);
  font-family:var(--mono); font-size:8.5px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  border:1px solid; white-space:nowrap;
}
.status i{ width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }
.status.live{ color:var(--live); border-color:rgb(var(--live-rgb) / .30); background:rgb(var(--live-rgb) / .08); }
.status.live i{ box-shadow:0 0 8px currentColor; animation:pulse 2.6s infinite; }
.status.plan{ color:var(--plan); border-color:rgb(var(--plan-rgb) / .30); background:rgb(var(--plan-rgb) / .07); }
.status.gate{ color:var(--gate); border-color:rgb(var(--gate-rgb) / .28); background:rgb(var(--gate-rgb) / .06); }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:var(--r-pill);
  font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--warm-200);
  background:linear-gradient(100deg, rgb(var(--warm-rgb) / .15), rgb(var(--warm-rgb) / .03));
  border:1px solid rgb(var(--warm-rgb) / .25);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.chip i{
  width:5px; height:5px; border-radius:50%; background:var(--warm-200);
  box-shadow:var(--glow-xs); animation:pulse 2.6s infinite;
}

/* section furniture */
section{ position:relative; z-index:2; }
.sec{ padding:var(--sec-y) 0; }
.sec-head{ max-width:660px; margin-bottom:clamp(28px,3.4vw,46px); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{
  font-size:clamp(30px,3.8vw,50px); font-weight:700; line-height:1.02;
  letter-spacing:-.024em; text-transform:uppercase; margin:12px 0 14px;
}
.sec-head p{ font-size:clamp(13.5px,1vw,15px); line-height:1.75; color:var(--text-2); }
.divider{
  height:1px;
  background:linear-gradient(90deg, transparent,
    rgb(var(--warm-rgb) / .28) 22%, rgb(var(--warm-rgb) / .28) 78%, transparent);
}

.rv{ opacity:0; transform:translateY(22px); transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* ============================================================
   6. NAV
   ============================================================ */
.nav{ position:sticky; top:0; z-index:40; padding-top:14px; padding-bottom:6px; }
.nav-inner{ display:flex; align-items:center; gap:22px; height:66px; padding:0 12px 0 16px; border-radius:var(--r-xl); }
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand-mark{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; position:relative;
  box-shadow:var(--glow-sm), inset 0 0 14px rgb(var(--shadow-rgb) / .55);
}
.brand-mark::after{
  content:''; position:absolute; inset:3px; border-radius:50%;
  background:radial-gradient(circle at 38% 30%, #241B08, #08070C 76%);
}
.brand-mark span{ position:relative; z-index:2; font-size:18px; font-weight:700; }
.brand-name{ font-size:21px; font-weight:700; letter-spacing:.15em; }
.nav-links{ display:flex; gap:2px; margin-inline:auto; }
.nav-links a{
  padding:9px 13px; border-radius:var(--r-sm);
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-2); transition:all var(--t-fast) var(--ease);
}
.nav-links a:hover{ color:var(--text); background:rgb(var(--light-rgb) / .05); }
.nav-links a.on{ color:var(--warm-200); background:rgb(var(--warm-rgb) / .09); }
.burger{ display:none; width:42px; height:42px; border-radius:var(--r-md); place-items:center; }
.burger span{ display:block; width:17px; height:1.5px; background:currentColor; margin:3px 0; transition:var(--t-fast) var(--ease); }
@media (max-width:1160px){
  .nav-links{ display:none; }
  .burger{ display:grid; margin-left:auto; }
  .nav-cta{ display:none; }
}

.drawer{
  position:fixed; inset:0; z-index:60; background:rgb(var(--ink-rgb) / .9);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column; padding:22px var(--pad);
  opacity:0; visibility:hidden; transition:var(--t-med) var(--ease);
}
.drawer.open{ opacity:1; visibility:visible; }
.drawer-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:34px; }
.drawer nav{ display:flex; flex-direction:column; gap:4px; }
.drawer nav a{
  padding:16px 4px; font-size:24px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  border-bottom:1px solid rgb(var(--light-rgb) / .06);
}
.drawer .btn{ margin-top:26px; }

/* ============================================================
   7. PAGE HEAD (interior pages)
   ============================================================ */
.phead{ padding:clamp(28px,4vw,60px) 0 clamp(20px,3vw,40px); }
.phead h1{
  font-size:clamp(36px,5vw,66px); font-weight:800; line-height:.98;
  letter-spacing:-.028em; text-transform:uppercase; margin:18px 0;
  text-shadow:0 18px 60px rgb(var(--shadow-rgb) / .7);
}
.phead p{ font-size:clamp(14px,1.05vw,15.5px); line-height:1.75; color:var(--text-2); max-width:58ch; }

/* ============================================================
   8. HERO
   ============================================================ */
.hero{ padding:clamp(18px,2.6vw,40px) 0 clamp(30px,4vw,60px); }
.hero-grid{
  display:grid; gap:clamp(20px,2.6vw,42px); align-items:center;
  grid-template-columns:minmax(300px,1fr) minmax(420px,1.2fr) 300px;
}
/* the Play hero gives its right column more room, because that
   column holds the reveal result rather than a status rail */
.hero-grid.play{ grid-template-columns:minmax(280px,.95fr) minmax(400px,1.15fr) minmax(300px,.86fr); }
/* the .play selector is repeated in these queries because it is
   more specific than .hero-grid alone and would otherwise keep
   its three columns all the way down to a phone */
@media (max-width:1200px){
  .hero-grid,.hero-grid.play{ grid-template-columns:1fr 1fr; }
  .rail{ grid-column:1/-1; flex-direction:row !important; flex-wrap:wrap; }
  .rail>*{ flex:1 1 240px; }
}
@media (max-width:900px){
  .hero-grid,.hero-grid.play{ grid-template-columns:1fr; }
  .rail{ flex-direction:column !important; }
  /* single column: lead with the chamber so the thing the page
     is for sits under the nav instead of below a screen of copy */
  .hero-grid.play>.chamber{ order:-1; }
}
.hero h1{
  font-size:clamp(38px,5.4vw,70px); font-weight:800; line-height:.95;
  letter-spacing:-.028em; text-transform:uppercase; margin:22px 0;
  text-shadow:0 18px 60px rgb(var(--shadow-rgb) / .7);
}
.lede{ font-size:clamp(14px,1.05vw,15.5px); line-height:1.75; color:var(--text-2); max-width:44ch; }
.lede b{ color:var(--text); font-weight:500; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 26px; }
@media (max-width:560px){ .hero-actions .btn,.final .btn{ flex:1 1 100%; } }
.socials{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.socials .lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); }
.socials a{
  width:36px; height:36px; border-radius:var(--r-md); display:grid; place-items:center; color:var(--text-3);
  border:1px solid rgb(var(--light-rgb) / .09); background:rgb(var(--light-rgb) / .02);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:all .35s var(--ease);
}
.socials a:hover{ color:var(--warm-200); border-color:rgb(var(--warm-rgb) / .4); transform:translateY(-2px); }
.socials svg{ width:15px; height:15px; }

/* ============================================================
   8b. CINEMATIC & BLENDED HERO GRAPHICS
   ============================================================ */
.hero-cinematic-wrap, .hero-blended-wrap, .hero-composited-wrap{
  display:grid;
  grid-template-columns:minmax(300px,1.05fr) minmax(360px,1.4fr);
  gap:clamp(20px,3.5vw,48px);
  align-items:center;
  min-height:500px;
  position:relative;
}
@media (max-width:960px){
  .hero-cinematic-wrap, .hero-blended-wrap, .hero-composited-wrap{ grid-template-columns:1fr; gap:28px; min-height:auto; }
}
.hero-cinematic-visual, .hero-blended-stage, .hero-composited-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  overflow:visible;
}
.hero-blended-glow, .hero-composited-glow{
  position:absolute;
  inset:-18% -22%;
  background:radial-gradient(ellipse 70% 60% at 54% 50%, rgb(var(--warm-rgb) / .3) 0%, rgb(var(--warm-lit-rgb) / .1) 40%, transparent 74%);
  pointer-events:none;
  filter:blur(42px);
  z-index:0;
}
.hero-composited-rings{
  position:absolute;
  width:108%;
  aspect-ratio:1;
  border-radius:50%;
  border:1px dashed rgb(var(--warm-rgb) / .16);
  pointer-events:none;
  animation:spin 55s linear infinite;
  z-index:0;
}
.hero-composited-rings::before{
  content:'';
  position:absolute;
  inset:14%;
  border-radius:50%;
  border:1px solid rgb(var(--cool-rgb) / .12);
  animation:spin 38s linear infinite reverse;
}
.hero-composited-ground{
  position:absolute;
  bottom:3%;
  width:80%;
  height:36px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgb(var(--warm-rgb) / .34) 0%, transparent 70%);
  filter:blur(18px);
  pointer-events:none;
  z-index:0;
}
.hero-cinematic-img, .hero-blended-img{
  position:relative;
  z-index:1;
  width:100%;
  max-width:680px;
  height:auto;
  object-fit:contain;
  mix-blend-mode:lighten;
  filter:contrast(1.12) brightness(1.05) drop-shadow(0 0 50px rgb(var(--warm-rgb) / .35));
  -webkit-mask-image:radial-gradient(ellipse 84% 78% at 52% 50%, #000 48%, rgba(0,0,0,0.7) 72%, transparent 97%);
  mask-image:radial-gradient(ellipse 84% 78% at 52% 50%, #000 48%, rgba(0,0,0,0.7) 72%, transparent 97%);
  transition:transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
}
.hero-composited-img{
  position:relative;
  z-index:2;
  width:100%;
  max-width:700px;
  height:auto;
  object-fit:contain;
  mix-blend-mode:normal;
  filter:drop-shadow(0 26px 54px rgba(0,0,0,0.92)) drop-shadow(0 0 45px rgb(var(--warm-rgb) / .35));
  transition:transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
}
.hero-cinematic-visual:hover .hero-cinematic-img,
.hero-blended-stage:hover .hero-blended-img,
.hero-composited-stage:hover .hero-composited-img{
  transform:scale(1.02);
  filter:drop-shadow(0 30px 62px rgba(0,0,0,0.95)) drop-shadow(0 0 60px rgb(var(--warm-rgb) / .5));
}

/* ============================================================
   8d. MASSIVE COMPOSITED HERO SHOWCASE
   ============================================================ */
.hero-massive-stage{
  position:relative;
  min-height:560px;
  overflow:hidden;
}
.hero-backdrop-showcase{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:1;
}
.hero-massive-img{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1080px;
  height:auto;
  object-fit:contain;
  transform:scale(1.15) translateY(-6px);
  filter:drop-shadow(0 32px 68px rgba(0,0,0,0.96)) drop-shadow(0 0 70px rgb(var(--warm-rgb) / .42));
  transition:transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
}
@media (max-width:1200px){
  .hero-massive-img{ transform:scale(1.05); max-width:860px; }
}
@media (max-width:960px){
  .hero-massive-stage{ min-height:auto; }
  .hero-backdrop-showcase{ position:relative; inset:auto; margin:20px 0; }
  .hero-massive-img{ transform:none; max-width:100%; }
}

/* ============================================================
   8e. EMANATING ACTION ATMOSPHERE (Flames, Glow & Steam)
   ============================================================ */
.hero-flame-aura{
  position:absolute;
  inset:-15% -20%;
  border-radius:50%;
  background:radial-gradient(ellipse at 52% 48%, rgba(245,166,35,0.45) 0%, rgba(228,129,63,0.3) 38%, rgba(183,70,20,0.14) 62%, transparent 78%);
  filter:blur(42px);
  pointer-events:none;
  z-index:1;
  animation:flamePulse 5.5s ease-in-out infinite alternate;
}
@keyframes flamePulse{
  0%{ opacity:0.68; transform:scale(0.95) rotate(-2deg); filter:blur(40px); }
  50%{ opacity:0.95; transform:scale(1.05) rotate(1.5deg); filter:blur(46px); }
  100%{ opacity:0.75; transform:scale(1.01) rotate(-1deg); filter:blur(42px); }
}

.hero-steam-mist{
  position:absolute;
  inset:-10% -12%;
  border-radius:45%;
  background:radial-gradient(ellipse at 50% 55%, rgba(255,255,255,0.12) 0%, rgba(227,190,106,0.08) 42%, transparent 70%);
  filter:blur(32px);
  pointer-events:none;
  z-index:1;
  animation:steamDrift 7.5s ease-in-out infinite;
}
@keyframes steamDrift{
  0%,100%{ transform:translateY(0) scale(0.96); opacity:0.55; }
  50%{ transform:translateY(-14px) scale(1.04); opacity:0.85; }
}

@media (max-width:900px){
  .hero-zlayer-wrap{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .hero-text-block{
    max-width:100% !important;
    text-align:center;
  }
  .hero-text-block .lede{
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .hero-text-block .actions, .hero-text-block [data-socials]{
    justify-content:center !important;
  }
  .hero-art-stage{
    min-height:auto !important;
  }
}

/* ============================================================
   9. THE CHAMBER
   ============================================================ */
.chamber{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.plaque{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:8px 30px; border-radius:var(--r-sm);
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--warm-200);
  background:linear-gradient(180deg, rgb(var(--warm-dark-rgb) / .84), rgb(var(--ink-rgb) / .9));
  border:1px solid rgb(var(--warm-rgb) / .32);
  box-shadow:inset 0 1px 0 rgb(var(--warm-rgb) / .26), 0 10px 26px -14px rgb(var(--shadow-rgb) / .95);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.plaque small{ font-size:8.5px; color:var(--warm-500); letter-spacing:.22em; }
.plaque::before,.plaque::after{ content:''; position:absolute; top:50%; width:34px; height:1px; transform:translateY(-50%); }
.plaque::before{ right:100%; background:linear-gradient(90deg,transparent,rgb(var(--warm-rgb) / .5)); }
.plaque::after{  left:100%;  background:linear-gradient(90deg,rgb(var(--warm-rgb) / .5),transparent); }

/* The fallbacks in these var() calls are not decoration. A custom
   property that resolves to nothing makes the WHOLE declaration
   invalid, so max-width silently becomes none and the chamber
   grows to fill its column. Any stale or half-loaded tokens.css
   would blow the steamer up to full width. */
.stage{
  position:relative; width:100%; aspect-ratio:1/1.04; display:grid; place-items:center;
  max-width:min(var(--chamber-max, 520px), var(--chamber-vh, 52vh));
}
.stage.sm{ max-width:min(var(--chamber-max-sm, 380px), var(--chamber-vh-sm, 40vh)); }
.orbit{ position:absolute; border-radius:50%; border:1px solid rgb(var(--warm-rgb) / .1); animation:spin 44s linear infinite; }
.orbit.o1{ width:88%; aspect-ratio:1; border-style:dashed; }
.orbit.o2{ width:66%; aspect-ratio:1; border-color:rgb(var(--cool-rgb) / .12); animation-duration:34s; animation-direction:reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.lid{ position:absolute; top:2.5%; width:72%; height:66px; z-index:5; }
.lid-ring{
  position:absolute; inset:0; border-radius:50%;
  -webkit-mask:radial-gradient(closest-side, transparent 60%, #000 65%);
  mask:radial-gradient(closest-side, transparent 60%, #000 65%);
  filter:drop-shadow(0 12px 24px rgb(var(--shadow-rgb) / .92));
}
.lid-rim{
  position:absolute; inset:-3px -4px; border-radius:50%;
  -webkit-mask:radial-gradient(closest-side, transparent 86%, #000 90%);
  mask:radial-gradient(closest-side, transparent 86%, #000 90%); opacity:.95;
}
.lid-rim.inner{ inset:11px 22px; opacity:.8; }
.lid-mouth{
  position:absolute; inset:12px 24px; border-radius:50%;
  background:radial-gradient(ellipse at 50% 34%, rgb(var(--warm-lit-rgb) / .32), rgb(var(--panel-rgb) / .86) 68%);
  box-shadow:inset 0 4px 14px rgb(var(--shadow-rgb) / .95), 0 0 40px rgb(var(--warm-rgb) / .24);
}

.light-ring{ position:absolute; left:50%; transform:translateX(-50%); border-radius:50%; z-index:4; pointer-events:none; }
.light-ring.lr1{
  top:13%; width:56%; height:52px; border:2px solid rgb(var(--warm-edge-rgb) / .9);
  box-shadow:
    0 0 22px rgb(var(--warm-lit-rgb) / .85),
    0 0 60px rgb(var(--warm-rgb) / .5),
    0 0 120px rgb(var(--warm-deep-rgb) / .3),
    inset 0 0 26px rgb(var(--warm-lit-rgb) / .5);
  animation:ringPulse 5.5s var(--ease) infinite;
}
.light-ring.lr2{
  top:19.5%; width:38%; height:34px; border:1.5px solid rgb(var(--warm-lit-rgb) / .55);
  box-shadow:
    0 0 18px rgb(var(--warm-lit-rgb) / .55),
    0 0 46px rgb(var(--warm-deep-rgb) / .28),
    inset 0 0 18px rgb(var(--warm-lit-rgb) / .3);
  animation:ringPulse 5.5s var(--ease) infinite -1.6s;
}
@keyframes ringPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } }

.cone{
  position:absolute; top:15%; left:50%; transform:translateX(-50%);
  width:56%; height:60%; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgb(var(--warm-lit-rgb) / .32), rgb(var(--warm-lit-rgb) / .08) 46%, transparent 82%);
  clip-path:polygon(26% 0, 74% 0, 100% 100%, 0% 100%); filter:blur(15px);
  animation:breathe 7s var(--ease) infinite;
}

/* An inline <svg> that has a viewBox but no width resolves to
   100% of whatever contains it. So a character with no size rule
   in effect does not fall back to something small — it fills its
   container. This base rule is the floor that stops that. */
.dumpy{ display:block; width:100%; height:auto; max-width:100%; }

/* The slot must span the stage. Left to itself it collapses to
   the SVG's intrinsic 300px, which knocks the character off the
   chamber's centre axis and stops it scaling with the stage. */
.char-slot{ position:absolute; inset:0; z-index:6; display:grid; place-items:center; }
.hero-dumpy{
  position:relative; z-index:6;
  /* percentage of the stage, so the character tracks the chamber;
     the px and vh caps are what hold if either fails to resolve */
  width:var(--char-scale,56%); max-width:var(--char-max,290px);
  max-height:66%; transform:translateY(-1%);
  animation:bob 7s ease-in-out infinite;
  filter:drop-shadow(0 30px 46px rgb(var(--shadow-rgb) / .8)) drop-shadow(0 0 50px rgb(var(--warm-rgb) / .2));
  transition:opacity .5s var(--ease), filter .5s var(--ease);
}
@keyframes bob{ 0%,100%{ transform:translateY(-1%); } 50%{ transform:translateY(-5.5%); } }

.dome{
  position:absolute; z-index:7; top:18%; width:68%; max-width:380px; height:58%;
  border-radius:50% 50% 18px 18px / 42% 42% 16px 16px;
  background:linear-gradient(168deg,
    rgb(var(--light-rgb) / .082) 0%, rgb(var(--light-rgb) / .014) 42%, rgb(var(--cool-rgb) / .055) 100%);
  border:1px solid rgb(var(--light-rgb) / .1);
  box-shadow:
    inset 0 0 90px rgb(var(--warm-lit-rgb) / .075),
    inset -26px 0 56px -40px rgb(var(--light-rgb) / .8),
    inset 26px 0 56px -46px rgb(var(--cool-rgb) / .5),
    var(--glow-lg);
  pointer-events:none; overflow:hidden;
}
.dome::before{
  content:''; position:absolute; left:12%; top:11%; width:12%; height:62%; border-radius:50%;
  filter:blur(5px); opacity:.48;
  background:linear-gradient(180deg, rgb(var(--light-rgb) / .7), transparent 76%);
}
.dome::after{
  content:''; position:absolute; right:16%; top:22%; width:5%; height:38%; border-radius:50%;
  filter:blur(4px); opacity:.3;
  background:linear-gradient(180deg, rgb(var(--cool-rgb) / .8), transparent 80%);
}
.condense{ position:absolute; inset:0; z-index:8; pointer-events:none; opacity:.5; }
.condense i{ position:absolute; border-radius:50%; background:rgb(var(--light-rgb) / .5); filter:blur(.4px); }

.steam{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.steam i{
  position:absolute; bottom:30%; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle, rgb(var(--light-rgb) / .5), transparent 70%);
  filter:blur(4px); opacity:0; animation:rise 8s ease-in infinite;
}
@keyframes rise{
  0%{ transform:translate(0,0) scale(.4); opacity:0; }
  18%{ opacity:.5; }
  100%{ transform:translate(var(--dx,10px),-220px) scale(3); opacity:0; }
}

.pedestal{ position:absolute; bottom:1%; width:78%; max-width:428px; z-index:2; }
.ped-top{
  height:20px; border-radius:50%; position:relative;
  box-shadow:0 0 46px -8px rgb(var(--warm-rgb) / .4), 0 6px 16px rgb(var(--shadow-rgb) / .85);
}
.ped-top::after{
  content:''; position:absolute; inset:3px 8px; border-radius:50%;
  background:linear-gradient(180deg,#25282e,#0a0b0f);
  box-shadow:inset 0 2px 6px rgb(var(--shadow-rgb) / .9);
}
.ped-body{
  margin-top:-10px; height:78px; border-radius:0 0 var(--r-3xl) var(--r-3xl); position:relative; overflow:hidden;
  background:linear-gradient(180deg,#1E2228 0%,#12151A 42%,#07080B 100%);
  border:1px solid var(--hairline); border-top:none;
  box-shadow:inset 0 14px 26px -16px rgb(var(--light-rgb) / .2), 0 24px 44px -22px rgb(var(--shadow-rgb) / .95);
  display:grid; place-items:center;
}
.ped-body::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgb(var(--warm-rgb) / .09) 46%, transparent);
}
.ped-plate{
  padding:6px 24px; border-radius:var(--r-xs); position:relative; z-index:2; text-align:center;
  background:linear-gradient(180deg, rgb(var(--warm-dark-rgb) / .8), rgb(var(--ink-rgb) / .86));
  border:1px solid rgb(var(--warm-rgb) / .28);
  box-shadow:inset 0 1px 0 rgb(var(--warm-rgb) / .24);
}
.ped-plate b{
  display:block; font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.4em; color:var(--warm-200);
  text-shadow:0 0 16px rgb(var(--warm-rgb) / .7); padding-left:.4em;
}
.ped-plate small{ font-family:var(--mono); font-size:7px; letter-spacing:.28em; color:var(--warm-500); }
.ped-led{
  position:absolute; bottom:16px; width:44px; height:3px; border-radius:3px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--cool-400), transparent);
  box-shadow:0 0 16px var(--cool-400); opacity:.85; animation:led 3.4s var(--ease) infinite;
}
.ped-led.l{ left:22px; } .ped-led.r{ right:22px; animation-delay:-1.7s; }
@keyframes led{ 0%,100%{ opacity:.85; } 50%{ opacity:.3; } }
.ped-glow{
  position:absolute; bottom:-20px; left:6%; width:88%; height:38px; border-radius:50%;
  background:radial-gradient(ellipse, rgb(var(--warm-rgb) / .26), transparent 70%); filter:blur(14px);
}

/* reveal state */
.chamber.busy .light-ring{ animation:flare .5s ease-in-out infinite; }
@keyframes flare{
  0%,100%{ opacity:.6; transform:translateX(-50%) scale(1); }
  50%{ opacity:1; transform:translateX(-50%) scale(1.05); }
}
.chamber.busy .hero-dumpy{ opacity:.12; filter:blur(9px) drop-shadow(0 0 60px rgb(var(--warm-rgb) / .8)); }

/* ============================================================
   10. CARDS AND GRIDS
   ============================================================ */
.rail{ display:flex; flex-direction:column; gap:11px; }
.card{ padding:16px 17px; }
.k{ font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:.19em; text-transform:uppercase; color:var(--text-3); }
.card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.fs-row{ display:flex; flex-direction:column; gap:6px; padding:9px 0; border-bottom:1px solid rgb(var(--light-rgb) / .06); }
.fs-row:last-child{ border-bottom:none; padding-bottom:0; }
.fs-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.fs-head b{ font-size:12.5px; font-weight:500; }
.fs-head span{ font-family:var(--mono); font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); }
.bar{ height:2px; border-radius:2px; background:rgb(var(--light-rgb) / .08); overflow:hidden; }
.bar i{
  display:block; height:100%; width:0; border-radius:2px;
  background:linear-gradient(90deg, var(--warm-400), var(--warm-200));
  box-shadow:0 0 10px rgb(var(--warm-rgb) / .5); transition:width 1.4s var(--ease);
}
.bar i.cy{ background:linear-gradient(90deg, var(--cool-600), var(--cool-400)); box-shadow:0 0 10px rgb(var(--cool-rgb) / .5); }

.grid{ display:grid; gap:var(--gap); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.g5{ grid-template-columns:repeat(5,1fr); }
.g6{ grid-template-columns:repeat(6,1fr); }
@media (max-width:1200px){ .g5,.g6{ grid-template-columns:repeat(3,1fr); } .g4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:840px){ .g3,.g5,.g6{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .g2,.g3,.g4,.g5,.g6{ grid-template-columns:1fr; } }

.tile{ padding:24px 22px; display:flex; flex-direction:column; gap:12px; transition:transform .45s var(--ease); }
/* a status sitting directly in a column card should hug its label,
   not stretch to the card width */
.tile>.status,.cc>.status,.phase>.status{ align-self:flex-start; }
.tile:hover{ transform:translateY(-3px); }
.tile h3{ font-size:16px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.tile p{ font-size:12.5px; line-height:1.65; color:var(--text-3); }
.ico{
  width:52px; height:52px; border-radius:var(--r-xl); display:grid; place-items:center; flex:none;
  color:var(--warm-300);
  border:1px solid rgb(var(--light-rgb) / .1);
  background:linear-gradient(150deg, rgb(var(--light-rgb) / .07), rgb(var(--panel-rgb) / .5));
  box-shadow:inset 0 1px 0 rgb(var(--light-rgb) / .16), 0 12px 24px -14px rgb(var(--shadow-rgb) / .9);
  transition:all var(--t-med) var(--ease);
}
.ico svg{ width:25px; height:25px; }
.tile:hover .ico,.j-step:hover .ico{
  border-color:rgb(var(--warm-rgb) / .45);
  box-shadow:inset 0 1px 0 rgb(var(--light-rgb) / .24), 0 0 28px -10px rgb(var(--warm-rgb) / .6);
}

/* ============================================================
   11. CHARACTER CARDS
   ============================================================ */
.cast{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (min-width:1480px){ .cast{ grid-template-columns:repeat(8,1fr); gap:10px; } }
@media (max-width:1100px){ .cast{ grid-template-columns:repeat(4,1fr); gap:12px; } }
@media (max-width:820px){ .cast{ grid-template-columns:repeat(2,1fr); gap:10px; } }
@media (max-width:480px){ .cast{ grid-template-columns:1fr; gap:10px; } }
.cc{
  padding:12px; display:flex; flex-direction:column; gap:10px;
  transform-style:preserve-3d;
  transition:transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  will-change:transform;
}
.cc.tilting, .slot.tilting{
  transition:none !important;
}
.cc.tilting .dumpy-art-img, .slot.tilting .dumpy-art-img{
  transition:none !important;
}
.cc-top{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.cc-art{
  position:relative; border-radius:var(--r-lg); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(ellipse at 50% 36%, rgb(var(--light-rgb) / .08), rgb(var(--panel-rgb) / .65) 74%);
  border:1px solid rgb(var(--light-rgb) / .06);
  transform-style:preserve-3d;
}
.cc-art > *{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
}
.cc-art svg{ width:76%; position:relative; z-index:2; filter:drop-shadow(0 14px 20px rgb(var(--shadow-rgb) / .7)); }
.cc-glow{ position:absolute; inset:0; opacity:.55; pointer-events:none; }
.cc h4{ font-size:14px; font-weight:600; letter-spacing:.04em; }

/* Click Ripple Burst */
.click-ripple{
  position:fixed; border-radius:50%; pointer-events:none; z-index:9998;
  transform:translate(-50%, -50%) scale(0);
  border:1.5px solid rgb(var(--warm-rgb) / .6);
  background:radial-gradient(circle, rgb(var(--warm-lit-rgb) / .22), transparent 70%);
  animation:rippleBurst .5s cubic-bezier(.1,.8,.2,1) forwards;
}
@keyframes rippleBurst{
  0%{ transform:translate(-50%, -50%) scale(0); opacity:1; }
  100%{ transform:translate(-50%, -50%) scale(1); opacity:0; }
}
.cc .role{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.cc .line{ font-size:11.5px; line-height:1.55; color:var(--text-3); }

/* locked silhouette — unreleased content, never a scarcity claim */
.cc.locked .cc-art svg{ filter:brightness(0) saturate(0) opacity(.22); }
.cc.locked .cc-art::before{
  content:'?'; position:absolute; z-index:3;
  font-family:var(--mono); font-size:26px; color:var(--text-3); opacity:.5;
}
.cc.locked h4{ color:var(--text-3); }

/* lazy character slots — paint SVG when scrolled near */
.lazy-art{
  position:relative; width:100%; height:100%; min-height:100%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 68%, rgb(var(--warm-rgb) / .07), transparent 72%);
}
.cc-art > .lazy-art{ min-height:140px; }
.slot > .lazy-art{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.log-item > .lazy-art{ width:82%; min-height:auto; }
.lazy-art::after{
  content:''; position:absolute; left:50%; top:54%;
  width:42%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgb(var(--light-rgb) / .05);
  animation:lazyPulse 1.9s ease-in-out infinite;
}
@keyframes lazyPulse{
  0%,100%{ opacity:.35; transform:translate(-50%,-50%) scale(.94); }
  50%{ opacity:.75; transform:translate(-50%,-50%) scale(1); }
}
@media (prefers-reduced-motion:reduce){
  .lazy-art::after{ animation:none; opacity:.5; }
}

/* filter bar */
.filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:22px; }
.filter{
  padding:8px 14px; border-radius:var(--r-pill);
  font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-2);
  border:1px solid rgb(var(--light-rgb) / .1);
  background:rgb(var(--light-rgb) / .025);
  transition:all var(--t-fast) var(--ease);
}
.filter:hover{ color:var(--text); border-color:rgb(var(--light-rgb) / .22); }
.filter.on{
  color:#231803; border-color:transparent;
  background:linear-gradient(140deg, var(--warm-200), var(--warm-400));
  box-shadow:var(--glow-md);
}
.filter-sep{ width:1px; height:18px; background:var(--hairline); margin:0 5px; }
.count{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-left:auto; }

/* rarity — icon and word always accompany the colour */
.rar{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:8.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}
.rar svg{ width:11px; height:11px; }

/* collection slots */
.coll{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
@media (max-width:1240px){ .coll{ grid-template-columns:repeat(6,1fr); } }
@media (max-width:840px){ .coll{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:460px){ .coll{ grid-template-columns:repeat(3,1fr); } }
.slot{
  position:relative; border-radius:var(--r-lg); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(ellipse at 50% 34%, rgb(var(--light-rgb) / .06), rgb(var(--panel-rgb) / .6) 74%);
  border:1px solid rgb(var(--light-rgb) / .08);
  transition:transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.slot:hover{ transform:translateY(-2px); border-color:rgb(var(--warm-rgb) / .35); }
.slot > *{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative;
}
.slot svg{ width:74%; }
.slot.locked{
  background:radial-gradient(ellipse at 50% 40%, rgb(var(--light-rgb) / .03), rgb(var(--panel-rgb) / .7) 80%);
  border-color:rgb(var(--light-rgb) / .04);
}
.slot.locked:hover{ transform:none; border-color:rgb(var(--light-rgb) / .04); }
.slot .tag{
  position:absolute; top:7px; left:7px; z-index:5; width:auto; height:auto; display:inline-flex;
  background:rgb(var(--ink-rgb) / .75); padding:2px 6px; border-radius:var(--r-pill);
  border:1px solid rgb(var(--light-rgb) / .1); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

/* ============================================================
   12. STEPS / LOOP
   ============================================================ */
.loop{ display:grid; }
@media (max-width:1024px){ .loop{ grid-template-columns:repeat(2,1fr) !important; } .j-step{ border-bottom:1px solid rgb(var(--light-rgb) / .06); } }
@media (max-width:640px){ .loop{ grid-template-columns:1fr !important; } }
.j-step{
  padding:26px 22px; display:flex; align-items:flex-start; gap:15px;
  border-right:1px solid rgb(var(--light-rgb) / .06);
  transition:background var(--t-med) var(--ease);
}
.j-step:last-child{ border-right:none; }
.j-step:hover{ background:rgb(var(--warm-rgb) / .045); }
.j-n{ font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--warm-400); display:block; margin-bottom:5px; }
.j-t{ font-size:13.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px; }
.j-d{ font-size:11.5px; color:var(--text-3); line-height:1.55; }

/* ============================================================
   13. REVEAL RESULT
   ============================================================ */
.reveal-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(20px,3vw,44px); align-items:center; }
@media (max-width:1000px){ .reveal-grid{ grid-template-columns:1fr; } }
.result{ padding:20px; display:flex; flex-direction:column; gap:14px; min-height:210px; justify-content:center; }
.result-idle{ text-align:center; color:var(--text-3); font-size:13px; line-height:1.7; }
.result-out{ display:none; }
.result.done .result-idle{ display:none; }
.result.done .result-out{ display:flex; flex-direction:column; gap:12px; animation:pop .6s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:scale(.96) translateY(10px); } to{ opacity:1; transform:none; } }
.result h3{ font-size:28px; font-weight:700; letter-spacing:-.01em; text-transform:uppercase; line-height:1; }
.result .meta{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  padding:5px 11px; border-radius:var(--r-pill);
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgb(var(--light-rgb) / .1); background:rgb(var(--light-rgb) / .03); color:var(--text-2);
}

/* session reveal log — never persisted, never a balance */
.log{ display:flex; flex-wrap:wrap; gap:8px; }
.log-item{
  position:relative; width:46px; height:46px; border-radius:var(--r-md);
  display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(ellipse at 50% 34%, rgb(var(--light-rgb) / .06), rgb(var(--panel-rgb) / .5) 74%);
  border:1px solid rgb(var(--light-rgb) / .07);
}
.log-item svg{ width:82%; }
.log-item i{ position:absolute; inset:auto 0 0 0; height:2px; }
.log-empty{ font-size:11.5px; line-height:1.6; color:var(--text-3); }

/* ============================================================
   14. ECOSYSTEM / FACTS / ROADMAP / TRUST
   ============================================================ */
.eco{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
@media (max-width:1100px){ .eco{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .eco{ grid-template-columns:repeat(2,1fr); } }
.eco-node{ padding:20px 16px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; transition:var(--t-med) var(--ease); }
.eco-node:hover{ transform:translateY(-3px); }
.eco-node b{ font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.eco-node span{ font-size:10.5px; color:var(--text-3); line-height:1.5; }

.split{ display:grid; grid-template-columns:1.15fr 1fr; }
@media (max-width:940px){ .split{ grid-template-columns:1fr; } }
.split-l{ padding:clamp(26px,3vw,40px); border-right:1px solid var(--hairline); }
@media (max-width:940px){ .split-l{ border-right:none; border-bottom:1px solid var(--hairline); } }
.split-r{ padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; gap:2px; }
.split-l h3{ font-size:20px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; margin-bottom:14px; }

.fact{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid rgb(var(--light-rgb) / .06); }
.fact:last-child{ border-bottom:none; }
.fact dt{ font-size:12.5px; color:var(--text-2); }
.fact dd{ font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--text); text-align:right; }

.warn{
  margin-top:18px; padding:14px 16px; border-radius:10px; display:flex; gap:11px;
  background:rgb(var(--plan-rgb) / .06); border:1px solid rgb(var(--plan-rgb) / .2);
}
.warn svg{ flex:none; width:16px; height:16px; color:var(--warm-300); margin-top:1px; }
.warn p{ font-size:11.5px; line-height:1.6; color:var(--text-2); }

.road{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .road{ grid-template-columns:1fr; } }
.phase{ padding:24px 22px; display:flex; flex-direction:column; gap:14px; }
.phase h3{ font-size:17px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.phase ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.phase li{ font-size:12px; line-height:1.5; color:var(--text-2); display:flex; gap:9px; align-items:flex-start; }
.phase li::before{
  content:''; width:5px; height:5px; border-radius:50%; margin-top:6px; flex:none;
  background:var(--warm-400); box-shadow:0 0 8px rgb(var(--warm-rgb) / .6);
}
.phase.gated li::before{ background:var(--gate); box-shadow:none; }

/* staged release list — no dates, because P03 §25.3 forbids a
   binding completion date before the schedule is locked */
.rel-row{
  display:grid; grid-template-columns:64px minmax(160px,1fr) 1.5fr auto;
  gap:18px; align-items:center; padding:16px 20px;
  border-bottom:1px solid rgb(var(--light-rgb) / .06);
  transition:background var(--t-med) var(--ease);
}
.rel-row:last-child{ border-bottom:none; }
.rel-row:hover{ background:rgb(var(--warm-rgb) / .045); }
.rel-code{ font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.1em; color:var(--warm-400); }
.rel-name{ font-size:13px; font-weight:600; letter-spacing:.055em; text-transform:uppercase; }
.rel-dep{ font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-top:5px; }
.rel-purpose{ font-size:12px; line-height:1.55; color:var(--text-3); }
@media (max-width:900px){
  .rel-row{ grid-template-columns:56px 1fr; gap:8px 14px; }
  .rel-purpose,.rel-row .status{ grid-column:2; }
  .rel-row .status{ justify-self:start; }
}

.trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:1000px){ .trust{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .trust{ grid-template-columns:1fr; } }
.domain{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--warm-200); }

/* ============================================================
   15. FINAL CTA / FOOTER / DISCLOSURE
   ============================================================ */
.final{
  padding:clamp(40px,5vw,64px) clamp(24px,4vw,56px); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.final h2{ font-size:clamp(28px,4vw,52px); font-weight:800; line-height:1.02; letter-spacing:-.026em; text-transform:uppercase; }
.final p{ font-size:14px; color:var(--text-2); max-width:52ch; line-height:1.7; }
.final .hero-actions{ margin:6px 0 0; justify-content:center; }

.disclosure{
  padding:16px 18px; border-radius:var(--r-lg); margin-top:20px;
  background:rgb(var(--light-rgb) / .02); border:1px solid var(--hairline);
}
.disclosure p{ font-size:11px; line-height:1.7; color:var(--text-3); }

footer{ position:relative; z-index:2; margin-top:clamp(40px,5vw,72px); padding-bottom:34px; }
.foot{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:28px; padding:clamp(28px,3.4vw,44px); }
@media (max-width:1000px){ .foot{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot{ grid-template-columns:1fr; } }
.foot h5{ font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--warm-400); margin-bottom:14px; }
.foot ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.foot a{ font-size:12.5px; color:var(--text-3); transition:color var(--t-fast); }
.foot a:hover{ color:var(--text); }
.foot-blurb{ font-size:12.5px; line-height:1.7; color:var(--text-3); max-width:34ch; margin:14px 0 18px; }
.legal{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
}
.legal p,.legal a{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }

/* ============================================================
   16. TOAST
   ============================================================ */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,26px); z-index:80;
  width:min(430px,calc(100vw - 32px)); padding:15px 17px; border-radius:12px;
  display:flex; gap:12px; align-items:flex-start;
  background:rgb(12 14 20 / .94); border:1px solid rgb(var(--warm-rgb) / .26);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 24px 50px -20px rgb(var(--shadow-rgb) / .95);
  opacity:0; visibility:hidden; transition:.45s var(--ease);
}
.toast.show{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.toast svg{ flex:none; width:17px; height:17px; color:var(--warm-300); margin-top:1px; }
.toast b{ display:block; font-size:12.5px; font-weight:600; margin-bottom:3px; }
.toast p{ font-size:11.5px; line-height:1.6; color:var(--text-3); }

/* Below-fold sections skip paint until scrolled near — keeps effects,
   speeds first load on phones without stripping anything visible. */
@media (max-width:900px){
  main section.sec{ content-visibility:auto; contain-intrinsic-size:auto 520px; }
  main section.hero{ content-visibility:visible; }
}

/* ============================================================
   17. 3D ART & STEAMER VISUAL INTEGRATION (V1)
   ============================================================ */
.dumpy-art-img{
  width:100%; height:100%; object-fit:contain; object-position:center;
  display:block; position:relative; z-index:2;
  transition:transform var(--t-med) var(--ease), filter var(--t-med) var(--ease);
  filter:drop-shadow(0 14px 22px rgb(var(--shadow-rgb) / .75));
}
.cc:hover .dumpy-art-img{
  transform:scale(1.04) translateY(-2px);
  filter:drop-shadow(0 18px 28px rgb(var(--shadow-rgb) / .85)) drop-shadow(0 0 24px rgb(var(--warm-rgb) / .35));
}
.cc-art .dumpy-art-img{ width:92%; height:92%; }
.slot .dumpy-art-img{ width:88%; height:88%; }

/* Hero chamber 3D steamer centerpiece */
.hero-stage{
  width:100%;
  aspect-ratio:1/1.05;
  display:grid;
  place-items:center;
  max-width:min(620px, 58vh);
  position:relative;
  overflow:visible;
}
.hero-steamer-wrap{
  position:relative; width:100%; height:100%;
  display:grid; place-items:center;
}
.hero-steamer-img{
  width:96%; height:auto; max-height:96%;
  object-fit:contain;
  filter:drop-shadow(0 28px 56px rgb(var(--shadow-rgb) / .98)) drop-shadow(0 0 70px rgb(var(--warm-rgb) / .35));
  transition:transform var(--t-med) var(--ease), filter var(--t-med) var(--ease);
  position:relative; z-index:3;
  animation:heroFloat 8s ease-in-out infinite;
}
.hero-steamer-img:hover{
  transform:scale(1.025);
  filter:drop-shadow(0 32px 64px rgb(var(--shadow-rgb) / .98)) drop-shadow(0 0 90px rgb(var(--warm-rgb) / .5));
}
@keyframes heroFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
.hero-glow-core{
  position:absolute; inset:8%; border-radius:50%;
  background:radial-gradient(circle, rgb(var(--warm-lit-rgb) / .36) 0%, rgb(var(--warm-rgb) / .16) 45%, transparent 74%);
  filter:blur(36px); pointer-events:none; z-index:1;
  animation:glowBreathe 6s ease-in-out infinite;
}
@keyframes glowBreathe{
  0%,100%{ opacity:.75; transform:scale(.94); }
  50%{ opacity:1; transform:scale(1.06); }
}

/* Interactive 3-stage reveal steamer (borderless, seamless) */
.chamber-reveal .stage-steamer-interactive{
  max-width:min(500px, 48vh);
  width:100%; aspect-ratio:1/1.05;
  position:relative;
}
.steamer-box{
  position:relative; width:100%; height:100%;
  display:grid; place-items:center; overflow:visible;
}
.steamer-box .st-img{
  position:absolute; width:95%; height:auto; max-height:92%;
  object-fit:contain; opacity:0; transform:scale(.95);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events:none; z-index:2;
  filter:drop-shadow(0 24px 48px rgb(var(--shadow-rgb) / .95)) drop-shadow(0 0 50px rgb(var(--warm-rgb) / .3));
}
.steamer-box .st-img.active{
  opacity:1; transform:scale(1); pointer-events:auto;
}
.fx-aura-slot{
  position:absolute; inset:0; display:grid; place-items:center;
  z-index:3; pointer-events:none;
}
.fx-aura-slot .aura-img{
  width:95%; height:95%; object-fit:contain;
  opacity:.88; mix-blend-mode:screen;
  animation:auraPulse 3.5s ease-in-out infinite;
}
@keyframes auraPulse{
  0%,100%{ opacity:.75; transform:scale(.96); }
  50%{ opacity:1; transform:scale(1.03); }
}
.steamer-box .char-slot{
  position:absolute; inset:0; z-index:4; display:grid; place-items:center; pointer-events:none;
}
.steamer-box .revealed-char-img{
  width:72%; height:auto; object-fit:contain;
  animation:revealRise .7s var(--ease) forwards;
  filter:drop-shadow(0 18px 36px rgb(var(--shadow-rgb) / .95)) drop-shadow(0 0 40px rgb(var(--warm-rgb) / .4));
}
@keyframes revealRise{
  0%{ opacity:0; transform:translateY(28px) scale(.82); }
  100%{ opacity:1; transform:translateY(-2px) scale(1); }
}

/* Locked collection slot styling */
.locked-art{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--text-3); width:100%; height:100%;
}
.locked-art svg{ opacity:.35; }
.lock-lbl{ font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; opacity:.5; text-transform:uppercase; }

/* Clickable inspection cursors */
.cc, .slot[data-cast-idx]{ cursor:pointer; }
.cc:hover{ border-color:rgb(var(--warm-rgb) / .4); box-shadow:0 14px 34px -10px rgb(var(--shadow-rgb) / .9), 0 0 25px rgb(var(--warm-rgb) / .25); }

/* ============================================================
   18. CHARACTER INSPECT LIGHTBOX
   ============================================================ */
.dumpy-lightbox{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity var(--t-med) var(--ease), visibility var(--t-med);
}
.dumpy-lightbox.active{ opacity:1; visibility:visible; }

.lightbox-backdrop{
  position:absolute; inset:0;
  background:rgb(4 6 10 / .88);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}

.lightbox-dialog{
  position:relative; z-index:2;
  width:min(500px, calc(100vw - 28px));
  max-height:calc(100vh - 36px);
  overflow-y:auto; border-radius:var(--r-2xl);
  background:radial-gradient(ellipse at 50% 15%, rgb(var(--light-rgb) / .1), rgb(var(--panel-rgb) / .92) 80%);
  border:1px solid rgb(var(--warm-rgb) / .4);
  box-shadow:0 36px 80px -15px rgb(var(--shadow-rgb) / .98), 0 0 60px rgb(var(--warm-rgb) / .3);
  padding:22px; display:flex; flex-direction:column; gap:14px;
  transform:scale(.94) translateY(12px);
  transition:transform var(--t-med) var(--ease);
}
.dumpy-lightbox.active .lightbox-dialog{ transform:scale(1) translateY(0); }

.lightbox-close{
  position:absolute; top:16px; right:16px; z-index:10;
  width:34px; height:34px; border-radius:50%;
  background:rgb(var(--light-rgb) / .08);
  border:1px solid rgb(var(--light-rgb) / .18);
  display:flex; align-items:center; justify-content:center;
  color:var(--text); cursor:pointer;
  transition:all var(--t-fast) var(--ease);
}
.lightbox-close:hover{
  background:rgb(var(--light-rgb) / .2);
  transform:rotate(90deg) scale(1.08);
}
.lightbox-close svg{ width:15px; height:15px; }

.lightbox-frame{
  position:relative; width:100%; aspect-ratio:1;
  border-radius:var(--r-xl); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 55%, rgb(var(--warm-rgb) / .12), rgb(var(--ink-rgb) / .9) 78%);
  border:1px solid rgb(var(--warm-rgb) / .3);
  box-shadow:inset 0 0 50px rgb(var(--shadow-rgb) / .9), 0 16px 36px -12px rgb(var(--shadow-rgb) / .95);
}
.lightbox-frame::after{
  content:''; position:absolute; inset:6px;
  border:1px dashed rgb(var(--warm-rgb) / .22);
  border-radius:calc(var(--r-xl) - 4px); pointer-events:none;
}
.lightbox-art-img{
  width:88%; height:88%; object-fit:contain; object-position:center;
  filter:drop-shadow(0 20px 40px rgb(var(--shadow-rgb) / .98)) drop-shadow(0 0 50px rgb(var(--warm-rgb) / .4));
  transition:transform var(--t-med) var(--ease);
}
.lightbox-art-img:hover{ transform:scale(1.03); }

.lightbox-meta{ display:flex; flex-direction:column; gap:8px; }
.lightbox-top-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lightbox-title{ font-size:22px; font-weight:700; letter-spacing:.02em; color:var(--text); }
.lightbox-badges{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.lightbox-line{ font-size:13px; line-height:1.65; color:var(--text-2); }

.lightbox-nav{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:6px; padding-top:12px; border-top:1px solid rgb(var(--light-rgb) / .08);
}
.lightbox-nav-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:var(--r-pill);
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  background:rgb(var(--light-rgb) / .06); border:1px solid rgb(var(--light-rgb) / .12);
  color:var(--text-2); cursor:pointer; transition:all var(--t-fast) var(--ease);
}
.lightbox-nav-btn:hover{
  background:rgb(var(--light-rgb) / .14); color:var(--text);
  border-color:rgb(var(--warm-rgb) / .4);
}
.lightbox-nav-counter{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; color:var(--text-3); text-transform:uppercase;
}

/* ============================================================
   22. PARTNER / INQUIRY FORM (FormSubmit.co Standard)
   ============================================================ */
.partner-card{
  position:relative;
  border-radius:var(--r-2xl);
}
.form-lbl{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-2);
  margin-bottom:8px;
}
.form-inp{
  width:100%;
  padding:12px 16px;
  border-radius:var(--r-md);
  background:rgb(var(--light-rgb) / .04);
  border:1px solid rgb(var(--light-rgb) / .12);
  color:var(--text);
  font-family:var(--font);
  font-size:14.5px;
  outline:none;
  transition:all var(--t-fast) var(--ease);
}
.form-inp:focus{
  background:rgb(var(--light-rgb) / .08);
  border-color:rgb(var(--warm-rgb) / .6);
  box-shadow:0 0 16px rgb(var(--warm-rgb) / .15);
}
.form-inp::placeholder{
  color:var(--text-3);
  font-size:13.5px;
}
.inquiry-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pill-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:var(--r-pill);
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgb(var(--light-rgb) / .05);
  border:1px solid rgb(var(--light-rgb) / .12);
  color:var(--text-2);
  cursor:pointer;
  transition:all var(--t-fast) var(--ease);
}
.pill-btn:hover{
  background:rgb(var(--light-rgb) / .1);
  color:var(--text);
  border-color:rgb(var(--light-rgb) / .25);
}
.pill-btn.active{
  background:linear-gradient(135deg, rgb(var(--warm-rgb) / .25), rgb(var(--warm-rgb) / .1));
  border-color:rgb(var(--warm-rgb) / .7);
  color:var(--warm-100);
  box-shadow:0 0 14px rgb(var(--warm-rgb) / .2);
}