/* ============================================================
   SteinTecDev — "HARDWARE" THEME
   Modern-retro, Teenage-Engineering-inspired re-skin.
   Loaded LAST on every page so it overrides both the inline
   "Studio OS" styles (index.html) and styles.css (subpages).

   Language: warm cream chassis · tactile bevels · vivid orange
   · dark inset screens (phosphor) · LEDs · screws · soft shadow.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS — redefine every variable both stylesheets use
   ------------------------------------------------------------ */
:root{
  /* surfaces (graphite "anodised" chassis) */
  --bg:        #1b1c1e;   /* desk / page */
  --bg-1:      #26272b;   /* panel surface */
  --bg-2:      #313338;   /* raised / highest */
  --bg-3:      #151517;   /* recessed well */
  --line:      #3a3c42;
  --line-soft: #2b2d31;

  /* off-white ink */
  --text:      #f0ede6;
  --text-2:    #9d9a92;
  --text-3:    #6a675f;

  /* accent — brand-orange family under the old names */
  --copper:    #ff6a34;
  --copper-2:  #ff8552;
  --copper-d:  #d8481c;
  --signal:    #4ec9c9;   /* cyan, glows on dark */
  --signal-d:  #2a8d9f;
  --amber:     #f3b03a;
  --ok:        #46c07d;
  --warn:      #f3b03a;

  /* dark "screen" sub-palette (terminals / displays) */
  --screen:    #0b0b0d;
  --screen-2:  #131316;
  --screen-line:#23231f;
  --phosphor:  #ffb454;
  --phosphor-2:#7ee787;
  --phosphor-c:#5fd0e0;

  /* styles.css (subpages) token names */
  --bg-elev:   #26272b;
  --bg-elev-2: #313338;
  --text-soft: #9d9a92;
  --text-muted:#6a675f;
  --copper-deep:#d8481c;
  --copper-glow:#ff8552;
  --gold:      #f3b03a;

  /* tactile depth system (tuned for dark surfaces) */
  --raise:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 1px 2px rgba(0,0,0,.4),
    0 14px 30px -16px rgba(0,0,0,.7);
  --raise-hi:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 2px 3px rgba(0,0,0,.45),
    0 22px 44px -18px rgba(0,0,0,.8);
  --press:
    inset 0 2px 6px rgba(0,0,0,.6),
    inset 0 -1px 0 rgba(255,255,255,.05);
  --ring: 0 0 0 3px color-mix(in oklab, var(--copper) 32%, transparent);

  /* keep brand fonts */
  --r-sm: 5px;
  --r:    11px;
  --r-lg: 18px;
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
html{ background:var(--bg); }
body{
  background:var(--bg);
  color:var(--text);
}
::selection{ background:var(--copper); color:#fff; }

/* ------------------------------------------------------------
   3. BACKGROUND ATMOSPHERE  (index inline ids + styles.css)
   ------------------------------------------------------------ */
/* perforated-metal dot grid (light dots on dark chassis) */
.bg-grid{
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) 0 0/26px 26px !important;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 35%, transparent 92%) !important;
  opacity:.8;
}
.grid-bg{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) !important;
  background-size:26px 26px !important;
}
/* fine grain */
.bg-noise, .grain{
  mix-blend-mode:overlay !important;
  opacity:.06 !important;
}
/* warm aurora glow */
.bg-aurora::before{
  background:radial-gradient(circle, var(--copper) 0%, transparent 65%) !important;
  opacity:.20 !important;
}
.bg-aurora::after{
  background:radial-gradient(circle, var(--signal) 0%, transparent 65%) !important;
  opacity:.14 !important;
}
.blob--copper{ opacity:.32 !important; }
.blob--gold{ opacity:.22 !important; }

/* HUD ticks -> tiny brass screws in the corners */
.hud-ticks .t,
.specimen .tick,
.portrait .tick{
  width:11px !important; height:11px !important; border:0 !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 38% 32%, #fdfbf5 0%, #d9cdb4 34%, #ad9d7e 64%, #82724d 100%) !important;
  box-shadow:0 1px 1px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.12) !important;
}
/* slot on the screw */
.hud-ticks .t::after,
.specimen .tick::after,
.portrait .tick::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:7px; height:1.5px; background:rgba(60,48,28,.55);
  border-radius:1px; transform:rotate(35deg);
}
.hud-ticks .t{ position:absolute; }

/* ------------------------------------------------------------
   4. TOP SYSTEM BAR  -> chassis label strip
   ------------------------------------------------------------ */
.sysbar{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
  color:var(--text-2) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 1px 4px rgba(0,0,0,.3);
  backdrop-filter:none !important;
}
.sysbar__cell b{ color:var(--text) !important; }
.sysbar__sep{ background:var(--line) !important; }
.sysbar__dot{ background:var(--ok) !important; box-shadow:0 0 0 0 rgba(47,158,99,.5), 0 0 6px var(--ok) !important; }
/* clock / release read like a tiny LCD */
#clock, #rel{
  background:var(--screen); color:var(--phosphor);
  padding:2px 7px; border-radius:4px;
  box-shadow:var(--press), 0 0 0 1px rgba(0,0,0,.25);
  letter-spacing:.14em;
  text-shadow:0 0 6px color-mix(in oklab, var(--phosphor) 60%, transparent);
}

/* ------------------------------------------------------------
   5. NAV
   ------------------------------------------------------------ */
.nav.is-scrolled{
  background:color-mix(in oklab, var(--bg-1) 88%, transparent) !important;
  backdrop-filter:blur(10px) saturate(120%) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 8px 24px -16px rgba(0,0,0,.6);
}
.nav__links a{ color:var(--text-2) !important; }
.nav__links a:hover{ color:var(--copper) !important; }
.nav__links a::before{ color:var(--copper) !important; }

/* brand key-cap */
.brand__mark{
  color:#fff !important;
  border:0 !important;
  background:linear-gradient(180deg, var(--copper-2), var(--copper)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 2px 0 var(--copper-d),
    0 8px 16px -8px rgba(196,64,15,.7) !important;
}
.brand__name{ color:var(--text) !important; }
.brand__name em{ color:var(--copper) !important; }
.brand__sub{ color:var(--text-3) !important; border-left-color:var(--line) !important; }

/* ------------------------------------------------------------
   6. BUTTONS — tactile keys
   ------------------------------------------------------------ */
.btn, .nav__cta, .app__cta, .store-btn, .quicknav__item{
  border-radius:10px !important;
  transition:transform .12s var(--ease), box-shadow .2s var(--ease),
             background .2s var(--ease), color .2s var(--ease) !important;
}
.btn--primary, .nav__cta{
  background:linear-gradient(180deg, var(--copper-2), var(--copper)) !important;
  color:#fff !important; border:0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 0 rgba(0,0,0,.16),
    0 3px 0 var(--copper-d),
    0 10px 20px -10px rgba(196,64,15,.6) !important;
}
.btn--primary:hover, .nav__cta:hover{
  background:linear-gradient(180deg, #ff7a45, var(--copper-2)) !important;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.16),
    0 4px 0 var(--copper-d),
    0 16px 26px -10px rgba(196,64,15,.7) !important;
}
.btn--primary:active, .nav__cta:active{
  transform:translateY(2px);
  box-shadow:var(--press), 0 0 0 1px var(--copper-d) !important;
}
.nav__cta::before, .btn--ghost::before{ display:none !important; }

.btn--ghost{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--raise) !important;
}
.btn--ghost:hover{
  color:var(--copper) !important; border-color:var(--copper) !important;
  transform:translateY(-1px); box-shadow:var(--raise-hi) !important;
}
.btn--ghost:active{ transform:translateY(2px); box-shadow:var(--press) !important; }

/* ------------------------------------------------------------
   7. PANELS / CARDS — beveled chassis modules
   ------------------------------------------------------------ */
.panel, .app, .cap__cell, .now-card, .portrait,
.product-card, .stack__item, .detail-card, .prelaunch-block{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--raise) !important;
}
.panel{ border-radius:var(--r-lg) !important; }

/* the faint inner grid on modules -> subtle light dots */
.panel::before, .app::before, .specimen::before, .portrait::before{
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0) 0 0/22px 22px !important;
}

.app:hover, .product-card:hover{
  border-color:color-mix(in oklab, var(--copper) 55%, var(--line)) !important;
  transform:translateY(-4px);
  box-shadow:var(--raise-hi), 0 0 0 1px color-mix(in oklab, var(--copper) 35%, transparent) !important;
}
.cap__cell:hover, .stack__item:hover{
  border-color:color-mix(in oklab, var(--copper) 45%, var(--line)) !important;
  transform:translateY(-3px); box-shadow:var(--raise-hi) !important;
}

.app__head{ border-bottom:1px solid var(--line-soft) !important; color:var(--text-3) !important; }

/* status LEDs */
.app__head .live::before, .now-item__status.live::before{
  background:radial-gradient(circle at 35% 30%, #bfffd8, var(--ok) 60%, #1c6e44) !important;
  box-shadow:0 0 6px var(--ok), 0 0 0 1px rgba(0,0,0,.15) !important;
}
.app__head .soon::before{
  background:radial-gradient(circle at 35% 30%, #ffe6ad, var(--warn) 60%, #9a5e0f) !important;
  box-shadow:0 0 6px var(--warn), 0 0 0 1px rgba(0,0,0,.15) !important;
}
.sysbar__dot, .eyebrow .blip{
  background:radial-gradient(circle at 35% 30%, #fff, var(--ok) 65%) !important;
}

/* ------------------------------------------------------------
   8. SPECIMEN -> inset display well
   ------------------------------------------------------------ */
.specimen{
  background:
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--copper) 14%, transparent), transparent 60%),
    var(--bg-3) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:var(--press) !important;
}
.specimen.cyan{
  background:
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--signal) 14%, transparent), transparent 60%),
    var(--bg-3) !important;
}
.specimen .orbit{ border-color:color-mix(in oklab, var(--copper) 40%, var(--line)) !important; }
.specimen.cyan .orbit{ border-color:color-mix(in oklab, var(--signal) 40%, var(--line)) !important; }
.specimen__glyph{
  border:1px solid color-mix(in oklab, var(--copper) 45%, var(--line)) !important;
  background:linear-gradient(160deg, var(--bg-2), var(--bg-1)) !important;
  color:var(--copper) !important;
  box-shadow:var(--raise) !important;
}
.specimen.cyan .specimen__glyph{
  border-color:color-mix(in oklab, var(--signal) 45%, var(--line)) !important;
  color:var(--signal) !important;
}
.specimen__mark{ color:var(--text-3) !important; }

/* ------------------------------------------------------------
   9. TERMINAL — keep dark, add scanlines + phosphor
   ------------------------------------------------------------ */
