/* ============================================================
   RSAIANet Solutions — "Blue Circuit & White Signal"
   The page is a populated PCB, read at working magnification.
   Deep-blue circuit substrate, electric-blue pads, crisp white
   silkscreen legend, traces that bend at 45 degrees only.
   Nothing here is a texture of a circuit board; every device
   on the page is a thing that exists on a real one.
   ============================================================ */

/* ── Tokens ───────────────────────────────────────────────── */
:root{
  /* Blue circuit mask — deep navy over copper pour */
  --mask:     #0B3B77;
  --mask-hi:  #1557A0;   /* lit face, raised planes */
  --mask-lo:  #082B57;   /* recessed, shadowed, footer */
  --mask-deep:#061D3B;

  /* Silkscreen — the white legend layer */
  --silk:     #FFFFFF;
  --silk-dim: #D9E7F7;   /* 8.8:1 on mask — safe for body copy */
  --silk-ghost: rgba(255,255,255,.16);

  /* Electric blue — pads, fingers, the primary action */
  --gold:     #2F80ED;   /* FILL ONLY — 2.85:1 on mask, must never carry text */
  --gold-text:#A8D8FF;   /* the text accent — 7.3:1 on mask, 4.8:1 on mask-hi */
  --gold-ink: #03142A;   /* text sitting ON a --gold fill — 4.78:1 */
  --gold-hi:  #66B2FF;
  --gold-lo:  #1B5FBF;   /* structural hairlines only — 1.8:1, never text */

  /* Ice white-blue — solder joints, secondary traces */
  --tin:      #D7E9FF;

  /* Indicator LED. RESERVED for live states only. */
  --led:      #67E8F9;

  /* Light surface: clean white-blue section */
  --fr4:      #F7FBFF;
  --fr4-ink:  #0B2B4A;
  --fr4-dim:  #4B6480;
  --sun:      #2563EB;

  /* Blue fingers — a card-edge connector */
  --fingers: repeating-linear-gradient(90deg,
              var(--gold) 0 17px, transparent 17px 25px);

  /* Drill grid */
  --drill: radial-gradient(circle at center,
             rgba(255,255,255,.06) 1px, transparent 1.2px);

  --ch:    14px;   /* chamfer: boards are cut at 45 degrees */
  --ch-sm: 8px;

  --f-display: "Archivo","Archivo Expanded",system-ui,sans-serif;
  --f-text:    "IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --f-mono:    "IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --t-xs:  .78rem;
  --t-sm:  .875rem;
  --t-base: clamp(1rem, .96rem + .2vw, 1.075rem);
  --t-lede: clamp(1.075rem, 1rem + .45vw, 1.3rem);
  --t-h3:  clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  --t-h2:  clamp(2rem, 1.4rem + 2.6vw, 4.1rem);
  --t-h1:  clamp(2.7rem, 1.6rem + 5vw, 6.4rem);

  --gut: clamp(1.25rem, 5vw, 6rem);
  --stack: clamp(5rem, 11vh, 10rem);
  --measure: 62ch;

  --ease: cubic-bezier(.19,1,.22,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

/* ── Shape language: two opposite corners cut at 45° ─────── */
.chamfer{
  clip-path:polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)),
                    calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
.chamfer-sm{
  clip-path:polygon(var(--ch-sm) 0, 100% 0, 100% calc(100% - var(--ch-sm)),
                    calc(100% - var(--ch-sm)) 100%, 0 100%, 0 var(--ch-sm));
}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--mask);
  color:var(--silk);
  font:400 var(--t-base)/1.65 var(--f-text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}

:focus-visible{outline:3px solid var(--led);outline-offset:3px}

.skip{
  position:fixed;top:0;left:0;z-index:999;
  padding:.8rem 1.2rem;background:var(--gold);color:var(--mask-lo);
  font-weight:700;transform:translateY(-120%);transition:transform .2s
}
.skip:focus{transform:none}

section[id],[id]{scroll-margin-top:6rem}

/* ── Silkscreen: the legend layer, set in condensed Archivo ── */
.silk{
  font-family:var(--f-display);font-stretch:75%;font-weight:600;
  font-size:.7rem;letter-spacing:.09em;color:var(--silk);opacity:.72
}

/* ── Type utilities ───────────────────────────────────────── */
.h-sec{
  font-family:var(--f-display);
  font-size:var(--t-h2);font-weight:700;font-stretch:112%;
  line-height:.98;letter-spacing:-.022em;text-wrap:balance;color:var(--silk)
}
.lede{
  max-width:var(--measure);margin-top:1.3rem;
  font-size:var(--t-lede);font-weight:400;line-height:1.55;color:var(--silk-dim)
}
.num{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums}

