:root{
  --bg:#07080a; --bg2:#0b0d11; --surface:#101319; --surface2:#161a21;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
  --text:#eef1f5; --muted:#8b929c; --faint:#565c66;
  /* Default accent — overridden at runtime by data/site.json > theme.accentRgb */
  --accent-rgb:43,108,255;                 /* vibrant blue */
  --accent:rgb(var(--accent-rgb));
  --accent-dim:rgba(var(--accent-rgb),.14);
  --accent-glow:rgba(var(--accent-rgb),.5);
  --ember-rgb:255,90,54;
  --ember:rgb(var(--ember-rgb)); --ember-glow:rgba(var(--ember-rgb),.5);
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:'Chakra Petch',sans-serif; font-weight:300;
  line-height:1.6; overflow-x:hidden; position:relative;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 600px at 78% -8%, rgba(var(--accent-rgb),.10), transparent 60%),
    radial-gradient(700px 500px at 5% 12%, rgba(var(--ember-rgb),.07), transparent 55%);
}
.mono{font-family:'JetBrains Mono',monospace}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--accent);font-weight:500;
}

/* ---------------- NAV ---------------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .4s ease, border-color .4s ease, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(7,8,10,.72);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
nav{max-width:var(--maxw);margin:0 auto;padding:18px 28px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-family:'Chakra Petch';font-weight:700;
  font-size:1.15rem;letter-spacing:.18em}
.logo-mark{width:80px;height:30px;flex:0 0 auto}
.logo-mark path{stroke:var(--accent)} .logo-mark rect{stroke:var(--ember)}
.brand img{height:80px;width:auto;display:block}
.navlinks{display:flex;gap:34px;align-items:center}
.navlinks a{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:400;transition:color .25s;position:relative}
.navlinks a:hover{color:var(--text)}
.navlinks a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--accent);transition:width .3s}
.navlinks a:not(.nav-cta):hover::after{width:100%}
.nav-cta{border:1px solid var(--line2);padding:9px 18px;border-radius:2px;color:var(--text)!important;
  font-size:.78rem;letter-spacing:.16em;transition:.25s}
.nav-cta:hover{border-color:var(--accent);box-shadow:0 0 24px var(--accent-dim);background:rgba(var(--accent-rgb),.05)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:60}
.burger span{width:24px;height:2px;background:var(--text);display:block;transition:.3s}
@media(max-width:820px){
  nav{padding:14px 20px}
  .brand img{height:48px}                              /* 80px desktop logo is too tall for a phone header */
  .navlinks{display:none}
  .burger{display:flex;padding:12px;margin:-12px}      /* icon stays put, tap target grows to ~48px */
  header.open{background:rgba(7,8,10,.97);backdrop-filter:blur(16px)}  /* bar matches the dropdown */
  header.open .navlinks{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;background:rgba(7,8,10,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);padding:8px 28px 22px}
  header.open .navlinks a{padding:13px 0;font-size:.9rem}
}

/* ---------------- HERO ---------------- */
/* 100svh = visible viewport on mobile (excludes iOS collapsing address bar);
   browsers without svh support keep the 100vh line */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-top:90px;overflow:hidden}
/* hero image is set at runtime from data/site.json > hero.image — or
   hero.images [list], which crossfades via stacked .hero-slide layers
   (app.js initHeroBg). Slides live INSIDE #hero-bg, so they stay beneath
   the .hero::after gradient overlay and the content. */
.hero-bg{position:absolute;inset:0;z-index:1;background:#0c1118 center/cover no-repeat;}
.hero-slide{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1.8s ease}
.hero-slide.on{opacity:1}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,8,10,.94) 0%, rgba(7,8,10,.6) 60%, rgba(7,8,10,.32) 100%),
    radial-gradient(130% 100% at 50% 30%, transparent 50%, var(--bg) 100%);
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;width:100%}
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  /* stacked hero is taller than the viewport so it's no longer centred —
     clear the fixed header at the top and give the ticker room at the bottom */
  .hero{padding-top:140px;padding-bottom:56px}
}
.hero h1{
  font-weight:700;font-size:clamp(2.9rem,7vw,5.4rem);line-height:.98;letter-spacing:-.01em;
  margin:22px 0 24px;
}
.hero h1 .glow{color:var(--accent);text-shadow:0 0 40px var(--accent-glow)}
.hero p.lead{font-size:1.12rem;color:var(--muted);max-width:30ch;font-weight:300;margin-bottom:36px}
.cta-row{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:2px;
  font-family:'Electrolize';font-size:.82rem;letter-spacing:.1em;font-weight:500;cursor:pointer;
  transition:.28s;border:1px solid transparent}
