/* ==========================================================================
   TEKLINOX — visual upgrade layer
   Loaded AFTER the page's own <style> block, so these rules win the cascade
   without needing !important. Nothing here removes the original design —
   it only adds glow, motion and a few redesigned components on top of it.
   ========================================================================== */

:root{
  --mx: 50vw;
  --my: 50vh;
  --glow-r: 220px;
  --glow-op: 1;
}

/* -------------------------------------------------------------------------
   0. Matte grain — a whisper of texture so panels read as matte, not flat
   ------------------------------------------------------------------------- */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.035;
  mix-blend-mode:overlay;
}

/* -------------------------------------------------------------------------
   1. Circuit spotlight — the board brightens where the cursor travels
   ------------------------------------------------------------------------- */
.circuit-spotlight{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%2322c3a6' stroke-width='1.2'%3E%3Cpath d='M0 40 H70 L90 20 H160'/%3E%3Cpath d='M240 200 H170 L150 220 H80'/%3E%3Cpath d='M40 0 V60 L60 80 V160'/%3E%3Cpath d='M200 240 V180 L180 160 V80'/%3E%3Cpath d='M0 140 H50'/%3E%3Cpath d='M240 100 H190'/%3E%3C/g%3E%3Cg fill='%234f8fe0'%3E%3Ccircle cx='90' cy='20' r='3.2'/%3E%3Ccircle cx='150' cy='220' r='3.2'/%3E%3C/g%3E%3Cg fill='%2322c3a6'%3E%3Ccircle cx='160' cy='20' r='2.6'/%3E%3Ccircle cx='80' cy='220' r='2.6'/%3E%3Ccircle cx='60' cy='80' r='2.6'/%3E%3Ccircle cx='180' cy='160' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:240px 240px;
  mix-blend-mode:screen;
  opacity:0.85;
  -webkit-mask-image: radial-gradient(circle var(--glow-r) at var(--mx) var(--my), #fff 0%, transparent 72%);
  mask-image: radial-gradient(circle var(--glow-r) at var(--mx) var(--my), #fff 0%, transparent 72%);
  transition:opacity .4s ease;
}
html.no-fine-pointer .circuit-spotlight{ display:none; }

/* -------------------------------------------------------------------------
   2. Live current field — wires with current actually moving through them,
      fixed behind all content so it reads through the whole page, not just
      the hero.
   ------------------------------------------------------------------------- */
.current-field{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0.55; mix-blend-mode:screen;
}
.current-field svg{ width:100%; height:100%; display:block; }
.current-field .wire{ animation:none; }
.current-field .pulse-dash{
  stroke-dasharray:10 140;
  animation:currentFlow 4.5s linear infinite;
}
.current-field .pulse-dash.rev{ animation-direction:reverse; }
@keyframes currentFlow{
  from{ stroke-dashoffset:0; }
  to{ stroke-dashoffset:-600; }
}

/* -------------------------------------------------------------------------
   3. Cursor glow — a soft halo that trails the pointer, plus a bright core
   ------------------------------------------------------------------------- */
.cursor-glow{
  position:fixed; top:0; left:0; z-index:120; pointer-events:none;
  border-radius:50%;
  will-change:transform;
  mix-blend-mode:screen;
}
.cursor-glow.halo{
  width:340px; height:340px; margin:-170px 0 0 -170px;
  background:radial-gradient(circle, rgba(127,232,220,0.20) 0%, rgba(34,195,166,0.10) 32%, transparent 68%);
  filter:blur(2px);
  opacity:var(--glow-op);
  transition:opacity .35s ease, width .35s ease, height .35s ease, margin .35s ease;
}
.cursor-glow.core{
  width:10px; height:10px; margin:-5px 0 0 -5px;
  background:radial-gradient(circle, #e2fbf5 0%, #7fe8dc 45%, rgba(34,195,166,0) 75%);
  box-shadow:0 0 12px 3px rgba(127,232,220,0.55), 0 0 26px 8px rgba(34,195,166,0.28);
  opacity:var(--glow-op);
  transition:opacity .35s ease;
}
html.cursor-active .cursor-glow.halo{ width:460px; height:460px; margin:-230px 0 0 -230px; }
html.cursor-active .cursor-glow.halo,
html.cursor-active .cursor-glow.core{ opacity:1; }
html.no-fine-pointer .cursor-glow{ display:none; }

/* Idle fade — after 3s of no pointer movement the glow (and the circuit
   spotlight it drives) softly disappears; moving the pointer brings it back. */
html.cursor-idle .cursor-glow.halo,
html.cursor-idle .cursor-glow.core{
  opacity:0 !important;
  transition:opacity 1s ease;
}
html.cursor-idle .circuit-spotlight{
  opacity:0 !important;
  transition:opacity 1s ease;
}
html:not(.cursor-idle) .cursor-glow.halo,
html:not(.cursor-idle) .cursor-glow.core{
  transition:opacity .3s ease, width .35s ease, height .35s ease, margin .35s ease;
}
html:not(.cursor-idle) .circuit-spotlight{
  transition:opacity .3s ease;
}
@media (prefers-reduced-motion: reduce){
  .cursor-glow{ display:none; }
  .current-field .pulse-dash{ animation:none; }
}

/* -------------------------------------------------------------------------
   4. Buttons — redesigned: glassy depth, a real light sweep, an animated
      "powered" border instead of a flat rule.
   ------------------------------------------------------------------------- */
.btn{
  border-radius:10px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:14px 28px;
  letter-spacing:0.08em;
  transform:translateY(0) scale(1);
  transition:transform .28s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease, border-color .3s ease, background .3s ease, color .3s ease;
}
.btn:active{ transform:translateY(1px) scale(0.98); }

.btn-primary{
  background:linear-gradient(155deg, var(--mint) 0%, var(--trace-bright) 55%, var(--mint-dim) 100%);
  color:#04121c;
  border:1px solid rgba(127,232,220,0.6);
  box-shadow:
    0 10px 28px -10px rgba(34,195,166,0.65),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -10px 16px -10px rgba(2,14,20,0.45);
}
.btn-primary::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.65) 45%, transparent 60%);
  transform:translateX(-140%);
  transition:transform .7s ease;
  pointer-events:none;
}
.btn-primary:hover{
  transform:translateY(-2px) scale(1.015);
  box-shadow:
    0 16px 36px -10px rgba(34,195,166,0.8),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -10px 16px -10px rgba(2,14,20,0.4);
  background:linear-gradient(155deg, #94f0e0 0%, var(--mint) 55%, var(--trace-bright) 100%);
}
.btn-primary:hover::before{ transform:translateX(140%); }

@property --brd-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.btn-ghost{
  color:var(--text);
  border:1px solid transparent;
  background:
    linear-gradient(var(--bg-alt), var(--bg-alt)) padding-box,
    conic-gradient(from var(--brd-angle), var(--trace) 0 62%, var(--trace-bright) 78%, var(--gold) 86%, var(--trace) 100%) border-box;
  animation:rotateBorder 6s linear infinite;
}
@keyframes rotateBorder{ to{ --brd-angle:360deg; } }
.btn-ghost::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120px 60px at 50% 120%, rgba(34,195,166,0.28), transparent 70%);
  opacity:0; transition:opacity .3s ease;
  pointer-events:none;
}
.btn-ghost:hover{
  color:var(--mint);
  transform:translateY(-2px) scale(1.015);
  text-shadow:0 0 12px rgba(127,232,220,0.5);
}
.btn-ghost:hover::before{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .btn-ghost{ animation:none; }
}

/* -------------------------------------------------------------------------
   5. Cards & posts — glass sheen on hover, lifted glow, tidy corner accents
   ------------------------------------------------------------------------- */
.card, .post{
  position:relative;
  transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, border-color .35s ease;
}
.card::after, .post::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, transparent 42%, rgba(127,232,220,0.65) 50%, transparent 58%);
  background-size:240% 240%;
  background-position:0% 0%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s ease, background-position 1s ease;
  pointer-events:none;
}
.card:hover, .post:hover{ transform:translateY(-5px) scale(1.008); }
.card:hover::after, .post:hover::after{ opacity:1; background-position:100% 100%; }

/* corner pads, echoing PCB test-points, appear on hover */
.card::before{ z-index:1; }
.card .tag{ position:relative; }
.card .tag::after{
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--trace-bright); margin-left:6px; vertical-align:middle;
  box-shadow:0 0 6px 1px var(--trace-bright);
  opacity:0; transition:opacity .3s ease;
}
.card:hover .tag::after{ opacity:1; }

.post-media .pin{
  animation:pinGlow 2.6s ease-in-out infinite;
}
@keyframes pinGlow{
  0%,100%{ box-shadow:0 0 10px 2px var(--trace-bright); opacity:0.85; }
  50%{ box-shadow:0 0 16px 5px var(--trace-bright); opacity:1; }
}

/* -------------------------------------------------------------------------
   6. Nav — live underline trace on the active tab
   ------------------------------------------------------------------------- */
nav.components a.current::after{
  content:"";
  position:absolute; left:8px; right:8px; bottom:4px; height:2px;
  background:linear-gradient(90deg, transparent, var(--trace-bright), transparent);
  background-size:200% 100%;
  animation:flowLine 2.2s linear infinite;
}
@keyframes flowLine{
  from{ background-position:200% 0; }
  to{ background-position:-200% 0; }
}
@media (prefers-reduced-motion: reduce){
  nav.components a.current::after{ animation:none; }
}

/* -------------------------------------------------------------------------
   7. Scroll reveal — sections settle into place instead of just appearing
   ------------------------------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* -------------------------------------------------------------------------
   8. Small global polish — selection, scrollbar, focus
   ------------------------------------------------------------------------- */
::selection{ background:rgba(34,195,166,0.35); color:#e2fbf5; }
html{ scrollbar-color:var(--trace-bright) var(--bg-alt); scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-alt); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--trace-bright), var(--mint-dim));
  border-radius:6px; border:2px solid var(--bg-alt);
}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--trace-bright); outline-offset:3px; border-radius:4px;
}

