/* ============================================================
   DEAD ALIEN — "Recovered Specimen, In Production"
   Inspection-drawing identity. Green is the brand, amber is the
   measurement ink, everything else is green-tinted neutral.
   ============================================================ */

:root{
  --void:#07090A;
  --panel:#0E1411;
  --panel-2:#121A16;
  --green:#34E25A;
  --green-dim:#1f9a3c;
  --amber:#F4B43C;
  --bone:#C8D2C6;
  --datum:#5B6B61;
  --rule:#1d2a23;
  --rule-2:#28382f;

  --ff-display:"Chakra Petch",system-ui,sans-serif;
  --ff-body:"Saira",system-ui,sans-serif;
  --ff-mono:"Martian Mono",ui-monospace,monospace;

  --pad:clamp(20px,5vw,80px);
  --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--ff-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--ff-display);font-weight:700;line-height:1.0;margin:0;letter-spacing:-0.01em}
em{font-style:normal;color:var(--green)}

/* ───────── ambient: datum graph paper + scanline ───────── */
.datum-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(91,107,97,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,107,97,.05) 1px,transparent 1px),
    linear-gradient(rgba(91,107,97,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,107,97,.11) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;
  mask-image:radial-gradient(120% 90% at 70% 0%,#000 35%,transparent 100%);
}
.scanline{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 3px,rgba(0,0,0,.18) 3px 4px);
  mix-blend-mode:multiply;
}

/* ───────── shared section scaffolding ───────── */
.eyebrow{
  font-family:var(--ff-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--amber);
  margin:0 0 1.1rem;display:flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--amber);opacity:.8}

.sec-head{max-width:760px;margin:0 0 clamp(2rem,4vw,3.4rem)}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.sec-sub{color:var(--datum);margin:1rem 0 0;font-size:1.02rem}

section{position:relative;z-index:2;padding-inline:var(--pad)}

