/* ==========================================================================
   nachster-ai.com — 盤 BAN design system
   Style constitution: clize `panel` (Industrial Realism / neumorphic).
   Frozen values live in design/04-ban-panel/DESIGN.md — change them there first.

   One light source: top-left, 45°. Every raised surface uses the --raise pair,
   every recessed one the --sink pair. Nothing breaks that direction.
   ========================================================================== */

:root{
  /* surfaces */
  --chassis:#E0E5EC;      /* Level 0 — the plastic everything is mounted to */
  --panel:#F0F2F5;        /* Level +1 — raised panel face */
  --recess:#D1D9E6;       /* Level -1 — sunken wells, inputs, screens */
  --sh:#BABECC;           /* the shadow half of the lighting pair */
  --hi:#FFFFFF;           /* the highlight half */
  --deep:#A3B1C6;         /* prominent dividers */
  /* ink */
  --ink:#2D3436;
  --ink2:#4A5568;
  --ink3:#6B7684;
  /* dark technical surfaces */
  --slate:#263238;
  --slate2:#31424A;
  /* signal */
  --led:#0092E5;          /* Nachster blue — interactive / live only */
  --led2:#0079C2;         /* accent text (4.9:1 on chassis) */
  --led-grn:#8CB808;      /* renewables — power gauges only */
  --warn:#C2410C;
  /* type */
  --sans:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --mono:"JetBrains Mono","Noto Sans JP",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* metrics */
  --wrap:1140px;
  --raise:6px 6px 14px var(--sh), -6px -6px 14px var(--hi);
  --raise-s:3px 3px 7px var(--sh), -3px -3px 7px var(--hi);
  --raise-l:9px 9px 22px var(--sh), -9px -9px 22px var(--hi);
  --sink:inset 4px 4px 9px var(--sh), inset -4px -4px 9px var(--hi);
  --sink-d:inset 5px 5px 11px #B3B9C6, inset -4px -4px 10px #FFFFFF;
  --emb:0 1px 0 var(--hi);
  --spring:cubic-bezier(.2,.9,.3,1.2);
}

/* ── base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--chassis);color:var(--ink2);
  font-family:var(--sans);font-size:15.5px;line-height:1.85;overflow-x:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
h1,h2,h3,h4,h5{margin:0;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.24;text-shadow:var(--emb)}
p{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--led);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;background:var(--slate);color:#fff;padding:12px 20px;z-index:400;font-weight:700}
.skip:focus{left:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-n{max-width:860px;margin:0 auto;padding:0 24px}

/* ── manufacturing details ──────────────────────────────────────────────── */
.screw{position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#F4F6F9,#C3CAD6 60%,#9BA6B6);
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.22),0 1px 1px var(--hi)}
.screw::after{content:"";position:absolute;inset:3px 1px;background:#A6AEBC;border-radius:1px;transform:rotate(38deg)}
.s-tl{top:9px;left:9px}.s-tr{top:9px;right:9px}.s-bl{bottom:9px;left:9px}.s-br{bottom:9px;right:9px}
.vent{display:flex;gap:3px;align-items:center}
.vent i{display:block;width:3px;height:16px;border-radius:2px;background:var(--recess);box-shadow:inset 1px 1px 2px var(--sh),0 1px 0 var(--hi)}

/* ── nav ────────────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:200;background:var(--chassis);box-shadow:0 6px 16px rgba(163,177,198,.45)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:74px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand .mk{width:30px;height:22px;flex:0 0 auto}
.brand .wm{font-weight:800;font-size:16.5px;letter-spacing:-.01em;line-height:1;color:var(--ink);text-shadow:var(--emb)}
.brand .wm small{display:block;font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.2em;color:var(--ink2);margin-top:4px;text-shadow:none}
.nav-links{display:flex;gap:4px;margin-left:auto;font-size:12.5px;font-weight:700;list-style:none}
.nav-links a{display:block;text-decoration:none;padding:8px 12px;border-radius:8px;color:var(--ink2);transition:box-shadow .2s ease,color .2s ease}
.nav-links a:hover{color:var(--led2)}
.nav-links a[aria-current=page]{color:var(--ink);box-shadow:var(--sink)}
.lang{display:flex;gap:4px;padding:4px;border-radius:9px;box-shadow:var(--sink);flex:0 0 auto}
.lang a{display:block;text-decoration:none;color:var(--ink2);padding:4px 9px;border-radius:6px;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;transition:all .2s ease}
.lang a[aria-current=true]{background:var(--chassis);color:var(--ink);box-shadow:var(--raise-s)}
.nav-cta{flex:0 0 auto;background:var(--led);color:#fff;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.06em;padding:12px 18px;border-radius:9px;
  box-shadow:4px 4px 10px rgba(0,111,175,.35),-3px -3px 8px var(--hi),inset 0 1px 0 rgba(255,255,255,.35);transition:all .18s var(--spring)}
.nav-cta:hover{background:var(--led2)}
.nav-cta:active{box-shadow:inset 3px 3px 8px rgba(0,80,130,.5);transform:translateY(1px)}
.burger{display:none;margin-left:auto;background:var(--chassis);border:0;border-radius:9px;width:44px;height:40px;cursor:pointer;padding:0;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;box-shadow:var(--raise-s)}
.burger i{display:block;width:17px;height:2px;background:var(--ink2);border-radius:2px}
.mmenu{display:none;background:var(--chassis);padding:14px 24px 20px;box-shadow:0 8px 16px rgba(163,177,198,.4)}
.mmenu a{display:block;padding:11px 14px;margin-bottom:7px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:700;color:var(--ink);box-shadow:var(--raise-s)}
.mmenu a[aria-current=page]{box-shadow:var(--sink);color:var(--led2)}

/* ── page furniture ─────────────────────────────────────────────────────── */
main{padding-top:74px}
section{scroll-margin-top:86px}
.sec{padding:80px 0}
.sec-t{padding-top:56px}
.lb{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);
  background:var(--chassis);padding:7px 13px;border-radius:7px;box-shadow:var(--sink)}