/* ============================================================
   Loading curtain
   ============================================================ */
.curtain{display:none}
.js .curtain{
  position:fixed;inset:0;z-index:900;
  display:grid;place-content:center;gap:1.1rem;justify-items:center;
  background:var(--mask-deep);
  transition:opacity .7s var(--ease),visibility .7s
}
.curtain__mark{width:min(260px,54vw)}
.curtain__wire{stroke-dasharray:320;stroke-dashoffset:320;animation:draw 1s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.curtain__word{
  font-family:var(--f-display);font-stretch:75%;font-weight:600;
  font-size:.95rem;letter-spacing:.34em;color:var(--gold-text);
  opacity:0;animation:fadeIn .6s .5s var(--ease) forwards
}
@keyframes fadeIn{to{opacity:1}}
/* Lifts on a CSS timer, so a missing or broken main.js can never
   leave a visitor staring at a blank screen. */
.js .curtain{animation:curtainLift .55s var(--ease) 1.15s forwards}
@keyframes curtainLift{to{opacity:0;visibility:hidden;pointer-events:none}}

/* ============================================================
   The trace: a gold signal run down the left edge, with vias
   ============================================================ */
.spine{display:none}
@media (min-width:1180px){
  .spine{
    display:block;position:fixed;left:2rem;top:0;bottom:0;width:11rem;z-index:60;
    pointer-events:none
  }
  .spine__rail{
    position:absolute;left:5px;top:14vh;bottom:14vh;width:2px;
    background:var(--silk-ghost)
  }
  .spine__fill{
    position:absolute;left:5px;top:14vh;width:2px;
    height:calc(72vh * var(--p,0));
    background:var(--gold);
    box-shadow:0 0 10px rgba(47,128,237,.38);
    transition:height .12s linear
  }
  /* the solder head travelling the run */
  .spine__head{
    position:absolute;left:-1px;width:8px;height:8px;border-radius:50%;
    top:calc(14vh + (72vh * var(--p,0)));margin-top:-4px;
    background:var(--tin);
    box-shadow:0 0 0 2px var(--mask),0 0 12px rgba(215,233,255,.55);
    transition:top .12s linear
  }
  .spine__ticks{
    position:absolute;left:24px;top:14vh;height:72vh;
    display:flex;flex-direction:column;justify-content:space-between;
    pointer-events:auto
  }
  /* each section marker is a via: a plated through-hole */
  .spine__ticks a{
    display:flex;align-items:center;gap:.7rem;
    font-family:var(--f-display);font-stretch:75%;font-weight:600;
    font-size:.7rem;letter-spacing:.08em;color:var(--silk-dim);
    margin-left:-24px;transition:color .3s var(--ease)
  }
  .spine__ticks a::before{
    content:"";width:9px;height:9px;border-radius:50%;flex:none;
    border:2px solid var(--silk-ghost);background:var(--mask);
    transition:border-color .3s,background .3s
  }
  .spine__ticks a:hover{color:var(--silk)}
  .spine__ticks a.is-on{color:var(--gold-text)}
  .spine__ticks a.is-on::before{border-color:var(--gold);background:var(--gold-lo)}
  body.bare-mode .spine__rail{background:rgba(11,43,74,.14)}
  body.bare-mode .spine__head{background:var(--fr4-ink);box-shadow:0 0 0 2px var(--fr4)}
  body.bare-mode .spine__ticks a{color:var(--fr4-dim)}
  body.bare-mode .spine__ticks a::before{border-color:rgba(11,43,74,.22);background:var(--fr4)}
  body.bare-mode .spine__ticks a.is-on{color:var(--sun)}
  body.bare-mode .spine__ticks a.is-on::before{border-color:var(--sun);background:var(--sun)}
}

/* ── Cursor: a probe tip ──────────────────────────────────── */
.cursor{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .cursor{
    display:block;position:fixed;top:0;left:0;z-index:800;pointer-events:none;
    transform:translate3d(var(--x,-100px),var(--y,-100px),0)
  }
  .cursor__ring,.cursor__dot{position:absolute;translate:-50% -50%;border-radius:50%}
  .cursor__ring{
    width:24px;height:24px;border:1.5px solid var(--gold);
    transition:width .3s var(--ease),height .3s var(--ease),
               border-color .3s,border-width .3s
  }
  .cursor__dot{width:3px;height:3px;background:var(--gold-hi)}
  body.cursor-hot .cursor__ring{width:46px;height:46px;border-width:3px;border-color:var(--led)}
  body.cursor-hot .cursor__dot{background:var(--led)}
  body.cursor-bare .cursor__ring{border-color:var(--fr4-ink)}
  body.cursor-bare .cursor__dot{background:var(--fr4-ink)}
}

/* ============================================================
   Masthead
   ============================================================ */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:2rem;
  padding:1.15rem var(--gut);color:var(--silk);
  transition:background .45s var(--ease),padding .45s var(--ease),color .45s
}
.masthead.is-stuck{
  background:rgba(11,59,119,.92);
  backdrop-filter:blur(12px) saturate(130%);
  padding-block:.75rem;
  border-bottom:1px solid var(--silk-ghost)
}
body.bare-mode .masthead{color:var(--fr4-ink)}
body.bare-mode .masthead.is-stuck{
  background:rgba(247,251,255,.94);border-bottom-color:rgba(11,43,74,.14)
}