/* ───────── buttons ───────── */
.btn{
  font-family:var(--ff-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;
  padding:.95em 1.5em;border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.btn-primary{background:var(--green);color:#04140a;box-shadow:0 0 0 0 rgba(52,226,90,.5)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px -8px rgba(52,226,90,.55)}
.btn-ghost{border-color:var(--rule-2);color:var(--bone)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-sm{padding:.7em 1.1em;font-size:.66rem}

/* ───────── NAV ───────── */
.nav{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem var(--pad);
  background:rgba(7,9,10,.72);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-mark{display:flex;align-items:center;gap:.6rem}
.nav-mark img{filter:drop-shadow(0 0 10px rgba(52,226,90,.35))}
.nav-word{font-family:var(--ff-display);font-weight:700;letter-spacing:.06em;font-size:1.05rem}
.nav-word-b{color:var(--green)}
.nav-links{display:flex;gap:1.6rem;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.nav-links a{color:var(--datum);transition:color .15s}
.nav-links a:hover{color:var(--bone)}
.nav-cta{
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);display:flex;align-items:center;gap:.5em;
  border:1px solid var(--rule-2);padding:.6em 1em;
}
.nav-cta .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ───────── HERO ───────── */
.hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);
  align-items:center;padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4rem);
  max-width:var(--maxw);margin-inline:auto;
}
.hero-copy h1{font-size:clamp(2.7rem,6.4vw,5.2rem);letter-spacing:-0.02em}
.lede{font-size:clamp(1.02rem,1.4vw,1.18rem);color:#a9b4a8;max-width:46ch;margin:1.6rem 0 2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.6rem}
.hero-spec{display:flex;gap:0;margin:0;border:1px solid var(--rule);width:fit-content;max-width:100%;flex-wrap:wrap}
.hero-spec>div{padding:.7rem 1.2rem;border-right:1px solid var(--rule)}
.hero-spec>div:last-child{border-right:0}
.hero-spec dt{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--datum);margin:0 0 .3rem}
.hero-spec dd{font-family:var(--ff-display);font-weight:600;margin:0;font-size:1.05rem;color:var(--bone)}
.hero-spec .u{font-size:.7em;color:var(--datum)}

/* ── the rig: signature inspection drawing ── */
.rig{margin:0;position:relative}
.rig-frame{
  position:relative;background:
    radial-gradient(120% 120% at 50% 0%,rgba(52,226,90,.05),transparent 60%),var(--panel);
  border:1px solid var(--rule-2);padding:clamp(1.4rem,3vw,2.4rem);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
}
.rig-corner{position:absolute;width:16px;height:16px;border:2px solid var(--amber);opacity:.85}
.rig-corner.tl{top:10px;left:10px;border-right:0;border-bottom:0}
.rig-corner.tr{top:10px;right:10px;border-left:0;border-bottom:0}
.rig-corner.bl{bottom:10px;left:10px;border-right:0;border-top:0}
.rig-corner.br{bottom:10px;right:10px;border-left:0;border-top:0}
.rig-tag{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.22em;color:var(--datum);margin:0;white-space:nowrap;
}
.rig-readout{
  position:absolute;left:0;right:0;bottom:0;display:flex;
  border-top:1px solid var(--rule-2);font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.12em;color:var(--datum);
}
.rig-readout span{flex:1;padding:.55rem .4rem;text-align:center;border-right:1px solid var(--rule)}
.rig-readout span:last-child{border-right:0}
.rig-readout b{color:var(--bone);font-weight:500}
.rig-readout .ok b{color:var(--green)}

.specimen-stage{position:relative;width:min(82%,360px);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.specimen{
  width:74%;height:auto;position:relative;z-index:2;
  mix-blend-mode:screen; /* drops the PNG's black backing so the specimen floats */
  filter:drop-shadow(0 0 26px rgba(52,226,90,.3));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.specimen-shadow{
  position:absolute;bottom:6%;left:50%;transform:translateX(-50%);
  width:55%;height:18px;background:radial-gradient(ellipse,rgba(52,226,90,.28),transparent 70%);
  filter:blur(5px);z-index:1;
}
.dims{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible}
.dims .ext,.dims .dline,.dims .lead{stroke:var(--amber);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.dims .ext{opacity:.55}
.dims .lead{stroke-dasharray:3 3}
.dims .arr{fill:var(--amber)}
.dims .node{fill:none;stroke:var(--amber);stroke-width:1.2}
.dims .dtxt{
  fill:var(--amber);font-family:"Martian Mono",monospace;font-size:11px;letter-spacing:.5px;
}

/* feature-control frames */
.fcf{
  position:absolute;z-index:4;display:flex;font-family:var(--ff-mono);font-size:.54rem;
  letter-spacing:.08em;border:1px solid var(--amber);background:rgba(7,9,10,.85);white-space:nowrap;
}
.fcf-sym{padding:.32em .5em;border-right:1px solid var(--amber);color:var(--amber)}
.fcf-val{padding:.32em .6em;color:var(--bone)}
.fcf-1{top:14%;right:-6%}
.fcf-2{bottom:30%;right:-4%}

/* dimension reveal animation (JS adds .rig-live) */
.dim{opacity:0}
.rig-live .dim{animation:dimIn .5s ease forwards}
.rig-live .dim[data-dim="1"]{animation-delay:.15s}
.rig-live .dim[data-dim="2"]{animation-delay:.35s}
.rig-live .dim[data-dim="3"]{animation-delay:.6s}
.rig-live .dim[data-dim="4"]{animation-delay:.75s}
.fcf{opacity:0}
.rig-live .fcf[data-dim="3"]{animation:fcfIn .4s ease .7s forwards}
.rig-live .fcf[data-dim="4"]{animation:fcfIn .4s ease .85s forwards}
@keyframes dimIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes fcfIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* ───────── SPEC TICKER ───────── */
.ticker{
  position:relative;z-index:2;overflow:hidden;border-block:1px solid var(--rule);
  background:var(--panel);padding-block:.7rem;margin-top:clamp(1rem,3vw,2rem);
}
.ticker-track{display:flex;gap:1.6rem;width:max-content;animation:slide 34s linear infinite;
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.ticker-track i{color:var(--green);font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ───────── CATALOG ───────── */
.catalog{max-width:var(--maxw);margin-inline:auto;padding-block:clamp(4rem,8vw,7rem)}
.dept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.dept{
  background:var(--panel);padding:clamp(1.6rem,2.6vw,2.4rem);display:flex;flex-direction:column;
  gap:.8rem;transition:background .2s ease,transform .2s ease;min-height:280px;position:relative;
}
.dept:hover{background:var(--panel-2);transform:translateY(-3px)}
.dept-no{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.24em;color:var(--amber)}
.dept h3{font-size:1.7rem}
.dept p{color:var(--datum);margin:0;flex:1}
.dept-go{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.dept:hover .dept-go{text-shadow:0 0 12px rgba(52,226,90,.5)}

/* ───────── FEATURED PARTS ───────── */
.featured{max-width:var(--maxw);margin-inline:auto;padding-block:clamp(2rem,4vw,4rem) clamp(4rem,8vw,7rem)}
.part-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.part{border:1px solid var(--rule-2);background:var(--panel);display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.part:hover{border-color:var(--green-dim);transform:translateY(-4px)}
.part-vis{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--panel-2);border-bottom:1px solid var(--rule-2);
}
.part-vis img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.part:hover .part-vis img{transform:scale(1.04)}
.part-vis::after{ /* top scrim keeps the PN badge legible over any photo */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,10,.55),transparent 30%);
}
.pn{position:absolute;z-index:2;top:.7rem;left:.7rem;font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.14em;color:var(--amber);border:1px solid var(--rule-2);padding:.25em .55em;background:rgba(7,9,10,.7)}
.part-body{padding:1.4rem;display:flex;flex-direction:column;gap:.9rem;flex:1}
.part-body header{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.part-body h3{font-size:1.15rem;line-height:1.15}
.price{font-family:var(--ff-mono);font-weight:600;color:var(--green);font-size:1rem;white-space:nowrap}
.part-body>p{color:var(--datum);margin:0;font-size:.95rem;flex:1}
.part-spec{list-style:none;margin:0;padding:.8rem 0 0;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.part-spec li{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.08em;color:var(--bone)}
.part-spec b{color:var(--datum);font-weight:500;margin-right:.4em}
.part .btn{align-self:flex-start;margin-top:.3rem}

/* ───────── BUILD SEQUENCE ───────── */
.build{max-width:var(--maxw);margin-inline:auto;padding-block:clamp(4rem,8vw,7rem);border-top:1px solid var(--rule)}
.ops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.ops li{padding:1.6rem 1.2rem 1.6rem 0;border-top:2px solid var(--rule-2);position:relative}
.ops li::before{content:"";position:absolute;top:-2px;left:0;width:32px;height:2px;background:var(--green)}
.op-no{font-family:var(--ff-mono);font-size:.8rem;color:var(--amber);letter-spacing:.1em}
.ops h3{font-size:1.5rem;margin:.6rem 0 .5rem}
.ops p{color:var(--datum);margin:0;font-size:.92rem}

/* ───────── PARTNERS ───────── */
.partners{max-width:var(--maxw);margin-inline:auto;padding-block:clamp(2rem,4vw,4rem) clamp(4rem,8vw,7rem)}
.partner-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.partner{border:1px solid var(--rule-2);padding:2rem;background:var(--panel);position:relative}
.partner-tag{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.24em;color:var(--amber);display:block;margin-bottom:1rem}
.partner h3{font-size:1.6rem;margin-bottom:.7rem}
.partner p{color:var(--datum);margin:0}

/* ───────── CTA BANNER ───────── */
.banner{padding-block:clamp(4rem,8vw,7rem)}
.banner-inner{
  max-width:var(--maxw);margin-inline:auto;text-align:center;
  border:1px solid var(--rule-2);padding:clamp(2.5rem,6vw,5rem) var(--pad);
  background:radial-gradient(100% 140% at 50% 0%,rgba(52,226,90,.08),transparent 60%),var(--panel);
  position:relative;
}
.banner .eyebrow{justify-content:center}
.banner h2{font-size:clamp(2.2rem,5vw,3.8rem);margin-bottom:1rem}
.banner-sub{color:var(--datum);max-width:42ch;margin:0 auto 2rem}

/* ───────── FOOTER / SITE ───────── */
.site{position:relative;z-index:2;border-top:1px solid var(--rule);padding:clamp(3rem,6vw,5rem) var(--pad) 1.4rem;background:var(--panel)}
.site-grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4rem}
.site-mark img{filter:drop-shadow(0 0 14px rgba(52,226,90,.35));margin-bottom:.9rem}
.site-line{color:var(--datum);max-width:34ch;margin:.8rem 0 0}
.site-block{margin:0}
.site-block dt{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin:0 0 .4rem}
.site-block dt:not(:first-child){margin-top:1.5rem}
.site-block dd{margin:0 0 .3rem;color:var(--bone);font-size:.95rem}
.site-block a:hover{color:var(--green)}
.site-foot{
  max-width:var(--maxw);margin:clamp(2.5rem,5vw,4rem) auto 0;padding-top:1.3rem;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;color:var(--datum);
}
.transmit{color:var(--green-dim)}

/* ───────── RESPONSIVE ───────── */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:2.6rem}
  .rig{order:-1;max-width:440px;margin-inline:auto;width:100%}
  .dept-grid,.part-grid{grid-template-columns:1fr 1fr}
  .ops{grid-template-columns:repeat(2,1fr)}
  .site-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav-links{display:none}
  .dept-grid,.part-grid,.partner-row{grid-template-columns:1fr}
  .ops{grid-template-columns:1fr}
  .site-grid{grid-template-columns:1fr}
  .fcf-1,.fcf-2{display:none}
  .hero-copy h1{font-size:clamp(2.4rem,11vw,3.4rem)}
}

/* ───────── REDUCED MOTION ───────── */
@media (prefers-reduced-motion:reduce){
  .specimen,.nav-cta .dot{animation:none}
  .ticker-track{animation:none}
  .dim,.fcf{opacity:1!important;animation:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* focus visibility */
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}