.terminal{
  background:var(--screen) !important;
  border:1px solid #000 !important;
  box-shadow:var(--press), inset 0 0 40px rgba(0,0,0,.5) !important;
  color:#c9c2a8 !important;
  position:relative; overflow:hidden;
}
.terminal::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.04) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.terminal .ok{ color:var(--phosphor-2) !important; text-shadow:0 0 6px rgba(126,231,135,.5); }
.terminal .sig{ color:var(--phosphor-c) !important; }
.terminal .cp{ color:var(--phosphor) !important; text-shadow:0 0 6px rgba(255,180,84,.5); }
.terminal .cmd{ color:#f3eede !important; }
.terminal .mu{ color:#8a836b !important; }
.terminal .caret{ background:var(--phosphor) !important; box-shadow:0 0 8px var(--phosphor); }

/* waveform -> orange EQ bars sitting in the panel */
.wave span{
  background:linear-gradient(to top, var(--copper), var(--copper-2)) !important;
  box-shadow:0 0 4px color-mix(in oklab, var(--copper) 40%, transparent);
}

.panel__head{ color:var(--text-3) !important; border-bottom-color:var(--line) !important; }
.panel__head b{ color:var(--copper) !important; }
.signal-card__title{ color:var(--text) !important; }
.kpi-row{ border-top-color:var(--line) !important; }
.kpi-row:last-child{ border-bottom-color:var(--line) !important; }
.kpi-row__name{ color:var(--text-2) !important; }
.kpi-row__val{ color:var(--text) !important; }

/* ------------------------------------------------------------
   10. TICKER
   ------------------------------------------------------------ */
.ticker{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
  border-top:1px solid var(--line) !important; border-bottom:1px solid var(--line) !important;
  color:var(--text-2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.3);
}
.ticker::before{ background:linear-gradient(to right, var(--bg), transparent) !important; }
.ticker::after{ background:linear-gradient(to left, var(--bg), transparent) !important; }
.ticker__track .sep{ color:var(--copper) !important; }

/* ------------------------------------------------------------
   11. SECTIONS / HEADINGS
   ------------------------------------------------------------ */
.section--alt{ background:linear-gradient(180deg, var(--bg), var(--bg-3)) !important; border-top:1px solid var(--line) !important; }
.sec-head__id, .sec-head__id::before{ color:var(--copper) !important; }
.sec-head__id b{ color:var(--text-2) !important; }
.sec-head__title{ color:var(--text) !important; }
.sec-head__title em{ color:var(--copper) !important; }
.sec-head__lead, .hero__lead{ color:var(--text-2) !important; }
.hero__title{ color:var(--text) !important; }
.eyebrow{ color:var(--text-2) !important; }

/* manifest / principles */
.principles{ border-top-color:var(--line) !important; }
.prin{ border-bottom-color:var(--line) !important; }
.prin__id{ color:var(--copper) !important; }
.prin__title{ color:var(--text) !important; }
.prin__title em{ color:var(--copper) !important; }
.prin__text{ color:var(--text-2) !important; }
.prin__text code{
  background:color-mix(in oklab, var(--copper) 14%, transparent) !important;
  color:var(--copper-d) !important;
}

/* capability */
.cap__num, .cap__name em{ color:var(--copper) !important; }
.cap__name{ color:var(--text) !important; }
.cap__desc{ color:var(--text-2) !important; }
.cap__num .meter i{ background:var(--bg-3) !important; box-shadow:inset 0 1px 1px rgba(0,0,0,.15); }
.cap__num .meter i.on{ background:var(--copper) !important; box-shadow:0 0 5px var(--copper) !important; }
.chip{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
  border:1px solid var(--line) !important; color:var(--text-2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.cap__stack{ border-top-color:var(--line) !important; }

/* now / timeline / bignum */
.now-card__h{ color:var(--text-3) !important; border-bottom-color:var(--line) !important; }
.now-card__h b{ color:var(--copper) !important; }
.now-item__body strong{ color:var(--text) !important; }
.now-item__body span{ color:var(--text-2) !important; }
.now-item__time{ color:var(--text-3) !important; }
.bignum__row{ border-bottom-color:var(--line) !important; }
.bignum__n{
  -webkit-text-fill-color:initial !important;
  background:none !important; color:var(--copper) !important;
}
.bignum__n.alt{ color:var(--signal) !important; }
.bignum__label{ color:var(--text-3) !important; }
.bignum__text{ color:var(--text-2) !important; }

/* studio log */
.log__entry{ border-bottom-color:var(--line) !important; }
.log__entry:first-child{ border-top-color:var(--line) !important; }
.log__date .d{ color:var(--copper) !important; }
.log__date .v{ color:var(--text-3) !important; }
.log__chip{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
  border:1px solid var(--line) !important; color:var(--text-2) !important;
}
.log__title{ color:var(--text) !important; }
.log__sum{ color:var(--text-2) !important; }

/* ------------------------------------------------------------
   12. STUDIO / PORTRAIT
   ------------------------------------------------------------ */
.portrait{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
}
.portrait__inner--mono{ border-color:color-mix(in oklab, var(--copper) 35%, var(--line)) !important; }
.portrait__b{ color:var(--copper) !important; text-shadow:none !important; }
.portrait__name{ color:var(--text) !important; }
.portrait__est{ color:var(--text-3) !important; }
.portrait__caption{ color:var(--text-3) !important; }
.studio__body p{ color:var(--text-2) !important; }
.studio__body p b{ color:var(--text) !important; }
.studio__value .k{ color:var(--copper) !important; }
.studio__value .v{ color:var(--text) !important; }
.studio__sig{ color:var(--text-2) !important; }

/* ------------------------------------------------------------
   13. CTA / FOOTER
   ------------------------------------------------------------ */
.cta{
  background:radial-gradient(circle at 50% 0%, color-mix(in oklab, var(--copper) 16%, transparent), transparent 60%), var(--bg) !important;
  border-top:1px solid var(--line) !important;
}
.cta::after{ opacity:.3 !important; }
.cta__eyebrow, .cta__eyebrow::before, .cta__eyebrow::after{ color:var(--copper) !important; background:var(--copper); }
.cta__eyebrow{ background:none; color:var(--copper) !important; }
.cta__title{ color:var(--text) !important; }
.cta__title em{ color:var(--copper) !important; }
.cta__lead{ color:var(--text-2) !important; }

.footer{ background:linear-gradient(180deg, var(--bg-3), var(--bg-1)) !important; border-top:1px solid var(--line) !important; }
.footer__tagline{ color:var(--text-2) !important; }
.footer__col h4{ color:var(--text-3) !important; }
.footer__col a{ color:var(--text-2) !important; }
.footer__col a:hover{ color:var(--copper) !important; }
.footer__bottom{ color:var(--text-3) !important; border-top-color:var(--line) !important; }

/* ------------------------------------------------------------
   14. SCROLL-NAV (side dots)
   ------------------------------------------------------------ */
.scroll-nav__item .dot{ border-color:color-mix(in oklab, var(--text) 28%, transparent) !important; background:var(--bg-2) !important; box-shadow:var(--raise); }
.scroll-nav__item:hover .dot{ border-color:var(--copper) !important; }
.scroll-nav__item.is-active .dot{ background:var(--copper) !important; border-color:var(--copper) !important; box-shadow:0 0 0 3px color-mix(in oklab, var(--copper) 20%, transparent), 0 0 8px var(--copper) !important; }
.scroll-nav__item .label{
  background:var(--bg-2) !important; border:1px solid var(--line) !important;
  color:var(--text-2) !important; box-shadow:var(--raise);
}

/* ------------------------------------------------------------
   15. LANGUAGE SWITCHER
   ------------------------------------------------------------ */
.lang__toggle{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
  border:1px solid var(--line) !important; color:var(--text-2) !important;
  box-shadow:var(--raise) !important;
}
.lang__toggle:hover{ border-color:var(--copper) !important; color:var(--copper) !important; }
.lang__menu{
  background:var(--bg-1) !important; border:1px solid var(--line) !important;
  box-shadow:var(--raise-hi) !important;
}
.lang__option{ color:var(--text-2) !important; }
.lang__option:hover{ background:var(--bg-3) !important; color:var(--text) !important; }
.lang__option.is-active{ color:var(--copper) !important; background:color-mix(in oklab, var(--copper) 12%, transparent) !important; }
.lang__option-code{ color:var(--text-3) !important; }

/* ------------------------------------------------------------
   16. MISC
   ------------------------------------------------------------ */
.app__cat{ color:var(--copper) !important; }
.app__title{ color:var(--text) !important; }
.app__title em{ color:var(--copper) !important; }
.app__desc{ color:var(--text-2) !important; }
.app__feats li{ color:var(--text-2) !important; }
.app__feats li::before{ color:var(--copper) !important; }
.app__feats{ border-top-color:var(--line) !important; }
.app__meta{ border-color:var(--line) !important; }
.app__meta-cell{ border-right-color:var(--line) !important; }
.app__meta-cell .l{ color:var(--text-3) !important; }
.app__meta-cell .v{ color:var(--text) !important; }
.app__cta{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
  border:1px solid var(--line) !important; color:var(--text) !important;
  box-shadow:var(--raise) !important;
}
.app__cta:hover{ background:linear-gradient(180deg, var(--copper-2), var(--copper)) !important; color:#fff !important; border-color:var(--copper) !important; box-shadow:var(--raise-hi) !important; }
.app__legal a{ color:var(--text-2) !important; }
.app__legal a:hover{ color:var(--copper) !important; }
.hero__meta{ border-top-color:var(--line) !important; }
.hero__meta-label{ color:var(--text-3) !important; }
.hero__meta-value{ color:var(--text) !important; }

/* ============================================================
   17. SUBPAGES (styles.css) — hardware specifics
   ============================================================ */
/* recessed input slots */
.form__input, .form__textarea{
  background:var(--bg-3) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--press) !important;
  color:var(--text) !important;
}
.form__input:focus, .form__textarea:focus{
  background:var(--bg-2) !important;
  border-color:var(--copper) !important;
  box-shadow:var(--press), var(--ring) !important;
}
.form__input::placeholder, .form__textarea::placeholder{ color:var(--text-3) !important; }
.form__label{ color:var(--text-2) !important; }
.form__check{ color:var(--text-2) !important; }

/* readable status pills on cream */
.form__status.is-success{
  background:color-mix(in oklab, var(--ok) 16%, var(--bg-1)) !important;
  border:1px solid color-mix(in oklab, var(--ok) 50%, var(--line)) !important;
  color:#7fe3a8 !important;
}
.form__status.is-error{
  background:color-mix(in oklab, #ff5a5a 14%, var(--bg-1)) !important;
  border:1px solid color-mix(in oklab, #ff5a5a 50%, var(--line)) !important;
  color:#ff9a9a !important;
}
.form__status.is-loading{ color:var(--text-2) !important; }

/* store badge -> raised tactile key */
.store-btn{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
  border:1px solid var(--line) !important; color:var(--text) !important;
  box-shadow:var(--raise) !important;
}
.store-btn:hover{ transform:translateY(-1px); box-shadow:var(--raise-hi) !important; color:#fff !important; }
.store-btn:active{ transform:translateY(2px); box-shadow:var(--press) !important; }

/* generic solid button */
.btn--solid{
  background:linear-gradient(180deg, var(--copper-2), var(--copper)) !important;
  color:#fff !important; border:0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.16),
    0 3px 0 var(--copper-d), 0 10px 20px -10px rgba(196,64,15,.6) !important;
}
.btn--solid:active{ transform:translateY(2px); box-shadow:var(--press) !important; }

/* nav burger */
.nav__toggle{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
  border:1px solid var(--line) !important; color:var(--text) !important;
  border-radius:9px !important; box-shadow:var(--raise) !important; padding:7px !important;
}
.nav__links.is-open{
  background:var(--bg-1) !important; border:1px solid var(--line) !important;
  box-shadow:var(--raise-hi) !important;
}

/* subpage hero label cursor-spotlight wash -> keep faint warm */
.spotlight{
  background:radial-gradient(600px circle at var(--mx) var(--my),
    color-mix(in oklab, var(--copper) 8%, transparent), transparent 45%) !important;
}

/* product card media -> inset display well */
.product-card__media, .detail-card__media{
  background:var(--bg-3) !important;
  box-shadow:var(--press) !important;
}

/* recessed prelaunch screen block */
.prelaunch-block{ box-shadow:var(--raise) !important; }
.prelaunch-block h3{ color:var(--text) !important; }
.prelaunch-block h3 em{ color:var(--copper) !important; }
.prelaunch-block p{ color:var(--text-2) !important; }

/* marquee */
.marquee{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
  border-top:1px solid var(--line) !important; border-bottom:1px solid var(--line) !important;
  color:var(--text-2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.3) !important;
}
.marquee::before{ background:linear-gradient(to right, var(--bg), transparent) !important; }
.marquee::after{ background:linear-gradient(to left, var(--bg), transparent) !important; }

/* manifesto rows */
.manifesto__row{ border-color:var(--line) !important; }
.manifesto__num, .manifesto__title em{ color:var(--copper) !important; }

/* section dividers */
.divider{ border-top-color:var(--line) !important; }

/* legal / long-form prose readability */
.legal-content, .prose, .doc{ color:var(--text-2) !important; }
.legal-content h1, .legal-content h2, .legal-content h3,
.prose h1, .prose h2, .prose h3, .doc h1, .doc h2, .doc h3{ color:var(--text) !important; }
.legal-content a, .prose a, .doc a{ color:var(--copper-d) !important; }

/* ============================================================
   18. EXTRA HARDWARE EFFECTS
   ============================================================ */
/* glossy LEDs in the panel head (was mac traffic lights) */
.panel__head .dots span{
  position:relative;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6), 0 0 4px rgba(0,0,0,.2) !important;
}
.panel__head .dots span::after{
  content:""; position:absolute; top:1px; left:1.4px; width:2.6px; height:2.6px;
  border-radius:50%; background:rgba(255,255,255,.85);
}
.panel__head .dots span:nth-child(1){ background:radial-gradient(circle at 35% 30%, #ff9a8a, #ef6f6f 70%) !important; }
.panel__head .dots span:nth-child(2){ background:radial-gradient(circle at 35% 30%, #ffe09a, #f6c66f 70%) !important; }
.panel__head .dots span:nth-child(3){
  background:radial-gradient(circle at 35% 30%, #c8ffd9, var(--ok) 70%) !important;
  animation:ledBlink 2.6s steps(1) infinite;
}
@keyframes ledBlink{ 0%,92%{ filter:none } 94%,100%{ filter:brightness(.55) } }

/* tactile small chips & meta */
.chip{ transition:transform .15s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease) !important; }
.chip:hover{ transform:translateY(-1px); border-color:var(--copper) !important; box-shadow:var(--raise-hi) !important; }

/* moving "scan" highlight across dark screens */
.terminal::before{
  content:""; position:absolute; left:0; right:0; top:0; height:42%;
  background:linear-gradient(180deg, rgba(255,180,84,.10), transparent);
  pointer-events:none; z-index:1;
  animation:screenScan 5.5s linear infinite;
}
@keyframes screenScan{ 0%{ transform:translateY(-120%) } 100%{ transform:translateY(320%) } }
.terminal > *{ position:relative; z-index:2 }

/* screws give a subtle turn when their module is hovered */
.app:hover .tick::after,
.portrait:hover .tick::after{ transform:rotate(115deg) !important; transition:transform .5s var(--ease); }

/* ---- power-on scan sweep (one-shot, injected by fx-bg.js) ---- */
.fx-boot{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%,
    color-mix(in oklab, var(--copper) 40%, transparent) 47%,
    color-mix(in oklab, var(--copper) 55%, transparent) 50%,
    color-mix(in oklab, var(--copper) 40%, transparent) 53%, transparent 100%);
  mix-blend-mode:screen;
  transform:translateY(-100%);
  animation:fxBootSweep .9s var(--ease) forwards;
}
@keyframes fxBootSweep{
  0%{ transform:translateY(-100%); opacity:1 }
  85%{ opacity:1 }
  100%{ transform:translateY(100%); opacity:0 }
}
@media (prefers-reduced-motion: reduce){
  .fx-boot{ display:none !important }
  .terminal::before, .panel__head .dots span:nth-child(3){ animation:none !important }
}

/* ---- rotary knob (injected into .panel__head by fx.js) ---- */
.panel__head{ gap:10px !important; }
.panel__head > :first-child{ margin-right:auto !important; }
.fx-knob{
  width:22px; height:22px; border-radius:50%; flex:0 0 auto; position:relative;
  background:
    radial-gradient(circle at 38% 30%, #fbf8f1, #cfc6b3 55%, #9b9079 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 3px rgba(0,0,0,.18),
    0 2px 3px rgba(60,48,28,.35);
}
.fx-knob::after{
  content:""; position:absolute; left:50%; top:3px; width:2px; height:7px;
  background:var(--copper); border-radius:2px;
  transform-origin:50% 8px;
  animation:knobIdle 9s linear infinite;
}
@keyframes knobIdle{ from{ transform:translateX(-50%) rotate(0) } to{ transform:translateX(-50%) rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .fx-knob::after{ animation:none } }