.wordmark{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--f-display);font-weight:700;font-stretch:115%;
  font-size:1.02rem;letter-spacing:-.01em;margin-right:auto
}
.wordmark__glyph{width:34px;color:var(--gold-text);flex:none}
body.bare-mode .wordmark__glyph{color:var(--sun)}
.wordmark__sub{
  display:block;font-family:var(--f-display);font-stretch:75%;
  font-size:.62rem;font-weight:600;letter-spacing:.26em;
  color:var(--silk-dim);margin-top:.15rem
}
body.bare-mode .wordmark__sub{color:var(--fr4-dim)}

.nav{display:flex;gap:1.9rem;font-size:var(--t-sm);font-weight:500}
.nav a{position:relative;padding-block:.3rem;color:var(--silk-dim);transition:color .3s}
body.bare-mode .nav a{color:var(--fr4-dim)}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--gold);transition:right .45s var(--ease)
}
.nav a:hover{color:var(--silk)}
body.bare-mode .nav a:hover{color:var(--fr4-ink)}
.nav a:hover::after{right:0}
@media (max-width:900px){.nav,.masthead__cta{display:none}}

/* ── Buttons: gold pads, chamfered, no shadow ─────────────── */
.btn{
  position:relative;z-index:0;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.7rem;border:0;border-radius:0;
  clip-path:polygon(var(--ch-sm) 0, 100% 0, 100% calc(100% - var(--ch-sm)),
                    calc(100% - var(--ch-sm)) 100%, 0 100%, 0 var(--ch-sm));
  font-size:var(--t-sm);font-weight:600;letter-spacing:.01em;
  cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)
}
.btn--lg{padding:1.15rem 2.1rem;font-size:var(--t-base)}
.btn--solid{background:var(--gold);color:var(--gold-ink)}
.btn--solid:hover{background:var(--gold-hi);color:var(--mask-deep);transform:translateY(-2px)}

/* outline buttons are drawn as a gold pad with the mask floated on top */
.btn--ghost,.btn--wa{background:var(--gold);color:var(--gold-text)}
.btn--ghost::after,.btn--wa::after{
  content:"";position:absolute;inset:2px;z-index:-1;background:var(--mask);
  clip-path:polygon(calc(var(--ch-sm) - 2px) 0, 100% 0, 100% calc(100% - var(--ch-sm) + 2px),
                    calc(100% - var(--ch-sm) + 2px) 100%, 0 100%, 0 calc(var(--ch-sm) - 2px));
  transition:background .35s var(--ease)
}
.btn--ghost:hover,.btn--wa:hover{color:var(--mask-lo)}
.btn--ghost:hover::after,.btn--wa:hover::after{background:var(--gold)}
.btn__pulse{
  width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;
  animation:beat 2.4s infinite var(--ease-io)
}
@keyframes beat{0%,72%,100%{opacity:.4;transform:scale(1)}80%{opacity:1;transform:scale(1.45)}}

/* ── Burger + drawer ──────────────────────────────────────── */
.burger{
  display:none;width:44px;height:44px;background:none;
  border:2px solid var(--gold-text);position:relative;cursor:pointer;color:var(--gold-text);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)
}
.burger span{
  position:absolute;left:11px;width:20px;height:2px;background:currentColor;
  transition:transform .4s var(--ease)
}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
@media (max-width:900px){.burger{display:block}}

