:root{
    --void:#0a0908;
    --panel:#141008;
    --panel-2:#1c150c;
    --steel:#5a564c;
    --steel-light:#948e7f;
    --bone:#f2ece0;
    --bone-dim:#bdb3a0;
    --amber:#ff6a1f;
    --amber-dim:#b3450f;
    --amber-bright:#ff8c3d;
    --rust:#7a2a12;
    --rust-bright:#d1440f;
    --line:rgba(255,138,61,0.14);
    --line-strong:rgba(255,138,61,0.28);

    --display: 'Anton', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --body: 'Inter', sans-serif;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--void);
    color:var(--bone);
    font-family:var(--body);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  ::selection{ background:var(--amber); color:var(--void); }

  a{ color:inherit; text-decoration:none; }

  .noise{
    position:fixed; inset:0; z-index:2; pointer-events:none;
    opacity:0.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .vignette{
    position:fixed; inset:0; z-index:3; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
  }

  .beam{
    position:fixed; top:0; left:0; width:100%; height:100%;
    pointer-events:none; z-index:1; opacity:0.35;
    background:
      repeating-linear-gradient(100deg,
        rgba(255,106,31,0.025) 0px, rgba(255,106,31,0.025) 2px,
        transparent 2px, transparent 90px);
  }

  /* ---------- CELL BARS (fixed edge overlay) ---------- */
  .cell-bars{
    position:fixed; top:0; bottom:0; width:64px; z-index:45; pointer-events:none;
    display:flex; justify-content:space-between; padding:0 6px;
    opacity:0.9;
  }
  .cell-bars.left{ left:0; }
  .cell-bars.right{ right:0; }
  .cell-bars i{
    display:block; width:6px; height:100%;
    background:linear-gradient(90deg, #000 0%, #26190d 18%, #3a2412 50%, #26190d 82%, #000 100%);
    box-shadow: 2px 0 10px rgba(0,0,0,0.6), inset 1px 0 0 rgba(255,138,61,0.18);
  }
  .cell-bars::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.5), transparent 12%, transparent 88%, rgba(0,0,0,0.5));
  }
  @media (max-width:1180px){ .cell-bars{ display:none; } }

  /* ---------- HAZARD STRIPE DIVIDER ---------- */
  .hazard-strip{
    height:10px; width:100%; position:relative; z-index:6;
    background:repeating-linear-gradient(135deg,
      var(--amber-dim) 0 18px, #111 18px 36px);
    opacity:0.85;
  }

  /* ---------- SEARCHLIGHT SWEEP ---------- */
  .searchlight{
    position:absolute; top:-10%; left:50%; width:1400px; height:1400px;
    background:conic-gradient(from 0deg, transparent 0deg, rgba(255,138,61,0.06) 6deg, transparent 14deg, transparent 360deg);
    transform-origin:50% 10%;
    animation:sweep 14s linear infinite;
    pointer-events:none; z-index:0;
  }
  @keyframes sweep{ from{ transform:translateX(-50%) rotate(0deg); } to{ transform:translateX(-50%) rotate(360deg); } }

  /* ---------- RIVETED CARD CORNERS ---------- */
  .riveted{ position:relative; }
  .riveted::before, .riveted::after{
    content:''; position:absolute; top:8px; width:4px; height:4px; border-radius:50%;
    background:var(--amber-dim); box-shadow:0 0 0 1px rgba(0,0,0,0.4);
  }
  .riveted::before{ left:8px; }
  .riveted::after{ right:8px; }

  /* ---------- BARCODE / ID STAMP ---------- */
  .barcode{
    width:110px; height:34px;
    background:repeating-linear-gradient(90deg,
      var(--bone-dim) 0 2px, transparent 2px 4px,
      var(--bone-dim) 4px 5px, transparent 5px 9px,
      var(--bone-dim) 9px 12px, transparent 12px 14px,
      var(--bone-dim) 14px 15px, transparent 15px 19px);
    opacity:0.75;
  }

  /* ---------- INTRO CELL DOOR BARS ---------- */
  .intro-bars{
    position:absolute; inset:0; display:flex; justify-content:space-evenly;
    opacity:0; animation:barsIn 1.4s ease forwards 0.1s;
  }
  .intro-bars i{ width:3px; height:100%; background:#000; box-shadow:1px 0 0 rgba(255,138,61,0.08); }
  @keyframes barsIn{ from{opacity:0;} to{opacity:1;} }

  section{ position:relative; z-index:4; }

  .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

  h1,h2,h3{ font-family:var(--display); font-weight:400; letter-spacing:0.01em; line-height:0.95; }

  .stamp{
    font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--amber); display:inline-flex; align-items:center; gap:10px;
  }
  .stamp::before{ content:''; width:22px; height:1px; background:var(--amber-dim); display:inline-block; }

  .lede{ color:var(--bone-dim); font-size:17px; max-width:60ch; }

  .btn{
    font-family:var(--mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
    padding:15px 30px; border:1px solid var(--line-strong); color:var(--bone);
    display:inline-flex; align-items:center; gap:12px; cursor:pointer;
    transition:border-color .35s ease, color .35s ease, background .35s ease;
    background:transparent;
  }
  .btn:hover{ border-color:var(--amber); color:var(--amber); }
  .btn.solid{ background:var(--amber); color:var(--void); border-color:var(--amber); font-weight:600; }
  .btn.solid:hover{ background:transparent; color:var(--amber); }

  /* ---------- NAV ---------- */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 40px; font-family:var(--mono); font-size:12px; letter-spacing:0.1em;
    background:linear-gradient(to bottom, rgba(10,11,8,0.9), transparent);
    text-transform:uppercase;
  }
  nav .id{ display:flex; align-items:center; gap:10px; color:var(--bone); min-width:0; }
  .brand-logo{ width:34px; height:34px; flex:0 0 34px; object-fit:cover; display:block; border:1px solid rgba(255,106,31,.28); }
  .brand-name{ white-space:nowrap; }
  nav .id span{ color:var(--amber); }
  nav .links{ display:flex; align-items:center; gap:28px; color:var(--bone-dim); }
  nav .links a{ transition:color .3s ease; position:relative; }
  nav .links a:hover, nav .links a.active{ color:var(--amber); }
  nav .links a.locked, .mobile-links a.locked{
    color:var(--bone-dim); cursor:not-allowed; opacity:1; overflow:hidden;
    position:relative; white-space:nowrap;
  }
  nav .links a.locked{ padding:8px 16px; }
  .mobile-links a.locked{ padding:18px 18px; }
  .lock-overlay{
    position:absolute; inset:2px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--amber); background:rgba(255,106,31,.28); color:var(--amber);
    box-sizing:border-box; padding:4px 10px; font-size:7px; line-height:1; letter-spacing:.08em;
    pointer-events:none;
  }
  .lock-overlay::before{
    content:''; position:absolute; left:50%; top:50%; width:8px; height:7px;
    border:1px solid var(--amber); border-radius:1px; background:rgba(10,11,8,.22);
    transform:translate(-50%, -35%);
  }
  .lock-overlay::after{
    content:''; position:absolute; left:50%; top:calc(50% - 6px); width:4px; height:5px;
    border:1px solid var(--amber); border-bottom:0; border-radius:4px 4px 0 0;
    transform:translateX(-50%);
  }
  nav .links a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-8px; height:1px; background:var(--amber); }
  .menu-toggle{
    display:none; width:44px; height:40px; border:1px solid var(--line-strong);
    background:rgba(10,11,8,.78); color:var(--bone); cursor:pointer;
    align-items:center; justify-content:center; flex-direction:column; gap:5px;
  }
  .menu-toggle span{ display:block; width:17px; height:1px; background:currentColor; transition:transform .25s, opacity .25s; }
  .mobile-links{
    display:none; position:fixed; top:70px; left:16px; right:16px; z-index:49;
    padding:10px; border:1px solid var(--line-strong); background:rgba(10,9,8,.96);
    backdrop-filter:blur(10px); box-shadow:0 20px 50px rgba(0,0,0,.5);
  }
  .mobile-links a{
    display:block; padding:15px 14px; border-bottom:1px solid var(--line);
    font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--bone-dim);
  }
  .mobile-links a:last-child{ border-bottom:0; }
  .mobile-links a:hover, .mobile-links a.active{ color:var(--amber); }
  .mobile-links.open{ display:block; }
  @media (max-width:720px){
    nav{ padding:16px 18px; }
    nav .links{ display:none; }
    .menu-toggle{ display:flex; }
    nav .id{ font-size:11px; }
  }
  @media (max-width:480px){
    nav .id{ max-width:calc(100vw - 80px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  }

  /* ---------- INTRO SEQUENCE ---------- */
  #intro{
    position:fixed; inset:0; z-index:100; background:#000;
    display:flex; align-items:center; justify-content:center;
    transition:opacity 1.1s ease, visibility 1.1s ease;
  }
  #intro.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .flicker-field{ position:absolute; inset:0; background:#000; }
  .intro-lines{
    position:absolute; inset:0;
    background-image:
      linear-gradient(90deg, transparent 24%, rgba(233,230,216,0.03) 25%, rgba(233,230,216,0.03) 26%, transparent 27%),
      linear-gradient(90deg, transparent 73%, rgba(233,230,216,0.03) 74%, rgba(233,230,216,0.03) 75%, transparent 76%);
    opacity:0; animation: corridorIn 2.6s ease forwards 0.4s;
  }
  .intro-title{
    position:relative; text-align:center; opacity:0;
    animation: titleIn 1.2s ease forwards 1.8s;
  }
  .intro-title .stamp{ justify-content:center; opacity:0.85; }
  .intro-title h1{
    font-size:clamp(38px, 8vw, 90px); margin-top:14px; color:var(--bone);
  }
  .intro-sub{
    font-family:var(--mono); font-size:11px; letter-spacing:0.3em; color:var(--steel-light);
    margin-top:18px; opacity:0; animation: titleIn 1s ease forwards 2.6s;
  }
  @keyframes corridorIn{ from{opacity:0;} to{opacity:1;} }
  @keyframes titleIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
  @keyframes flicker{
    0%,19%,21%,23%,80%,100%{opacity:1;} 20%,22%,24%,79%{opacity:0.3;}
  }
  .flicker{ animation:flicker 3.4s infinite; }

  
/* ===== HERO — MATCHED TO THE FIRST DESIGN ===== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute;
  inset:0;
  background-image:url('assets/hero-bg.png');
  background-size:cover;
  background-position:center 30%;
  z-index:-3;
}
.hero__scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top, rgba(8,7,6,.97) 2%, rgba(8,7,6,.55) 38%, rgba(8,7,6,.15) 62%, rgba(8,7,6,.55) 100%),
    linear-gradient(to right, rgba(8,7,6,.55) 0%, rgba(8,7,6,0) 30%);
  z-index:-2;
}
.hero__grain{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__tag{
  position:absolute;
  top:118px;
  right:40px;
  text-align:right;
  z-index:2;
  border-right:1px solid var(--amber);
  padding-right:14px;
}
.hero__tag-num{
  font-family:var(--display);
  font-size:15px;
  letter-spacing:.08em;
  color:var(--amber);
}
.hero__tag-sub{
  font-size:10px;
  color:var(--bone-dim);
  letter-spacing:.06em;
  margin-top:2px;
}
.hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 40px 88px;
}
.hero__count{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--amber);
  margin:0 0 18px;
}
.hero__count b{ color:var(--amber-bright); font-weight:600; }
.hero h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(46px,8vw,108px);
  line-height:.96;
  letter-spacing:.01em;
  margin:0 0 26px;
  max-width:15ch;
  color:var(--bone);
}
.hero h1 em{ font-style:normal; color:var(--amber); }
.hero__copy{
  max-width:46ch;
  font-size:15px;
  line-height:1.7;
  color:var(--bone-dim);
  margin:0 0 8px;
}
.hero__copy .escape-word{
  display:block;
  margin-top:14px;
  font-family:var(--display);
  font-size:32px;
  letter-spacing:.04em;
  color:var(--amber);
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:38px 0 22px;
}
.hero .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 30px;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.hero .btn:hover{ transform:translateY(-2px); }
.hero .btn--solid{
  background:var(--amber);
  color:var(--void);
}
.hero .btn--solid:hover{ background:var(--amber-bright); }
.hero .btn--outline{
  border-color:var(--line-strong);
  color:var(--bone);
  background:rgba(242,236,224,.03);
}
.hero .btn--outline:hover{ border-color:var(--amber); color:var(--amber); }
.hero__foot{
  font-family:var(--mono);
  font-size:11px;
  font-style:italic;
  color:var(--bone-dim);
  letter-spacing:.02em;
  border-top:1px solid var(--line);
  padding-top:18px;
  max-width:46ch;
}
@media(max-width:900px){
  .hero__tag{ top:92px; right:22px; }
  .hero__inner{ padding:0 22px 64px; }
}
@media(max-width:560px){
  .hero__tag{ display:none; }
  .hero__actions{ flex-direction:column; }
  .hero .btn{ width:100%; }
  .hero h1{ font-size:clamp(40px,13vw,64px); }
  .hero__copy .escape-word{ font-size:26px; }
}

  /* ---------- SECTION SCAFFOLD ---------- */
  .section{ padding:130px 0; }
  .section.tight{ padding:100px 0; }
  .section-head{ margin-bottom:64px; max-width:720px; }
  .section-head h2{ font-size:clamp(32px, 4.4vw, 54px); color:var(--bone); margin-top:16px; }
  .zone-b{ background:#0e0f0a; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .zone-c{ background:linear-gradient(180deg, var(--void), #0f100b); }

  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------- FACILITY (02) ---------- */
  .facility-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px; align-items:start; }
  .facility-grid .lede{ font-size:19px; color:var(--bone); max-width:52ch; }
  .facility-grid .lede em{ font-style:normal; color:var(--amber); }
  .facility-side{ font-family:var(--mono); font-size:13px; color:var(--bone-dim); border-left:1px solid var(--line-strong); padding-left:26px; }
  .facility-side p + p{ margin-top:18px; }
  @media (max-width:860px){ .facility-grid{ grid-template-columns:1fr; gap:40px; } .facility-side{ border-left:none; border-top:1px solid var(--line-strong); padding-left:0; padding-top:20px; } }

  /* ---------- COLLECTION (03) ---------- */
  .collection-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
  .big-count{ font-family:var(--display); font-size:clamp(90px,14vw,190px); color:var(--bone); line-height:0.8; }
  .big-count span{ display:block; font-family:var(--mono); font-size:14px; letter-spacing:0.2em; color:var(--amber); margin-top:16px; }
  .spec-table{ border-top:1px solid var(--line-strong); }
  .spec-row{ display:flex; justify-content:space-between; padding:20px 0; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:14px; }
  .spec-row .k{ color:var(--steel-light); letter-spacing:0.08em; }
  .spec-row .v{ color:var(--bone); }
  @media (max-width:860px){ .collection-wrap{ grid-template-columns:1fr; gap:44px; } }

  /* ---------- PILLARS (04) ---------- */
  .pillars{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line-strong); }
  .pillar{ padding:38px 28px; border-right:1px solid var(--line-strong); }
  .pillar:last-child{ border-right:none; }
  .pillar .idx{ font-family:var(--mono); color:var(--amber-dim); font-size:12px; }
  .pillar h3{ font-family:var(--display); font-size:26px; margin:16px 0 12px; color:var(--bone); }
  .pillar p{ font-size:14px; color:var(--bone-dim); }
  @media (max-width:900px){ .pillars{ grid-template-columns:1fr 1fr; } .pillar{ border-bottom:1px solid var(--line-strong); } .pillar:nth-child(2){ border-right:none; } .pillar:nth-child(4){ border-right:none; } }
  @media (max-width:520px){ .pillars{ grid-template-columns:1fr; } .pillar{ border-right:none !important; } }

  /* ---------- GAME SECTIONS (05/06) ---------- */
  .game-block{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start; padding:70px 0; }
  .game-block:first-of-type{ border-bottom:1px solid var(--line); }
  .game-tag{ font-family:var(--mono); font-size:12px; letter-spacing:0.15em; padding:6px 12px; border:1px solid var(--line-strong); display:inline-block; color:var(--steel-light); }
  .game-tag.now{ color:var(--amber); border-color:var(--amber-dim); }
  .game-block h3{ font-size:clamp(28px,3.6vw,44px); color:var(--bone); margin:18px 0 18px; }
  .game-block p{ color:var(--bone-dim); max-width:52ch; margin-bottom:14px; }
  .tag-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
  .tag-row span{ font-family:var(--mono); font-size:11px; color:var(--steel-light); border:1px solid var(--line); padding:6px 12px; letter-spacing:0.04em; }
  .game-visual{
    aspect-ratio:4/3; border:1px solid var(--line-strong); position:relative; overflow:hidden;
    background:
      repeating-linear-gradient(0deg, rgba(233,230,216,0.03) 0 1px, transparent 1px 34px),
      repeating-linear-gradient(90deg, rgba(233,230,216,0.03) 0 1px, transparent 1px 34px),
      #101208;
  }
  .game-visual .scan{
    position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--amber), transparent);
    opacity:0.6; animation:scan 4.5s linear infinite;
  }
  @keyframes scan{ 0%{ top:0%; } 100%{ top:100%; } }
  .game-visual .corner{ position:absolute; width:18px; height:18px; border:1.5px solid var(--amber-dim); }
  .game-visual .corner.tl{ top:14px; left:14px; border-right:none; border-bottom:none; }
  .game-visual .corner.br{ bottom:14px; right:14px; border-left:none; border-top:none; }
  .game-visual .label{
    position:absolute; bottom:20px; left:20px; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--steel-light);
  }
  @media (max-width:860px){ .game-block{ grid-template-columns:1fr; } .game-block > *:first-child{ order:2; } .game-block > *:last-child{ order:1; } }

  /* ---------- ROADMAP (07) ---------- */
  #roadmap{ background:#0b0c08; }
  .route{ position:relative; margin-top:20px; }
  .route::before{
    content:''; position:absolute; left:28px; top:0; bottom:0; width:1px;
    background:repeating-linear-gradient(180deg, var(--line-strong) 0 8px, transparent 8px 16px);
  }
  @media (max-width:640px){ .route::before{ left:16px; } }
  .phase{ position:relative; padding:0 0 70px 84px; }
  @media (max-width:640px){ .phase{ padding-left:52px; } }
  .phase:last-child{ padding-bottom:0; }
  .phase .node{
    position:absolute; left:14px; top:2px; width:30px; height:30px; border:1px solid var(--amber-dim);
    display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; color:var(--amber);
    background:var(--void); transform:rotate(45deg);
  }
  .phase .node span{ transform:rotate(-45deg); }
  @media (max-width:640px){ .phase .node{ left:2px; width:24px; height:24px; } }
  .phase-head{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
  .phase-head .ph-label{ font-family:var(--mono); font-size:12px; color:var(--steel-light); letter-spacing:0.15em; }
  .phase h3{ font-size:clamp(24px,3.2vw,36px); color:var(--bone); margin-top:8px; }
  .phase p.desc{ color:var(--bone-dim); max-width:58ch; margin-top:14px; }
  .phase-items{
    margin-top:20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px 26px;
  }
  .phase-items div{
    font-size:13px; color:var(--bone-dim); padding:8px 0; border-bottom:1px solid var(--line); display:flex; gap:10px;
  }
  .phase-items div::before{ content:'—'; color:var(--amber-dim); }
  .phase .closer{ margin-top:20px; font-family:var(--mono); font-size:13px; color:var(--amber); font-style:normal; }

  /* ---------- MINT REVENUE (08) ---------- */
  .rev-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong); }
  .rev-cell{ background:var(--void); padding:34px 22px; min-height:190px; display:flex; flex-direction:column; justify-content:space-between; }
  .rev-cell .n{ font-family:var(--mono); color:var(--amber-dim); font-size:12px; }
  .rev-cell h4{ font-family:var(--display); font-size:19px; font-weight:400; color:var(--bone); margin:14px 0 10px; letter-spacing:0.02em; }
  .rev-cell p{ font-size:12.5px; color:var(--bone-dim); }
  @media (max-width:920px){ .rev-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .rev-grid{ grid-template-columns:1fr; } }
  .benefit-note{ margin-top:60px; display:grid; grid-template-columns:1fr 1fr; gap:50px; }
  .benefit-note .lede{ color:var(--bone); font-size:17px; }
  @media (max-width:860px){ .benefit-note{ grid-template-columns:1fr; } }

  /* ---------- ROYALTIES (09) ---------- */
  .flow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:50px 0; flex-wrap:wrap; }
  .flow-step{
    flex:1; min-width:150px; text-align:center; padding:26px 16px; border:1px solid var(--line-strong);
    font-family:var(--mono); font-size:12px; letter-spacing:0.08em; color:var(--bone-dim);
  }
  .flow-step b{ display:block; font-family:var(--display); font-size:18px; color:var(--bone); font-weight:400; margin-bottom:8px; letter-spacing:0.02em; }
  .flow-arrow{ color:var(--amber-dim); font-family:var(--mono); flex:0 0 auto; }
  @media (max-width:760px){ .flow{ flex-direction:column; } .flow-arrow{ transform:rotate(90deg); } }
  .roy-list{ margin-top:50px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px 40px; }
  .roy-list div{ font-size:14px; color:var(--bone-dim); padding-top:14px; border-top:1px solid var(--line); }
  @media (max-width:760px){ .roy-list{ grid-template-columns:1fr 1fr; } }
  @media (max-width:480px){ .roy-list{ grid-template-columns:1fr; } }

  /* ---------- COMMUNITY (10) ---------- */
  .council{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong); }
  .council-cell{ background:var(--panel); padding:40px 30px; }
  .council-cell .stamp{ margin-bottom:20px; }
  .council-cell h3{ font-size:24px; color:var(--bone); margin-bottom:14px; font-weight:400; }
  .council-cell p{ font-size:14px; color:var(--bone-dim); margin-bottom:16px; }
  .council-cell ul{ list-style:none; }
  .council-cell li{ font-size:13px; color:var(--bone-dim); padding:8px 0; border-top:1px solid var(--line); }
  @media (max-width:900px){ .council{ grid-template-columns:1fr; } }

  /* ---------- HOLDER EXPERIENCE / UTILITY (11) ---------- */
  .utility-head{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; margin-bottom:60px; }
  .utility-head .principles{ display:flex; flex-wrap:wrap; gap:10px 26px; font-family:var(--mono); font-size:13px; }
  .utility-head .principles span{ color:var(--amber); }
  @media (max-width:860px){ .utility-head{ grid-template-columns:1fr; gap:24px; } }
  .exp-list{ columns:2; column-gap:50px; }
  .exp-list div{ break-inside:avoid; font-size:14px; color:var(--bone-dim); padding:14px 0; border-bottom:1px solid var(--line); }
  @media (max-width:640px){ .exp-list{ columns:1; } }

  /* ---------- TRANSPARENCY (12) ---------- */
  #transparency{ text-align:center; }
  #transparency .wrap{ max-width:820px; }
  #transparency h2{ font-size:clamp(30px,5vw,52px); color:var(--bone); margin:16px 0 30px; }
  #transparency p{ color:var(--bone-dim); font-size:16px; max-width:56ch; margin:0 auto; }
  .transparency-close{ margin-top:40px; font-family:var(--mono); font-size:14px; color:var(--amber); }

  /* ---------- FINAL (13) ---------- */
  #final{
    min-height:82vh; display:flex; align-items:center; justify-content:center; text-align:center;
    position:relative; overflow:hidden;
    background:radial-gradient(900px 500px at 50% 100%, rgba(217,166,46,0.07), transparent 60%), #0a0b08;
    border-top:1px solid var(--line);
  }
  #final .wrap{ max-width:820px; }
  .escape-chain{ font-family:var(--mono); font-size:12px; color:var(--steel-light); letter-spacing:0.06em; margin-bottom:30px; }
  .escape-chain span{ color:var(--amber); }
  #final h2{ font-size:clamp(40px,7vw,84px); color:var(--bone); }
  #final .kicker{ margin-top:26px; font-size:16px; color:var(--bone-dim); }
  #final .actions{ margin-top:44px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }

  /* ---------- FOOTER ---------- */
  footer{ background:#070805; border-top:1px solid var(--line); padding:60px 0 30px; }
  .foot-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; }
  .foot-brand h4{ font-family:var(--display); font-size:24px; color:var(--bone); font-weight:400; }
  .foot-brand p{ font-family:var(--mono); font-size:12px; color:var(--steel-light); margin-top:10px; }
  .foot-links{ display:flex; gap:36px; flex-wrap:wrap; }
  .foot-links a{ font-family:var(--mono); font-size:12px; letter-spacing:0.08em; color:var(--bone-dim); transition:color .3s; }
  .foot-links a:hover{ color:var(--amber); }
  .foot-bottom{ margin-top:50px; padding-top:20px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--steel); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

  /* ---------- SOUND TOGGLE ---------- */
  #sound-toggle{
    position:fixed; bottom:24px; right:24px; z-index:60;
    width:48px; height:48px; border:1px solid var(--line-strong); background:rgba(10,11,8,0.7);
    backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; cursor:pointer;
    font-family:var(--mono); font-size:10px; color:var(--bone-dim); letter-spacing:0.05em; transition:border-color .3s, color .3s;
  }
  #sound-toggle:hover{ border-color:var(--amber); color:var(--amber); }