/* logo mark gets a slow living shimmer instead of a static gradient */
.logo-mark{
  background-size:200% 200%;
  animation:logoShimmer 8s ease-in-out infinite;
}
@keyframes logoShimmer{
  0%,100%{ background-position:0% 30%; }
  50%{ background-position:100% 70%; }
}
@media (prefers-reduced-motion: reduce){
  .logo-mark{ animation:none; }
}

/* =========================================================================
   9. Mobile — drop the cursor-glow / circuit-spotlight entirely on touch
      and small screens (there's no cursor to chase, so it only ever
      misbehaves there). JS also skips initializing it on these devices.
   ========================================================================= */
@media (max-width: 820px), (pointer: coarse){
  .cursor-glow, .circuit-spotlight{ display:none !important; }
}

/* =========================================================================
   10. Scroll-glitch fix — the animated fixed background layers (drifting
       grid, floating orbs, flowing current) used to get paused the instant
       the page was scrolled, which read as the background "stopping"
       instead of feeling alive. Instead of pausing, each layer is promoted
       to its own persistent GPU compositor layer up front (will-change),
       so the browser never has to repaint it against the scrolling content
       — it keeps flowing continuously through scroll with no jank.
   ========================================================================= */
.pcb-field, .current-field, .circuit-spotlight, .grain{
  transform:translateZ(0);
  backface-visibility:hidden;
}
.pcb-field::before,
.glow-orb,
.current-field .pulse-dash,
.hero-trace .pulse{
  will-change:transform;
}
.pcb-field::before{ transform:translateZ(0); }
.glow-orb{ transform:translateZ(0); }
@media (max-width: 820px){
  /* board stays readable on small screens; orbs are the priciest layer
     (large blur radius) so they're trimmed there */
  .glow-orb{ animation:none; will-change:auto; }
  .current-field{ opacity:0.4; }
}

/* =========================================================================
   10b. Mobile perf — the two actual sources of phone lag/glitching.
       1) The sticky header's backdrop-filter blur has to be resampled by
          the browser on every single scroll frame (it's blurring whatever
          scrolls underneath it) — brutal on phone GPUs. Swapped for a
          solid near-opaque background on mobile: same look at rest,
          no per-frame blur cost while scrolling.
       2) The flowing-current animation drives stroke-dashoffset on SVG
          paths, which is a paint-cost animation (not compositor-only like
          a transform) — fine on desktop GPUs, but adds up on mobile when
          it's running continuously through a scroll. Paused on mobile
          only; the grid drift and orbs (transform-based, GPU-cheap) keep
          moving so the board still reads as alive, just without the one
          animation that was actually costing frames.
   ========================================================================= */
@media (max-width: 820px), (pointer: coarse){
  header{ backdrop-filter:none !important; background:rgba(5,9,13,0.97) !important; }
  .current-field .pulse-dash{ animation:none !important; }
}

/* =========================================================================
   10c. Background current — flows for a few seconds after load (see the
       timer in enhance.js), then settles for good. Also: a darker overall
       palette so the glow isn't as hard on the eyes, and a couple more
       weight-trims for low-end phones (the actual ask behind "make it
       lighter" — reducing GPU/paint cost, not just color).
   ========================================================================= */
html.current-settled .current-field .pulse-dash,
html.current-settled .hero-trace .pulse{
  animation:none !important;
}
:root{
  --bg:#03060a;
  --bg-alt:#080f16;
  --panel:#0a121a;
}
body{
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, #081319 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, #060d13 0%, transparent 55%),
    var(--bg) !important;
}
.glow-orb{ opacity:0.13; }
.glow-orb.gold{ opacity:0.08; }
.glow-orb.mint2{ opacity:0.05; }
@media (max-width: 820px), (pointer: coarse){
  .glow-orb{ filter:blur(56px); }
  .circuit-pattern{ mix-blend-mode:normal; opacity:0.08; }
  .grain{ display:none; }
}

/* =========================================================================
   11. Logo — hexagonal chip mark with a bolt, replacing the plain "/" mark
   ========================================================================= */
.brand{ display:flex; align-items:center; gap:10px; }
header .brand{ margin-left:-12px; }
.brand-mark{ display:block; flex:none; filter:drop-shadow(0 0 6px rgba(34,195,166,0.35)); transition:filter .3s ease, transform .3s ease; }
.brand:hover .brand-mark{ filter:drop-shadow(0 0 14px rgba(34,195,166,0.65)); transform:rotate(8deg) scale(1.05); }
.brand-word{ position:relative; }
.footer-inner .brand-mark{ width:24px; height:24px; }

/* =========================================================================
   12. Hero eyebrow — resized into a proper glowing badge, not a plain line
   ========================================================================= */
.eyebrow{
  font-size:0.82rem !important;
  padding:9px 20px 9px 16px;
  border:1px solid rgba(34,195,166,0.45);
  border-radius:999px;
  background:rgba(34,195,166,0.06);
  box-shadow:0 0 0 1px rgba(34,195,166,0.08), 0 0 26px -10px var(--trace-bright);
  backdrop-filter:blur(4px);
}
.eyebrow::before{
  animation:eyebrowBlip 1.8s ease-in-out infinite;
}
@keyframes eyebrowBlip{
  0%,100%{ opacity:1; box-shadow:0 0 8px 2px var(--trace-bright); }
  50%{ opacity:0.4; box-shadow:0 0 4px 1px var(--trace-bright); }
}
@media (prefers-reduced-motion: reduce){
  .eyebrow::before{ animation:none; }
}

/* =========================================================================
   13. Hero quote — a console / oscilloscope readout instead of plain prose
   ========================================================================= */
.quote{
  font-family:'JetBrains Mono',monospace !important;
  font-size:0.98rem !important;
  line-height:1.75;
  text-align:left;
  max-width:620px;
  padding:22px 26px;
  border:1px solid var(--trace);
  border-radius:2px;
  background:rgba(9,13,18,0.55);
  backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03), 0 20px 40px -24px rgba(0,0,0,0.6);
}
.type-cursor{
  display:inline-block; color:var(--trace-bright);
  animation:blinkCursor 1s step-end infinite;
}
@keyframes blinkCursor{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .type-cursor{ animation:none; }
}

/* =========================================================================
   14. Buttons — extra life: an always-on "powered" pulse on the primary
       action, and a sliding arrow on both.
   ========================================================================= */
.btn{ gap:2px; }
.btn::after{
  content:"→"; margin-left:8px; display:inline-block;
  transition:transform .3s cubic-bezier(.2,.8,.25,1);
}
.btn:hover::after{ transform:translateX(5px); }
.btn-primary{ animation:btnPulse 3.2s ease-in-out infinite; }
@keyframes btnPulse{
  0%,100%{ box-shadow:0 10px 28px -10px rgba(34,195,166,0.65), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -10px 16px -10px rgba(2,14,20,0.45); }
  50%{ box-shadow:0 10px 34px -8px rgba(34,195,166,0.9), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -10px 16px -10px rgba(2,14,20,0.45); }
}
.btn-primary:hover{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .btn-primary{ animation:none; }
}

/* =========================================================================
   15. Vertical scroll-progress gauge — a segmented battery-style block
       stack on the left edge that lights up block by block as the page
       is read, with a live "[ n/10 BLOCKS ] / xx% LEVEL" readout below it.
       Markup for the blocks + label is generated in enhance.js; this just
       styles it.
   ========================================================================= */
.scroll-progress-wrap{
  position:fixed; left:16px; top:50%; transform:translateY(-50%);
  z-index:90; display:flex; flex-direction:column; align-items:flex-start;
  gap:14px; pointer-events:none;
}
.scroll-progress{
  position:relative; width:30px; padding:6px 5px;
  display:flex; flex-direction:column; gap:3px;
  background:rgba(7,13,19,0.6);
  border:1px solid rgba(34,195,166,0.35);
  border-radius:3px;
  clip-path:polygon(0 9px, 9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  box-shadow:0 0 0 1px rgba(34,195,166,0.08), 0 0 22px -10px rgba(34,195,166,0.5);
}
.scroll-progress::before,
.scroll-progress::after{
  content:""; position:absolute; right:-11px; width:8px; height:2px;
  background:var(--gold); box-shadow:0 0 5px var(--gold); opacity:0.8;
}
.scroll-progress::before{ top:26%; }
.scroll-progress::after{ top:64%; }
.progress-block{
  width:100%; height:15px; border-radius:1px;
  background:rgba(22,50,74,0.35);
  border:1px solid rgba(34,195,166,0.22);
  clip-path:polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.progress-block.filled{
  background:linear-gradient(180deg, var(--mint) 0%, var(--trace-bright) 60%, var(--mint-dim) 100%);
  border-color:var(--trace-bright);
  box-shadow:0 0 7px -1px var(--trace-bright);
}
.scroll-progress-label{
  font-family:'JetBrains Mono',monospace; font-size:0.66rem; letter-spacing:0.02em;
  display:flex; flex-direction:column; gap:3px; white-space:nowrap;
}
.scroll-progress-label .level-pct{
  color:var(--gold); text-shadow:0 0 6px rgba(79,143,224,0.5);
}
@media (prefers-reduced-motion: reduce){
  .progress-block{ transition:none; }
}
@media (max-width:820px){
  .scroll-progress-wrap{ left:8px; gap:8px; }
  .scroll-progress{ width:18px; padding:4px 3px; gap:2px; }
  .progress-block{ height:9px; }
  .scroll-progress-label{ display:none; }
  .scroll-progress::before,
  .scroll-progress::after{ right:-7px; width:5px; }
}

/* =========================================================================
   16. About / Mission section — purple-green scheme, distinct from the
       rest of the (all-green) site, so it reads as a deliberate closing
       note rather than another product section.
   ========================================================================= */
:root{
  --violet:#b48cff;
  --violet-dim:#7a5ccc;
  --violet-glow:rgba(180,140,255,0.35);
}
.mission{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 15% 0%, rgba(180,140,255,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 85% 100%, rgba(34,195,166,0.08) 0%, transparent 55%);
  border-top:1px solid var(--violet-dim);
}
.mission .refdes{
  color:var(--violet); border-color:var(--violet);
  animation:missionPulse 4s ease-in-out infinite;
}
@keyframes missionPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(180,140,255,0); }
  50%{ box-shadow:0 0 14px 1px rgba(180,140,255,.4); }
}
.mission h2{
  background:linear-gradient(100deg, var(--mint) 0%, var(--violet) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mission-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:start;
}
@media (max-width:820px){ .mission-grid{ grid-template-columns:1fr; } }
.mission-copy p{ color:var(--text-dim); margin:0 0 16px; max-width:620px; }
.mission-copy p:last-child{ margin-bottom:0; }
.mission-copy strong{ color:var(--mint); font-weight:600; }
.mission-card{
  background:linear-gradient(165deg, rgba(180,140,255,0.08), rgba(34,195,166,0.05));
  border:1px solid var(--violet-dim);
  border-radius:2px; padding:28px;
  box-shadow:0 20px 50px -30px var(--violet-glow);
  position:relative;
}
.mission-card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg, transparent, var(--violet), var(--trace-bright), transparent);
}
.mission-card h3{
  font-size:1.05rem; margin-bottom:6px; color:var(--text);
}
.mission-card .role{
  font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--violet);
  text-transform:uppercase; letter-spacing:0.08em; display:block; margin-bottom:14px;
}
.mission-card p{ color:var(--text-dim); font-size:0.92rem; margin:0 0 12px; }
.mission-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.mission-tags span{
  font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.05em;
  color:var(--violet); border:1px solid var(--violet-dim); padding:4px 10px;
  border-radius:999px; text-transform:uppercase;
}