.drawer{
  position:fixed;inset:0;z-index:95;
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:var(--gut);
  background:var(--mask-lo);
  border-top:10px solid transparent;
  border-image:var(--fingers) 10
}
.drawer[hidden]{display:none}
.drawer a{
  font-family:var(--f-display);font-stretch:110%;font-weight:700;
  font-size:clamp(1.7rem,8vw,2.6rem);line-height:1.25;color:var(--silk);
  opacity:0;transform:translateY(14px);
  animation:drawerIn .55s var(--ease) forwards
}
.drawer a:nth-child(1){animation-delay:.04s}
.drawer a:nth-child(2){animation-delay:.08s}
.drawer a:nth-child(3){animation-delay:.12s}
.drawer a:nth-child(4){animation-delay:.16s}
.drawer a:nth-child(5){animation-delay:.2s}
.drawer a:nth-child(6){animation-delay:.24s}
@keyframes drawerIn{to{opacity:1;transform:none}}
.drawer__wa{
  margin-top:1.6rem;font-family:var(--f-text)!important;font-size:1rem!important;
  font-weight:600!important;color:var(--gold-text)!important;animation-delay:.3s!important
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  display:grid;align-items:end;
  padding:9rem var(--gut) clamp(3rem,8vh,5.5rem);
  isolation:isolate;
  background:var(--drill) 0 0/26px 26px,var(--mask)
}
@media (min-width:1180px){.hero{padding-left:calc(var(--gut) + 9rem)}}

.hero__field{position:absolute;inset:0;z-index:-1;overflow:hidden}
.topo{width:120%;height:100%;margin-left:-6%}
.topo__grid path{stroke:var(--gold);stroke-width:1;opacity:.07}

.topo__links path{stroke-dasharray:1400;stroke-dashoffset:1400}
.js .topo__links path{animation:draw 2.2s var(--ease) 1.3s both}
.js .topo__links path:nth-child(2){animation-delay:1.5s}
.js .topo__links path:nth-child(3){animation-delay:1.65s}
.js .topo__links path:nth-child(4){animation-delay:1.8s}
.js .topo__links path:nth-child(5){animation-delay:1.95s}
html:not(.js) .topo__links path{stroke-dashoffset:0}