.lb::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--led);box-shadow:0 0 7px rgba(0,146,229,.75);flex:0 0 auto}
.lb.grn::before{background:var(--led-grn);box-shadow:0 0 7px rgba(140,184,8,.7)}
h1.h1{font-size:clamp(30px,4.4vw,52px);margin-top:22px;letter-spacing:-.035em;line-height:1.16}
.h2{font-size:clamp(24px,3.3vw,40px);margin-top:20px}
.h3{font-size:clamp(19px,2.2vw,26px)}
.lead{max-width:64ch;margin-top:18px;font-size:16.5px;line-height:1.95}
.lead-c{margin-left:auto;margin-right:auto;text-align:center}
.ph{border-bottom:2px dotted var(--led2);color:var(--led2);font-weight:700}
.fine{font-family:var(--mono);font-size:11px;line-height:1.85;color:var(--ink3)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink3);list-style:none;padding-top:22px}
.crumbs a{text-decoration:none;color:var(--ink2)}
.crumbs a:hover{color:var(--led2)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--deep)}
.crumbs li{display:flex;align-items:center}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--deep),transparent);margin:0;border:0}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.06em;padding:15px 26px;border-radius:10px;text-decoration:none;
  transition:all .18s var(--spring);cursor:pointer;border:0;font-family:var(--sans)}
.btn-p{background:var(--led);color:#fff;box-shadow:5px 5px 12px rgba(0,111,175,.35),-4px -4px 10px var(--hi),inset 0 1px 0 rgba(255,255,255,.32)}
.btn-p:hover{background:var(--led2)}
.btn-p:active{box-shadow:inset 4px 4px 9px rgba(0,80,130,.5);transform:translateY(1px)}
.btn-s{background:var(--chassis);color:var(--ink);box-shadow:var(--raise)}
.btn-s:hover{color:var(--led2)}
.btn-s:active{box-shadow:var(--sink);transform:translateY(1px)}
.btn-row{display:flex;flex-wrap:wrap;gap:26px;margin-top:30px}

/* ── module cards ───────────────────────────────────────────────────────── */
.mods{display:grid;gap:20px;margin-top:40px}
.m2{grid-template-columns:repeat(2,1fr)}
.m3{grid-template-columns:repeat(3,1fr)}
.m4{grid-template-columns:repeat(4,1fr)}
.mod{background:var(--chassis);border-radius:15px;padding:30px 26px 32px;box-shadow:var(--raise);display:flex;flex-direction:column;position:relative;
  transition:box-shadow .25s ease,transform .25s ease}
a.mod{text-decoration:none;color:inherit}
.mod:hover{transform:translateY(-2px);box-shadow:var(--raise-l)}
.mod>.kick{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);
  padding:5px 10px;border-radius:6px;box-shadow:var(--sink);margin-bottom:15px;align-self:flex-start}