/* =========================================================================
   17. High-voltage generator blocks + modal (Projects page)
   ========================================================================= */
.hv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.hv-card{
  background:var(--panel); border:1px solid var(--trace); border-radius:2px;
  padding:24px; text-align:left; cursor:pointer; color:var(--text);
  font-family:inherit; position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.25,1), border-color .3s ease, box-shadow .3s ease;
}
.hv-card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:translateX(-100%); transition:transform .5s ease;
}
.hv-card:hover, .hv-card:focus-visible{
  border-color:var(--gold); transform:translateY(-4px);
  box-shadow:0 16px 34px -16px rgba(79,143,224,.5);
  outline:none;
}
.hv-card:hover::before{ transform:translateX(0); }
.hv-card .tag{ font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:var(--gold); letter-spacing:0.06em; text-transform:uppercase; }
.hv-card h3{ font-size:1.08rem; margin:10px 0 8px; font-family:'Space Grotesk',sans-serif; }
.hv-card p{ color:var(--text-dim); font-size:0.88rem; margin:0 0 14px; }
.hv-card .hv-open{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--mint); display:inline-flex; align-items:center; gap:6px; }
.hv-card .hv-open::after{ content:"→"; transition:transform .3s ease; }
.hv-card:hover .hv-open::after{ transform:translateX(4px); }

.hv-modal-backdrop{
  position:fixed; inset:0; z-index:200;
  background:rgba(4,7,11,0.75); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.hv-modal-backdrop.open{ opacity:1; pointer-events:auto; }
.hv-modal{
  background:var(--bg-alt); border:1px solid var(--trace-bright);
  max-width:760px; width:100%; max-height:86vh; overflow-y:auto;
  border-radius:2px; padding:36px 34px 30px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(34,195,166,0.15);
  position:relative; transform:translateY(16px); transition:transform .3s ease;
}
.hv-modal-backdrop.open .hv-modal{ transform:translateY(0); }
.hv-modal-close{
  position:absolute; top:18px; right:18px; width:34px; height:34px;
  border:1px solid var(--trace); background:transparent; color:var(--text-dim);
  border-radius:2px; cursor:pointer; font-size:1rem; line-height:1;
  transition:all .25s ease;
}
.hv-modal-close:hover{ color:var(--mint); border-color:var(--trace-bright); box-shadow:0 0 14px -4px var(--trace-bright); }
.hv-modal .tag{ font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--gold); letter-spacing:0.08em; text-transform:uppercase; }
.hv-modal h2{ font-size:1.6rem; margin:8px 0 4px; padding-right:40px; }
.hv-modal .hv-sub{ color:var(--text-dim); font-size:0.94rem; margin-bottom:22px; }
.hv-diagram{
  background:rgba(6,10,15,0.6); border:1px solid var(--trace);
  border-radius:2px; padding:16px; margin-bottom:24px;
}
.hv-diagram svg{ width:100%; height:auto; display:block; }
.hv-modal h4{
  font-family:'JetBrains Mono',monospace; font-size:0.75rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--trace-bright); margin:22px 0 10px;
}
.hv-modal h4:first-of-type{ margin-top:0; }
.hv-modal p{ color:var(--text-dim); font-size:0.93rem; margin:0 0 10px; }
.hv-modal ul{ margin:0; padding-left:18px; color:var(--text-dim); font-size:0.92rem; }
.hv-modal ul li{ margin-bottom:6px; }
.hv-io{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px; }
.hv-io div{ border:1px solid var(--trace); border-radius:2px; padding:12px 14px; }
.hv-io .k{ font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.06em; display:block; margin-bottom:4px; }
.hv-io .v{ font-size:0.9rem; color:var(--text); }
@media (max-width:600px){
  .hv-io{ grid-template-columns:1fr; }
  .hv-modal{ padding:28px 20px 24px; }
}

/* =========================================================================
   Project detail pages
   ========================================================================= */
.detail-layout{ display:grid; grid-template-columns:1fr 260px; gap:48px; align-items:start; }
.detail-body h4{
  font-family:'JetBrains Mono',monospace; font-size:0.75rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--trace-bright); margin:34px 0 12px;
}
.detail-body h4:first-child{ margin-top:0; }
.detail-body p{ color:var(--text-dim); font-size:0.98rem; line-height:1.7; margin:0 0 14px; }
.detail-body ul{ margin:0; padding-left:20px; color:var(--text-dim); font-size:0.95rem; line-height:1.8; }
.detail-body ul li{ margin-bottom:6px; }
.spec-rail{
  position:sticky; top:100px; background:var(--panel); border:1px solid var(--trace);
  border-radius:2px; padding:22px; display:grid; gap:16px;
}
.spec-rail .spec-item{ border-bottom:1px solid var(--trace); padding-bottom:14px; }
.spec-rail .spec-item:last-child{ border-bottom:none; padding-bottom:0; }
.spec-rail .k{
  display:block; font-family:'JetBrains Mono',monospace; font-size:0.66rem;
  color:var(--gold); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:5px;
}
.spec-rail .v{ font-size:0.9rem; color:var(--text); line-height:1.5; }
.back-link{
  display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace;
  font-size:0.78rem; color:var(--mint); text-decoration:none; margin-top:48px;
}
.back-link::before{ content:"←"; transition:transform .25s ease; }
.back-link:hover::before{ transform:translateX(-4px); }
@media (max-width:820px){
  .detail-layout{ grid-template-columns:1fr; }
  .spec-rail{ position:static; }
}

.bom-table{
  width:100%; border-collapse:collapse; font-size:0.86rem; margin:6px 0 10px;
}
.bom-table th{
  font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--gold); text-align:left;
  border-bottom:1px solid var(--trace); padding:8px 10px;
}
.bom-table td{
  padding:9px 10px; border-bottom:1px solid var(--trace); color:var(--text-dim);
  vertical-align:top;
}
.bom-table td:first-child{
  font-family:'JetBrains Mono',monospace; color:var(--trace-bright); white-space:nowrap;
}
.bom-table td:nth-child(2){ color:var(--text); }
.bom-table tr:last-child td{ border-bottom:none; }
.bom-table tr:hover td{ background:rgba(34,195,166,0.04); }
@media (max-width:600px){
  .bom-table{ font-size:0.78rem; }
  .bom-table th, .bom-table td{ padding:7px 6px; }
}

/* =========================================================================
   17. Home hero fine-tuning — the heading + copy now live in a narrower
       column pinned to the left side instead of stretching the full
       width, and the vision box has moved out from beside it to sit
       below, roughly centered (nudged slightly left of dead-center).
   ========================================================================= */
.hero{ padding-top:104px; }
.hero-grid{ grid-template-columns:1fr; }
.hero-content{ max-width:600px; }
@media (max-width:900px){
  .hero{ text-align:left; }
  .quote{ margin:0; }
  .hero-ctas{ justify-content:flex-start; }
}

.vision-row{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch;
  max-width:940px; margin:56px auto 0;
}
@media (min-width:901px){
  .vision-row{ margin-left:calc(50% - 486px); margin-right:auto; } /* centered, nudged a touch left of true middle */
}
@media (max-width:820px){
  .vision-row{ grid-template-columns:1fr; }
  .vision-visual{ display:none; } /* skip the decorative panel on small screens — keep it light there */
}

.vision-box{
  border-radius:14px;
  opacity:0;
  transform:translateY(16px);
  animation:visionBoxIn .7s ease forwards;
  animation-delay:1.1s;
}
@keyframes visionBoxIn{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
  .vision-box{ opacity:1; transform:none; animation:none; }
}

.vision-visual{
  border-radius:14px;
  border:1px solid rgba(127,232,220,0.16);
  background:linear-gradient(165deg, rgba(13,22,32,0.9), rgba(8,14,20,0.85));
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0;
  transform:translateY(16px);
  animation:visionBoxIn .7s ease forwards;
  animation-delay:1.3s;
}
.vision-visual svg{ width:100%; height:auto; max-height:280px; }
@media (prefers-reduced-motion:reduce){
  .vision-visual{ opacity:1; transform:none; animation:none; }
}