/* nodes are plated vias: gold annulus, drilled centre */
.topo__nodes circle{fill:var(--gold);stroke:var(--mask);stroke-width:2.5;opacity:0}
.topo__halo{fill:url(#halo);stroke:none;opacity:0}
.topo__nodes text{
  fill:var(--silk);font-family:var(--f-display);font-stretch:75%;font-weight:600;
  font-size:11px;letter-spacing:.1em;text-anchor:middle;opacity:0
}
.js .topo__nodes circle{animation:fadeIn .5s 2.3s both}
.js .topo__halo{animation:fadeIn 1.2s 2.4s both}
.js .topo__nodes text{animation:fadeIn .6s 2.6s both}
html:not(.js) .topo__nodes circle,
html:not(.js) .topo__nodes text,
html:not(.js) .topo__halo{opacity:1}

.topo__pulses{display:none}
@supports (offset-path: path("M0 0 L1 1")){
  .topo__pulses{display:block}
  .js .topo__pulses .p{
    fill:var(--led);opacity:0;offset-rotate:0deg;
    animation:travel 5.2s linear 1.6s infinite
  }
  .p2{animation-delay:2.5s!important}
  .p3{animation-delay:3.2s!important}
  .p4{animation-delay:4s!important}
  .p1{offset-path:path("M120 470 H230 L400 300 H430")}
  .p2{offset-path:path("M430 300 H560 L710 150 H745")}
  .p3{offset-path:path("M430 300 H590 L760 470")}
  .p4{offset-path:path("M120 470 V490 L150 520 H520")}
}
@keyframes travel{
  0%{offset-distance:0%;opacity:0}
  8%{opacity:1}
  70%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
.hero__vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(115% 88% at 16% 86%, var(--mask-hi) 0%, rgba(21,87,160,.52) 40%, transparent 72%),
    linear-gradient(to top, var(--mask) 2%, rgba(11,59,119,0) 42%)
}

.hero__copy{position:relative;max-width:min(100%,62rem)}
.hero__h1{
  font-family:var(--f-display);font-size:var(--t-h1);
  font-weight:800;font-stretch:118%;
  line-height:.89;letter-spacing:-.036em;margin-bottom:1.8rem;color:var(--silk)
}
.rev{display:block;overflow:hidden}
.rev>span{display:block;transform:translateY(110%)}
.js .rev>span{animation:rise .95s var(--ease) 1.25s both}
.js .rev:nth-child(2)>span{animation-delay:1.35s}
@keyframes rise{to{transform:none}}

.rev-soft{opacity:0;transform:translateY(18px)}
.js .rev-soft{animation:rise2 .9s var(--ease) 1.4s both}
.js .hero__actions{animation-delay:1.54s}
.js .hero__meter{animation-delay:1.66s}
@keyframes rise2{to{opacity:1;transform:none}}
html:not(.js) .rev>span{transform:none}
html:not(.js) .rev-soft{opacity:1;transform:none}

.hero__sub{max-width:52ch;font-size:var(--t-lede);color:var(--silk-dim);line-height:1.55}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

/* the meter sits on a card-edge: gold fingers instead of a rule */
.hero__meter{
  display:flex;flex-wrap:wrap;gap:2.6rem;margin-top:3.2rem;padding-top:1.7rem;
  border-top:9px solid transparent;border-image:var(--fingers) 9
}
.hero__meter dt{
  font-family:var(--f-display);font-stretch:75%;font-weight:600;
  font-size:.7rem;letter-spacing:.11em;color:var(--silk-dim);margin-bottom:.4rem
}
.hero__meter dd{margin:0;display:flex;align-items:baseline;gap:.55rem}
.hero__meter .num{font-size:1.5rem;color:var(--gold-text)}
.hero__meter em{font-style:normal;font-size:var(--t-sm);color:var(--silk-dim)}

.hero__scroll{
  position:absolute;right:var(--gut);bottom:clamp(3rem,8vh,5.5rem);
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--f-display);font-stretch:75%;font-weight:600;
  font-size:.7rem;letter-spacing:.13em;color:var(--silk-dim)
}
.hero__scroll i{
  display:block;width:2px;height:44px;background:var(--gold);
  animation:drip 2.6s var(--ease-io) infinite
}
@keyframes drip{
  0%{transform:scaleY(.15);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}
  100%{transform:scaleY(.15);transform-origin:bottom}
}
@media (max-width:640px){.hero__scroll{display:none}}

/* ============================================================
   Act shell
   ============================================================ */
.act{position:relative;padding:var(--stack) var(--gut)}
@media (min-width:1180px){.act{padding-left:calc(var(--gut) + 9rem)}}
.act__head{max-width:64rem;margin-bottom:clamp(2.8rem,6vh,4.5rem)}

.will-reveal{opacity:0;transform:translateY(22px)}
.will-reveal.is-in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ============================================================
   ACT I — the connector bank. Nine jacks, designated J1–J9.
   ============================================================ */
.act--build{background:var(--drill) 0 0/26px 26px,var(--mask)}
.panel{
  position:relative;padding:2px;background:var(--gold-lo);
  clip-path:polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)),
                    calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch))
}
.panel__ports{
  background:var(--mask-hi);
  clip-path:polygon(calc(var(--ch) - 2px) 0, 100% 0, 100% calc(100% - var(--ch) + 2px),
                    calc(100% - var(--ch) + 2px) 100%, 0 100%, 0 calc(var(--ch) - 2px))
}
/* mounting holes: plated, drilled, at the board corners */
.panel__chassis{position:absolute;inset:0;pointer-events:none;z-index:2}
.panel__screw{
  position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--mask-deep);border:2px solid var(--gold);
  box-shadow:0 0 0 2px var(--mask-hi)
}
.panel__screw:nth-child(1){top:16px;left:16px}
.panel__screw:nth-child(2){top:16px;right:16px}
.panel__screw:nth-child(3){bottom:16px;left:16px}
.panel__screw:nth-child(4){bottom:16px;right:16px}

.port{border-top:1px solid var(--silk-ghost)}
.port:first-child{border-top:0}