.btn-primary{background:var(--ember);color:#0a0a0a}
.btn-primary:hover{box-shadow:0 0 34px var(--ember-glow);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.06);box-shadow:0 0 26px var(--accent-dim)}
.btn .arrow{transition:transform .28s}
.btn:hover .arrow{transform:translateX(4px)}

/* telemetry HUD */
.hud{
  background:linear-gradient(180deg,rgba(22,26,33,.82),rgba(11,13,17,.82));
  border:1px solid var(--line);border-radius:8px;padding:22px;backdrop-filter:blur(8px);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  container-type:inline-size;   /* lets the dyno legend respond to the HUD's own width */
}
.hud-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.hud-top .lbl{font-family:'JetBrains Mono';font-size:.68rem;letter-spacing:.24em;color:var(--faint);text-transform:uppercase}
.live{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono';font-size:.68rem;color:var(--accent);letter-spacing:.18em}
.live .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
/* virtual dyno (current hero view) */
.dyno-canvas{display:block;width:100%;height:238px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
/* Legend: always ONE row of four. Column widths are fr-proportioned to each
   item's natural text width (Timing widest, RPM narrowest) so they're set by
   the container, never by the live values — which change width every frame and
   must not reflow the row. Font, swatch and gaps all scale with the HUD's own
   width (cqw) so the row fits at any screen size; each scaled value carries a
   px fallback on the line above for browsers without container-query units. */
.dyno-legend{display:grid;grid-template-columns:.75fr 1.1fr 1.15fr .95fr;margin-top:14px;
  column-gap:10px;column-gap:clamp(6px,2cqw,16px)}
.dl-item{display:flex;align-items:center;min-width:0;white-space:nowrap;
  gap:5px;gap:clamp(3px,1.2cqw,5px);
  font-family:'Electrolize';color:var(--faint);text-transform:uppercase;letter-spacing:.14em;
  font-size:.64rem;font-size:clamp(.5rem,2.45cqw,.64rem)}
.dl-item i{flex:none;height:3px;border-radius:3px;background:var(--c);box-shadow:0 0 8px var(--c);
  width:14px;width:clamp(8px,3.4cqw,14px)}
.dl-item b{color:var(--text);font-weight:500;min-width:4.5ch;font-variant-numeric:tabular-nums}

/* gauges for the archived "Live Datastream" HUD (saved/datalogger-hud/) —
   kept so the view can be dropped back in without touching CSS */
.gauges{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:6px;overflow:hidden}
.g{background:var(--surface);padding:16px 16px 14px}
.g .gl{font-family:'JetBrains Mono';font-size:.62rem;letter-spacing:.2em;color:var(--faint);text-transform:uppercase}
.g .gv{font-family:'JetBrains Mono';font-weight:700;font-size:1.7rem;margin-top:4px;letter-spacing:-.02em}
.g .gu{font-size:.72rem;color:var(--muted);margin-left:4px;font-weight:400}
.g .bar{height:3px;background:rgba(255,255,255,.06);border-radius:3px;margin-top:10px;overflow:hidden}
.g .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent),#fff 40%));border-radius:3px;transition:width .3s}
.g.redline .gv{color:var(--ember)}
.g.redline .bar i{background:linear-gradient(90deg,var(--ember),color-mix(in srgb,var(--ember),#fff 40%))}

/* ---------------- TICKER ---------------- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 0;overflow:hidden;white-space:nowrap;background:var(--bg2);position:relative;z-index:2}
.ticker-track{display:inline-block;animation:scroll 38s linear infinite}
.ticker span{font-family:'JetBrains Mono';font-size:.78rem;letter-spacing:.14em;color:var(--faint);margin:0 70px}
.ticker span b{color:var(--accent);font-weight:500}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------- SECTION SHELL ---------------- */
section.block{padding:120px 0;position:relative;z-index:2}
/* #caps has a tight 20px top pad, so anchor jumps must stop short of the
   fixed header (~116px with the 80px logo) or the nav covers its heading */
#caps{scroll-margin-top:120px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:30px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(2rem,4vw,3rem);font-weight:600;letter-spacing:-.01em;line-height:1.05;margin-top:12px}
.sec-head p{color:var(--muted);max-width:34ch;font-weight:300}

/* ---------------- FILTERS ---------------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.filter-tab{font-family:'Electrolize';font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid var(--line);padding:9px 16px;border-radius:2px;cursor:pointer;transition:.25s}
.filter-tab:hover{color:var(--text);border-color:var(--line2)}
/* selected tab is "inverted" like the card tags: solid accent, near-black text */
.filter-tab.on{color:#0a0a0a;border-color:var(--accent);background:var(--accent);box-shadow:0 0 18px var(--accent-dim)}
.empty{color:var(--muted);font-family:'Electrolize';font-size:.85rem;padding:40px 4px}

/* ---------------- CAROUSEL ---------------- */
.carousel{position:relative}
.viewport{overflow:hidden}
.track{display:flex;gap:24px;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.card{flex:0 0 calc((100% - 48px)/3);background:var(--surface);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;transition:.35s;display:flex;flex-direction:column}
@media(max-width:900px){.card{flex:0 0 calc((100% - 24px)/2)}}
@media(max-width:600px){.card{flex:0 0 100%}}
.card:hover{border-color:var(--line2);transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.card-media{height:178px;position:relative;overflow:hidden;background:linear-gradient(135deg,#12161c,#0a0c10)}
.card-media .scan{position:absolute;inset:0;opacity:.5;}
.card-media .glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Electrolize';font-size:.66rem;color:rgba(var(--accent-rgb),.35);letter-spacing:.1em;
  line-height:1.5;text-align:center;padding:18px;white-space:pre;transition:.4s}
.card:hover .card-media .glyph{color:rgba(var(--accent-rgb),.6);transform:scale(1.04)}
/* product photo (products.json > image) — fills the tile; slightly desaturated
   + dimmed so photos sit in the dark theme, lifting to full on hover */
.card-media .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) brightness(.88);transition:.4s}
.card:hover .card-media .pimg{filter:saturate(1) brightness(1);transform:scale(1.04)}
/* tags are "inverted": solid category colour, near-black text (matches .btn-primary) */
.tag{position:absolute;top:14px;left:14px;font-family:'Electrolize';font-size:.6rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;border-radius:2px;z-index:2;color:#0a0a0a}
.tag.digital{background:var(--accent)}
.tag.physical{background:var(--ember)}
.tag.service{background:var(--text)}
.card-body{padding:22px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:1.16rem;font-weight:600;letter-spacing:.01em}
.card-body .desc{color:var(--muted);font-size:.9rem;font-weight:300;margin:8px 0 18px;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:12px}
.price{font-family:'Electrolize';font-weight:700;font-size:1.25rem;white-space:nowrap}
.price small{color:var(--faint);font-size:.7rem;font-weight:400;display:block;letter-spacing:.1em}
/* styled checkout button — our own class so we control the click (no double-binding) */
.buybtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:transparent;border:1px solid var(--line2);color:var(--text);
  padding:11px 18px;border-radius:2px;font-family:'Electrolize';font-size:.74rem;
  letter-spacing:.1em;font-weight:500;transition:.26s;white-space:nowrap}
.buybtn:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.07);box-shadow:0 0 22px var(--accent-dim)}

/* coming-soon products ("available": false in products.json) — amber accents */
.tag.soonbadge{left:auto;right:14px;background:#ffc857}   /* inherits inverted .tag text colour */
.soon-flag{color:#ffc857}
.card.soon .glyph,.card.soon .pimg,
.card.soon:hover .glyph,.card.soon:hover .pimg{                /* media stays dimmed, no hover lift */
  opacity:.45;transform:none;color:rgba(var(--accent-rgb),.35);filter:saturate(.6) brightness(.8)}
.buybtn[disabled]{opacity:.4;cursor:default}
.buybtn[disabled]:hover{border-color:var(--line2);background:transparent;box-shadow:none}
.soon-note{display:inline-block;font-family:'Electrolize';font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.7;color:#ffc857;background:rgba(255,200,87,.07);
  border:1px solid rgba(255,200,87,.32);border-radius:2px;padding:14px 18px}

.carousel-nav{display:flex;gap:10px}
.cbtn{width:46px;height:46px;border:1px solid var(--line2);background:transparent;color:var(--text);
  border-radius:2px;cursor:pointer;font-size:1.1rem;transition:.25s;display:flex;align-items:center;justify-content:center}
.cbtn:hover{border-color:var(--accent);box-shadow:0 0 20px var(--accent-dim)}
.cbtn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none;border-color:var(--line)}
.dots{display:flex;gap:8px;justify-content:center;margin-top:34px}
.dot-i{width:24px;height:3px;background:var(--line2);border-radius:3px;cursor:pointer;transition:.3s;border:none;padding:0}
.dot-i.on{background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}

/* ---------------- CAPABILITY ---------------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media(max-width:760px){.caps{grid-template-columns:1fr}}
.cap{background:var(--surface);padding:38px 30px;transition:.3s}
.cap:hover{background:var(--surface2)}
.cap .n{font-family:'Electrolize';color:var(--accent);font-size:.78rem;letter-spacing:.2em}
.cap h4{font-size:1.3rem;font-weight:600;margin:16px 0 10px}
.cap p{color:var(--muted);font-size:.92rem;font-weight:300}

/* ---------------- CTA BAND ---------------- */
.band{position:relative;z-index:2;text-align:center;padding:110px 0;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(700px 320px at 50% 0%,rgba(var(--accent-rgb),.12),transparent 70%)}
.band h2{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;letter-spacing:-.01em;position:relative}
.band p{color:var(--muted);margin:18px auto 36px;max-width:46ch;position:relative}
.band .btn{margin:0 auto}

/* ---------------- FOOTER ---------------- */
footer{border-top:1px solid var(--line);padding:60px 0 40px;position:relative;z-index:2;background:var(--bg2)}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:44px}
.foot-col{max-width:280px}
.foot-col h5{font-family:'JetBrains Mono';font-size:.68rem;letter-spacing:.2em;color:var(--faint);
  text-transform:uppercase;margin-bottom:16px}
.foot-col a{display:block;color:var(--muted);font-size:.9rem;margin-bottom:10px;transition:.2s;font-weight:300}
.foot-col a:hover{color:var(--accent)}
.foot-col p{color:var(--muted);font-size:.88rem;font-weight:300}
.foot-brand{margin-bottom:14px}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:28px;
  border-top:1px solid var(--line);flex-wrap:wrap;gap:14px}
.foot-bot span{font-family:'JetBrains Mono';font-size:.72rem;color:var(--faint);letter-spacing:.08em}

/* ---------------- SHOP PAGE (shop.html) ---------------- */
/* banner reuses the hero treatment (bg image + overlay + glow headline) at reduced height */
.hero--page{min-height:0;padding-top:170px;padding-bottom:64px}
.hero--page h1{font-size:clamp(2.4rem,5vw,4rem)}
.shop-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.shop-controls .filters{margin-bottom:0}
.shop-search input{font-family:'JetBrains Mono';font-size:.78rem;letter-spacing:.1em;color:var(--text);
  background:var(--surface);border:1px solid var(--line2);border-radius:2px;padding:11px 16px;
  width:min(320px,80vw);outline:none;transition:.25s}
.shop-search input::placeholder{color:var(--faint);letter-spacing:.14em}
.shop-search input:focus{border-color:var(--accent);box-shadow:0 0 18px var(--accent-dim)}
#shop-count{font-family:'JetBrains Mono';font-size:.7rem;color:var(--faint);letter-spacing:.16em;margin-bottom:24px}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.shop-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .shop-grid{grid-template-columns:1fr;gap:18px}
  .shop-search{width:100%}
  .shop-search input{width:100%}
}

/* ---------------- PRODUCT PAGE (product.html) ---------------- */
.backlink{display:inline-block;font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.14em;
  color:var(--faint);text-transform:uppercase;margin-bottom:26px;transition:.25s}
.backlink:hover{color:var(--accent)}
.product-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start;margin-bottom:74px}
@media(max-width:820px){.product-grid{grid-template-columns:1fr;gap:28px}}
.product-art{height:320px;border:1px solid var(--line);border-radius:10px}
.product-art .glyph{font-size:.8rem}
.product-art .pimg{filter:saturate(.95) brightness(.96)}   /* hero photo: barely dimmed */
.product-info .price{font-size:1.9rem;margin-bottom:18px}
.pdesc{color:var(--muted);font-weight:300;max-width:62ch;margin-bottom:32px;white-space:pre-line}

/* quantity stepper + add-to-cart row (product page) */
.buy-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:2px;overflow:hidden}
.qbtn{width:42px;height:48px;background:transparent;border:none;color:var(--text);font-size:1.1rem;
  cursor:pointer;transition:.2s;font-family:'JetBrains Mono'}
