/* ============================================================
   BITBRAINS® — STUDIO PAGE
   Interactive physics stage + supporting sections.
   ============================================================ */

.studio-body{background:var(--ink)}

/* ── interactive stage ── */
.studio-stage{
  position:relative;width:100%;height:100vh;min-height:640px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 40%,#141311 0%,#0A0A0A 70%);
  cursor:grab;
}
.studio-stage:active{cursor:grabbing}
#studioStage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}

.stage-overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;align-items:center;
  padding:0 var(--pad);
}
.stage-head{max-width:600px}
.stage-head .display{
  font-size:clamp(40px,6.6vw,104px);margin-top:14px;
  text-shadow:0 4px 60px rgba(10,10,10,.85);
}
.stage-lede{
  margin-top:26px;max-width:400px;color:var(--stone);font-size:clamp(14px,1.3vw,17px);
  line-height:1.55;text-shadow:0 2px 30px rgba(10,10,10,.9);
}

/* telemetry + hint */
.stage-hud{
  position:absolute;left:var(--pad);bottom:30px;z-index:3;
  display:flex;flex-direction:column;gap:5px;font-size:11px;letter-spacing:.03em;color:var(--slate);
  opacity:0;transform:translateY(8px);transition:opacity .8s,transform .8s;pointer-events:none;
}
.stage-hud.show{opacity:1;transform:none}
.stage-hud .hud-row{display:flex;gap:14px;justify-content:space-between;min-width:190px}
.stage-hud .hud-row span:first-child{color:var(--smoke)}
.stage-hud .hud-row span:last-child{color:var(--stone)}
.stage-hint{
  position:absolute;right:var(--pad);bottom:30px;z-index:3;pointer-events:none;
  display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--smoke);
}
.stage-hint i{width:26px;height:1px;background:var(--iron)}

/* ── sections ── */
.std-section{padding:clamp(90px,14vh,180px) var(--pad);position:relative;z-index:1}
.std-inner{max-width:1100px;margin:0 auto}
.cap-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:64px;
}
.cap{border-top:1px solid var(--iron);padding-top:22px}
.cap-n{color:var(--truth);font-size:12px;margin-bottom:18px}
.cap h3{font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.cap p{color:var(--stone);font-size:15px;line-height:1.6}

/* ── footer ── */
.std-foot{padding:clamp(80px,12vh,150px) var(--pad) 48px;border-top:1px solid var(--iron)}
.std-foot .foot-motto{font-size:clamp(40px,8vw,120px);margin-bottom:56px}
.std-foot-grid{
  display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;
}
.std-foot-grid .foot-brand{display:flex;align-items:center;gap:12px}
.std-foot-grid .brand-word{font-size:22px}

@media(max-width:820px){
  .cap-grid{grid-template-columns:1fr;gap:34px}
  .std-foot-grid{grid-template-columns:1fr;gap:28px;align-items:flex-start;justify-items:start}
  .stage-hint{display:none}
  .stage-overlay{align-items:flex-end;padding-bottom:120px}
}