.port__row{
  width:100%;display:grid;align-items:center;gap:1.1rem;
  grid-template-columns:auto auto 1fr auto auto;
  padding:1.3rem clamp(1rem,3vw,2.4rem);
  background:none;border:0;text-align:left;cursor:pointer;color:var(--silk);
  transition:background .35s var(--ease),box-shadow .35s var(--ease)
}
.port__row:hover{background:rgba(47,128,237,.08)}
.port__row[aria-expanded="true"]{
  background:var(--mask);box-shadow:inset 4px 0 0 var(--gold)
}
/* the jack body: a through-hole connector with gold pins */
.port__jack{
  width:28px;height:20px;position:relative;flex:none;
  background:var(--mask-deep);border:1.5px solid var(--gold-lo);
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
  transition:border-color .35s,background .35s
}
.port__jack i{position:absolute;top:4px;width:2px;height:8px;background:var(--gold)}
.port__jack i:first-child{left:8px}
.port__jack i:last-child{left:17px}
.port__row:hover .port__jack,
.port__row[aria-expanded="true"] .port__jack{border-color:var(--gold);background:var(--mask-lo)}
/* reference designator, silkscreened beside the part */
.port__no{
  font-family:var(--f-display);font-stretch:75%;font-weight:600;
  font-size:.78rem;letter-spacing:.06em;color:var(--silk);opacity:.6;
  min-width:1.8rem
}
.port__row[aria-expanded="true"] .port__no{opacity:1;color:var(--gold-text)}
.port__name{
  font-family:var(--f-display);font-weight:700;font-stretch:106%;
  font-size:var(--t-h3);letter-spacing:-.012em;line-height:1.15
}
.port__tag{
  font-family:var(--f-display);font-stretch:75%;font-weight:500;
  font-size:.76rem;letter-spacing:.05em;color:var(--silk-dim)
}
/* status LED, surface-mount */
.port__led{
  width:9px;height:5px;background:var(--gold-lo);flex:none;
  transition:background .35s,box-shadow .35s
}
.port__row[aria-expanded="true"] .port__led{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.port__led--live{
  background:var(--led);box-shadow:0 0 10px rgba(103,232,249,.72);
  animation:blink 3.4s infinite
}
@keyframes blink{0%,88%,100%{opacity:1}92%{opacity:.2}}

.port__body{
  padding:0 clamp(1rem,3vw,2.4rem) 1.9rem calc(clamp(1rem,3vw,2.4rem) + 28px + 1.1rem);
  max-width:78ch;background:var(--mask)
}
.port__body[hidden]{display:none}
.port__body p{color:var(--silk-dim)}
/* chips are solder pads */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.chips li{
  padding:.35rem .8rem;background:var(--mask-lo);
  border:1px solid var(--gold-lo);color:var(--gold-text);
  font-family:var(--f-display);font-stretch:75%;font-weight:600;
  font-size:.74rem;letter-spacing:.05em;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)
}
@media (max-width:760px){
  .port__row{grid-template-columns:auto 1fr auto;row-gap:.3rem}
  .port__no{display:none}
  .port__tag{grid-column:2;font-size:.72rem}
  .port__body{padding-left:clamp(1rem,3vw,2.4rem)}
  .panel__screw:nth-child(3),.panel__screw:nth-child(4){display:none}
}

/* ============================================================
   The light act — the page's one tonal break.
   Carried by the method section now the solar act is gone.
   ============================================================ */
.act--light{
  background:var(--fr4);color:var(--fr4-ink);
  clip-path:polygon(0 3.5vw,100% 0,100% 100%,0 100%);
  margin-top:-3.5vw;padding-top:calc(var(--stack) + 3.5vw);
  overflow:hidden
}
.act--light .h-sec{color:var(--fr4-ink)}
.act--light .lede{color:var(--fr4-dim)}
.act--light .steps{border-top-color:rgba(11,43,74,.18)}
.act--light .step{border-color:rgba(11,43,74,.18)}
.act--light .step:hover{background:rgba(255,255,255,.55)}
.act--light .step h3{color:var(--fr4-ink)}
.act--light .step p{color:var(--fr4-dim)}
.act--light .step__i{
  color:var(--fr4);background:var(--sun);
  box-shadow:0 0 0 3px var(--fr4),0 0 0 4px rgba(37,99,235,.3)
}

/* ============================================================
   ACT III — method. Five stages, wired in series.
   ============================================================ */
.act--method{background:var(--mask)}
.steps{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.steps{grid-template-columns:repeat(5,1fr)}}
.step{
  position:relative;padding:2rem 1.6rem 2.4rem;
  border-top:1px solid var(--silk-ghost);
  transition:background .4s var(--ease)
}
@media (min-width:760px){.step{border-left:1px solid var(--silk-ghost)}
  .step:nth-child(odd){border-left:0}}
@media (min-width:1200px){.step{border-left:1px solid var(--silk-ghost)}
  .step:first-child{border-left:0}}
.step:hover{background:var(--mask-hi)}
/* each stage numbered as a test point on the board */
.step__i{
  display:inline-grid;place-items:center;width:32px;height:32px;
  font-family:var(--f-display);font-stretch:75%;font-weight:700;font-size:.84rem;
  color:var(--mask-lo);background:var(--gold);border-radius:50%;
  box-shadow:0 0 0 3px var(--mask),0 0 0 4px var(--gold-lo);
  margin-bottom:2rem
}
.step h3{
  font-family:var(--f-display);font-weight:700;font-stretch:110%;
  font-size:var(--t-h3);margin-bottom:.7rem;letter-spacing:-.015em;color:var(--silk)
}
.step p{font-size:var(--t-sm);color:var(--silk-dim);line-height:1.6}

