/* Project pages — layered on top of futuristic.css */
.phero{position:relative;min-height:100vh;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center;padding:120px var(--pad) 70px}
.back{display:inline-flex;gap:10px;margin-bottom:30px;font:12px var(--mono);color:var(--dim);transition:color .2s}
.back:hover{color:var(--amber)}
.phero h1{font:500 clamp(32px,4.4vw,72px)/1 var(--display);letter-spacing:-.045em;margin:12px 0 26px}
.phero .lede{font-size:18px;margin-bottom:32px;opacity:0;animation:fade .8s .6s forwards}
.phero .hero-actions{opacity:0;animation:fade .8s .75s forwards}

.demo{position:relative;aspect-ratio:1.12;border:1px solid var(--line);background:rgba(2,8,14,.3);backdrop-filter:blur(4px);touch-action:pan-y;cursor:crosshair}
.demo:before,.demo:after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--amber);pointer-events:none}
.demo:before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.demo:after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.demo canvas{position:absolute;inset:0;width:100%;height:100%}
.demo-tag{position:absolute;left:16px;top:12px;pointer-events:none}
.demo-hint{position:absolute;right:16px;top:12px;pointer-events:none;text-align:right}
.demo-hud{position:absolute;left:16px;right:16px;bottom:12px;display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;font:11.5px var(--mono);color:var(--dim);pointer-events:none}
.demo-hud b{color:var(--ice);font-weight:500}
.demo-hud .amber{color:var(--amber)}

.case{display:grid;grid-template-columns:.75fr 1.4fr;gap:clamp(40px,7vw,100px);align-items:start}
.side{position:sticky;top:110px;display:grid;gap:0;border-top:1px solid var(--line)}
.side div{padding:16px 0;border-bottom:1px solid var(--line)}
.side small{display:block;font:11px var(--mono);color:var(--dim);margin-bottom:6px}
.side p{margin:0;color:var(--ice);font-size:15px;line-height:1.55}
.body h2{font:400 clamp(26px,3vw,42px)/1.15 var(--display);letter-spacing:-.035em;margin-bottom:26px}
.body p{color:var(--soft);max-width:36em;margin-bottom:18px}
.body p.first{font-size:21px;line-height:1.5;color:var(--ice);font-weight:500}
.body .links{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.body .block+.block{margin-top:70px;padding-top:50px;border-top:1px solid var(--line)}

.nextp{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:46px var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .35s}
.nextp:hover{background:linear-gradient(90deg,rgba(255,200,87,.09),transparent 70%)}
.nextp h2{font:400 clamp(24px,3.6vw,52px)/1.1 var(--display);letter-spacing:-.035em;margin:8px 0 0;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.nextp:hover h2{transform:translateX(16px)}
.nextp:hover .go{background:var(--amber);color:#08121b;border-color:var(--amber);transform:rotate(-45deg)}

@media(max-width:900px){
  .phero{grid-template-columns:1fr;padding-top:110px;gap:36px}
  .demo{aspect-ratio:1}
  .case{grid-template-columns:1fr}
  .side{position:static}
}
@media(prefers-reduced-motion:reduce){.phero .lede,.phero .hero-actions{opacity:1}}

/* ---------- Breathing room (project pages only) ---------- */
body[data-demo]{--pad:clamp(26px,7vw,112px)}
.phero{max-width:1440px;margin-inline:auto;padding-top:clamp(150px,20vh,210px);padding-bottom:clamp(90px,12vh,140px);column-gap:clamp(36px,6vw,96px)}
.sec{padding-top:clamp(70px,10vh,130px);padding-bottom:clamp(100px,14vh,180px)}
.back{margin-bottom:38px}
.phero h1{margin-bottom:32px}
.phero .lede{margin-bottom:40px}
.demo{margin-bottom:46px}
.demo-hint{top:auto;bottom:-32px;right:auto;left:0;text-align:left}
.demo-tag{left:20px;top:16px}
.demo-hud{left:20px;right:20px;bottom:16px}
.nextp{padding:clamp(48px,8vh,80px) var(--pad)}
.foot{padding:30px var(--pad) 36px}
@media(max-width:900px){
  body[data-demo]{--pad:clamp(26px,7vw,48px)}
  .phero{padding-top:140px;padding-bottom:70px;row-gap:56px}
  .sec{padding-top:56px;padding-bottom:90px}
  .case{gap:48px}
}