.mod h3{font-size:18px}
.mod p{margin-top:12px;font-size:14.5px;line-height:1.95}
.mod dl{margin:15px 0 0;font-size:13px;line-height:1.85}
.mod dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-top:10px}
.mod dd{margin:0;color:var(--ink)}
.mod .foot{margin-top:auto;padding-top:22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.win{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--ink2);padding:6px 11px;border-radius:6px;box-shadow:var(--sink)}
a.req{font-size:12.5px;font-weight:700;color:var(--led2);text-decoration:none}
a.req:hover{text-decoration:underline;text-underline-offset:4px}
.mod .go{margin-top:auto;padding-top:20px;font-size:12.5px;font-weight:700;color:var(--led2)}

/* ── stats ──────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.stat{background:var(--chassis);border-radius:14px;padding:26px 24px 28px;box-shadow:var(--raise);position:relative}
.stat b{display:block;font-family:var(--mono);font-size:clamp(26px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink);text-shadow:var(--emb)}
.stat>span{display:block;margin-top:13px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);line-height:1.7}

/* ── recessed data well + tables ────────────────────────────────────────── */
.well{background:var(--chassis);border-radius:16px;padding:24px;box-shadow:var(--raise);position:relative;margin-top:36px}
.well>h3{font-size:18px;margin-bottom:16px;padding-left:6px}
.well>.cap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding-left:6px;margin-bottom:14px;display:block}
.wellin{border-radius:12px;box-shadow:var(--sink-d);background:var(--recess);padding:6px 20px;overflow-x:auto}
table.spec{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.spec th,.spec td{padding:11px 0;text-align:left;vertical-align:top;border-top:1px solid rgba(160,172,190,.45)}
.spec tr:first-child th,.spec tr:first-child td{border-top:0}
.spec th{width:32%;font-weight:700;font-size:12.5px;color:var(--ink);padding-right:18px}
.spec td{font-family:var(--mono);font-size:12px;line-height:1.75;color:var(--ink2)}
table.grid{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.grid th,.grid td{padding:12px 14px;text-align:left;vertical-align:top;border-top:1px solid rgba(160,172,190,.45)}
.grid thead th{border-top:0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.grid tbody th{font-weight:700;color:var(--ink);font-size:13px}
.grid td{color:var(--ink2)}
.grid td.num{font-family:var(--mono);font-size:12.5px;color:var(--ink)}

/* ── list styles ────────────────────────────────────────────────────────── */
.ticks{list-style:none;display:grid;gap:12px;margin-top:26px}
.ticks li{background:var(--chassis);border-radius:11px;padding:15px 18px 15px 48px;box-shadow:var(--raise-s);position:relative;font-size:14.5px;line-height:1.85}
.ticks li::before{content:attr(data-n);position:absolute;left:16px;top:16px;font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--led2)}
.ticks li b{color:var(--ink)}
.bul{list-style:none;display:grid;gap:11px;margin-top:20px}
.bul li{position:relative;padding-left:22px;font-size:15px;line-height:1.9}
.bul li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:9px;border-radius:50%;background:var(--recess);box-shadow:inset 1px 1px 2px var(--sh),0 1px 0 var(--hi)}
.bul li.on::before{background:var(--led);box-shadow:0 0 7px rgba(0,146,229,.7)}
.bul li b{color:var(--ink)}

/* ── steps ──────────────────────────────────────────────────────────────── */
.steps{margin-top:40px;display:grid;gap:14px}
.step{display:grid;grid-template-columns:60px 1fr 200px;gap:20px;align-items:center;background:var(--chassis);border-radius:13px;padding:20px 24px;box-shadow:var(--raise-s);transition:box-shadow .22s ease}
.step:hover{box-shadow:var(--raise)}
.step .n{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--led2);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--sink)}
.step h3{font-size:16.5px}
.step p{margin-top:6px;font-size:14px;line-height:1.85}
.step .when{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);padding:7px 12px;border-radius:6px;box-shadow:var(--sink);justify-self:start}