.btn-gold{
  background:linear-gradient(135deg, var(--gold), #86b8f2);
  border-color:var(--gold);
  color:#04121c;
  font-weight:700;
  animation:btnGoldPulse 2.4s ease-in-out infinite;
}
.btn-gold:hover{
  color:#04121c; border-color:var(--gold);
  animation-play-state:paused;
  box-shadow:0 0 34px -2px var(--gold), 0 0 64px 4px rgba(79,143,224,0.5);
}
@keyframes btnGoldPulse{
  0%,100%{ box-shadow:0 10px 26px -8px rgba(79,143,224,0.75), 0 0 16px 0px rgba(79,143,224,0.55); }
  50%{ box-shadow:0 10px 40px -4px rgba(79,143,224,1), 0 0 36px 6px rgba(79,143,224,0.9); }
}
@media (prefers-reduced-motion:reduce){
  .btn-gold{ animation:none; }
}

@media (min-width:901px){
  .grid, .hv-grid{ margin-left:30px; width:calc(100% - 30px); }
}

/* =========================================================================
   18. "What you'll find here" section — three aesthetic rounded cards
       tying the homepage directly to the site's three real goals: free
       resources/books, project inspiration, and equipment sales. Good for
       both visual variety and on-page SEO (real descriptive content,
       proper heading structure, internal links to every key page).
   ========================================================================= */
.purpose-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:22px; margin-top:8px;
}
.purpose-card{
  display:flex; flex-direction:column; gap:12px;
  padding:26px 24px 22px;
  border-radius:16px;
  border:1px solid rgba(127,232,220,0.16);
  background:linear-gradient(165deg, rgba(13,22,32,0.9), rgba(8,14,20,0.85));
  text-decoration:none; color:var(--text);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.purpose-card:hover{
  transform:translateY(-4px);
  border-color:var(--pc, var(--trace-bright));
  box-shadow:0 16px 34px -18px var(--pc, var(--trace-bright));
}
.purpose-icon{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:var(--pc, var(--trace-bright));
  background:color-mix(in srgb, var(--pc, var(--trace-bright)) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--pc, var(--trace-bright)) 40%, transparent);
}
.purpose-icon svg{ width:22px; height:22px; }
.purpose-card h3{ margin:0; font-size:1.15rem; font-family:'Space Grotesk',sans-serif; }
.purpose-card p{ margin:0; color:var(--text-dim); font-size:0.92rem; line-height:1.6; flex-grow:1; }
.purpose-link{
  color:var(--pc, var(--trace-bright)); font-family:'JetBrains Mono',monospace;
  font-size:0.82rem; font-weight:600; margin-top:4px;
}
@media (max-width:900px){
  .purpose-grid{ grid-template-columns:1fr; }
}

/* =========================================================================
   19. Machine spec table — used inside the .hv-modal on the TEKLINX page
       to list equipment specifications (reuses .hv-card/.hv-modal for the
       card + modal chrome, this just styles the key/value rows).
   ========================================================================= */
.machine-specs{ width:100%; border-collapse:collapse; margin:6px 0 4px; }
.machine-specs tr{ border-bottom:1px solid var(--trace); }
.machine-specs tr:last-child{ border-bottom:none; }
.machine-specs td{ padding:9px 4px; font-size:0.9rem; vertical-align:top; }
.machine-specs td:first-child{
  color:var(--gold); font-family:'JetBrains Mono',monospace; font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap; padding-right:16px;
}
.machine-specs td:last-child{ color:var(--text); }

/* =========================================================================
   20. Mobile performance — the flowing background current, the cursor
       spotlight mask, and the grain texture are all continuous, GPU-heavy
       repaints (blurred SVG filters + mix-blend-mode layers). On small /
       touch screens they're the main cause of scroll jank, so they're
       switched off below the tablet breakpoint. The dark gradient base
       (in each page's own <style>) stays, so the site still looks right —
       it just stops animating a full-viewport layer every frame.
   ========================================================================= */
@media (max-width: 768px){
  .current-field, .circuit-spotlight, .grain{ display:none; }
}

/* Also cap it to a shorter, non-infinite run on desktop/tablet so the
   browser isn't compositing this layer forever in the background. */
.current-field .pulse-dash{
  animation-duration: 4.5s;
  animation-iteration-count: 6;
  animation-fill-mode: forwards;
}

/* =========================================================================
   21. Sitewide lag fix — the cursor-glow effect used to run an
       uninterrupted 60fps requestAnimationFrame loop for as long as the
       tab was open, even with the mouse sitting still for minutes (fixed
       in enhance.js — it now stops scheduling frames once idle and only
       restarts on the next pointer move). The glow orbs' blur radius is
       also trimmed here across all screen sizes — a 90px blur on 3
       overlapping layers is expensive to composite continuously, even
       when not actively animating.
   ========================================================================= */
.glow-orb{ filter:blur(55px); }

/* =========================================================================
   22. Interior page hero — trimmed padding. These are short (breadcrumb +
       title + one line), so the original 70px/50px padding left a lot of
       bare space above content-heavy pages like Equipment. Applies to
       every interior page since they all share this block.
   ========================================================================= */
.page-hero{ padding:44px 28px 30px !important; }
.page-hero p{ margin-top:10px !important; }


/* =========================================================================
   23. Friend-safe UI/UX refresh — lighter, cleaner, less “AI neon”
       Keeps the TEKLINOX circuit identity, but moves the site from almost-
       black/glowy to a calmer technical navy with warmer text and better flow.
   ========================================================================= */
:root{
  --bg:#101821;
  --bg-alt:#142230;
  --panel:#172837;
  --panel-soft:#1c3142;
  --trace:#294557;
  --trace-bright:#42d8c1;
  --mint:#9cefe4;
  --mint-dim:#60aeb8;
  --gold:#f4b84a;
  --text:#f2f7f6;
  --text-dim:#b1c3ca;
  --radius:14px;
}
body{
  background:
    radial-gradient(ellipse 80% 52% at 20% -12%, rgba(66,216,193,.16) 0%, transparent 58%),
    radial-gradient(ellipse 62% 46% at 95% 8%, rgba(244,184,74,.10) 0%, transparent 56%),
    linear-gradient(180deg, #121d27 0%, #0f1821 54%, #111a22 100%) !important;
  color:var(--text);
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%);
}
.pcb-field::before{ opacity:.045; }
.pcb-field::after{ opacity:.20; }
.circuit-pattern{ opacity:.075; mix-blend-mode:normal; }
.vignette{ background:radial-gradient(ellipse 95% 70% at 50% 28%, transparent 55%, rgba(5,10,14,.32) 100%); }
.glow-orb{ opacity:.09; filter:blur(62px); animation-duration:34s; }
.glow-orb.gold{ opacity:.08; }
.current-field{ opacity:.20; }
.circuit-spotlight{ opacity:.28; }
.grain{ opacity:.018; }

