/* ============================================================
   RESONANCE — Ember-8 · hardware-rack aesthetic
   charcoal panels · brushed aluminum · cream silkscreen · amber LEDs
   ============================================================ */

:root{
  --charcoal:#16171b;
  --charcoal-2:#1c1d23;
  --charcoal-3:#22242b;
  --panel:#191a20;
  --line:#2c2e36;
  --cream:#ece5d3;
  --cream-dim:#b3ac9c;
  --cream-faint:#938e80;
  --amber:#ffb454;
  --amber-deep:#c97f22;
  --amber-glow:rgba(255,180,84,.55);
  --scope-bg:#0b0c0f;
  --rack-shadow:rgba(0,0,0,.54);
  --alu-hi:#c8ccd3;
  --alu-mid:#a9adb5;
  --alu-lo:#7e828a;
  --ink-on-alu:#1a1b20;
  --font-display:'Dela Gothic One', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --pad: clamp(1rem, 4vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; color-scheme:dark; }
html{ scrollbar-color:rgba(255,180,84,.68) #101116; scrollbar-width:thin; }
body{
  margin:0;
  background:var(--charcoal);
  background-image:
    radial-gradient(1200px 600px at 76% -10%, rgba(255,180,84,.075), transparent 58%),
    radial-gradient(900px 540px at 6% 92%, rgba(255,180,84,.045), transparent 62%),
    linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 160px),
    linear-gradient(180deg, #17181d 0%, #111216 100%);
  background-attachment:fixed;
  color:var(--cream);
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1.65;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1, "zero" 1;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(255,180,84,.18);
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#101116; }
::-webkit-scrollbar-thumb{
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(0,0,0,.22)),
    var(--amber-deep);
  border:2px solid #101116;
  border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{ background:var(--amber); }
::selection{ background:var(--amber); color:var(--charcoal); }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.15;
  margin:0;
  text-wrap:balance;
  text-rendering:geometricPrecision;
}
p{ margin:0 0 1rem; text-wrap:pretty; }
a{ color:var(--amber); }
kbd{
  font-family:var(--font-mono);
  font-size:.78em;
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:4px;
  padding:.08em .42em;
  background:var(--charcoal-3);
  color:var(--cream);
}
:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.skip-link{
  position:fixed; left:var(--pad); top:.75rem; z-index:60;
  transform:translateY(-160%);
  color:var(--charcoal); background:var(--amber);
  font-family:var(--font-mono); font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:.65rem .85rem; border-radius:4px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  transition:transform .18s cubic-bezier(.2,.7,.2,1);
}
.skip-link:focus-visible{ transform:translateY(0); outline:2px solid var(--cream); outline-offset:3px; }

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

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:30;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 1rem;
  padding:.4rem var(--pad);
  background:linear-gradient(180deg, rgba(22,23,27,.96), rgba(22,23,27,.88));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:var(--font-display);
  font-size:1.08rem;
  letter-spacing:.14em;
  color:var(--cream);
  text-decoration:none;
  display:flex; align-items:center; gap:.55rem;
  min-height:44px;
}
.brand-led{
  width:9px; height:9px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 8px 2px var(--amber-glow);
  animation:led-idle 3.2s ease-in-out infinite;
}
html.is-powered .brand-led{
  opacity:1;
  box-shadow:0 0 calc(8px + var(--amp, 0) * 16px) 2px rgba(255,180,84,.75);
}
@keyframes led-idle{ 0%,100%{opacity:.55} 50%{opacity:1} }
.site-head nav{ display:flex; gap:clamp(.2rem,1.5vw,.75rem); }
.site-head nav a{
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream-dim); text-decoration:none;
  padding:.85rem .55rem; min-height:44px;
  display:inline-flex; align-items:center;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.site-head nav a:hover,
.site-head nav a:focus-visible{ color:var(--amber); border-bottom-color:var(--amber); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:min(720px, calc(100svh - 58px));
  display:grid;
  align-items:center;
  padding:clamp(2.4rem,6vh,4.8rem) var(--pad) clamp(1.2rem,4vh,2.4rem);
  overflow:hidden;
}
.hero-rails{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(255,180,84,.18) calc(50% - 1px) 50%, transparent 50%),
    repeating-linear-gradient(180deg,
      transparent 0 150px,
      rgba(255,255,255,.026) 150px 151px,
      transparent 151px 300px);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 72%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 72%);
}
.hero-inner{
  position:relative; z-index:1;
  max-width:72rem; margin:0 auto; width:100%;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(17rem, 25rem);
  gap:clamp(1.8rem, 6vw, 5rem);
  align-items:center;
}
.hero-copy{ min-width:0; }
.hero-kicker{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--amber); margin-bottom:1.4rem;
}
.hero-title{
  font-size:7.35rem;
  letter-spacing:0;
  line-height:.86;
  color:var(--cream);
  text-shadow:0 0 54px rgba(255,180,84,.2);
  margin-bottom:1.2rem;
}
.hero-dash{ color:var(--amber); }
.hero-sub{
  max-width:42rem;
  color:var(--cream-dim);
  font-size:1.04rem;
}
.hero-sub strong{ color:var(--amber); font-weight:600; }
.hero-cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem;
  margin-top:2rem;
}
.hero-hint{ font-size:.75rem; color:var(--cream-faint); letter-spacing:.06em; }

.hero-console{
  position:relative;
  justify-self:end;
  width:100%;
  min-height:23rem;
  padding:1.4rem 1.15rem 1.05rem;
  border:1px solid #090a0d;
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 16%, rgba(0,0,0,.25)),
    linear-gradient(120deg, #20222a, #14151a 72%);
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -18px 36px rgba(0,0,0,.38);
  transform:rotate(1deg);
}
.hero-console::before{
  content:"";
  position:absolute; inset:3.4rem 1.05rem auto; height:7px; border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(0,0,0,.25)),
    repeating-linear-gradient(90deg, var(--alu-hi) 0 1px, var(--alu-mid) 1px 3px, var(--alu-lo) 3px 4px);
  border:1px solid #07080b;
}
.console-top{
  display:flex; justify-content:space-between; gap:1rem;
  color:var(--cream-faint);
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  margin-bottom:2rem;
}
.console-scope{
  height:8.5rem; border-radius:6px;
  background:
    linear-gradient(rgba(255,180,84,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,180,84,.06) 1px, transparent 1px),
    #090a0d;
  background-size:100% 25%, 25% 100%, auto;
  border:1px solid #05060a;
  box-shadow:inset 0 0 24px rgba(0,0,0,.82);
  display:flex; align-items:end; gap:3.2%;
  padding:1rem .9rem .8rem;
}
.console-scope span{
  flex:1; min-width:0; border-radius:2px 2px 0 0;
  background:linear-gradient(180deg, #ffd9a0, var(--amber));
  opacity:.32;
  transform-origin:bottom;
  animation:console-bars 2.4s ease-in-out infinite;
}
.console-scope span:nth-child(1){ height:32%; animation-delay:-.3s; }
.console-scope span:nth-child(2){ height:68%; animation-delay:-.8s; }
.console-scope span:nth-child(3){ height:48%; animation-delay:-1.4s; }
.console-scope span:nth-child(4){ height:82%; animation-delay:-.55s; }
.console-scope span:nth-child(5){ height:38%; animation-delay:-1.8s; }
.console-scope span:nth-child(6){ height:58%; animation-delay:-1.05s; }
@keyframes console-bars{ 0%,100%{ transform:scaleY(.62); opacity:.28; } 50%{ transform:scaleY(1); opacity:.82; } }
.console-bank{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:.7rem;
  margin:1.15rem .2rem 1.05rem;
}
.console-bank i{
  position:relative; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.14), transparent 40%),
    conic-gradient(from 200deg, #30323a, #111216 42%, #2e3038 68%, #0d0e11);
  border:1px solid #06070a;
  box-shadow:0 5px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  transform:rotate(var(--rot));
}
.console-bank i::after{
  content:""; position:absolute; left:calc(50% - 2px); top:12%;
  width:4px; height:28%; border-radius:2px;
  background:var(--amber); box-shadow:0 0 8px var(--amber-glow);
}
.console-keys{ display:grid; grid-template-columns:repeat(8, 1fr); gap:5px; }
.console-keys span{
  height:3.2rem; border-radius:4px;
  background:linear-gradient(180deg, #2a2c33, #18191f);
  border:1px solid #090a0d;
  box-shadow:0 3px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.console-keys span:nth-child(3),
.console-keys span:nth-child(6){
  transform:translateY(3px);
  background:linear-gradient(180deg, #191a20, #24262e);
  box-shadow:0 1px 0 rgba(0,0,0,.6), inset 0 2px 6px rgba(0,0,0,.45), 0 0 14px rgba(255,180,84,.14);
}
html.is-powered .hero-console{ box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06), 0 0 calc(10px + var(--amp, 0) * 38px) rgba(255,180,84,.18); }

.btn-amber{
  font-family:var(--font-mono); font-weight:600;
  font-size:.8rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--charcoal); text-decoration:none;
  background:linear-gradient(180deg, #ffc678, var(--amber) 45%, var(--amber-deep));
  border:1px solid #7a4d12;
  border-radius:6px;
  padding:.95rem 1.6rem;
  min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.5), 0 0 22px rgba(255,180,84,.22), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .12s, box-shadow .2s;
}
.btn-amber:hover{ transform:translateY(-1px); box-shadow:0 3px 0 rgba(0,0,0,.5), 0 0 32px rgba(255,180,84,.4), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-amber:active{ transform:translateY(1px); box-shadow:0 0 0 rgba(0,0,0,.5), 0 0 12px rgba(255,180,84,.25); }

.hero-wave{
  display:block; width:100%; height:clamp(72px, 12vw, 150px);
  margin-top:clamp(.8rem,2vh,1.4rem);
}
.wp{ fill:none; stroke-width:2; }
.wp1{ stroke:var(--amber); opacity:.8; }
.wp2{ stroke:var(--amber); opacity:.25; stroke-width:1.4; }
.wave-scroll{ animation:wave-drift 9s linear infinite; }
@keyframes wave-drift{ from{transform:translateX(0)} to{transform:translateX(-200px)} }

.hero-chips{
  position:relative;
  display:flex; flex-wrap:wrap; gap:.5rem;
  max-width:72rem; margin:.7rem auto 0;
}
.chip{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream-dim);
  border:1px solid var(--line);
  border-radius:99px;
  padding:.42rem .8rem;
  background:rgba(28,29,35,.6);
}

/* ---------- section chrome ---------- */
main section{ padding:clamp(3.4rem,7vh,6rem) var(--pad); }
.section-head{ max-width:72rem; margin:0 auto 2.3rem; }
.section-head h2{
  font-size:2.5rem;
  color:var(--cream);
  display:flex; align-items:baseline; gap:1rem;
  margin-bottom:1rem;
}
.idx{
  font-family:var(--font-mono); font-weight:400;
  font-size:.65em; color:var(--amber);
  letter-spacing:.1em;
}
.section-sub{ max-width:44rem; color:var(--cream-dim); font-size:.92rem; }
.section-sub strong{ color:var(--cream); }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(18px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.r1{ animation-delay:.05s } .r2{ animation-delay:.15s } .r3{ animation-delay:.3s }
.r4{ animation-delay:.45s } .r5{ animation-delay:.55s } .r6{ animation-delay:.4s }
@keyframes rise{ to{ opacity:1; transform:none; } }
.hero-console.reveal{ transform:translateY(18px) rotate(1deg); animation-name:console-rise; }
@keyframes console-rise{ to{ opacity:1; transform:rotate(1deg); } }

/* scroll-triggered reveals: only hidden when JS is confirmed present */
html.js .scroll-reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
html.js .scroll-reveal.in-view{ opacity:1; transform:none; }
html.js .module-grid .scroll-reveal:nth-child(2){ transition-delay:.1s; }
html.js .module-grid .scroll-reveal:nth-child(3){ transition-delay:.2s; }

/* ============================================================
   THE RACK UNIT
   ============================================================ */
.play-section{
  position:relative;
  padding-top:clamp(1.8rem,4vh,3.2rem);
}
.play-section::before{
  content:"";
  position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,180,84,.45), transparent);
}
.rack-unit{
  max-width:72rem; margin:0 auto;
  display:grid;
  grid-template-columns:30px 1fr 30px;
  gap:0;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
.rack-ear{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25)),
    repeating-linear-gradient(0deg, #34363e 0 2px, #2b2d34 2px 4px);
  border:1px solid #0c0d10;
  border-radius:6px 0 0 6px;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:18px 0;
}
.rack-ear:last-child{ border-radius:0 6px 6px 0; }
.rack-ear i{
  width:10px; height:16px; border-radius:5px;
  background:radial-gradient(circle at 40% 35%, #050608, #101116 70%);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06);
}

.panel{
  position:relative;
  background:
    radial-gradient(900px 340px at 20% -12%, rgba(255,180,84,.06), transparent 48%),
    radial-gradient(520px 260px at 80% 4%, rgba(255,255,255,.035), transparent 56%),
    linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 12%, rgba(0,0,0,.25) 100%),
    var(--panel);
  border:1px solid #0c0d10;
  border-left-color:#26272e;
  border-right-color:#26272e;
  padding:clamp(.9rem, 3vw, 2rem) clamp(.9rem, 3.4vw, 2.4rem) clamp(1rem, 3vw, 1.8rem);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -12px 30px rgba(0,0,0,.35);
}
.panel::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px),
    linear-gradient(120deg, transparent 0 46%, rgba(255,180,84,.045) 47%, transparent 49%);
  opacity:.72;
  mix-blend-mode:screen;
}
.panel.is-booting{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -12px 30px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,180,84,.2),
    0 0 44px rgba(255,180,84,.18);
}