/* ── architecture diagram ───────────────────────────────────────────────── */
.arch{margin-top:40px;background:var(--chassis);border-radius:18px;padding:34px 26px 26px;box-shadow:var(--raise);position:relative}
.arch-top{border-radius:12px;padding:16px 20px;text-align:center;box-shadow:var(--raise-s);background:var(--chassis)}
.arch-top .t{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-bottom:5px}
.arch-top b{font-size:14.5px;color:var(--ink);text-shadow:var(--emb)}
.flow{text-align:center;padding:9px 0;color:var(--led2);font-family:var(--mono);font-size:15px}
.arch-body{display:grid;grid-template-columns:8fr 4fr;gap:18px}
.arch-main{border-radius:13px;padding:18px;box-shadow:var(--sink-d);background:var(--recess)}
.arch-main>.t{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--led2);font-weight:700;margin-bottom:14px}
.layer{background:var(--chassis);border-radius:10px;padding:12px 15px;margin-bottom:10px;box-shadow:var(--raise-s)}
.layer:last-child{margin-bottom:0}
.layer b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.layer span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink2);margin-top:4px;line-height:1.7}
.arch-ops{border-radius:13px;padding:20px 18px;background:var(--slate);color:#DCE3E7;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),4px 4px 12px var(--sh)}
.arch-ops .t{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#5FC3F2;margin-bottom:11px}
.arch-ops b{font-size:14.5px;color:#fff;display:block}
.arch-ops b .ph{color:#7FD1F7;border-bottom-color:#7FD1F7}
.arch-ops ul{margin:13px 0 0;list-style:none;font-size:12.5px;line-height:1.95}
.arch-ops li{padding-left:16px;position:relative}
.arch-ops li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--led);box-shadow:0 0 6px rgba(0,146,229,.9)}
.arch-pwr{margin-top:18px;border-radius:13px;padding:16px 20px;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;
  background:linear-gradient(100deg,rgba(140,184,8,.24),rgba(0,146,229,.24));box-shadow:var(--raise-s)}
.arch-pwr b{font-size:14px;font-weight:800;color:var(--ink);text-shadow:var(--emb)}
.arch-pwr span{font-family:var(--mono);font-size:11.5px;color:var(--ink2)}
.arch-legal{margin-top:14px;border-radius:12px;padding:15px 20px;background:var(--slate2);color:#DCE3E7;font-size:13px;box-shadow:4px 4px 12px var(--sh)}
.arch-legal em{font-style:normal;display:block;font-family:var(--mono);font-size:10.5px;color:#93A6B0;margin-top:4px;letter-spacing:.06em}
figcaption{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink3);text-align:center}

/* ── rack motif ─────────────────────────────────────────────────────────── */
.rack{background:var(--chassis);border-radius:16px;padding:26px 22px 20px;box-shadow:var(--raise);position:relative}
.rack-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding:0 4px}
.rack-h span{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.rwell{border-radius:12px;padding:16px;box-shadow:var(--sink-d);background:var(--recess)}
.nodes{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.nodes i{display:block;aspect-ratio:1;border-radius:4px;background:#C6CEDB;
  box-shadow:inset 1px 1px 3px rgba(120,132,150,.6),inset -1px -1px 2px rgba(255,255,255,.6);transition:all .3s ease}
.nodes i.on{background:var(--led);box-shadow:0 0 9px rgba(0,146,229,.8),inset 0 1px 1px rgba(255,255,255,.5)}
.gauge{margin-top:16px;display:flex;align-items:center;gap:12px}
.gauge .track{flex:1;height:12px;border-radius:999px;box-shadow:var(--sink);background:var(--recess);overflow:hidden;position:relative}
.gauge .track div{position:absolute;inset:2px 100% 2px 2px;border-radius:999px;background:linear-gradient(90deg,var(--led-grn),var(--led));transition:right 1s linear}
.gauge .track.full div{right:2px}
.gauge b{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--ink2)}
.rack-f{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:0 4px}
.rack-f span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--ink2)}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding:60px 0 0}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:52px;align-items:center}
.hero h1{margin-top:22px;font-size:clamp(38px,6.4vw,80px);letter-spacing:-.045em;line-height:1.07;text-shadow:0 2px 0 var(--hi)}
.hero h1 em{font-style:normal;color:var(--led2)}
.hero .sub{margin-top:24px;font-size:16.5px;line-height:1.95;max-width:54ch}
.endorse{margin-top:22px;font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:.02em;display:inline-block;padding:9px 15px;border-radius:8px;box-shadow:var(--sink)}
.hero .btn-row{margin-top:32px}
.hero .stats{margin-top:70px}