.qbtn:hover{background:rgba(var(--accent-rgb),.08);color:var(--accent)}
.qval{min-width:36px;text-align:center;font-family:'JetBrains Mono';font-size:.92rem}

/* ---------------- CART (cart.js injects the markup) ---------------- */
.cartbtn{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  background:transparent;border:none;color:var(--muted);cursor:pointer;transition:color .25s;margin-left:10px}
.cartbtn:hover{color:var(--text)}
.cartbtn svg{width:21px;height:21px}
.cartbadge{position:absolute;top:2px;right:0;min-width:16px;height:16px;border-radius:8px;padding:0 4px;
  background:var(--ember);color:#0a0a0a;font-family:'JetBrains Mono';font-size:.62rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
.cart-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:90;
  opacity:0;pointer-events:none;transition:opacity .3s}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:91;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(22,26,33,.97),rgba(11,13,17,.97));border-left:1px solid var(--line);
  backdrop-filter:blur(14px);transform:translateX(102%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
body.cart-open .cart-backdrop{opacity:1;pointer-events:auto}
body.cart-open .cart-drawer{transform:none}
.cart-top{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}
.cart-top .lbl{font-family:'JetBrains Mono';font-size:.68rem;letter-spacing:.24em;color:var(--faint);text-transform:uppercase}
.cart-close{background:transparent;border:none;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer;
  padding:4px 8px;transition:color .2s}
.cart-close:hover{color:var(--text)}
.cart-items{flex:1;overflow-y:auto;padding:10px 22px}
.cart-line{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-line-info a{font-weight:500;font-size:.95rem;transition:color .2s}
.cart-line-info a:hover{color:var(--accent)}
.cart-line-info small{display:block;font-family:'JetBrains Mono';font-size:.7rem;color:var(--faint);margin-top:3px}
.cart-line-ctl{display:flex;align-items:center;gap:8px}
.cart-line-ctl .qbtn{width:28px;height:30px;border:1px solid var(--line2);border-radius:2px;font-size:.9rem}
.cart-line-ctl .qval{min-width:24px;font-size:.85rem}
.cart-line-total{font-family:'Electrolize';font-size:.92rem;min-width:64px;text-align:right}
.cart-foot{padding:18px 22px 22px;border-top:1px solid var(--line)}
.cart-subtotal{display:flex;justify-content:space-between;align-items:center;font-family:'Electrolize';margin-bottom:8px}
.cart-subtotal b{font-size:1.2rem}
.cart-note{font-family:'JetBrains Mono';font-size:.66rem;color:var(--faint);letter-spacing:.08em;margin-bottom:16px}
.cart-checkout{width:100%;justify-content:center}
.cart-checkout:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.cart-error{font-family:'JetBrains Mono';font-size:.7rem;color:var(--ember);margin-top:12px}

/* ---------------- CONTENT PAGES (page.html) ---------------- */
.page-body{max-width:68ch}
.page-body h3{font-size:1.15rem;font-weight:600;margin:34px 0 10px;letter-spacing:.01em}
.page-body h3:first-child{margin-top:0}
.page-body p{color:var(--muted);font-weight:300;margin-bottom:14px;white-space:pre-line}
.page-body a{color:var(--accent)}

/* ---------------- ORDER PAGE (order.html) ---------------- */
.order-panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 24px 20px;max-width:560px}
.order-line{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.order-line small{color:var(--faint);font-family:'JetBrains Mono';font-size:.72rem;margin-left:6px}
.order-line b{font-family:'Electrolize'}
.order-total{border-bottom:none;font-weight:600}
.order-total b{font-size:1.15rem}
.order-note{font-family:'JetBrains Mono';font-size:.7rem;color:var(--faint);letter-spacing:.08em;margin-top:8px}

/* reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* data load error banner */
.loaderr{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--muted);font-family:'JetBrains Mono';font-size:.9rem;text-align:center;padding:30px;line-height:1.7}
.loaderr b{color:var(--accent)}

/* ---------------- MOBILE POLISH ---------------- */
@media(max-width:600px){
  .wrap{padding:0 20px}                                /* reclaim content width on narrow screens */
  section.block{padding:70px 0;scroll-margin-top:40px} /* tighter rhythm; margin keeps anchor jumps clear of the header */
  .band{padding:80px 0}
  .sec-head{margin-bottom:30px}
  .cta-row .btn{width:100%;justify-content:center}     /* hero CTAs stack full-width instead of wrapping unevenly */
  .hud{padding:16px}
  .foot-col a{padding:4px 0}                           /* taller tap targets for footer links */
}