/* ---------- BREAK OUT / BRAND RESPONSIVENESS ---------- */
.breakout-hero{ min-height:42vh; display:flex; align-items:flex-end; padding:145px 0 68px; border-bottom:1px solid var(--line); background:radial-gradient(600px 360px at 82% 25%, rgba(255,106,31,.10), transparent 68%); }
.breakout-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:70px; align-items:start; }
.breakout-form{ border:1px solid var(--line-strong); background:rgba(8,9,7,.72); padding:34px; box-shadow:0 20px 60px rgba(0,0,0,.28); }
.breakout-form label{ display:block; margin:0 0 8px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim); }
.breakout-form input,.breakout-form textarea,.breakout-form select{ width:100%; box-sizing:border-box; border:1px solid var(--line-strong); background:#0b0c09; color:var(--bone); padding:14px 13px; margin-bottom:18px; font:14px var(--body); outline:none; }
.breakout-form input:focus,.breakout-form textarea:focus,.breakout-form select:focus{ border-color:var(--amber); }
.breakout-form textarea{ min-height:130px; resize:vertical; }
.breakout-form .btn{ width:100%; justify-content:center; }
.breakout-note{ color:var(--bone-dim); max-width:48ch; }
@media(max-width:900px){
  .breakout-grid{ grid-template-columns:1fr; gap:40px; }
  .page-hero .wrap{ transform:none; }
}
@media(max-width:640px){
  .brand-logo{ width:30px; height:30px; flex-basis:30px; }
  .brand-name{ font-size:10px; }
  .breakout-hero{ min-height:38vh; padding:118px 0 48px; }
  .breakout-form{ padding:22px; }
}

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001s !important; animation-iteration-count:1 !important; transition-duration:0.001s !important; scroll-behavior:auto !important; }
  }

  :focus-visible{ outline:1px solid var(--amber); outline-offset:3px; }

/* ---------- MULTI-PAGE RESPONSIVE POLISH ---------- */
.page-hero{
  min-height:48vh; display:flex; align-items:flex-end; padding:150px 0 70px;
  position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:radial-gradient(700px 400px at 80% 30%, rgba(255,106,31,.08), transparent 65%);
}
.page-hero h1{ font-size:clamp(42px,8vw,92px); margin-top:14px; max-width:900px; }
.page-hero p{ margin-top:20px; max-width:62ch; color:var(--bone-dim); }

/* Keep the Game page hero aligned with the main content column.
   On wide screens the previous hero had too much empty space on the left. */
@media (min-width:1181px){
  .page-hero .wrap{
    position:relative;
    transform:translateX(clamp(-240px, -15vw, -120px));
  }
}
@media(max-width:640px){
  .wrap{ padding:0 20px; }
  .section{ padding:78px 0; }
  .page-hero{ min-height:42vh; padding:125px 0 52px; }
  .page-hero h1{ font-size:clamp(40px,13vw,68px); }
  .hero__inner{ padding-left:20px !important; padding-right:20px !important; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
}