/* page hero (all pages except the homepage) */
.phero{padding:16px 0 0}
.phero h1{margin-top:18px}
.phero .lead{margin-top:20px}

/* ── prose (legal / long-form) ──────────────────────────────────────────── */
.prose{margin-top:34px;background:var(--chassis);border-radius:16px;padding:38px 40px 42px;box-shadow:var(--raise);position:relative}
.prose h2{font-size:20px;margin-top:38px;padding-top:24px;border-top:1px solid rgba(163,177,198,.5)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:16px;margin-top:24px}
.prose p{margin-top:12px;font-size:15px;line-height:1.95}
.prose ul,.prose ol{margin-top:12px;padding-left:22px}
.prose li{margin-bottom:8px;font-size:15px;line-height:1.9}
.prose ol{list-style:decimal}
.prose ul{list-style:disc}
.prose dl{margin-top:14px}
.prose dt{font-weight:700;color:var(--ink);margin-top:14px;font-size:14.5px}
.prose dd{margin:5px 0 0;font-size:14.5px;line-height:1.9}
.prose a{color:var(--led2);font-weight:700}
.prose .updated{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink3);margin-bottom:26px;display:block}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{margin-top:30px;display:grid;gap:12px}
.faq details{background:var(--chassis);border-radius:12px;box-shadow:var(--raise-s);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 22px;font-weight:700;color:var(--ink);font-size:15px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:16px;font-family:var(--mono);font-size:19px;color:var(--led2);transition:transform .2s var(--spring)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{box-shadow:var(--sink)}
.faq .a{padding:16px 22px 22px;font-size:14.5px;line-height:1.95}

/* ── form ───────────────────────────────────────────────────────────────── */
.formwrap{display:grid;grid-template-columns:5fr 7fr;gap:44px;margin-top:36px;align-items:start}
.formaside p{font-size:14.5px;line-height:1.95}
.mailto{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--led2);text-decoration:none;padding:9px 14px;border-radius:8px;box-shadow:var(--raise-s)}
.formaside .fine{margin-top:24px}
form.panelform{background:var(--chassis);border-radius:18px;padding:30px;box-shadow:var(--raise);position:relative}
form.panelform .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form.panelform .f{margin-bottom:18px}
form.panelform label{display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
form.panelform label .req{color:var(--warn)}
form.panelform input,form.panelform select,form.panelform textarea{width:100%;background:var(--recess);border:0;border-radius:9px;color:var(--ink);font-family:var(--mono);font-size:14px;padding:12px 14px;box-shadow:var(--sink)}
form.panelform select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%);
  background-position:calc(100% - 17px) 21px,calc(100% - 12px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
form.panelform textarea{resize:vertical;min-height:96px;font-family:var(--sans)}
form.panelform input:focus,form.panelform select:focus,form.panelform textarea:focus{outline:none;box-shadow:var(--sink),0 0 0 2px rgba(0,146,229,.4)}
form.panelform input::placeholder,form.panelform textarea::placeholder{color:#8B96A6}
form.panelform .hp{position:absolute;left:-9999px}
.submit{margin-top:6px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.submit .fine{max-width:34ch;margin:0}
.form-error{margin-top:16px;background:var(--chassis);border-radius:10px;padding:14px 16px;box-shadow:var(--sink);font-size:13.5px;color:var(--warn)}
.form-error a{color:var(--led2);font-weight:700}

/* ── dark call-out band ─────────────────────────────────────────────────── */
.band{background:var(--slate);color:#C3CED4;border-radius:18px;padding:44px 40px;margin-top:56px;box-shadow:6px 6px 18px var(--sh),-6px -6px 18px var(--hi)}
.band h2{color:#fff;text-shadow:none;font-size:clamp(21px,2.6vw,30px)}
.band p{margin-top:14px;font-size:15.5px;line-height:1.9;max-width:60ch}
.band .lb{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#9FD4EE}
.band .btn-s{background:#31424A;color:#fff;box-shadow:4px 4px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.1)}
.band .btn-s:hover{background:#3B505A;color:#fff}
.band a{color:#7FD1F7}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer{background:var(--slate);color:#A8B4BA;padding:56px 0 34px;margin-top:56px}
footer .brand .wm{color:#fff;text-shadow:none}
footer .brand .wm small{color:#8A9BA4}
.fgrid{display:grid;grid-template-columns:3.2fr 2fr 2fr 3fr;gap:36px}
.fgrid h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#7E9199;font-weight:700;margin-bottom:14px;text-shadow:none}
.fgrid address{font-style:normal;font-size:13px;line-height:1.9;color:#A8B4BA}
.fgrid address b{color:#fff;font-weight:700}
.flinks{display:flex;flex-direction:column;gap:9px;font-size:13px;list-style:none}
.flinks a{text-decoration:none;color:#A8B4BA;align-self:flex-start;transition:color .2s ease}
.flinks a:hover{color:#5FC3F2}
.fbottom{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.09);display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between}
.fbottom p{font-family:var(--mono);font-size:10.5px;color:#748790;line-height:1.8}

/* ── 404 / thank-you ────────────────────────────────────────────────────── */
.centre{text-align:center;padding:90px 0 40px}
.centre .lead{margin-left:auto;margin-right:auto}
.centre .btn-row{justify-content:center}
.bigcode{font-family:var(--mono);font-size:clamp(56px,12vw,120px);font-weight:700;color:var(--ink);letter-spacing:-.05em;line-height:1;text-shadow:2px 2px 4px var(--sh),-2px -2px 4px var(--hi)}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .nav-links{gap:0;font-size:12px}
  .nav-links a{padding:8px 9px}
}
@media (max-width:1000px){
  .hero-grid,.formwrap,.arch-body{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .m4{grid-template-columns:1fr 1fr}
  .prose{padding:30px 26px 34px}
}
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
}
@media (max-width:820px){
  .m2,.m3,.m4,.stats{grid-template-columns:1fr}
  .step{grid-template-columns:60px 1fr;gap:16px}
  .step .when{grid-column:2}
  .sec{padding:60px 0}
  form.panelform{padding:22px}
  form.panelform .row{grid-template-columns:1fr;gap:0}
  .fgrid{grid-template-columns:1fr}
  .band{padding:32px 24px}
  footer{margin-top:44px}
}
@media (max-width:420px){
  .wrap,.wrap-n{padding:0 18px}
  .nav-in{padding:0 18px}
  .nodes{gap:5px}
  .rack{padding:22px 16px 16px}
  .well{padding:18px}
  .wellin{padding:6px 14px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .nodes i{background:var(--led);box-shadow:0 0 9px rgba(0,146,229,.8)}
  .gauge .track div{right:2px}
}
@media print{
  .nav,.burger,.mmenu,footer .flinks,.btn,.band{display:none}
  body{background:#fff}
  .mod,.well,.arch,.prose{box-shadow:none;border:1px solid #ccc}
}