header{
  background:rgba(18,29,39,.86) !important;
  border-bottom:1px solid rgba(156,239,228,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}
.nav-inner{ padding-top:14px; padding-bottom:14px; }
.brand{ align-items:center; }
.brand-word{ color:#f7fbfa; letter-spacing:.03em; }
.brand small,
.page-chip,
.refdes{
  border-color:rgba(244,184,74,.42);
  color:var(--gold);
  background:rgba(244,184,74,.09);
  border-radius:999px;
}
nav.components{ gap:8px; }
nav.components a{
  border-color:transparent;
  background:rgba(255,255,255,.035);
  color:#c1d0d5;
  border-radius:999px;
  padding:9px 13px;
  letter-spacing:.035em;
}
nav.components a:hover,
nav.components a:focus-visible{
  color:#ffffff;
  border-color:rgba(156,239,228,.30);
  background:rgba(66,216,193,.10);
  box-shadow:none;
}
nav.components a.current{
  color:#071a1c;
  border-color:transparent;
  background:linear-gradient(135deg, #9cefe4, #42d8c1);
  box-shadow:0 10px 24px rgba(66,216,193,.18);
}
nav.components a.current::after{ display:none; }

.hero{ padding-top:92px; padding-bottom:76px; }
.hero-trace{ opacity:.24; }
.logo-mark{
  background:linear-gradient(180deg, #ffffff 0%, #bff8f1 42%, #42d8c1 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 24px 70px rgba(66,216,193,.18);
}
.eyebrow{
  color:#d7f9f3 !important;
  background:rgba(66,216,193,.09);
  border-color:rgba(66,216,193,.26);
  box-shadow:none;
}
.eyebrow::before{ box-shadow:0 0 0 4px rgba(66,216,193,.12); }
.quote{
  background:rgba(20,34,48,.58) !important;
  border-color:rgba(156,239,228,.16) !important;
  border-radius:18px !important;
  color:#dce8eb !important;
  box-shadow:0 18px 50px rgba(0,0,0,.18) !important;
}
.type-cursor{ color:var(--gold); }
.hero-ctas{ gap:12px; margin-top:32px; }
.btn{
  border-radius:999px;
  text-transform:none;
  letter-spacing:.025em;
  padding:13px 22px;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:700;
}
.btn-primary,
.btn-gold{
  background:linear-gradient(135deg, #9cefe4 0%, #42d8c1 100%);
  color:#071a1c;
  border-color:transparent;
  animation:none;
  box-shadow:0 16px 34px rgba(66,216,193,.20), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-gold{
  background:linear-gradient(135deg, #ffd77e, #f4b84a);
  box-shadow:0 16px 34px rgba(244,184,74,.16), inset 0 1px 0 rgba(255,255,255,.42);
}
.btn-ghost{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.11);
  color:#e5eeee;
  animation:none;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary:hover,
.btn-gold:hover{
  color:#071a1c;
  box-shadow:0 18px 38px rgba(66,216,193,.24);
}
.btn::after{ margin-left:7px; }

section{ border-top-color:rgba(156,239,228,.10); padding:76px 0; }
.page-hero{
  background:linear-gradient(135deg, rgba(66,216,193,.09), rgba(244,184,74,.045));
  border-bottom-color:rgba(156,239,228,.12) !important;
}
.page-hero h1{ color:#ffffff; }
.page-hero p,
.section-sub,
.card p,
.post p,
.mission-copy p,
.detail-body p,
.detail-body ul,
.equipment-body p{ color:var(--text-dim); }
.section-head{ margin-bottom:30px; }
.section-head h2{ color:#ffffff; }

.card,
.post,
.purpose-card,
.mission-card,
.hv-card,
.spec-rail,
.vision-box,
.vision-visual,
.equipment-tile,
.spec-tab{
  background:linear-gradient(180deg, rgba(29,49,66,.92), rgba(20,34,48,.92)) !important;
  border-color:rgba(156,239,228,.13) !important;
  border-radius:18px !important;
  box-shadow:0 18px 46px rgba(0,0,0,.16);
}
.card,
.hv-card{ padding:24px; }
.card:hover,
.post:hover,
.purpose-card:hover,
.hv-card:hover,
.equipment-tile:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(156,239,228,.38) !important;
  box-shadow:0 22px 52px rgba(0,0,0,.22), 0 0 0 1px rgba(66,216,193,.08) !important;
}
.card::before,
.post::after,
.card::after,
.hv-card::before{ opacity:.45; }
.card .tag,
.hv-card .tag,
.post-meta .gold,
.equipment-body .category-tag{
  color:var(--gold) !important;
  border-color:rgba(244,184,74,.42) !important;
}
.card h3,
.post h3,
.purpose-card h3,
.hv-card h3,
.equipment-body h3{ color:#ffffff; }
.purpose-icon{
  background:rgba(66,216,193,.10);
  border-color:rgba(66,216,193,.22);
}
.mission{
  background:linear-gradient(180deg, rgba(66,216,193,.04), rgba(244,184,74,.035)) !important;
  border-top-color:rgba(156,239,228,.12);
}
.mission h2{
  background:none; -webkit-background-clip:initial; background-clip:initial; color:#ffffff;
}
.mission-copy strong{ color:#ffffff; }
.equipment-thumb{ background:#f3f7f6; }
.post-media{ background:linear-gradient(135deg, rgba(66,216,193,.10), rgba(244,184,74,.10)), var(--bg-alt); }

.scroll-progress-wrap{ opacity:.55; }
.scroll-progress{ background:rgba(18,29,39,.62); border-color:rgba(156,239,228,.18); }
.progress-block.filled{ background:linear-gradient(180deg, #9cefe4, #42d8c1); }
footer{ border-top-color:rgba(156,239,228,.12); background:rgba(10,16,22,.22); }
.footer-links a:hover{ color:#ffffff; }

@media (max-width:900px){
  .hero{ padding-top:72px; }
  .hero-content{ max-width:100%; }
  .quote{ padding:18px 20px; }
  section{ padding:58px 0; }
}
@media (max-width:820px){
  nav.components{ background:#142230 !important; padding:12px 18px 18px; gap:8px; }
  .nav-inner{ gap:12px; }
  .nav-toggle{ border-radius:999px; background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12); color:#ffffff; }
  .hero-ctas .btn{ width:100%; justify-content:center; text-align:center; }
}


/* =========================================================================
   24. Homepage flow v2 — added real navigation/story sections, warmed the
       palette a touch, and fixed the "nice hero then empty scroll" problem.
   Surface: Decide/Learn, so every section should answer "where do I go next?"
   ========================================================================= */
:root{
  --bg:#111c22;
  --bg-alt:#17262e;
  --panel:#1b2d36;
  --panel-soft:#203844;
  --trace:#345363;
  --trace-bright:#55ddc9;
  --mint:#a9f2e8;
  --mint-dim:#73b9bd;
  --gold:#f1c15d;
  --paper:#f4eee0;
  --ink:#f5faf8;
  --text:#f4faf8;
  --text-dim:#c0d0d3;
}
body{
  background:
    radial-gradient(ellipse 78% 48% at 18% -8%, rgba(85,221,201,.18), transparent 58%),
    radial-gradient(ellipse 56% 42% at 95% 4%, rgba(241,193,93,.13), transparent 58%),
    linear-gradient(180deg, #14232a 0%, #111c22 46%, #101920 100%) !important;
}
.hero{ padding-bottom:58px; }
.vision-row{ margin-top:42px; }
.purpose{ padding-top:54px; }
.compact-head{ margin-bottom:24px; }
.section-head.compact-head{ align-items:flex-start; }

.start-path{
  padding-top:40px;
  background:linear-gradient(180deg, rgba(244,238,224,.035), rgba(85,221,201,.025));
}
.path-board{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.path-step{
  min-height:250px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  padding:24px;
  text-decoration:none;
  color:var(--text);
  border:1px solid rgba(169,242,232,.14);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(32,56,68,.88), rgba(20,35,42,.92)),
    radial-gradient(circle at 20% 0%, rgba(85,221,201,.12), transparent 45%);
  box-shadow:0 18px 48px rgba(0,0,0,.15);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.path-step:hover{
  transform:translateY(-4px);
  border-color:rgba(169,242,232,.38);
  background:linear-gradient(180deg, rgba(36,63,74,.94), rgba(22,38,46,.96));
}
.step-no{
  font-family:'JetBrains Mono',monospace;
  color:var(--gold);
  font-size:.78rem;
  letter-spacing:.12em;
}
.path-step h3{ font-size:1.12rem; margin:0 0 10px; color:#fff; }
.path-step p{ margin:0; color:var(--text-dim); font-size:.92rem; line-height:1.62; }
.step-link{
  font-family:'JetBrains Mono',monospace;
  color:var(--mint);
  font-size:.78rem;
}
.step-link::after{ content:" →"; }

.bench-strip{
  background:
    linear-gradient(90deg, rgba(241,193,93,.09), transparent 34%, rgba(85,221,201,.07));
}
.bench-wrap{
  display:grid;
  grid-template-columns:minmax(0,0.95fr) minmax(360px,1.05fr);
  gap:38px;
  align-items:center;
}
.bench-copy h2{ font-size:clamp(1.9rem,4vw,3.6rem); line-height:1.02; margin:14px 0 18px; max-width:620px; color:#fff; }
.bench-copy p{ color:var(--text-dim); max-width:610px; margin:0; font-size:1.02rem; line-height:1.75; }
.bench-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.bench-panel{
  min-height:330px;
  border:1px solid rgba(169,242,232,.18);
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(244,238,224,.06), transparent 32%),
    radial-gradient(circle at 50% 48%, rgba(85,221,201,.16), transparent 36%),
    #14262f;
  box-shadow:0 24px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  position:relative;
}
.bench-panel::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(169,242,232,.08) 1px, transparent 1px),linear-gradient(90deg, rgba(169,242,232,.08) 1px, transparent 1px);
  background-size:34px 34px; opacity:.35;
}
.scope-line,
.scope-grid,
.scope-wave{ position:relative; z-index:1; }
.scope-line{ display:flex; align-items:center; gap:12px; font-family:'JetBrains Mono',monospace; color:var(--mint); }
.scope-line i{ height:1px; flex:1; background:linear-gradient(90deg, var(--mint), transparent); }
.scope-line b{ color:var(--gold); }
.scope-wave{ height:130px; border-left:1px solid rgba(169,242,232,.28); border-bottom:1px solid rgba(169,242,232,.28); }
.scope-wave::before{
  content:""; position:absolute; left:4%; right:4%; top:48%; height:70px;
  background:linear-gradient(90deg, transparent, var(--mint), var(--gold), var(--mint), transparent);
  clip-path:polygon(0 52%, 12% 52%, 16% 28%, 22% 76%, 29% 28%, 34% 52%, 52% 52%, 58% 18%, 64% 86%, 70% 52%, 100% 52%);
  filter:drop-shadow(0 0 14px rgba(85,221,201,.45));
}
.scope-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.scope-grid span{
  border:1px solid rgba(169,242,232,.14); border-radius:999px; padding:8px 10px;
  text-align:center; color:var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:.72rem;
}

.featured-layout{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  gap:18px;
}
.feature-primary,
.feature-mini{
  text-decoration:none; color:var(--text);
  border:1px solid rgba(169,242,232,.14);
  border-radius:24px;
  background:linear-gradient(160deg, rgba(32,56,68,.92), rgba(20,35,42,.94));
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.feature-primary:hover,
.feature-mini:hover{ transform:translateY(-4px); border-color:rgba(169,242,232,.36); box-shadow:0 20px 50px rgba(0,0,0,.20); }
.feature-primary{
  min-height:360px; padding:34px; display:flex; flex-direction:column; justify-content:flex-end;
  background:
    radial-gradient(circle at 75% 20%, rgba(241,193,93,.16), transparent 34%),
    radial-gradient(circle at 25% 24%, rgba(85,221,201,.16), transparent 38%),
    linear-gradient(160deg, rgba(32,56,68,.95), rgba(20,35,42,.96));
}
.feature-primary .tag{ align-self:flex-start; margin-bottom:auto; }
.feature-primary h3{ font-size:clamp(1.8rem,3vw,2.55rem); color:#fff; max-width:620px; margin:20px 0 14px; }
.feature-primary p{ color:var(--text-dim); max-width:640px; margin:0; line-height:1.7; }
.feature-link{ margin-top:24px; color:var(--mint); font-family:'JetBrains Mono',monospace; font-size:.82rem; }
.feature-stack{ display:grid; gap:14px; }
.feature-mini{ padding:22px 24px; display:grid; gap:7px; }
.feature-mini span{ color:var(--gold); font-family:'JetBrains Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.feature-mini strong{ color:#fff; font-size:1.05rem; }
.feature-mini em{ color:var(--text-dim); font-style:normal; font-size:.91rem; line-height:1.55; }

@media (max-width:980px){
  .path-board{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bench-wrap,
  .featured-layout{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .path-board{ grid-template-columns:1fr; }
  .path-step{ min-height:auto; }
  .bench-panel{ min-height:260px; padding:22px; }
  .scope-grid{ grid-template-columns:repeat(2,1fr); }
}


/* Screenshot / no-surprise fix: content should never disappear just because
   IntersectionObserver hasn't fired yet (full-page screenshots and quick loads
   were showing the About section as a giant blank space). Keep motion subtle,
   but make sections readable immediately. */
.reveal{ opacity:1 !important; transform:none !important; }
.reveal.in-view{ opacity:1 !important; transform:none !important; }


/* =========================================================================
   26. ORBI DAILY style translation — Swiss industrial, light, sharp, tactile.
       Chosen because local VotePulse source was not found, but Orbi Daily was.
       This intentionally keeps TEKLINOX content/components while replacing the
       dark neon PCB skin with Orbi's off-white paper, black ink, orange/green
       industrial accents, mono labels, square-ish buttons, and strong borders.
   ========================================================================= */
:root{
  --bg:#f5f5f3;
  --bg-alt:#eeece6;
  --panel:#ffffff;
  --panel-soft:#fdfcf8;
  --trace:#d4d2cc;
  --trace-bright:#ea580c;
  --mint:#0a0a08;
  --mint-dim:#6a6862;
  --gold:#c9962b;
  --paper:#fdfcf8;
  --ink:#0a0a08;
  --text:#0a0a08;
  --text-dim:#6a6862;
  --border:#d4d2cc;
  --border-light:#e6e4df;
  --red:#b91c1c;
  --green:#4a7a4a;
  --orange:#ea580c;
  --radius:7px;
  --shadow-industrial:12px 12px 0 rgba(10,10,8,.08);
  --muted:var(--text-dim);
}
html{ scrollbar-color:#b7b3aa #f5f5f3; }
body{
  background:
    linear-gradient(var(--border-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-light) 1px, transparent 1px),
    var(--bg) !important;
  background-size:46px 46px, 46px 46px, auto !important;
  color:var(--text) !important;
  font-family:'Inter', 'DM Sans', system-ui, sans-serif;
}
body::before{
  background:radial-gradient(circle at 80% 12%, rgba(234,88,12,.10), transparent 32%),
             radial-gradient(circle at 8% 18%, rgba(74,122,74,.08), transparent 28%);
}
.pcb-field,
.current-field,
.circuit-spotlight,
.cursor-glow,
.grain,
.hero-trace{ display:none !important; }

/* Header/nav: Orbi style = white industrial bar, mono pills, hard borders */
header{
  background:rgba(253,252,248,.94) !important;
  border-bottom:2px solid var(--ink) !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}
.nav-inner{ padding:16px 28px; }
.brand{ align-items:center; color:var(--ink) !important; }
.brand-mark{ filter:none !important; }
.brand-word{ color:var(--ink) !important; font-weight:900; letter-spacing:-.02em; }
.brand small,
.footer-inner .brand small{
  color:var(--orange) !important;
  border:1.5px solid var(--ink) !important;
  background:#fff !important;
  border-radius:3px !important;
  box-shadow:2px 2px 0 rgba(10,10,8,.08);
}
nav.components a,
.nav-toggle{
  border:1.5px solid var(--border) !important;
  background:#fff !important;
  color:var(--muted) !important;
  border-radius:4px !important;
  box-shadow:none !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  padding:11px 16px !important;
}
nav.components a:hover,
nav.components a:focus-visible{
  border-color:var(--ink) !important;
  color:var(--ink) !important;
  background:#fff7ed !important;
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 rgba(10,10,8,.10) !important;
}
nav.components a.current{
  border:2px solid var(--ink) !important;
  background:var(--ink) !important;
  color:#fff !important;
  box-shadow:4px 4px 0 rgba(10,10,8,.10) !important;
}
nav.components a.current::after{ display:none !important; }

/* Typography and section rhythm */
h1,h2,h3,
.logo-mark,
.page-hero h1{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif !important;
  color:var(--ink) !important;
  letter-spacing:-.045em !important;
  text-shadow:none !important;
}
.logo-mark{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:var(--ink) !important;
  font-size:clamp(3.2rem,8vw,7.2rem) !important;
  line-height:.88 !important;
  font-weight:900 !important;
}
.hero{ padding-top:88px !important; padding-bottom:70px !important; }
section{ border-top:1px solid var(--border) !important; }
.wrap{ z-index:2; }
.section-head{ align-items:flex-start !important; }
.section-head h2{ font-size:clamp(2rem,4.4vw,4.8rem) !important; line-height:.94 !important; }
.section-sub,
.page-hero p,
.card p,
.post p,
.purpose-card p,
.path-step p,
.bench-copy p,
.feature-primary p,
.feature-mini em,
.mission-copy p,
.mission-card p,
.detail-body p,
.detail-body ul,
.equipment-body p,
.hv-card p,
.hv-modal p,
.hv-modal ul,
.spec-rail .v{ color:var(--muted) !important; }

/* Labels/eyebrows: paper tags instead of glow badges */
.eyebrow,
.refdes,
.card .tag,
.hv-card .tag,
.hv-modal .tag,
.equipment-body .category-tag,
.category-tag,
.post-meta .gold,
.feature-mini span,
.step-no,
.scope-line b,
.breadcrumb,
.spec-rail .k,
.machine-specs td:first-child,
.bom-table th{
  font-family:'JetBrains Mono',monospace !important;
  color:var(--orange) !important;
  text-transform:uppercase !important;
  letter-spacing:.12em !important;
}
.eyebrow,
.refdes,
.equipment-body .category-tag,
.category-tag,
.card .tag{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  border:1.5px solid var(--border) !important;
  background:#fff !important;
  border-radius:4px !important;
  padding:7px 10px !important;
  box-shadow:none !important;
  font-size:10px !important;
}
.eyebrow::before{ background:var(--orange) !important; box-shadow:none !important; width:7px !important; height:7px !important; border-radius:1px !important; }
.refdes{ color:var(--gold) !important; border-color:var(--ink) !important; padding:7px 9px !important; }

/* Hero panels/buttons */
.quote,
.vision-box,
.vision-visual,
.card,
.post,
.purpose-card,
.path-step,
.bench-panel,
.feature-primary,
.feature-mini,
.mission-card,
.hv-card,
.hv-modal,
.spec-rail,
.spec-tab,
.detail-card,
.equipment-tile{
  background:#fff !important;
  border:2px solid var(--ink) !important;
  border-radius:7px !important;
  box-shadow:var(--shadow-industrial) !important;
  color:var(--ink) !important;
}
.quote{
  font-family:'JetBrains Mono',monospace !important;
  max-width:650px !important;
  padding:22px 26px !important;
}
.quote span,
.type-cursor{ color:var(--orange) !important; }
.vision-visual{ background:#11100d !important; color:#fff !important; }
.vision-visual svg text{ fill:#fff !important; }
.vision-list li::before{ color:var(--orange) !important; }
.btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:0 !important;
  border:2px solid var(--ink) !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  box-shadow:5px 5px 0 rgba(10,10,8,.10) !important;
  animation:none !important;
}
.btn-primary,
.btn-gold{
  background:var(--ink) !important;
  color:#fff !important;
}
.btn-gold{ background:var(--orange) !important; border-color:var(--ink) !important; color:#fff !important; }
.btn-ghost{
  background:#fff !important;
  color:var(--ink) !important;
}
.btn:hover{ transform:translate(-2px,-2px) !important; box-shadow:7px 7px 0 rgba(10,10,8,.12) !important; }
.btn::after{ color:inherit !important; }

/* Cards and grids */
.card::before,
.card::after,
.post::after,
.hv-card::before{ display:none !important; }
.card:hover,
.post:hover,
.purpose-card:hover,
.path-step:hover,
.hv-card:hover,
.feature-primary:hover,
.feature-mini:hover,
.equipment-tile:hover{
  transform:translate(-3px,-3px) !important;
  border-color:var(--ink) !important;
  box-shadow:16px 16px 0 rgba(10,10,8,.10) !important;
}
.card h3,
.post h3,
.purpose-card h3,
.path-step h3,
.hv-card h3,
.equipment-body h3,
.feature-primary h3,
.feature-mini strong,
.mission-card h3{ color:var(--ink) !important; }
.purpose-icon{
  background:#fff7ed !important;
  color:var(--orange) !important;
  border:1.5px solid var(--ink) !important;
  border-radius:4px !important;
}
.purpose-link,
.step-link,
.feature-link,
.post-more,
.equipment-body .view-link,
.back-link,
.hv-card .hv-open{ color:var(--ink) !important; font-family:'JetBrains Mono',monospace !important; font-weight:800 !important; }

/* New homepage sections translated */
.start-path,
.bench-strip,
.featured-work,
.mission{
  background:rgba(253,252,248,.68) !important;
}
.path-board{ gap:18px !important; }
.path-step{ min-height:240px; background:#fff !important; }
.bench-wrap{ align-items:center; }
.bench-panel{
  background:
    linear-gradient(var(--border-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-light) 1px, transparent 1px),
    #fdfcf8 !important;
  background-size:34px 34px !important;
  color:var(--ink) !important;
}
.bench-panel::before{ display:none !important; }
.scope-line{ color:var(--green) !important; }
.scope-line i{ background:var(--ink) !important; }
.scope-wave{ border-color:var(--ink) !important; }
.scope-wave::before{ filter:none !important; background:linear-gradient(90deg, transparent, var(--green), var(--orange), var(--gold), transparent) !important; }
.scope-grid span{ background:#fff !important; border:1.5px solid var(--border) !important; color:var(--muted) !important; }
.feature-primary{
  background:radial-gradient(circle at 82% 16%, rgba(234,88,12,.13), transparent 32%), #fff !important;
}
.feature-mini{ box-shadow:7px 7px 0 rgba(10,10,8,.08) !important; }

/* Page heroes and listing/detail pages */
.page-hero{
  background:
    linear-gradient(var(--border-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-light) 1px, transparent 1px),
    #fdfcf8 !important;
  background-size:46px 46px !important;
  border-bottom:2px solid var(--ink) !important;
}
.breadcrumb a{ color:var(--green) !important; }
.equipment-grid{ gap:28px !important; }
.equipment-tile{ overflow:hidden !important; }
.equipment-thumb{ background:#f5f5f3 !important; border-bottom:2px solid var(--ink) !important; }
.equipment-thumb img{ filter:none !important; }
.equipment-body{ background:#fff !important; }
.equipment-tile.is-placeholder{ opacity:1 !important; }
.post-media{ background:#11100d !important; border-bottom:2px solid var(--ink) !important; }
.post-media .pin{ background:var(--orange) !important; box-shadow:none !important; border-radius:1px !important; }
.detail-layout,
.about,
.mission-grid{ color:var(--ink) !important; }
.spec-list li,
.spec-rail .spec-item,
.bom-table th,
.bom-table td,
.machine-specs tr{ border-color:var(--border) !important; }
.bom-table td:first-child{ color:var(--orange) !important; }
.hv-modal-backdrop{ background:rgba(245,245,243,.78) !important; backdrop-filter:none !important; }
.hv-modal-close{ border:2px solid var(--ink) !important; background:#fff !important; color:var(--ink) !important; border-radius:0 !important; }
.hv-diagram{ background:#fdfcf8 !important; border:1.5px solid var(--border) !important; }

/* Footer / misc */
.scroll-progress-wrap{ display:none !important; }
::selection{ background:#11100d !important; color:#fff !important; }
footer{
  background:#fdfcf8 !important;
  border-top:2px solid var(--ink) !important;
  color:var(--ink) !important;
}
.footer-links a,
.footer-note{ color:var(--muted) !important; }
.footer-links a:hover{ color:var(--orange) !important; }
@media (max-width:820px){
  nav.components{ background:#fdfcf8 !important; border-bottom:2px solid var(--ink) !important; }
  .hero-ctas .btn{ width:100%; }
  .quote{ padding:18px !important; }
}


/* Orbi pass QA fixes: earlier dark-theme rules made <strong> text disappear
   on the new paper background. Keep emphasis visible and intentional. */
.mission-copy strong,
.detail-body strong,
.about strong,
main strong{
  color:var(--ink) !important;
  font-weight:900 !important;
}
.mission-tags span{
  color:var(--orange) !important;
  border:1.5px solid var(--border) !important;
  background:#fff !important;
  border-radius:4px !important;
}


/* =========================================================================
   27. Minimal user-flow pass — less overwhelm, same information architecture.
       Homepage now reads as: first impression → choose path → proof/example →
       about teaser. Duplicate/long detail is de-emphasized visually, not removed.
   ========================================================================= */
.home-page .hero{
  padding-top:72px !important;
  padding-bottom:34px !important;
}
.home-page .hero-grid{
  max-width:1120px !important;
  gap:26px !important;
}
.home-page .hero-content{
  max-width:720px !important;
}
.home-page .logo-mark{
  font-size:clamp(4rem,9vw,6.8rem) !important;
  max-width:780px;
}
.home-page .quote{
  max-width:620px !important;
  margin-top:10px !important;
}
.home-page .hero-ctas{
  margin-top:26px !important;
}
.home-page .vision-row{
  max-width:960px !important;
  margin:56px auto 0 !important;
  grid-template-columns:minmax(0,1fr) 280px !important;
  gap:18px !important;
}
.home-page .vision-box{
  min-height:auto !important;
  padding:26px 30px !important;
  box-shadow:8px 8px 0 rgba(10,10,8,.08) !important;
}
.home-page .vision-box h2{
  font-size:clamp(1.45rem,2.4vw,2.15rem) !important;
  line-height:1.08 !important;
  max-width:560px;
}
.home-page .vision-box p:not(.eyebrow){
  max-width:680px;
  margin-bottom:0 !important;
}
.home-page .vision-list{
  display:none !important;
}
.home-page .vision-visual{
  min-height:210px !important;
  padding:16px !important;
  box-shadow:8px 8px 0 rgba(10,10,8,.08) !important;
}
.home-page .vision-visual svg{
  max-height:190px !important;
}

/* Remove the duplicated “three things” stop from the visible flow. Its content
   is still represented by the clearer Start where you are paths and preserved
   in the HTML/source. */
.home-page .purpose{
  display:none !important;
}
.home-page section{
  padding-top:64px !important;
  padding-bottom:64px !important;
}
.home-page .section-head{
  margin-bottom:24px !important;
}
.home-page .section-head h2,
.home-page .bench-copy h2,
.home-page .mission h2{
  font-size:clamp(2rem,4.8vw,4rem) !important;
  max-width:760px;
}
.home-page .section-sub{
  max-width:520px !important;
  font-size:1rem !important;
}
.home-page .path-board{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
}
.home-page .path-step{
  min-height:205px !important;
  padding:22px 20px !important;
  box-shadow:8px 8px 0 rgba(10,10,8,.08) !important;
}
.home-page .path-step h3{
  font-size:1.05rem !important;
  line-height:1.2 !important;
}
.home-page .path-step p,
.home-page .feature-primary p,
.home-page .feature-mini em,
.home-page .mission-card p,
.home-page .bench-copy p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-page .path-step p{ -webkit-line-clamp:3; }
.home-page .feature-primary p{ -webkit-line-clamp:2; }
.home-page .feature-mini em{ -webkit-line-clamp:1; }
.home-page .mission-card p{ -webkit-line-clamp:3; }
.home-page .bench-copy p{ -webkit-line-clamp:4; }

.home-page .bench-wrap{
  grid-template-columns:minmax(0,.9fr) minmax(340px,1fr) !important;
  gap:32px !important;
}
.home-page .bench-panel{
  min-height:260px !important;
  padding:26px !important;
  box-shadow:8px 8px 0 rgba(10,10,8,.08) !important;
}
.home-page .scope-wave{
  height:92px !important;
}
.home-page .featured-layout{
  grid-template-columns:minmax(0,1fr) minmax(280px,.62fr) !important;
  gap:18px !important;
}
.home-page .feature-primary{
  min-height:270px !important;
  padding:28px !important;
  box-shadow:8px 8px 0 rgba(10,10,8,.08) !important;
}
.home-page .feature-primary h3{
  font-size:clamp(1.8rem,3vw,2.75rem) !important;
  line-height:1 !important;
}
.home-page .feature-mini{
  padding:18px 20px !important;
  min-height:auto !important;
}

/* About becomes a teaser on the homepage. Full data remains in about.html and
   the original copy stays in source, but the flow only shows the core message. */
.home-page .mission{
  padding-bottom:70px !important;
}
.home-page .mission-grid{
  grid-template-columns:minmax(0,1fr) 400px !important;
  gap:44px !important;
}
.home-page .mission-copy p:nth-of-type(n+2){
  display:none !important;
}
.home-page .mission-copy p:first-child{
  max-width:760px !important;
  font-size:1.05rem !important;
  line-height:1.75 !important;
}
.inline-more{
  display:inline-flex;
  margin-top:18px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink) !important;
  border-bottom:2px solid var(--ink);
}
.home-page .mission-card{
  padding:28px !important;
  align-self:start;
}
.home-page .mission-card p:nth-of-type(2){
  display:none !important;
}
.home-page .mission-tags{
  margin-top:16px !important;
}

@media (max-width:980px){
  .home-page .vision-row,
  .home-page .bench-wrap,
  .home-page .featured-layout,
  .home-page .mission-grid{
    grid-template-columns:1fr !important;
  }
  .home-page .vision-visual{ display:none !important; }
  .home-page .path-board{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:640px){
  .home-page section{ padding-top:48px !important; padding-bottom:48px !important; }
  .home-page .path-board{ grid-template-columns:1fr !important; }
  .home-page .path-step{ min-height:auto !important; }
  .home-page .hero{ padding-top:54px !important; }
}

/* =========================================================================
   28. Dark mode — the light "Orbi" theme (section 26/27) is now the default
       look. This block restores the original dark TEKLINOX identity when
       html[data-theme="dark"] is set (see the toggle button + JS at the
       bottom of enhance.js). Higher specificity than the light theme's
       bare selectors, so it wins regardless of source order, and it only
       touches color/skin — never layout/spacing — so toggling never moves
       anything on screen.
   ========================================================================= */
html[data-theme="dark"]{
  --bg:#03060a;
  --bg-alt:#080f16;
  --panel:#0a121a;
  --panel-soft:#0d1620;
  --trace:#16324a;
  --trace-bright:#22c3a6;
  --mint:#7fe8dc;
  --mint-dim:#3f7f96;
  --gold:#4f8fe0;
  --paper:#0a121a;
  --ink:#dbe9ee;
  --text:#dbe9ee;
  --text-dim:#7c93a6;
  --muted:#7c93a6;
  --border:#16324a;
  --border-light:#16324a;
  --red:#e0574f;
  --green:#7fe8dc;
  --orange:#22c3a6;
  --radius:2px;
  --shadow-industrial:none;
}

html[data-theme="dark"] body{
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, #081319 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, #060d13 0%, transparent 55%),
    var(--bg) !important;
  background-size:auto !important;
  color:var(--text) !important;
  font-family:'Inter',system-ui,sans-serif;
}
html[data-theme="dark"] body::before{ background:none; }

/* restore the decorative background layers the light theme hides */
html[data-theme="dark"] .pcb-field,
html[data-theme="dark"] .current-field,
html[data-theme="dark"] .grain,
html[data-theme="dark"] .hero-trace{ display:revert !important; }
html[data-theme="dark"] .scroll-progress-wrap{ display:flex !important; }

/* header / nav */
html[data-theme="dark"] header{
  background:rgba(5,9,13,0.85) !important;
  border-bottom:1px solid var(--trace) !important;
  backdrop-filter:blur(8px) !important;
}
html[data-theme="dark"] .brand-word{ color:var(--text) !important; }
html[data-theme="dark"] .brand small,
html[data-theme="dark"] .footer-inner .brand small{
  color:var(--bg) !important; background:var(--trace-bright) !important;
  border:none !important; box-shadow:none !important;
}
html[data-theme="dark"] nav.components a,
html[data-theme="dark"] .nav-toggle{
  border:1px solid var(--trace) !important; background:transparent !important;
  color:var(--text-dim) !important; box-shadow:none !important;
}
html[data-theme="dark"] nav.components a:hover,
html[data-theme="dark"] nav.components a:focus-visible{
  border-color:var(--trace-bright) !important; color:var(--mint) !important;
  background:rgba(34,195,166,0.08) !important; transform:none;
}
html[data-theme="dark"] nav.components a.current{
  border:1px solid var(--trace-bright) !important; background:transparent !important;
  color:var(--trace-bright) !important; box-shadow:none !important;
}

/* typography */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] .logo-mark, html[data-theme="dark"] .page-hero h1{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif !important;
  color:var(--text) !important; text-shadow:none !important;
}
html[data-theme="dark"] .logo-mark{
  background:linear-gradient(180deg, var(--mint) 0%, var(--trace-bright) 55%, var(--mint-dim) 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important;
  text-shadow:0 0 60px rgba(34,195,166,0.25) !important;
}
html[data-theme="dark"] section{ border-top:1px solid var(--trace) !important; }

/* eyebrow / tag / refdes labels */
html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .refdes,
html[data-theme="dark"] .card .tag, html[data-theme="dark"] .hv-card .tag,
html[data-theme="dark"] .hv-modal .tag, html[data-theme="dark"] .category-tag,
html[data-theme="dark"] .equipment-body .category-tag, html[data-theme="dark"] .step-no,
html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .spec-rail .k,
html[data-theme="dark"] .machine-specs td:first-child{
  color:var(--trace-bright) !important;
}
html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .refdes,
html[data-theme="dark"] .category-tag, html[data-theme="dark"] .equipment-body .category-tag,
html[data-theme="dark"] .card .tag{
  border:1px solid rgba(34,195,166,0.35) !important; background:rgba(34,195,166,0.06) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] .refdes{ color:var(--gold) !important; border-color:var(--gold) !important; }

/* panels / quote / vision */
html[data-theme="dark"] .quote, html[data-theme="dark"] .vision-box,
html[data-theme="dark"] .vision-visual, html[data-theme="dark"] .card,
html[data-theme="dark"] .post, html[data-theme="dark"] .purpose-card,
html[data-theme="dark"] .path-step, html[data-theme="dark"] .bench-panel,
html[data-theme="dark"] .feature-primary, html[data-theme="dark"] .feature-mini,
html[data-theme="dark"] .mission-card, html[data-theme="dark"] .hv-card,
html[data-theme="dark"] .hv-modal, html[data-theme="dark"] .spec-rail,
html[data-theme="dark"] .detail-card, html[data-theme="dark"] .equipment-tile,
html[data-theme="dark"] .spec-tab{
  background:var(--panel) !important; border:1px solid var(--trace) !important;
  box-shadow:none !important; color:var(--text) !important;
}
html[data-theme="dark"] .spec-tab::before{
  background:linear-gradient(90deg, transparent, var(--trace-bright), var(--gold), transparent) !important;
}
html[data-theme="dark"] .quote span, html[data-theme="dark"] .type-cursor{ color:var(--trace-bright) !important; }
html[data-theme="dark"] .vision-visual{ background:var(--panel) !important; color:var(--text) !important; }
html[data-theme="dark"] .vision-visual svg text{ fill:var(--text) !important; }
html[data-theme="dark"] .vision-list li::before{ color:var(--trace-bright) !important; }

/* buttons */
html[data-theme="dark"] .btn{
  border-radius:2px !important; border:1px solid var(--trace) !important;
  box-shadow:none !important; text-transform:none !important; animation:revert !important;
}
html[data-theme="dark"] .btn-primary{
  background:var(--trace-bright) !important; color:#04121c !important; border-color:var(--trace-bright) !important;
  box-shadow:0 0 22px -4px var(--trace-bright) !important;
}
html[data-theme="dark"] .btn-gold{
  background:linear-gradient(135deg, var(--gold), #86b8f2) !important; color:#04121c !important; border-color:var(--gold) !important;
}
html[data-theme="dark"] .btn-ghost{ background:transparent !important; color:var(--text-dim) !important; }
html[data-theme="dark"] .btn:hover{ transform:translateY(-2px) !important; box-shadow:0 0 22px -4px var(--trace-bright) !important; }

/* cards/grids interactions */
html[data-theme="dark"] .card::before, html[data-theme="dark"] .card::after,
html[data-theme="dark"] .post::after, html[data-theme="dark"] .hv-card::before{ display:revert !important; }
html[data-theme="dark"] .card:hover, html[data-theme="dark"] .post:hover,
html[data-theme="dark"] .purpose-card:hover, html[data-theme="dark"] .path-step:hover,
html[data-theme="dark"] .hv-card:hover, html[data-theme="dark"] .feature-primary:hover,
html[data-theme="dark"] .feature-mini:hover, html[data-theme="dark"] .equipment-tile:hover{
  transform:translateY(-5px) !important; border-color:var(--trace-bright) !important;
  box-shadow:0 16px 34px -18px var(--trace-bright) !important;
}
html[data-theme="dark"] .card h3, html[data-theme="dark"] .post h3,
html[data-theme="dark"] .purpose-card h3, html[data-theme="dark"] .path-step h3,
html[data-theme="dark"] .hv-card h3, html[data-theme="dark"] .equipment-body h3,
html[data-theme="dark"] .feature-primary h3, html[data-theme="dark"] .feature-mini strong,
html[data-theme="dark"] .mission-card h3{ color:var(--text) !important; }
html[data-theme="dark"] .purpose-icon{
  background:rgba(34,195,166,0.08) !important; color:var(--trace-bright) !important; border:1px solid rgba(34,195,166,0.35) !important;
}
html[data-theme="dark"] .purpose-link, html[data-theme="dark"] .step-link,
html[data-theme="dark"] .feature-link, html[data-theme="dark"] .back-link,
html[data-theme="dark"] .hv-card .hv-open{ color:var(--trace-bright) !important; }

/* new homepage sections */
html[data-theme="dark"] .start-path, html[data-theme="dark"] .bench-strip,
html[data-theme="dark"] .featured-work, html[data-theme="dark"] .mission{ background:transparent !important; }
html[data-theme="dark"] .path-step{ background:var(--panel) !important; }
html[data-theme="dark"] .bench-panel{
  background:var(--panel) !important; background-size:auto !important; color:var(--text) !important;
}
html[data-theme="dark"] .scope-line{ color:var(--trace-bright) !important; }
html[data-theme="dark"] .scope-line i{ background:var(--trace-bright) !important; }
html[data-theme="dark"] .scope-wave{ border-color:var(--trace) !important; }
html[data-theme="dark"] .scope-grid span{
  background:var(--bg-alt) !important; border:1px solid var(--trace) !important; color:var(--text-dim) !important;
}
html[data-theme="dark"] .feature-primary{ background:var(--panel) !important; }

/* page heroes / equipment / footer */
html[data-theme="dark"] .page-hero{
  background:var(--bg) !important; background-size:auto !important; border-bottom:1px solid var(--trace) !important;
}
html[data-theme="dark"] .breadcrumb a{ color:var(--trace-bright) !important; }
html[data-theme="dark"] .equipment-thumb{ background:var(--bg-alt) !important; border-bottom:1px solid var(--trace) !important; }
html[data-theme="dark"] .equipment-body{ background:var(--panel) !important; }
html[data-theme="dark"] .post-media{ background:var(--bg-alt) !important; border-bottom:1px solid var(--trace) !important; }
html[data-theme="dark"] .post-media .pin{ background:var(--trace-bright) !important; box-shadow:0 0 6px var(--trace-bright) !important; }
html[data-theme="dark"] .hv-modal-backdrop{ background:rgba(5,9,13,0.78) !important; backdrop-filter:blur(6px) !important; }
html[data-theme="dark"] .hv-modal-close{ border:1px solid var(--trace) !important; background:var(--panel) !important; color:var(--text) !important; }
html[data-theme="dark"] .hv-diagram{ background:var(--bg-alt) !important; border:1px solid var(--trace) !important; }
html[data-theme="dark"] ::selection{ background:var(--trace-bright) !important; color:#04121c !important; }
html[data-theme="dark"] footer{ background:var(--bg-alt) !important; border-top:1px solid var(--trace) !important; color:var(--text) !important; }
html[data-theme="dark"] .footer-links a, html[data-theme="dark"] .footer-note{ color:var(--text-dim) !important; }
html[data-theme="dark"] .footer-links a:hover{ color:var(--mint) !important; }

html[data-theme="dark"] .mission-copy strong, html[data-theme="dark"] .detail-body strong,
html[data-theme="dark"] .about strong, html[data-theme="dark"] main strong{ color:var(--text) !important; }
html[data-theme="dark"] .mission-tags span{
  color:var(--trace-bright) !important; border:1px solid rgba(34,195,166,0.35) !important; background:rgba(34,195,166,0.06) !important;
}

@media (max-width:820px){
  html[data-theme="dark"] nav.components{ background:var(--bg) !important; border-bottom:1px solid var(--trace) !important; }
}

/* =========================================================================
   29. Light/dark toggle button — sits in the nav, switches html[data-theme].
   ========================================================================= */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:4px;
  border:1.5px solid var(--border, var(--trace)); background:transparent;
  color:var(--ink, var(--text)); cursor:pointer; padding:0;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.theme-toggle:hover{ transform:translateY(-2px); border-color:var(--orange, var(--trace-bright)); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }