/* ============================================================
   BEAT LAYER — obsidian.city hub showcase upgrade (staged).
   Town palette only: ultra-white, obsidian black, town red.
   Scoped under .bt- so it never touches legacy layers.
   ============================================================ */
.bt{--bt-red:#2563eb;--bt-red-hot:#1597ec;--bt-black:#060609;--bt-panel:#101016;--bt-panel2:#16161f;--bt-line:#26262f;--bt-ink:#ffffff;--bt-muted:#a7a7b3;--bt-faint:#6d6d78;background:#060609}
.bt *{box-sizing:border-box}

/* ---------- hero band ---------- */
.bt-hero{position:relative;overflow:hidden;background:#000;border-top:1px solid var(--bt-line);border-bottom:1px solid var(--bt-line)}
.bt-hero-media{position:absolute;inset:0}
.bt-hero-media video,.bt-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.bt-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 38%,rgba(6,6,9,.88) 82%,#060609 100%)}
.bt-hero-in{position:relative;max-width:1160px;margin:0 auto;padding:120px 20px 56px}
.bt-kicker{display:inline-flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.bt-kicker::before{content:"";width:26px;height:3px;background:var(--bt-red);border-radius:2px}
.bt-hero h2{font-size:clamp(40px,6.4vw,76px);font-weight:900;letter-spacing:-.03em;line-height:.98;margin:18px 0 16px;max-width:12.5em;color:#fff}
.bt-hero h2 .bt-red{color:var(--bt-red-hot)}
.bt-hero .bt-sub{font-size:clamp(16px,2vw,20px);color:#d7d7de;font-weight:600;max-width:34em;margin:0 0 34px}
.bt-counters{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:880px}
.bt-counter{border:1px solid rgba(255,255,255,.16);background:rgba(10,10,14,.55);backdrop-filter:blur(6px);border-radius:16px;padding:14px 16px}
.bt-counter b{display:block;font-size:clamp(22px,3vw,32px);font-weight:900;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.bt-counter span{font-size:12.5px;font-weight:700;color:#b9b9c2;text-transform:uppercase;letter-spacing:.07em}
.bt-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.bt-chips a{color:#fff;text-decoration:none;font-size:13.5px;font-weight:800;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 15px;background:rgba(10,10,14,.45)}
.bt-chips a:hover{border-color:var(--bt-red);background:rgba(37,99,235,.18)}

/* ---------- section shell ---------- */
.bt-sec{max-width:1160px;margin:0 auto;padding:74px 20px 10px}
.bt-sec-head{max-width:44em}
.bt-sec-head h2{font-size:clamp(30px,4.4vw,48px);font-weight:900;letter-spacing:-.025em;line-height:1.02;margin:14px 0 12px;color:var(--bt-ink)}
.bt-sec-head p{color:var(--bt-muted);font-size:17px;font-weight:600;margin:0}

/* ---------- card grid ---------- */
.bt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px}
.bt-card{background:var(--bt-panel);border:1px solid var(--bt-line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;will-change:transform}
.bt-card:hover{border-color:rgba(37,99,235,.65);box-shadow:0 22px 50px rgba(0,0,0,.5)}
.bt-card-wide{grid-column:1/-1}
.bt-frame{border-bottom:1px solid var(--bt-line);background:#000}
.bt-frame-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--bt-panel2);border-bottom:1px solid var(--bt-line)}
.bt-frame-bar i{width:10px;height:10px;border-radius:50%;background:#33333f;display:block}
.bt-frame-bar i:first-child{background:#5b2b33}
.bt-frame-url{margin-left:8px;font-size:12px;font-weight:700;color:var(--bt-faint);background:#0b0b10;border:1px solid var(--bt-line);border-radius:999px;padding:3px 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-frame-body{position:relative}
.bt-frame-body img,.bt-frame-body video{width:100%;height:100%;object-fit:cover;display:block}
.bt-ratio{aspect-ratio:16/8.2}
.bt-ratio-tall{aspect-ratio:16/10}
.bt-card-in{padding:22px 24px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.bt-card h3{font-size:23px;font-weight:900;letter-spacing:-.015em;margin:0;color:var(--bt-ink)}
.bt-card p{margin:0;color:var(--bt-muted);font-size:15.5px;font-weight:600;line-height:1.5}
.bt-line-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.bt-line-list li{display:flex;justify-content:space-between;gap:12px;border-top:1px dashed var(--bt-line);padding-top:7px;font-size:14.5px;font-weight:700;color:#d7d7de}
.bt-line-list li b{color:#fff;white-space:nowrap}
.bt-go{margin-top:auto;padding-top:14px}
.bt-go a{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;font-size:15px}
.bt-go a::after{content:"→";color:var(--bt-red-hot);transition:transform .25s}
.bt-go a:hover::after{transform:translateX(4px)}
.bt-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#ffb3b7;border:1px solid rgba(37,99,235,.55);border-radius:999px;padding:5px 11px;background:rgba(37,99,235,.1)}
.bt-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bt-red-hot)}

/* ---------- shield widget ---------- */
.bt-map-wrap{position:relative;background:#050507}
.bt-map-wrap canvas{width:100%;height:auto;display:block}
.bt-shield-ui{padding:20px 24px 24px}
.bt-regions{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 16px}
.bt-regions button{font:inherit;font-size:13px;font-weight:800;color:#d7d7de;background:#0b0b10;border:1px solid var(--bt-line);border-radius:999px;padding:7px 13px;cursor:pointer}
.bt-regions button:hover{border-color:rgba(37,99,235,.6)}
.bt-regions button.on{background:var(--bt-red);border-color:var(--bt-red);color:#fff}
.bt-readout{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bt-readout div{border:1px solid var(--bt-line);border-radius:14px;padding:12px 14px;background:#0b0b10}
.bt-readout b{display:block;font-size:clamp(19px,2.6vw,27px);font-weight:900;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bt-readout span{font-size:11.5px;font-weight:800;color:var(--bt-faint);text-transform:uppercase;letter-spacing:.07em}
.bt-note{font-size:12.5px;color:var(--bt-faint);font-weight:600;margin-top:12px}

/* ---------- crazy town live rail ---------- */
.bt-ct-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bt-ct-item{background:#0b0b10;border:1px solid var(--bt-line);border-radius:14px;overflow:hidden;text-decoration:none}
.bt-ct-item img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#111}
.bt-ct-item div{padding:9px 11px}
.bt-ct-item h4{margin:0;font-size:13px;font-weight:800;color:#fff;line-height:1.3}
.bt-ct-item span{font-size:13px;font-weight:800;color:var(--bt-red-hot)}

/* ---------- ant frame (super ant still) ---------- */
.bt-ant-frame{background:radial-gradient(120% 130% at 50% 0%,#17171f 0%,#060609 62%)}
.bt-ant-frame img{object-fit:contain;padding:8px}

/* ---------- reveal choreography (gated on html.bt-on, set inline before the section) ---------- */
html.bt-on .bt-reveal{opacity:0;transform:translateY(26px)}
html.bt-on .bt-reveal.bt-in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion: reduce){
  html.bt-on .bt-reveal{opacity:1;transform:none}
  .bt-card{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .bt-counters{grid-template-columns:repeat(2,1fr)}
  .bt-grid{grid-template-columns:1fr}
  .bt-hero-in{padding:92px 20px 44px}
  .bt-ratio{aspect-ratio:16/10}
  .bt-readout{grid-template-columns:repeat(3,1fr);gap:8px}
  .bt-readout div{padding:10px}
}