/* screws */
.screw{
  position:absolute; width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #d6d9de, #8b8f96 45%, #4a4d53 78%, #2c2e33);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.65), 0 1px 1px rgba(255,255,255,.07);
}
.screw::after{
  content:""; position:absolute; left:18%; right:18%; top:calc(50% - 1px); height:2px;
  background:#26282d; border-radius:1px;
}
.s-tl{ top:9px; left:9px; } .s-tl::after{ transform:rotate(24deg); }
.s-tr{ top:9px; right:9px; } .s-tr::after{ transform:rotate(-52deg); }
.s-bl{ bottom:9px; left:9px; } .s-bl::after{ transform:rotate(80deg); }
.s-br{ bottom:9px; right:9px; } .s-br::after{ transform:rotate(-18deg); }

/* panel head */
.panel-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:1rem;
}
.panel-logo{
  display:block;
  font-family:var(--font-display);
  font-size:1.35rem;
  letter-spacing:.16em; color:var(--cream);
}
.panel-model{
  display:block;
  font-size:.62rem; letter-spacing:.2em; color:var(--cream-faint);
  margin-top:.25rem;
}
.power-block{ display:flex; align-items:center; gap:.8rem; }

.led{
  width:11px; height:11px; border-radius:50%;
  background:#3a3123;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  transition:background .25s, box-shadow .25s;
}
.led.on{
  background:var(--amber);
  box-shadow:0 0 6px 1px var(--amber-glow), 0 0 18px 4px rgba(255,180,84, calc(.18 + var(--amp,0) * .6));
}
.led-power.on{ background:radial-gradient(circle at 40% 35%, #ffe0ae, var(--amber) 60%); }

.power-switch{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  background:none; border:none; cursor:pointer; color:var(--cream-dim);
  font-family:var(--font-mono); padding:.4rem; min-height:44px; min-width:44px;
}
.power-switch:hover,
.power-switch:focus-visible{ color:var(--cream); }
.power-switch:hover .ps-track,
.power-switch:focus-visible .ps-track{
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.8),
    0 0 18px rgba(255,180,84,.2);
}
.ps-track{
  display:block; width:58px; height:26px; border-radius:14px;
  background:linear-gradient(180deg, #0c0d10, #1f2127);
  border:1px solid #05060a;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.06);
  position:relative;
}
.ps-handle{
  position:absolute; top:2px; left:2px;
  width:26px; height:20px; border-radius:11px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.28)),
    repeating-linear-gradient(90deg, var(--alu-mid) 0 1px, var(--alu-lo) 1px 2px);
  border:1px solid #101116;
  box-shadow:0 2px 4px rgba(0,0,0,.55);
  transition:left .18s cubic-bezier(.4,0,.2,1), background-color .18s;
}
.power-switch[aria-checked="true"] .ps-handle{ left:28px; }
.power-switch[aria-checked="true"] .ps-track{
  background:linear-gradient(180deg, #241a09, #3d2c0e);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.8), inset 0 0 12px rgba(255,180,84,.3);
}
.ps-label{ font-size:.62rem; letter-spacing:.26em; }
.power-switch.nudge .ps-label{ color:var(--amber); animation:nudge .5s ease 2; }
@keyframes nudge{ 0%,100%{transform:none} 50%{transform:translateY(-2px)} }

.alu-strip{
  height:8px; border-radius:4px; margin-bottom:1.3rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%, rgba(0,0,0,.35)),
    repeating-linear-gradient(90deg, var(--alu-hi) 0 1px, var(--alu-mid) 1px 3px, var(--alu-lo) 3px 4px);
  border:1px solid #0c0d10;
}

/* power-on calibration reveal */
.boot-sequence{
  position:absolute;
  inset:4.2rem clamp(.7rem, 2vw, 1.6rem) auto;
  z-index:8;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(-8px) scale(.985);
  transition:
    opacity .22s ease,
    transform .34s cubic-bezier(.2,.7,.2,1);
}
.panel.is-booting .boot-sequence{
  opacity:1;
  transform:none;
}
.boot-card{
  position:relative;
  width:min(100%, 34rem);
  border:1px solid rgba(255,180,84,.38);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,180,84,.12), rgba(255,180,84,.035)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 10px),
    rgba(10,11,14,.94);
  box-shadow:
    0 22px 54px rgba(0,0,0,.62),
    0 0 34px rgba(255,180,84,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
  padding:.85rem .95rem .9rem;
  overflow:hidden;
}
.boot-card::before{
  content:"";
  position:absolute;
  inset:-30% auto -30% -20%;
  width:28%;
  background:linear-gradient(90deg, transparent, rgba(255,180,84,.24), transparent);
  transform:skewX(-16deg);
  animation:boot-scan 1.45s cubic-bezier(.2,.7,.2,1) both;
}
.boot-card > *{
  position:relative;
  z-index:1;
}
.boot-title{
  display:block;
  color:var(--amber);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  margin-bottom:.55rem;
}
.boot-meter{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:4px;
  margin-bottom:.65rem;
}
.boot-meter i{
  height:9px;
  border-radius:2px;
  background:#33291b;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  animation:boot-meter 1.18s ease-in-out both;
}
.boot-meter i:nth-child(2){ animation-delay:.06s; }
.boot-meter i:nth-child(3){ animation-delay:.12s; }
.boot-meter i:nth-child(4){ animation-delay:.18s; }
.boot-meter i:nth-child(5){ animation-delay:.24s; }
.boot-meter i:nth-child(6){ animation-delay:.3s; }
.boot-meter i:nth-child(7){ animation-delay:.36s; }
.boot-meter i:nth-child(8){ animation-delay:.42s; }
.boot-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.38rem .7rem;
}
.boot-list li{
  display:flex;
  align-items:center;
  gap:.45rem;
  color:var(--cream-faint);
  font-size:.59rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.boot-list li span{
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 auto;
  background:#3a3123;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.7);
}
.boot-list li.lit{
  color:var(--cream);
  text-shadow:0 0 10px rgba(255,180,84,.2);
}
.boot-list li.lit span{
  background:var(--amber);
  box-shadow:0 0 8px 2px var(--amber-glow);
}
@keyframes boot-scan{
  from{ transform:translateX(0) skewX(-16deg); opacity:0; }
  18%{ opacity:1; }
  to{ transform:translateX(520%) skewX(-16deg); opacity:0; }
}
@keyframes boot-meter{
  0%,100%{ background:#33291b; box-shadow:inset 0 1px 2px rgba(0,0,0,.7); }
  38%,70%{ background:var(--amber); box-shadow:0 0 8px rgba(255,180,84,.58); }
}

/* scopes */
.scopes{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(.7rem,2vw,1.2rem);
  margin-bottom:1.4rem;
}
.scope{ margin:0; }
.scope-bezel{
  border-radius:8px;
  padding:6px;
  background:linear-gradient(180deg, #0a0b0d, #23252c);
  border:1px solid #05060a;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.05);
}
.scope canvas{
  display:block; width:100%; height:130px;
  background:var(--scope-bg);
  border-radius:4px;
}
.scope figcaption{
  font-size:.6rem; letter-spacing:.24em; color:var(--cream-faint);
  margin-top:.45rem; text-align:center;
}

/* controls row */
.controls{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:clamp(1rem, 3vw, 2.4rem);
  padding:1.1rem clamp(.4rem,1.5vw,1rem) 1.3rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:1.3rem;
}
.ctrl-legend{
  display:block;
  font-size:.6rem; letter-spacing:.26em; color:var(--cream-faint);
  text-transform:uppercase;
  margin-bottom:.6rem; padding:0;
}
.wave-select{ border:none; margin:0; padding:0; }
.wave-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:.45rem; }
.wave-btn{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em;
  color:var(--cream-dim);
  background:linear-gradient(180deg, #23252c, #17181d);
  border:1px solid #0c0d10;
  border-radius:5px;
  padding:.55rem .7rem;
  min-height:44px; min-width:60px;
  display:flex; align-items:center; gap:.45rem;
  cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  transition:color .15s, box-shadow .15s, transform .1s;
}
.wave-btn:hover,
.wave-btn:focus-visible{ color:var(--cream); box-shadow:0 2px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06), 0 0 16px rgba(255,180,84,.16); }
.wave-btn:active{ transform:translateY(1px); }
.wave-btn[aria-checked="true"]{
  color:var(--amber);
  box-shadow:0 1px 0 rgba(0,0,0,.4), inset 0 2px 5px rgba(0,0,0,.5);
  background:linear-gradient(180deg, #17181d, #1d1e25);
}
.wled{
  width:7px; height:7px; border-radius:50%;
  background:#3a3123; box-shadow:inset 0 1px 1px rgba(0,0,0,.6);
  transition:background .15s, box-shadow .15s;
}
.wave-btn[aria-checked="true"] .wled{
  background:var(--amber);
  box-shadow:0 0 6px 1px var(--amber-glow);
}

/* knobs */
.knob-row{
  display:flex; justify-content:center; gap:clamp(1.2rem, 4vw, 3rem);
  flex-wrap:wrap;
}
.knob-unit{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.knob{
  position:relative;
  width:clamp(74px, 9vw, 92px); height:clamp(74px, 9vw, 92px);
  cursor:ns-resize;
  touch-action:none;
  border-radius:50%;
}
.knob-ticks{ position:absolute; inset:-12px; width:calc(100% + 24px); height:calc(100% + 24px); overflow:visible; }
.knob-ticks line{ stroke:#4a4c55; stroke-width:2; }
.knob-ticks line.lit{ stroke:var(--amber); }
.knob-cap{
  position:absolute; inset:8px; border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.16), transparent 42%),
    conic-gradient(from 200deg, #2c2e35, #16171c 40%, #2c2e35 70%, #101115),
    #1b1c22;
  border:1px solid #07080b;
  box-shadow:
    0 4px 10px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -3px 6px rgba(0,0,0,.5);
  transform:rotate(var(--rot, 0deg));
  transition:box-shadow .2s;
}
.knob:hover .knob-cap,
.knob:focus-visible .knob-cap{ box-shadow:0 4px 12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -3px 6px rgba(0,0,0,.5), 0 0 14px rgba(255,180,84,.22); }
.knob-ind{
  position:absolute; left:calc(50% - 2px); top:9%;
  width:4px; height:26%;
  border-radius:2px;
  background:var(--amber);
  box-shadow:0 0 6px var(--amber-glow);
}
.knob-label{ font-size:.62rem; letter-spacing:.24em; color:var(--cream-dim); }
.knob-value{
  font-size:.68rem; color:var(--amber);
  background:#101116; border:1px solid #05060a; border-radius:4px;
  padding:.14rem .5rem; min-width:64px; text-align:center;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
  font-variant-numeric:tabular-nums;
}

/* VU meter */
.vu{ display:flex; flex-direction:column; align-items:center; }
.vu-col{
  display:flex; flex-direction:column-reverse; gap:4px;
  padding:8px 10px;
  background:#101116; border:1px solid #05060a; border-radius:6px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7);
}
.vu-seg{
  width:26px; height:7px; border-radius:2px;
  background:#33291b;
  transition:background .06s, box-shadow .06s;
}
.vu-seg.lit{ background:var(--amber); box-shadow:0 0 6px 1px rgba(255,180,84,.5); }
.vu-seg:nth-child(9).lit, .vu-seg:nth-child(10).lit{
  background:#ffd9a0; box-shadow:0 0 8px 2px rgba(255,217,160,.6);
}

/* keys */
.keys{
  display:grid; grid-template-columns:repeat(8, 1fr); gap:7px;
}
.key{
  position:relative;
  font-family:var(--font-mono);
  min-height:96px;
  border-radius:6px;
  border:1px solid #0a0b0e;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.015) 30%, rgba(0,0,0,.3)),
    linear-gradient(180deg, #26282f, #1a1b21);
  box-shadow:0 4px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
  color:var(--cream-dim);
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:.35rem; padding:.6rem .2rem .7rem;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  transition:transform .06s, box-shadow .06s, background .15s;
}
.key kbd{ background:transparent; border-color:#3a3c45; color:var(--cream); }
.key-note{ font-size:.6rem; letter-spacing:.14em; color:var(--cream-faint); }
.key-led{
  position:absolute; top:8px; left:calc(50% - 4px);
  width:8px; height:8px; border-radius:50%;
  background:#3a3123; box-shadow:inset 0 1px 1px rgba(0,0,0,.6);
  transition:background .08s, box-shadow .08s;
}
.key.active{
  transform:translateY(3px);
  box-shadow:0 1px 0 rgba(0,0,0,.5), inset 0 2px 6px rgba(0,0,0,.5);
  background:linear-gradient(180deg, #1b1c22, #22242b);
  color:var(--amber);
}
.key:hover,
.key:focus-visible{
  color:var(--cream);
  box-shadow:0 4px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09), 0 0 16px rgba(255,180,84,.12);
}
.key.active:hover,
.key.active:focus-visible{
  color:var(--amber);
  box-shadow:0 1px 0 rgba(0,0,0,.5), inset 0 2px 6px rgba(0,0,0,.5), 0 0 18px rgba(255,180,84,.16);
}
.key.active .key-led{
  background:var(--amber);
  box-shadow:0 0 8px 2px var(--amber-glow);
}

.panel-foot{
  margin:1.1rem 0 0; text-align:center;
  font-size:.62rem; letter-spacing:.3em; color:var(--cream-faint);
  text-transform:uppercase;
}
.panel-foot.live{ color:var(--amber); text-shadow:0 0 12px rgba(255,180,84,.4); }

/* ============================================================
   SIGNAL PATH
   ============================================================ */
.path-section{
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), transparent 15%, transparent 85%, rgba(0,0,0,.25)),
    var(--charcoal-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.path-hint{
  display:none;
  max-width:66rem; margin:0 auto .6rem; text-align:center;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream-faint);
}
@media (max-width: 820px){ .path-hint{ display:block; } }
.path-scroll{ max-width:66rem; margin:0 auto; overflow-x:auto; }
.path-svg{ display:block; min-width:720px; width:100%; height:auto; }
.path-box rect{
  fill:#1a1b21; stroke:#3a3c45; stroke-width:1.5;
}
.path-wire line, .path-wire path{ stroke:#4a4c55; stroke-width:2; }
.path-arrow line{ stroke:var(--amber); stroke-width:2; }
.path-txt-main text{
  font-family:var(--font-display); font-size:17px; fill:var(--cream);
  letter-spacing:1px;
}
.path-txt-sub text{
  font-family:var(--font-mono); font-size:10.5px; fill:var(--cream-dim);
  letter-spacing:1.5px;
}
.path-notes{
  max-width:66rem; margin:2.6rem auto 0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1rem,3vw,2rem);
}
.path-note h3{
  font-size:.95rem; color:var(--amber); margin-bottom:.6rem; letter-spacing:.02em;
}
.path-note p{ font-size:.85rem; color:var(--cream-dim); margin:0; }

/* ============================================================
   MODULES
   ============================================================ */
.module-grid{
  max-width:72rem; margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1.1rem, 3vw, 2rem);
  align-items:start;
  position:relative;
}
.module-grid::before{
  content:"";
  position:absolute; left:4%; right:4%; top:4.2rem; height:12px;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,.25)),
    repeating-linear-gradient(90deg, var(--alu-hi) 0 1px, var(--alu-mid) 1px 3px, var(--alu-lo) 3px 4px);
  border:1px solid #08090c;
  transform:translateY(-50%);
  opacity:.8;
}
.module{
  position:relative;
  background:
    radial-gradient(380px 180px at 15% 0%, rgba(255,180,84,.055), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 20%),
    var(--charcoal-2);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.module:nth-child(2){ margin-top:clamp(1.8rem, 4vw, 3.6rem); }
.module:nth-child(3){ margin-top:clamp(.7rem, 2vw, 1.4rem); }
.module:hover,
.module:focus-within{
  transform:translateY(-5px);
  box-shadow:0 24px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(255,180,84,.18);
}
.module-face{ padding:clamp(.8rem,2vw,1.2rem) clamp(.8rem,2vw,1.2rem) 0; }
.module-face svg{ display:block; width:100%; height:auto; border-radius:8px;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.45)); }

/* module faceplate — brushed aluminum */
.mf-plate{
  fill:url(#alu-grad);
  fill:#aeb2ba;
  stroke:#5c5f66; stroke-width:1;
}
.module-face svg{ background:transparent; }
.module .mf-plate{ fill:#adb1b9; }
.mf-screw{
  fill:#7e828a; stroke:#3f4147; stroke-width:1;
}
.mf-title{
  font-family:var(--font-display); font-size:21px; fill:var(--ink-on-alu);
  letter-spacing:2px;
}
.mf-sub{
  font-family:var(--font-mono); font-size:9.5px; fill:#3c3e45; letter-spacing:2.5px;
}
.mf-lab{
  font-family:var(--font-mono); font-size:9.5px; fill:#33353c; letter-spacing:2px;
}
.mf-knob-big{ fill:#2a2c33; stroke:#101116; stroke-width:1.5; }
.mf-knob-cap{ fill:#1b1c22; stroke:#3c3e45; stroke-width:1; }
.mf-ind{ stroke:var(--amber); stroke-width:3.5; stroke-linecap:round; }
.mf-jack circle:first-child{ fill:#c6cad1; stroke:#5c5f66; stroke-width:1.5; }
.mf-jack circle:last-child{ fill:#0c0d10; }
.mf-led{ fill:var(--amber); }
.module:hover .mf-led{ filter:drop-shadow(0 0 4px var(--amber)); }
.mf-slot{ fill:#181920; stroke:#5c5f66; stroke-width:1; }
.mf-fader{ fill:#33353c; stroke:#101116; stroke-width:1; }
.mf-env-curve{ fill:none; stroke:var(--amber-deep); stroke-width:2.5; stroke-linejoin:round; }

.module-copy{ padding:1.2rem clamp(1rem,2.4vw,1.4rem) 1.4rem; }
.module-copy h3{ font-size:1.02rem; color:var(--cream); margin-bottom:.7rem; }
.module-copy p{ font-size:.84rem; color:var(--cream-dim); }
.module-meta{
  display:flex; gap:1.4rem; margin:0;
  border-top:1px solid var(--line); padding-top:.9rem;
}
.module-meta div{ display:flex; flex-direction:column; gap:.15rem; }
.module-meta dt{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-faint); }
.module-meta dd{ margin:0; font-size:.85rem; color:var(--amber); }

/* ============================================================
   SPECS
   ============================================================ */
.spec-wrap{
  max-width:72rem; margin:0 auto;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(14rem, 18rem);
  gap:clamp(1rem,3vw,2rem);
  align-items:start;
}
.spec-scroll{ min-width:0; overflow-x:auto; }
.spec-table{
  width:100%; min-width:540px;
  border-collapse:collapse;
  font-size:.86rem;
  border:1px solid var(--line);
  background:var(--charcoal-2);
}
.spec-table th, .spec-table td{
  text-align:left; padding:.85rem 1.1rem;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.spec-table tr:last-child th, .spec-table tr:last-child td{ border-bottom:none; }
.spec-table th{
  width:11rem;
  font-weight:400; color:var(--amber);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  border-right:1px solid var(--line);
  white-space:nowrap;
}
.spec-table td{ color:var(--cream-dim); }
.spec-table tr:nth-child(odd) td{ background:rgba(255,255,255,.015); }
.calibration-card{
  position:relative;
  border:1px solid #34363e;
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 18%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 12px),
    var(--charcoal-2);
  padding:1.2rem;
  box-shadow:0 18px 42px rgba(0,0,0,.35);
}
.calibration-card::after{
  content:"";
  position:absolute; right:1rem; top:1rem; width:3.6rem; height:3.6rem; border-radius:50%;
  border:2px solid rgba(255,180,84,.58);
  box-shadow:inset 0 0 0 1px rgba(255,180,84,.2), 0 0 18px rgba(255,180,84,.12);
}
.cal-label{
  display:block; color:var(--amber); text-transform:uppercase;
  font-size:.6rem; letter-spacing:.22em; margin-bottom:.6rem;
}
.calibration-card strong{
  display:block; font-family:var(--font-display); font-size:1.15rem;
  color:var(--cream); letter-spacing:.03em; margin-bottom:1rem;
}
.calibration-card dl{ margin:0 0 1rem; display:grid; gap:.55rem; }
.calibration-card div{
  display:flex; justify-content:space-between; gap:1rem;
  border-bottom:1px dashed var(--line); padding-bottom:.45rem;
}
.calibration-card dt{ color:var(--cream-faint); font-size:.68rem; text-transform:uppercase; letter-spacing:.16em; }
.calibration-card dd{ margin:0; color:var(--amber); font-size:.8rem; font-variant-numeric:tabular-nums; }
.calibration-card p{ color:var(--cream-dim); font-size:.78rem; margin:0; }

/* ============================================================
   ORDER
   ============================================================ */
.order-grid{
  max-width:72rem; margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.2rem,3vw,2.4rem);
  align-items:start;
}
.order-card{
  position:relative;
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(255,180,84,.07), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 15%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 12px),
    var(--charcoal-2);
  border:1px solid #34363e;
  border-radius:8px;
  padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:0 24px 50px rgba(0,0,0,.45);
}
.order-card:hover,
.order-card:focus-within{
  box-shadow:0 26px 56px rgba(0,0,0,.48), 0 0 0 1px rgba(255,180,84,.16);
}
.order-card .s-tl{ top:10px; left:10px; } .order-card .s-tr{ top:10px; right:10px; }
.order-batch{
  display:inline-block;
  font-size:.62rem; letter-spacing:.26em; color:var(--charcoal);
  background:var(--amber);
  border-radius:3px; padding:.28rem .6rem;
  margin-bottom:.9rem; font-weight:600;
}
.order-head h3{ font-size:2.2rem; color:var(--cream); }
.order-price{
  font-size:1.7rem; color:var(--amber);
  margin:1rem 0 1.2rem; font-weight:600;
}
.order-alt{ font-size:.7em; color:var(--cream-faint); font-weight:400; }
.order-list{
  list-style:none; margin:0 0 1.6rem; padding:0;
  font-size:.85rem; color:var(--cream-dim);
}
.order-list li{
  padding:.5rem 0 .5rem 1.5rem; position:relative;
  border-bottom:1px dashed var(--line);
}
.order-list li::before{
  content:""; position:absolute; left:2px; top:1.05em;
  width:7px; height:7px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 6px var(--amber-glow);
}
.order-btn{ width:100%; }
.order-btn.done{
  background:linear-gradient(180deg, #2c2e35, #1d1e24);
  color:var(--amber); border-color:#3a3c45;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.5);
  cursor:default;
}
.order-note{ margin:.9rem 0 0; font-size:.72rem; color:var(--cream-faint); text-align:center; }

.studio-card{
  border-left:2px solid var(--amber);
  padding:.4rem 0 .4rem clamp(1.2rem,3vw,1.8rem);
}
.studio-card h3{ font-size:1.15rem; color:var(--cream); margin-bottom:1rem; }
.studio-card p{ font-size:.88rem; color:var(--cream-dim); }
.studio-sig{ color:var(--amber); font-size:.8rem; letter-spacing:.05em; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{
  border-top:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(0,0,0,.3), transparent 40%),
    #121317;
  padding:2.6rem var(--pad) 2.8rem;
}
.foot-inner{
  max-width:72rem; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;
  justify-content:space-between;
}
.foot-brand{
  font-family:var(--font-display); letter-spacing:.16em; color:var(--cream-faint);
  font-size:.9rem;
}
.foot-line{ margin:0; font-size:.75rem; color:var(--cream-dim); }
.foot-links{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; }
.foot-links a{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream-dim); text-decoration:none;
  border-bottom:1px solid var(--line);
  padding:.8rem 0; min-height:44px; display:inline-flex; align-items:center;
  transition:color .2s, border-color .2s;
}
.foot-links a:hover,
.foot-links a:focus-visible{ color:var(--amber); border-bottom-color:var(--amber); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px){
  .hero-title{ font-size:6.05rem; }
}

@media (max-width: 1023px){
  .hero{
    min-height:auto;
  }
  .hero-title{ font-size:4.95rem; }
  .hero-sub{ font-size:.98rem; }
  .section-head h2{ font-size:2.15rem; }
  .panel-logo{ font-size:1.18rem; }
  .hero-inner{
    grid-template-columns:1fr;
    gap:1.4rem;
  }
  .hero-console{
    justify-self:start;
    max-width:32rem;
    min-height:18rem;
  }
  .path-notes{ grid-template-columns:1fr; gap:1.4rem; }
  .module-grid{ grid-template-columns:1fr; max-width:30rem; }
  .module-grid::before{ display:none; }
  .module:nth-child(2),
  .module:nth-child(3){ margin-top:0; }
  .spec-wrap{ grid-template-columns:1fr; max-width:62rem; }
  .calibration-card{ max-width:32rem; }
  .order-grid{ grid-template-columns:1fr; }
  .controls{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"wave vu" "knobs knobs";
  }
  .wave-select{ grid-area:wave; }
  .knob-row{ grid-area:knobs; }
  .vu{ grid-area:vu; align-items:flex-end; }
}

@media (max-width: 640px){
  .hero{
    padding-top:2.4rem;
    padding-bottom:1rem;
  }
  .hero-kicker{
    font-size:.66rem;
    letter-spacing:.24em;
    margin-bottom:1rem;
  }
  .hero-title{ font-size:3.35rem; }
  .hero-sub{ font-size:.9rem; }
  .section-head h2{ font-size:1.72rem; gap:.65rem; }
  .panel-logo{ font-size:1rem; }
  .order-head h3{ font-size:1.75rem; }
  .order-price{ font-size:1.42rem; }
  .hero-console{
    min-height:13.8rem;
    padding:1.1rem .9rem .85rem;
    transform:none;
  }
  .hero-console.reveal{ animation-name:rise; }
  .console-top{ font-size:.52rem; margin-bottom:1.65rem; }
  .console-scope{ height:4.8rem; padding:.7rem .65rem .55rem; }
  .console-bank{ margin:.75rem .15rem .7rem; }
  .console-keys span{ height:2rem; }
  .hero-chips{ margin-top:.5rem; }
  .rack-unit{ grid-template-columns:1fr; }
  .rack-ear{ display:none; }
  .panel{ border-radius:8px; }
  .scopes{ grid-template-columns:1fr; }
  .scope canvas{ height:110px; }
  .boot-sequence{ inset:10rem .7rem auto; }
  .boot-card{ padding:.72rem .75rem .78rem; }
  .boot-list{ grid-template-columns:1fr; gap:.28rem; }
  .boot-list li{ font-size:.54rem; letter-spacing:.15em; }
  .boot-meter i{ height:7px; }
  .keys{ grid-template-columns:repeat(4, 1fr); }
  .key{ min-height:78px; }
  .controls{
    grid-template-columns:1fr;
    grid-template-areas:"wave" "knobs" "vu";
    gap:1.4rem;
  }
  .vu{ align-items:center; }
  .vu-col{ flex-direction:row; padding:8px; }
  .vu-seg{ width:18px; height:16px; }
  .wave-row{ grid-template-columns:repeat(4,1fr); }
  .wave-btn{ min-width:0; justify-content:center; }
  .site-head nav a{ padding:.85rem .4rem; font-size:.66rem; }
  .hero-chips .chip:last-child{ display:none; }
  .module-meta{ gap:1rem; justify-content:space-between; }
  .calibration-card::after{ width:2.8rem; height:2.8rem; }

  /* panel head: full-width power row instead of an orphaned cluster */
  .panel-head{ flex-direction:column; align-items:stretch; gap:.7rem; }
  .panel-model{ letter-spacing:.14em; }
  .power-block{
    justify-content:space-between;
    border-top:1px dashed var(--line);
    padding-top:.55rem;
  }

  /* spec sheet: stacked rows beat sideways scrolling on a phone */
  .spec-table{ min-width:0; }
  .spec-table th, .spec-table td{ display:block; width:auto; }
  .spec-table th{ border-right:none; padding-bottom:.15rem; }
  .spec-table td{ border-bottom:none; padding-top:0; }
  .spec-table tr{ display:block; border-bottom:1px solid var(--line); }
  .spec-table tr:last-child{ border-bottom:none; }
  .spec-table tr:nth-child(odd) td{ background:transparent; }
  .spec-table tr:nth-child(odd){ background:rgba(255,255,255,.015); }

  .wp1{ stroke-width:2.6; }
  .wp2{ stroke-width:2; }
  .hero-wave{ height:110px; }
}

@media (max-width: 480px){
  .brand{ font-size:.84rem; letter-spacing:.1em; gap:.45rem; }
  .hero-title{ font-size:2.95rem; }
  .site-head nav{ gap:.05rem; }
  .site-head nav a{ padding:.85rem .3rem; font-size:.62rem; letter-spacing:.12em; }
  .console-bank{ display:none; }
  .hero-console{ min-height:10.8rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .wave-scroll{ animation:none; }
  .console-scope span{ animation:none; opacity:.65; transform:none; }
  .hero-console.reveal{ transform:none; }
  .brand-led{ animation:none; opacity:1; }
  .reveal{ animation:none; opacity:1; transform:none; }
  html.js .scroll-reveal{ opacity:1; transform:none; transition:none; }
  .module, .btn-amber, .key, .knob-cap, .boot-sequence{ transition:none; }
  .power-switch.nudge .ps-label{ animation:none; }
  .boot-card::before,
  .boot-meter i{ animation:none; }
}