/* ════════════════════════════════════════════════════════════════
   HP® NZ — THE MAKER'S DESK
   A studio that comes alive in your hands.
   Design system: warm studio light; one neon corridor; tactile paper.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* palette */
  --bg0:#0d0b08;
  --bg1:#171310;
  --desk:#241a12;
  --desk-2:#2e211815;
  --ink:#f5eee4;
  --ink-soft:#cfc2b3;
  --dim:#9c8d7d;
  --faint:#6b5f54;
  --line:#3a2f2666;
  --hp:#0e9ae0;
  --hp-deep:#0678b4;
  --amber:#ffb26b;
  --amber-soft:#ffd9a8;
  --magenta:#ff2d78;
  --violet:#8a5cff;
  --cyan:#19e0d8;
  --paper:#f8f3ea;
  /* scene variables (re-tuned per [data-scene]) */
  --amb-warm:#3a2413;
  --amb-warm-2:#1a1009;
  --amb-cool:#0c2233;
  --spot:#ffd9a8;
  /* motion */
  --ease-out:cubic-bezier(.22,.9,.24,1);
  --ease-soft:cubic-bezier(.4,.05,.2,1);
  --tm:.6s;
  /* cursor lamp */
  --lx:50vw;
  --ly:38vh;
  /* type */
  --font:"HP Simplified","Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg0);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.55;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--hp);color:#04141c}

.skip{
  position:fixed;left:1rem;top:-4rem;z-index:200;background:var(--hp);color:#04141c;
  padding:.6rem 1rem;border-radius:.5rem;font-weight:600;transition:top .2s;
}
.skip:focus{top:1rem}

:focus-visible{outline:2px solid var(--hp);outline-offset:3px;border-radius:2px}

/* ── atmosphere ─────────────────────────────────────────────── */
.atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;transition:background 1s var(--ease-soft)}
.atmosphere::before{ /* studio vignette */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--amb-warm) 0%, transparent 55%),
    radial-gradient(90% 70% at 50% 115%, var(--amb-warm-2) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 45%);
  transition:opacity 1.2s var(--ease-soft);
}
.grain{
  position:absolute;inset:-50%;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(3) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}100%{transform:translate(0,0)}}
.lamp{position:absolute;inset:0;mix-blend-mode:screen;transition:opacity .9s var(--ease-soft)}
.lamp--warm{
  background:radial-gradient(42rem 42rem at var(--lx) var(--ly), #ffb26b2b 0%, #ffb26b12 34%, transparent 70%);
}
.lamp--cool{
  background:radial-gradient(70rem 50rem at 50% 0%, var(--amb-cool) 0%, transparent 60%);
  opacity:.55;
}
.horizon{
  position:absolute;left:0;right:0;bottom:0;height:34vh;
  background:linear-gradient(0deg, #00000070, transparent);
}

/* scene re-tuning (set by JS on body[data-scene]) */
body[data-scene="corridor"]{ --amb-warm:#1c0a22; --amb-warm-2:#14060f; --amb-cool:#0a0620; }
body[data-scene="print"]{ --amb-warm:#3f2c17; --amb-warm-2:#221608; --amb-cool:#17303f; }
body[data-scene="outro"]{ --amb-warm:#241207; --amb-warm-2:#120a04; --amb-cool:#181410; }

/* ── top bar ────────────────────────────────────────────────── */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:1.4rem;
  padding:.75rem clamp(1rem,3vw,2.4rem);
  background:#0d0b08f0;
  backdrop-filter:blur(8px);
  border-bottom:1px solid #ffffff10;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand__mark{width:30px;height:30px;fill:var(--ink);transition:fill .3s}
.brand:hover .brand__mark{fill:var(--hp)}
.brand__word{font-size:.95rem;font-weight:600;letter-spacing:.02em}
.brand__word em{font-style:normal;font-weight:400;color:var(--dim);font-size:.8rem;margin-left:.35rem;letter-spacing:.14em;text-transform:uppercase}
.topnav{display:flex;gap:.2rem;margin-inline:auto}
.topnav a{
  text-decoration:none;color:var(--ink-soft);font-size:.82rem;font-weight:500;
  padding:.45rem .8rem;border-radius:2rem;transition:color .25s,background .25s;
}
.topnav a:hover{color:var(--ink);background:#ffffff14}
.topcta{
  text-decoration:none;font-size:.82rem;font-weight:600;color:#04141c;
  background:var(--hp);padding:.5rem 1rem;border-radius:2rem;
  box-shadow:0 0 0 0 #0e9ae055;transition:box-shadow .3s,transform .2s;
}
.topcta:hover{box-shadow:0 6px 24px #0e9ae066;transform:translateY(-1px)}
.progressbar{position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#ffffff10}
.progressbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--hp),var(--magenta));transition:width .08s linear}

/* ── desk map (side dots) ───────────────────────────────────── */
.deskmap{position:fixed;right:1.4rem;top:50%;transform:translateY(-50%);z-index:100}
.deskmap ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem}
.deskmap a{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-direction:row-reverse}
.deskmap i{
  width:9px;height:9px;border-radius:50%;background:#ffffff30;
  transition:background .3s,box-shadow .3s,transform .3s;
}
.deskmap span{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;white-space:nowrap;
}
.deskmap a:hover span,.deskmap a:focus-visible span{opacity:1;transform:none}
.deskmap a.on i{background:var(--amber);box-shadow:0 0 12px var(--amber);transform:scale(1.25)}
.deskmap a.on span{opacity:1;transform:none;color:var(--ink-soft)}
body[data-scene="corridor"] .deskmap a.on i{background:var(--magenta);box-shadow:0 0 12px var(--magenta)}

/* ── acts: the scroll journey ───────────────────────────────── */
.act{position:relative}
.act__stage{
  position:relative;min-height:100vh;
  padding:clamp(4.5rem,8vh,7rem) clamp(1.2rem,4vw,3.5rem) clamp(3rem,6vh,5rem);
  max-width:1280px;margin-inline:auto;
}
@media (min-width:900px){
  .act{min-height:230vh}
  .act--hero{min-height:200vh}
  .act--outro{min-height:130vh}
  /* top-anchored on short stages so nothing tucks under the fixed bar;
     centred vertically on tall stages for the gallery feel */
  .act__stage{position:sticky;top:0;height:100vh;overflow:clip;display:flex;flex-direction:column;justify-content:flex-start;padding-top:calc(5.2rem + 1.5vh)}
}
@media (min-width:900px) and (min-height:1000px){
  .act__stage{justify-content:center;padding-top:4.6rem}
}
@media (min-width:900px){
  .act--hero .act__stage,.act--outro .act__stage{justify-content:center}
}

.eyebrow{
  display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
}
.eyebrow__dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.act-num{
  font-variant-numeric:tabular-nums;color:var(--amber);border:1px solid #ffb26b44;
  padding:.1rem .5rem;border-radius:2rem;font-size:.66rem;
}
.eyebrow--neon .act-num{color:var(--magenta);border-color:#ff2d7855}
.act__head{max-width:46rem;position:relative;z-index:2}
.act__title{
  margin:0 0 1rem;font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.06;
  letter-spacing:-.02em;font-weight:700;
}
.act__title em,.hero__h1 em,.outro h2 em{font-style:italic;font-weight:600;color:var(--amber)}
body[data-scene="corridor"] .act__title em{color:var(--magenta)}
.lede{margin:0;color:var(--ink-soft);font-size:clamp(.98rem,1.35vw,1.14rem);max-width:38rem}
.lede+.lede{margin-top:.5rem}

.btn{
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-weight:600;font-size:.88rem;padding:.7rem 1.3rem;border-radius:2rem;
  transition:transform .18s var(--ease-out),box-shadow .3s,background .3s,color .3s;
  will-change:transform;
}
.btn:active{transform:scale(.96)}
.btn--solid{background:var(--hp);color:#04141c;box-shadow:0 8px 28px #0e9ae040}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 14px 34px #0e9ae066}
.btn--ghost{border:1px solid #ffffff2e;color:var(--ink)}
.btn--ghost:hover{background:#ffffff12;transform:translateY(-2px)}
.btn--line{border:1px solid #ffb26b55;color:var(--amber-soft)}
.btn--line:hover{background:#ffb26b17;transform:translateY(-2px)}
.btn--neon{
  border:1px solid #ff2d7877;color:#ffd7e7;
  background:linear-gradient(180deg,#ff2d7822,#ff2d7808);
  box-shadow:0 0 0 #ff2d78;
}
.btn--neon:hover{box-shadow:0 0 22px #ff2d7866, inset 0 0 14px #ff2d7833;transform:translateY(-2px)}
.btn--lineneon{border-color:#19e0d866;color:#c8fffb}
.btn--lineneon:hover{background:#19e0d814}

/* price block */
.price{display:flex;align-items:baseline;gap:.7rem;margin:.6rem 0 .9rem}
.price__now{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.price__save{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#0c3521;background:#7dffb0;padding:.18rem .55rem;border-radius:2rem;
}
.corridor .price__save,.rig .price__save{background:#ff2d78;color:#fff}

/* ── ACT 0 · HERO — the cold start ──────────────────────────── */
.act--hero .act__stage{gap:2rem}
@media (min-width:900px){
  .act--hero .act__stage{
    display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    grid-template-rows:1fr auto;align-items:center;column-gap:3rem;
  }
  .hero__copy{grid-column:1;grid-row:1}
  .hero__message{grid-column:1;grid-row:2;align-self:start}
  .monitor{grid-column:2;grid-row:1/3}
  .scrollcue{position:absolute;left:0;right:0;bottom:1.6rem}
}
.hero__h1{
  margin:0 0 1.1rem;font-size:clamp(2.3rem,5.2vw,4.3rem);line-height:1.04;
  letter-spacing:-.025em;font-weight:800;
}
.hero__copy .lede{margin-bottom:0}

.monitor{position:relative;justify-self:center;width:min(100%,620px);z-index:3}
.monitor__bezel{
  position:relative;border-radius:18px;padding:10px 10px 4px;
  background:linear-gradient(160deg,#26211c,#151210 55%,#1d1815);
  box-shadow:
    0 30px 80px #000000c9,
    0 4px 18px #000000a6,
    inset 0 1px 0 #ffffff17,
    inset 0 -1px 0 #00000088;
}
.monitor__glass{
  position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/10.4;
  background:radial-gradient(130% 120% at 50% 30%, #151b22 0%, #05070a 70%);
  cursor:pointer;
}
.monitor__glass:focus-visible{outline:2px solid var(--hp);outline-offset:4px}
.monitor__portrait{
  position:absolute;inset:6% 4% 10%;object-fit:contain;margin:auto;
  filter:drop-shadow(0 18px 30px #000c);
}
#flood{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.monitor__screenglare{
  position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:10px;
  background:linear-gradient(115deg,transparent 30%,#ffffff09 42%,#ffffff20 50%,#ffffff09 58%,transparent 70%);
  mix-blend-mode:screen;
}
.monitor__chin{padding:.45rem;text-align:center}
.monitor__hp{font-size:.68rem;letter-spacing:.3em;color:var(--faint);text-transform:uppercase;font-weight:700}
.monitor__stand{display:flex;flex-direction:column;align-items:center;margin-inline:auto;width:60%}
.monitor__stand i{width:11%;height:38px;background:linear-gradient(180deg,#211c18,#171310);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.monitor__stand b{width:100%;height:10px;border-radius:50%/100% 100% 0 0;background:linear-gradient(180deg,#241f1a,#100d0b);box-shadow:0 18px 30px #000c}
.monitor__hint{
  margin:.8rem auto 0;width:fit-content;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);opacity:0;transition:opacity .6s;
}
body.flooded .monitor__hint{opacity:1}
.monitor__glass:active{transform:none}

/* hero message (revealed after the flood) */
.hero__message{margin-top:1.6rem}
.hero__message h2{
  margin:0 0 .5rem;font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.1;letter-spacing:-.02em;font-weight:750;
}
.hero__message h2 span{color:var(--hp);font-style:italic}
.hero__message p{margin:0 0 1.2rem;color:var(--ink-soft);max-width:30rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem}

/* flooded reveal choreography — only when JS is running the show */
.js .monitor__portrait{opacity:0;transform:scale(1.04);transition:opacity 1.1s var(--ease-soft),transform 1.4s var(--ease-soft)}
body.flooded .monitor__portrait{opacity:1!important;transform:none}
.js .hero__message{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft)}
body.flooded .hero__message{opacity:1;transform:none}
.js .monitor__glass{outline:none}

.scrollcue{margin-top:2rem;text-align:center;color:var(--faint);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.scrollcue i{
  display:block;width:1px;height:44px;margin:0 auto .6rem;background:linear-gradient(180deg,var(--amber),transparent);
  animation:cue 2.1s var(--ease-soft) infinite;
}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── shared product furniture ───────────────────────────────── */
.ped,.tile,.rig,.printcard{
  position:relative;border-radius:22px;
  background:linear-gradient(170deg,#221a13,#171210 70%);
  border:1px solid #ffffff0d;
  box-shadow:0 20px 60px #0009, inset 0 1px 0 #ffffff10;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0));
  transition:box-shadow .4s;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{margin-top:0}50%{margin-top:-6px}}
.ped:hover,.tile:hover,.rig:hover,.printcard:hover{
  --lift:-8px;
  box-shadow:0 40px 90px #000000d9, inset 0 1px 0 #ffffff14;
  transition:box-shadow .4s, transform .35s var(--ease-out);
}
.ped:active,.tile:active,.rig:active{--lift:-3px}
.ped__lightpool{
  position:absolute;left:12%;right:12%;bottom:6%;height:22%;z-index:0;
  background:radial-gradient(60% 100% at 50% 50%, #ffb26b33 0%, transparent 70%);
  filter:blur(6px);pointer-events:none;
}
.ped__obj,.tile__obj{position:relative;z-index:1;padding:1.4rem 1.4rem 0}
.ped__obj img,.tile__obj img{filter:drop-shadow(0 24px 28px #000a);transition:transform .5s var(--ease-out)}
.ped:hover .ped__obj img,.tile:hover .tile__obj img{transform:scale(1.035)}
.ped__sheen{
  position:absolute;inset:0;pointer-events:none;border-radius:18px;overflow:hidden;
}
.ped__sheen::after{
  content:"";position:absolute;inset:-30% -60%;
  background:linear-gradient(105deg,transparent 42%,#ffffff24 50%,transparent 58%);
  transform:translateX(-120%);transition:transform 1.1s var(--ease-soft);
}
.ped:hover .ped__sheen::after,.tile:hover .ped__sheen::after{transform:translateX(120%)}
.ped__plate{padding:0 1.6rem 1.6rem}
.ped__plate h3,.tile h3{margin:.4rem 0 .3rem;font-size:1.25rem;letter-spacing:-.01em}
.ped__note,.tile p{margin:0;color:var(--ink-soft);font-size:.92rem}
.ped__specs{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.ped__specs li{
  font-size:.7rem;letter-spacing:.06em;color:var(--dim);
  border:1px solid #ffffff1a;padding:.24rem .6rem;border-radius:2rem;
}

/* ── ACT I · premium corner ─────────────────────────────────── */
.pedestals{display:grid;gap:1.4rem;margin-top:2.2rem;position:relative;z-index:1}
@media (min-width:760px){ .pedestals{grid-template-columns:1.15fr 1fr} }
@media (min-width:1080px){
  .pedestals{grid-template-columns:1.15fr 1fr .85fr;align-items:end}
  .material{margin-top:0}
}
.pedestal--main{background:linear-gradient(170deg,#2a2015,#171210 70%)}
.pedestal--flip{animation-delay:-3.4s}

.material{
  margin-top:1.8rem;display:grid;gap:1rem;align-items:center;position:relative;z-index:1;
}
.material__frame{position:relative;border-radius:18px;overflow:hidden;border:1px solid #ffffff12;box-shadow:0 18px 50px #000b}
.material__frame img{width:100%;object-fit:cover;max-height:230px;transition:transform 1.2s var(--ease-soft)}
.material:hover .material__frame img{transform:scale(1.05)}
.material__tag{
  position:absolute;left:.9rem;bottom:.9rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  background:#0009;backdrop-filter:blur(6px);padding:.35rem .7rem;border-radius:2rem;color:var(--amber-soft);
  border:1px solid #ffb26b33;
}
@media (min-width:760px) and (max-width:1079px){
  .material{grid-column:1/-1;grid-template-columns:1fr 1fr;align-items:center}
}
.material__line{margin:0;color:var(--ink-soft);font-size:1rem}
.material__line strong{color:var(--ink)}

/* ── ACT II · daily bench ───────────────────────────────────── */
.bench{display:grid;gap:1.3rem;margin-top:2.2rem;position:relative;z-index:1}
@media (min-width:680px){ .bench{grid-template-columns:repeat(3,1fr)} }
.tile{padding-bottom:1.3rem}
.tile h3,.tile p{padding-inline:1.3rem}
.tile .btn{margin:.4rem 1.3rem 0}
.tile:nth-child(2){animation-delay:-2.2s}
.tile:nth-child(3){animation-delay:-4.6s}
.bench__aside{margin-top:2rem;color:var(--dim);font-size:.92rem;max-width:44rem}
.bench__aside a{color:var(--hp);text-decoration:none}
.bench__aside a:hover{text-decoration:underline}

/* ── ACT III · neon corridor ────────────────────────────────── */
.act--corridor{background:transparent;overflow:clip}
.corridor__doors{
  position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden;
}
.corridor__doors i{
  position:absolute;left:0;right:0;height:50.5%;
  background:linear-gradient(180deg,#0d0b08,#171310);
  transition:transform .1s linear;will-change:transform;
}
.corridor__doors i:first-child{top:0;transform:translateY(calc(var(--p,0) * -101%));border-bottom:2px solid #ff2d7844;box-shadow:0 8px 40px #ff2d7826}
.corridor__doors i:last-child{bottom:0;top:auto;transform:translateY(calc(var(--p,0) * 101%));border-top:2px solid #19e0d844;box-shadow:0 -8px 40px #19e0d826}
.corridor{position:relative;margin-top:2rem;z-index:1}
.corridor__tunnel{position:absolute;inset:-4% -6%;z-index:0;pointer-events:none;overflow:hidden;border-radius:24px}
.st{position:absolute;display:block}
.strip--t,.strip--b{left:6%;right:6%;height:2px;background:linear-gradient(90deg,transparent,var(--magenta),transparent);filter:drop-shadow(0 0 8px var(--magenta));animation:neonflow 5s linear infinite}
.strip--t{top:4%}
.strip--b{bottom:4%;background:linear-gradient(90deg,transparent,var(--cyan),transparent);filter:drop-shadow(0 0 8px var(--cyan))}
.strip--l,.strip--r{top:6%;bottom:6%;width:2px;background:linear-gradient(180deg,transparent,#8a5cff,transparent);filter:drop-shadow(0 0 8px #8a5cff);animation:neonflow 6s linear infinite reverse}
.strip--l{left:2%}
.strip--r{right:2%}
@keyframes neonflow{0%,100%{opacity:.55}50%{opacity:1}}
.ring{
  left:50%;top:50%;border:1.5px solid #ff2d7840;border-radius:18px;
  transform:translate(-50%,-50%) scale(calc(.4 + var(--p,0)*1.1));
  width:76%;height:88%;filter:drop-shadow(0 0 10px #ff2d7830);
  transition:transform .1s linear;
}
.ring.r2{width:56%;height:64%;border-color:#19e0d838;transform:translate(-50%,-50%) scale(calc(.55 + var(--p,0)*1.1))}
.ring.r3{width:36%;height:40%;border-color:#8a5cff38;transform:translate(-50%,-50%) scale(calc(.7 + var(--p,0)*1.1))}
.ring.r4{width:18%;height:20%;border-color:#ff2d7850;transform:translate(-50%,-50%) scale(calc(.85 + var(--p,0)*1.1))}

.rigs{position:relative;z-index:1;display:grid;gap:1.4rem}
@media (min-width:860px){ .rigs{grid-template-columns:1.2fr 1fr .9fr;align-items:end} }
.rig{
  background:linear-gradient(170deg,#170b16,#0c0710 70%);
  border-color:#ff2d7822;
  padding-bottom:1.4rem;overflow:hidden;
}
.rig--transcend{animation-delay:-2.4s}
.rig--tower{animation-delay:-4.8s}
.rig img{position:relative;z-index:1;padding:1.3rem 1.2rem 0;filter:drop-shadow(0 20px 30px #000c);transition:transform .5s var(--ease-out)}
.rig:hover img{transform:scale(1.04)}
.rig__glow{
  position:absolute;left:10%;right:10%;bottom:8%;height:26%;z-index:0;
  background:radial-gradient(55% 100% at 50% 55%, #ff2d7847 0%, #8a5cff22 55%, transparent 75%);
  filter:blur(10px);animation:rgbpulse 4.5s ease-in-out infinite;
}
.rig--transcend .rig__glow{background:radial-gradient(55% 100% at 50% 55%, #19e0d842 0%, #0e9ae022 55%, transparent 75%)}
.rig--tower .rig__glow{background:radial-gradient(55% 100% at 50% 55%, #8a5cff47 0%, #ff2d7822 55%, transparent 75%);animation-delay:-1.6s}
@keyframes rgbpulse{0%,100%{opacity:.65;transform:scaleX(.95)}50%{opacity:1;transform:scaleX(1.05)}}
.rig__plate{position:relative;z-index:1;padding:0 1.4rem}
.rig__plate h3{
  margin:.5rem 0 .3rem;font-size:1.3rem;letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 0 18px #ff2d7855;
}
.rig--transcend .rig__plate h3{text-shadow:0 0 18px #19e0d855}
.rig__plate p{margin:0;color:#d9c8d4;font-size:.9rem}
.rig .btn{margin-top:.4rem}

.glitch{position:relative}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;overflow:hidden;pointer-events:none;
}
.glitch::before{color:#ff2d78;clip-path:inset(12% 0 76% 0);animation:glitch 3.7s steps(1) infinite;opacity:0}
.glitch::after{color:#19e0d8;clip-path:inset(64% 0 8% 0);animation:glitch 3.7s steps(1) infinite reverse;opacity:0}
@keyframes glitch{
  0%,91%,100%{opacity:0;transform:none}
  92%{opacity:.8;transform:translate(-3px,-1px)}
  94%{opacity:.8;transform:translate(3px,1px)}
  96%{opacity:.8;transform:translate(-2px,0)}
  98%{opacity:0}
}

.hyperx{
  margin-top:1.6rem;display:grid;gap:1.2rem;align-items:center;
  background:linear-gradient(170deg,#101820,#0c0710 70%);
  border:1px solid #19e0d826;border-radius:22px;padding:1.2rem;
  box-shadow:0 20px 60px #0009;
}
@media (min-width:700px){ .hyperx{grid-template-columns:auto 1fr} .hyperx img{max-width:230px} }
.hyperx img{border-radius:14px;border:1px solid #ffffff14}
.hyperx h3{margin:.2rem 0 .3rem;color:#c8fffb;letter-spacing:.02em}
.hyperx p{margin:0 0 .8rem;color:#a9bfc4;font-size:.92rem}

/* ── ACT IV · print bench ───────────────────────────────────── */
.printstage{display:grid;gap:1.6rem;margin-top:2.2rem;position:relative;z-index:1}
@media (min-width:900px){ .printstage{grid-template-columns:1.2fr 1fr;align-items:start} }
.printer{
  background:linear-gradient(170deg,#26221b,#181410 70%);
  padding-bottom:1.5rem;cursor:pointer;
}
.printer__obj{position:relative;padding:1.2rem 1.6rem 12.5rem}
.printer__obj > img{position:relative;z-index:2;filter:drop-shadow(0 24px 30px #000a);margin-inline:auto}
.papertray{
  position:absolute;left:50%;bottom:.4rem;transform:translateX(-50%);
  width:min(42%,220px);z-index:3;pointer-events:none;
}
.paper{
  width:100%;height:0;overflow:hidden;background:var(--paper);
  border-radius:0 0 6px 6px;box-shadow:0 22px 34px #000b;
  transition:height 2.8s cubic-bezier(.3,.02,.2,1);
}
.paper canvas{width:100%;height:auto;display:block}
.printer__plate{padding:0 1.6rem}
.printer__plate h3{margin:.6rem 0 .3rem}
.printer__plate p{margin:0;color:var(--ink-soft);font-size:.92rem}
.printer .printer__hint{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:.8rem}

.printcol{display:grid;gap:1rem}
.printcard{
  display:grid;grid-template-columns:110px 1fr;gap:1rem;align-items:center;
  padding:1rem;animation:none;
}
.printcard img{
  width:110px;height:100px;object-fit:contain;
  background:radial-gradient(70% 70% at 50% 45%,#f5eee410,#00000010);
  border-radius:12px;padding:.4rem;
}
.printcard h3{margin:0 0 .2rem;font-size:1rem}
.printcard h3 s{color:var(--faint);font-weight:400;font-size:.8rem;margin-left:.3rem}
.printcard p{margin:0;font-size:.84rem;color:var(--ink-soft)}
.printcard p a{color:var(--hp);text-decoration:none}
.printcard p a:hover{text-decoration:underline}
.printstage__foot{margin-top:2rem;color:var(--dim);font-size:.94rem}
.printstage__foot a{color:var(--hp);text-decoration:none}
.printstage__foot a:hover{text-decoration:underline}

/* ── ACT V · helpful rail ───────────────────────────────────── */
.rail{display:grid;gap:1.1rem;margin-top:2.2rem}
@media (min-width:760px){ .rail{grid-template-columns:repeat(4,1fr)} }
.rail__card{
  position:relative;padding:1.3rem 1.2rem 1.4rem;border-radius:18px;
  background:linear-gradient(170deg,#241b12,#171210 70%);
  border:1px solid #ffffff0d;box-shadow:0 14px 40px #0008;
  transition:transform .3s var(--ease-out),box-shadow .3s;
}
.rail__card:hover{transform:translateY(-6px);box-shadow:0 26px 54px #000a}
.rail__icon{
  display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:#ffb26b17;border:1px solid #ffb26b33;margin-bottom:.7rem;
}
.rail__icon svg{width:22px;height:22px;fill:none;stroke:var(--amber);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rail__card h3{margin:0 0 .3rem;font-size:1.02rem}
.rail__card p{margin:0;font-size:.85rem;color:var(--ink-soft)}

.storestrip{
  margin-top:1.6rem;padding:1.4rem;border-radius:20px;
  background:linear-gradient(170deg,#1d1610,#120e0b 70%);
  border:1px solid #ffffff0e;box-shadow:0 18px 50px #0009;
}
.storestrip__title{margin:0 0 1rem;font-size:1.15rem;letter-spacing:-.01em}
.storestrip__title span{font-size:.78rem;font-weight:400;color:var(--dim)}
.storestrip__list{
  list-style:none;margin:0;padding:0;display:grid;gap:.5rem;
}
@media (min-width:680px){ .storestrip__list{grid-template-columns:repeat(5,1fr)} }
.storestrip__list a{
  display:flex;flex-direction:column;gap:.15rem;text-decoration:none;
  padding:.75rem .9rem;border-radius:12px;border:1px solid #ffffff10;
  background:#ffffff06;transition:background .25s,transform .25s,border-color .25s;
}
.storestrip__list a:hover{background:#ffffff0d;transform:translateY(-3px);border-color:#0e9ae055}
.storestrip__list b{font-size:.88rem;font-weight:600}
.storestrip__list span{font-size:.8rem;color:var(--amber-soft)}
.storestrip__list s{color:var(--faint);font-size:.72rem;margin-left:.3rem}
.storestrip__note{margin:1rem 0 0;font-size:.72rem;color:var(--faint)}

.supportrow{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.supportrow a{
  text-decoration:none;font-size:.82rem;font-weight:500;color:var(--ink-soft);
  border:1px solid #ffffff1c;padding:.5rem 1rem;border-radius:2rem;
  transition:background .25s,color .25s,transform .2s;
}
.supportrow a:hover{background:#ffffff10;color:var(--ink);transform:translateY(-2px)}

/* ── outro ──────────────────────────────────────────────────── */
.act--outro .act__stage{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.act--outro h2{margin:0 0 1rem;font-size:clamp(1.9rem,4vw,3.2rem);letter-spacing:-.02em;line-height:1.1}
.act--outro p{margin:0 0 1.6rem;color:var(--ink-soft);max-width:34rem}
.outro__lamp{position:relative;width:1px;height:90px;margin-bottom:1.6rem}
.outro__lamp::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#ffb26b00,var(--amber))}
.outro__lamp i{
  position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;background:var(--amber-soft);
  box-shadow:0 0 40px 12px #ffb26b99, 0 0 130px 60px #ffb26b33;
  animation:ember 4s ease-in-out infinite;
}
@keyframes ember{0%,100%{opacity:.85}50%{opacity:1}}

.postcards{
  display:grid;gap:1rem;margin-top:3rem;width:min(100%,62rem);
}
@media (min-width:700px){ .postcards{grid-template-columns:repeat(3,1fr)} }
.postcard{
  position:relative;border-radius:16px;overflow:hidden;text-decoration:none;
  border:1px solid #ffffff10;box-shadow:0 16px 44px #0009;
  aspect-ratio:4/2.7;
  transition:transform .3s var(--ease-out),box-shadow .3s;
}
.postcard:hover{transform:translateY(-5px);box-shadow:0 28px 60px #000b}
.postcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-soft);filter:saturate(.85) brightness(.72)}
.postcard:hover img{transform:scale(1.05);filter:saturate(1) brightness(.82)}
.postcard span{
  position:absolute;left:.9rem;right:.9rem;bottom:.8rem;display:block;
  font-size:.78rem;color:#e8dfd3;text-shadow:0 2px 10px #000c;
}
.postcard b{display:block;font-size:.95rem;letter-spacing:-.01em;margin-bottom:.1rem}

@media (min-width:900px) and (max-height:1000px){
  .postcards{margin-top:1.6rem}
  .postcard{aspect-ratio:4/2}
}

/* ── footer ─────────────────────────────────────────────────── */
.footer{
  position:relative;z-index:2;margin-top:0;
  background:linear-gradient(180deg,#0d0b0800,#080605 18%);
  border-top:1px solid var(--line);
  padding:3rem clamp(1.2rem,4vw,3.5rem) 1.6rem;
}
.footer__grid{
  max-width:1240px;margin-inline:auto;display:grid;gap:2rem;
  grid-template-columns:1fr;
}
@media (min-width:820px){ .footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr} }
.footer__brandcol p{font-size:.78rem;color:var(--faint);max-width:34rem}
.brand__mark--foot{width:36px;height:36px;margin-bottom:1rem}
.footer__locale{color:var(--dim)!important}
.footer__col{display:flex;flex-direction:column;gap:.5rem}
.footer__col h4{
  margin:0 0 .4rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.footer__col a{font-size:.84rem;color:var(--ink-soft);text-decoration:none;transition:color .2s}
.footer__col a:hover{color:var(--ink)}
.footer__legal{
  max-width:1240px;margin:2.4rem auto 0;padding-top:1.2rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  font-size:.72rem;color:var(--faint);
}
.footer__legal a{color:var(--dim);text-decoration:none}
.footer__legal a:hover{color:var(--ink)}

/* ── entrance choreography driven by --p (scroll progress) ──── */
@media (min-width:900px){
  .act__head{transform:translateY(calc((1 - var(--vis,1)) * 34px));opacity:calc(.25 + var(--vis,1)*.75)}
  .pedestals{transform:translateY(calc((1 - var(--vis,1)) * 60px));opacity:calc(.1 + var(--vis,1)*.9)}
  .bench{transform:translateY(calc((1 - var(--vis,1)) * 60px));opacity:calc(.1 + var(--vis,1)*.9)}
  .rigs{transform:translateY(calc((1 - var(--vis,1)) * 60px));opacity:calc(.1 + var(--vis,1)*.9)}
  .printstage,.rail,.storestrip{transform:translateY(calc((1 - var(--vis,1)) * 50px));opacity:calc(.1 + var(--vis,1)*.9)}
  .act__head,.pedestals,.bench,.rigs,.printstage,.rail,.storestrip{transition:transform .15s linear,opacity .15s linear}
}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:899px){
  .deskmap{display:none}
  .topnav{display:none}
  .act__stage{padding-top:5.5rem}
  .hero__h1{font-size:clamp(2rem,8.4vw,3rem)}
  .monitor{width:100%}
  .hero__message{margin-top:0}
  .scrollcue{display:none}
  .printcard{grid-template-columns:86px 1fr}
  .printcard img{width:86px;height:80px}
}
@media (max-width:480px){
  .brand__word em{display:none}
  .topcta{font-size:.74rem;padding:.45rem .8rem}
  .hero__cta .btn{width:100%;justify-content:center}
  .storestrip__list a{flex-direction:row;justify-content:space-between;align-items:baseline}
}

/* ── short-stage compaction: pinned acts must fit 100vh ─────── */
@media (min-width:900px) and (max-height:1000px){
  .act__stage{padding-top:4.6rem;padding-bottom:2rem}
  .act__title{font-size:clamp(1.7rem,3.6vw,2.7rem)}
  .act__head .lede{font-size:.94rem}
  .pedestals{margin-top:1.4rem}
  .ped__obj img{max-height:200px;margin-inline:auto}
  .ped__obj{padding-bottom:0}
  .ped__plate{padding-bottom:1.1rem}
  .material__frame img{max-height:170px;object-fit:cover;width:100%}
  .bench{margin-top:1.4rem}
  .tile__obj img{max-height:150px;margin-inline:auto}
  .rigs{margin-top:1.2rem}
  .rig img{max-height:170px;margin-inline:auto}
  .rig__plate p{font-size:.85rem}
  .hyperx{margin-top:1rem;padding:.9rem}
  .hyperx img{max-height:120px;width:auto}
  .printer__obj > img{max-height:250px;margin-inline:auto}
  .printcard{padding:.7rem}
  .printcard img{width:90px;height:78px}
  .printstage{margin-top:1.4rem}
  .rail{margin-top:1.4rem}
  .storestrip{margin-top:1rem;padding:1.1rem 1.2rem}
  .supportrow{margin-top:1rem}
}

/* ── reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .grain{animation:none}
  .scrollcue i{animation:none;transform:scaleY(1)}
  html{scroll-behavior:auto}
}