@media (min-width:900px){
      }

/* ============================================================
   ALBUM — the archive. Masonry by CSS columns so portrait and
   landscape shots keep their own ratio and nothing gets cropped.
   ============================================================ */
.act--album{background:var(--mask-lo)}
/* Uniform grid: every tile is the same square, so rows line up on any
   screen. Thumbnails are pre-cropped square, and the viewer shows the
   full uncropped photograph. */
.album{
  display:grid;
  gap:clamp(.5rem,1.2vw,.9rem);
  grid-template-columns:repeat(2,1fr)
}
@media (min-width:620px){.album{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.album{grid-template-columns:repeat(4,1fr)}}

.shot{display:flex}
.shot__btn{
  display:flex;flex-direction:column;width:100%;height:100%;
  padding:2px 2px 0;border:0;cursor:pointer;
  background:var(--gold-lo);text-align:left;
  clip-path:polygon(var(--ch-sm) 0, 100% 0, 100% calc(100% - var(--ch-sm)),
                    calc(100% - var(--ch-sm)) 100%, 0 100%, 0 var(--ch-sm));
  transition:background .4s var(--ease),transform .4s var(--ease)
}
.shot__btn:hover{background:var(--gold);transform:translateY(-3px)}
.shot__btn img{
  width:100%;height:auto;display:block;
  aspect-ratio:1/1;object-fit:cover;
  filter:saturate(.85) contrast(1.03) brightness(.94);
  transition:filter .6s var(--ease)
}
.shot__btn:hover img{filter:none}
/* fixed two-line caption box keeps every tile exactly the same height */
.shot__cap{
  flex:1;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
  padding:.7rem .75rem .8rem;background:var(--mask-deep);
  min-height:3.65rem;
  font-family:var(--f-display);font-stretch:75%;font-weight:600;
  font-size:.74rem;letter-spacing:.04em;line-height:1.45;color:var(--silk-dim);
  transition:color .3s
}
.shot__btn:hover .shot__cap{color:var(--silk)}
@media (max-width:400px){
  .shot__cap{font-size:.7rem;padding:.6rem .6rem .7rem;min-height:3.3rem}
}

/* ── Photograph viewer ────────────────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:200;height:100svh;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(.5rem,2vw,1.5rem);padding:clamp(1rem,4vw,3rem);
  background:rgba(6,29,59,.96);
  backdrop-filter:blur(6px)
}
.lb[hidden]{display:none}
.lb__stage{
  margin:0;display:flex;flex-direction:column;align-items:center;
  gap:1rem;min-width:0;max-height:100%
}
.lb__stage img{
  max-width:100%;max-height:calc(100svh - 11rem);
  width:auto;height:auto;object-fit:contain;
  clip-path:polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)),
                    calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch))
}
.lb__stage figcaption{
  font-family:var(--f-display);font-stretch:75%;font-weight:600;
  font-size:.86rem;letter-spacing:.06em;color:var(--silk);text-align:center
}
.lb__nav,.lb__close{
  display:grid;place-items:center;background:none;cursor:pointer;
  color:var(--silk);border:2px solid var(--silk-ghost);
  transition:border-color .3s,background .3s,color .3s
}
.lb__nav{width:clamp(40px,7vw,56px);height:clamp(56px,10vw,84px);font-size:1.9rem;line-height:1}
.lb__nav:hover,.lb__close:hover{border-color:var(--gold-text);color:var(--gold-text)}
.lb__close{
  position:absolute;top:clamp(.75rem,3vw,1.75rem);right:clamp(.75rem,3vw,1.75rem);
  width:44px;height:44px;font-size:1.6rem;line-height:1
}
.lb__count{
  position:absolute;left:0;right:0;bottom:clamp(.9rem,3vw,1.75rem);
  margin:0;text-align:center;
  font-family:var(--f-mono);font-size:.76rem;color:var(--silk-dim)
}
@media (max-width:600px){
  .lb{grid-template-columns:1fr}
  .lb__nav{position:absolute;bottom:3.4rem}
  .lb__nav--prev{left:clamp(.75rem,4vw,1.5rem)}
  .lb__nav--next{right:clamp(.75rem,4vw,1.5rem)}
  .lb__stage img{max-height:calc(100svh - 13rem)}
}

/* ============================================================
   CONTACT
   ============================================================ */
.act--contact{background:var(--mask-hi);padding-bottom:0}
.contact__grid{
  display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:1fr;
  padding-bottom:var(--stack)
}
@media (min-width:1024px){.contact__grid{grid-template-columns:1.15fr 1fr;align-items:start}}
.contact__pitch .btn{margin-top:2.2rem}

.contact__details{
  display:grid;gap:0;align-content:start;
  border-top:9px solid transparent;border-image:var(--fingers) 9
}
.detail{
  display:grid;gap:.35rem;padding:1.5rem 0;
  border-bottom:1px solid var(--silk-ghost);grid-template-columns:1fr
}
@media (min-width:520px){.detail{grid-template-columns:8.5rem 1fr;gap:1.5rem}}
.detail dt{
  font-family:var(--f-display);font-stretch:75%;font-weight:600;
  font-size:.72rem;letter-spacing:.1em;color:var(--gold-text);padding-top:.3rem
}
.detail dd{margin:0;font-size:var(--t-sm);color:var(--silk-dim);line-height:1.8}
.detail address{font-style:normal}
.detail address span{opacity:.65}
.detail a{color:var(--silk);font-weight:600;box-shadow:inset 0 -2px 0 var(--gold)}
.detail a:hover{background:var(--gold);color:var(--mask-lo)}

.map{position:relative}
.map iframe{
  width:100%;height:clamp(260px,38vh,420px);border:0;display:block;
  filter:saturate(.55) brightness(.92) contrast(1.05)
}
.map__link{
  position:absolute;right:clamp(.75rem,3vw,1.5rem);bottom:clamp(.75rem,3vw,1.5rem);
  padding:.6rem 1rem;background:var(--gold);color:var(--gold-ink);
  font-family:var(--f-display);font-stretch:75%;font-weight:600;
  font-size:.74rem;letter-spacing:.06em;
  clip-path:polygon(var(--ch-sm) 0, 100% 0, 100% calc(100% - var(--ch-sm)),
                    calc(100% - var(--ch-sm)) 100%, 0 100%, 0 var(--ch-sm));
  transition:background .3s var(--ease),transform .3s var(--ease)
}
.map__link:hover{background:var(--gold-hi);transform:translateY(-2px)}

/* ============================================================
   Footer — the card edge
   ============================================================ */
.foot{background:var(--mask-deep);color:var(--silk);padding:0 var(--gut) 3rem}
@media (min-width:1180px){.foot{padding-left:calc(var(--gut) + 9rem)}}
.foot__line{
  height:16px;background:var(--fingers);
  margin:0 calc(var(--gut) * -1) 3rem
}
@media (min-width:1180px){.foot__line{margin-left:calc((var(--gut) + 9rem) * -1)}}
.foot__grid{display:grid;gap:2rem;align-items:end;grid-template-columns:1fr}
@media (min-width:820px){.foot__grid{grid-template-columns:1fr auto 1fr}}
.foot__mark{font-family:var(--f-display);font-weight:800;font-stretch:115%;font-size:1.15rem}
.foot__mark span{
  display:block;font-family:var(--f-text);font-weight:600;font-size:.82rem;
  color:var(--gold-text);margin-top:.3rem
}
.foot__nav{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:var(--t-sm);color:var(--silk-dim)}
.foot__nav a:hover{color:var(--gold-text)}
.foot__legal{
  font-family:var(--f-display);font-stretch:75%;font-size:.74rem;
  letter-spacing:.05em;color:var(--silk-dim);opacity:.7;text-align:left
}
@media (min-width:820px){.foot__legal{text-align:right}}

/* ── Floating WhatsApp ────────────────────────────────────── */
.wafloat{
  position:fixed;right:1rem;bottom:1rem;z-index:80;
  width:56px;height:56px;display:grid;place-items:center;
  background:var(--gold);color:var(--mask-lo);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),background .3s
}
.wafloat svg{width:27px;height:27px}
.wafloat.is-on{opacity:1;transform:none;pointer-events:auto}
.wafloat:hover{background:var(--gold-hi)}
@media (min-width:901px){.wafloat{display:none}}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-delay:0s!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important
  }
  .rev>span,.rev-soft,.will-reveal{opacity:1!important;transform:none!important}
  .js .topo__nodes text{opacity:1}
  .topo__links path{stroke-dashoffset:0}
  .curtain__wire{stroke-dashoffset:0}
  .topo__pulses{display:none}
  .cursor{display:none}
  .shot__btn:hover{transform:none}
}

@media (forced-colors:active){
  .port__led,.btn__pulse,.step__i{forced-color-adjust:none}
  .btn,.panel,}