:root{
  --void:#000;
  --void-2:#0a0a0a;
  --panel:#0e0e10;
  --hair:#1c1c20;
  --hair-bright:#2a2a30;
  --red:#d62828;
  --red-bright:#ff1c1c;
  --warn:#ffc107;
  --term:#6dff8a;
  --gray:#b4b8c0;
  --dim:#5a5e68;
  --white:#ffffff;
  --f-display:"Oswald","Anton",Impact,system-ui,sans-serif;
  --f-body:"Manrope",system-ui,sans-serif;
  --f-mono:"Fira Code",ui-monospace,Consolas,monospace;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html, body{
  background:var(--void);
  color:var(--gray);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body{ min-height:100vh }
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0 }
:focus-visible{ outline:2px solid var(--warn); outline-offset:3px }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ---- top system bar ---- */
.sys-bar{
  display:flex; align-items:center; gap:18px;
  padding:10px 22px;
  background:var(--void-2);
  border-bottom:1px solid var(--hair);
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:2.5px;
  color:var(--dim);
  text-transform:uppercase;
}
.sys-bar .dot{ width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red); animation:blink-rec 1.4s ease-in-out infinite }
@keyframes blink-rec{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.sys-bar .red{ color:var(--red-bright) }
.sys-bar .grow{ flex:1 }
.sys-bar .clock{ color:var(--term); font-variant-numeric:tabular-nums }

/* ---- hero ---- */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:60px;
  padding:80px 56px 90px;
  align-items:center;
  border-bottom:1px solid var(--hair);
}
.hero-left{ min-width:0 }
.notice-strip{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:3px;
  color:var(--red-bright);
  text-transform:uppercase;
  border:1px solid var(--red);
  padding:6px 12px;
  margin-bottom:24px;
}
.notice-strip::before{ content:""; width:8px; height:8px; background:var(--red); animation:blink-rec 1s ease-in-out infinite }
.headline{
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(56px, 9vw, 132px);
  line-height:.88;
  letter-spacing:-1px;
  color:var(--white);
  text-transform:uppercase;
  margin-bottom:0;
}
.headline .line-1{ display:block }
.headline .line-mid{
  display:block;
  font-weight:700;
  font-size:.36em;
  letter-spacing:8px;
  color:var(--gray);
  margin:6px 0 8px;
  position:relative;
}
.headline .line-mid::before, .headline .line-mid::after{
  content:""; display:inline-block;
  width:30px; height:1px; background:var(--gray);
  vertical-align:middle; margin:0 14px 4px;
}
.headline .line-2{
  display:block;
  color:var(--red);
  text-shadow:0 0 30px rgba(214,40,40,.25);
}
.ticker{
  margin-top:24px;
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:3px;
  color:var(--warn);
  text-transform:uppercase;
}
.lede{
  margin-top:26px;
  max-width:48ch;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  color:var(--gray);
}
.lede b{ color:var(--white); font-weight:600 }

.hero-right{ position:relative; min-width:0 }
.bob-frame{
  position:relative;
  border:1px solid var(--hair-bright);
  background:linear-gradient(180deg, #0d0d11, #050507);
  padding:18px;
  box-shadow:0 0 0 1px var(--void), 0 30px 60px rgba(0,0,0,.5);
}
.bob-frame img{ width:100%; height:auto; display:block }
.bob-frame .corner{
  position:absolute; width:14px; height:14px;
  border:2px solid var(--red);
}
.bob-frame .tl{ top:-1px; left:-1px; border-right:none; border-bottom:none }
.bob-frame .tr{ top:-1px; right:-1px; border-left:none; border-bottom:none }
.bob-frame .bl{ bottom:-1px; left:-1px; border-right:none; border-top:none }
.bob-frame .br{ bottom:-1px; right:-1px; border-left:none; border-top:none }
.bob-frame .spec{
  position:absolute; top:14px; right:14px;
  background:var(--void); color:var(--term);
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:2px;
  padding:5px 9px;
  border:1px solid var(--hair-bright);
  text-transform:uppercase;
}

/* ---- termination log (the differentiator) ---- */
.term-log{
  background:linear-gradient(180deg, #050505 0%, #0a0a0a 100%);
  border-bottom:1px solid var(--hair);
  padding:70px 56px 90px;
  position:relative;
}
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--hair);
  padding-bottom:14px;
  margin-bottom:32px;
}
.section-head h2{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(26px, 3.2vw, 44px);
  letter-spacing:2px;
  color:var(--white);
  text-transform:uppercase;
}
.section-head h2 .red{ color:var(--red) }
.section-head .meta{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:3px;
  color:var(--dim);
  text-transform:uppercase;
}
.term-window{
  background:#020203;
  border:1px solid var(--hair-bright);
  font-family:var(--f-mono);
  font-size:13px;
  line-height:1.65;
  color:var(--gray);
  position:relative;
  overflow:hidden;
}
.term-window .term-bar{
  display:flex; align-items:center; gap:14px;
  padding:8px 14px;
  background:#0a0a0a;
  border-bottom:1px solid var(--hair);
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:2px;
  color:var(--dim);
  text-transform:uppercase;
}
.term-window .term-bar .dots{ display:flex; gap:5px }
.term-window .term-bar .dots span{ width:9px; height:9px; border-radius:50%; background:var(--hair-bright) }
.term-window .term-bar .dots span:first-child{ background:var(--red) }
.term-window .term-bar .dots span:nth-child(2){ background:var(--warn) }
.term-window .term-bar .dots span:nth-child(3){ background:var(--term) }
.term-window .term-bar .grow{ flex:1 }
.term-window .term-bar .live{ color:var(--red); display:inline-flex; align-items:center; gap:6px }
.term-window .term-bar .live::before{ content:""; width:7px; height:7px; background:var(--red); animation:blink-rec 1s ease-in-out infinite }
.term-body{
  padding:18px 18px 22px;
  height:340px;
  overflow:hidden;
  position:relative;
}
.term-body::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:80px;
  background:linear-gradient(180deg, transparent, #020203);
  pointer-events:none;
}
.term-line{
  display:flex; gap:14px;
  padding:1px 0;
  white-space:nowrap;
  animation:term-in .35s ease-out;
}
@keyframes term-in{ 0%{ opacity:0; transform:translateY(-4px) } 100%{ opacity:1; transform:translateY(0) } }
.term-line .ts{ color:var(--dim); flex-shrink:0 }
.term-line .arrow{ color:var(--term); flex-shrink:0 }
.term-line .msg{ color:var(--gray); overflow:hidden; text-overflow:ellipsis }
.term-line .msg .pkg{ color:var(--white); font-weight:700 }
.term-line .msg .skill{ color:var(--red-bright) }
.term-line.boot .msg{ color:var(--term) }
.term-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:28px;
}
.stat{
  border:1px solid var(--hair-bright);
  padding:18px 20px;
  font-family:var(--f-mono);
}
.stat .label{
  font-size:10px;
  letter-spacing:3px;
  color:var(--dim);
  text-transform:uppercase;
}
.stat .val{
  font-family:var(--f-display);
  font-weight:800;
  font-size:36px;
  color:var(--white);
  letter-spacing:1px;
  margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.stat .val .small{ font-size:18px; color:var(--gray); margin-left:6px }
.stat.red .val{ color:var(--red-bright) }
.stat.term .val{ color:var(--term) }

/* ---- LIVE TRANSMISSION (X embed) ---- */
.transmission{
  padding:80px 56px 90px;
  border-bottom:1px solid var(--hair);
  background:var(--void);
}
.tx-frame{
  border:1px solid var(--hair-bright);
  background:var(--panel);
  padding:0;
  position:relative;
}
.tx-frame .tx-head{
  display:flex; align-items:center; gap:14px;
  padding:10px 16px;
  background:#080808;
  border-bottom:1px solid var(--hair);
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:3px;
  color:var(--dim);
  text-transform:uppercase;
}
.tx-frame .tx-head .live{ color:var(--red); display:inline-flex; align-items:center; gap:6px }
.tx-frame .tx-head .live::before{ content:""; width:7px; height:7px; background:var(--red); animation:blink-rec 1s ease-in-out infinite }
.tx-frame .tx-head .grow{ flex:1 }
.tx-frame .tx-body{ padding:24px; min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center }
.tx-frame .tx-body blockquote.twitter-tweet{ max-width:550px !important; width:100% !important; margin:0 auto !important }
.tx-fallback{
  display:block;
  max-width:560px;
  width:100%;
  border:1px dashed var(--hair-bright);
  padding:22px;
  color:var(--gray);
  font-family:var(--f-mono);
  font-size:13px;
  line-height:1.7;
  text-align:left;
}
.tx-fallback .src{ color:var(--warn); display:block; margin-bottom:8px; letter-spacing:2px; font-size:11px; text-transform:uppercase }
.tx-fallback .open{
  display:inline-block; margin-top:14px;
  font-family:var(--f-display);
  font-weight:700;
  font-size:14px;
  letter-spacing:3px;
  color:var(--white);
  text-transform:uppercase;
  border:1px solid var(--white);
  padding:8px 16px;
  transition:background .14s, color .14s;
}
.tx-fallback .open:hover{ background:var(--white); color:var(--void) }

/* ---- replacement gallery ---- */
.gallery{
  padding:80px 56px 90px;
  border-bottom:1px solid var(--hair);
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.replace-card{
  position:relative;
  border:1px solid var(--hair-bright);
  overflow:hidden;
  background:var(--void);
}
.replace-card img{ width:100%; height:auto; display:block }
.replace-card .tag{
  position:absolute; top:14px; left:14px;
  background:var(--red); color:var(--white);
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:2.5px;
  padding:5px 10px;
  text-transform:uppercase;
}
.replace-card .pin{
  position:absolute; bottom:14px; right:14px;
  background:var(--void); color:var(--warn);
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:2.5px;
  padding:5px 10px;
  border:1px solid var(--hair-bright);
  text-transform:uppercase;
}

/* ---- termination contract (CA) ---- */
.contract{
  padding:100px 56px 120px;
  border-bottom:1px solid var(--hair);
  background:#020203;
}
.doc{
  max-width:780px;
  margin:0 auto;
  background:#0f0f10;
  border:1px solid var(--hair-bright);
  padding:42px 48px 52px;
  position:relative;
  cursor:pointer;
  transition:border-color .15s ease;
}
.doc:hover{ border-color:var(--red) }
.doc::before{
  content:"TERMINATION CONTRACT / F.03-B0B";
  position:absolute; top:-1px; left:30px;
  transform:translateY(-50%);
  background:#020203;
  padding:0 14px;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:3px;
  color:var(--warn);
  text-transform:uppercase;
}
.doc-title{
  font-family:var(--f-display);
  font-weight:800;
  font-size:28px;
  letter-spacing:2px;
  color:var(--white);
  text-transform:uppercase;
  margin-bottom:24px;
  padding-bottom:14px;
  border-bottom:1px solid var(--hair);
}
.doc-row{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:18px;
  padding:10px 0;
  font-family:var(--f-mono);
  font-size:12px;
  line-height:1.55;
}
.doc-row .key{ color:var(--dim); letter-spacing:2px; text-transform:uppercase }
.doc-row .val{ color:var(--gray) }
.doc-row .val b{ color:var(--white); font-weight:700 }
.doc-sig{
  margin-top:36px;
  padding-top:24px;
  border-top:1px dashed var(--hair-bright);
}
.doc-sig .sig-line{
  display:flex; align-items:flex-end; gap:14px;
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--dim);
  letter-spacing:2px;
  text-transform:uppercase;
}
.doc-sig .sig-line .x{ color:var(--red); font-size:18px; line-height:1 }
.doc-sig .sig-engraved{
  flex:1;
  border-bottom:1px solid var(--hair-bright);
  padding:6px 4px 8px;
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:1px;
  color:var(--white);
  word-break:break-all;
  text-transform:none;
}
.doc-sig .sig-caption{
  margin-top:8px;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:2px;
  color:var(--dim);
  text-transform:uppercase;
}
.doc-action{
  margin-top:22px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:3px;
  color:var(--warn);
  text-transform:uppercase;
  text-align:right;
}
.doc.is-copied{ border-color:var(--term) }
.doc.is-copied .doc-action{ color:var(--term) }

/* ---- form fields (nav as HR roster) ---- */
.fields{
  padding:60px 56px 110px;
}
.fields .section-head{ margin-bottom:24px }
.field-row{
  display:grid;
  grid-template-columns:60px 280px 1fr auto;
  gap:24px;
  align-items:center;
  padding:18px 8px;
  border-top:1px solid var(--hair);
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:2px;
  color:var(--gray);
  text-transform:uppercase;
  transition:background .15s, padding-left .15s;
}
.field-row:last-child{ border-bottom:1px solid var(--hair) }
.field-row:hover:not(.disabled){
  background:rgba(214,40,40,.05);
  padding-left:16px;
}
.field-row .num{ color:var(--red); font-weight:700 }
.field-row .name{ color:var(--white); font-family:var(--f-display); font-weight:700; font-size:14px; letter-spacing:3px }
.field-row .bracket{
  color:var(--warn);
  padding:6px 12px;
  border:1px solid var(--hair-bright);
  background:var(--void);
  font-size:11px;
  letter-spacing:2px;
}
.field-row .arrow{ color:var(--dim); font-size:14px }
.field-row:hover:not(.disabled) .arrow{ color:var(--red) }
.field-row.disabled{ opacity:.4; cursor:not-allowed }

/* ---- notice band ---- */
.notice-band{
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  position:relative;
  background:#000;
  overflow:hidden;
}
.notice-band img{ width:100%; height:auto; display:block; opacity:.88 }
.notice-band .caption{
  position:absolute; bottom:14px; left:24px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:3px;
  color:var(--gray);
  text-transform:uppercase;
}
.notice-band .caption .red-pill{ background:var(--red); color:var(--white); padding:4px 9px; letter-spacing:2px }

/* ---- footer ---- */
footer{
  background:var(--void);
  padding:36px 56px 60px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:2px;
  color:var(--dim);
  text-align:center;
  line-height:1.9;
  text-transform:uppercase;
}
footer .red{ color:var(--red) }
footer .disclaimer{ margin-top:14px; max-width:60ch; margin-left:auto; margin-right:auto; color:var(--dim); letter-spacing:1.5px; text-transform:none }

/* ---- toast ---- */
.toast{
  position:fixed; bottom:22px; left:50%;
  transform:translateX(-50%) translateY(40px);
  background:var(--void); color:var(--term);
  border:1px solid var(--term);
  padding:12px 22px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:0;
  transition:transform .25s, opacity .25s;
  z-index:200;
  pointer-events:none;
}
.toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ---- responsive ---- */
@media (max-width:1100px){
  .hero{ grid-template-columns:1fr; gap:36px; padding:60px 28px 60px }
  .hero-right{ order:-1; max-width:480px; margin:0 auto }
  .term-log, .transmission, .gallery, .contract, .fields, footer{ padding-left:28px; padding-right:28px }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr) }
  .field-row{ grid-template-columns:50px 1fr auto; gap:14px }
  .field-row .bracket{ grid-column:1 / -1; justify-self:start; margin-top:4px }
}
@media (max-width:680px){
  .hero{ padding:50px 18px 50px }
  .headline{ font-size:48px; letter-spacing:0 }
  .headline .line-mid{ letter-spacing:4px }
  .gallery-grid{ grid-template-columns:1fr }
  .term-log, .transmission, .gallery, .contract, .fields, footer{ padding-left:18px; padding-right:18px }
  .term-stats{ grid-template-columns:1fr; gap:10px }
  .stat .val{ font-size:28px }
  .doc{ padding:30px 22px 38px }
  .doc-row{ grid-template-columns:1fr; gap:4px }
  .doc-row .key{ font-size:10px }
  .field-row{ grid-template-columns:40px 1fr; padding:14px 6px }
  .field-row .bracket, .field-row .arrow{ grid-column:1 / -1 }
  .sys-bar{ font-size:9px; letter-spacing:1.5px; gap:10px; padding:8px 14px }
  .sys-bar .grow{ display:none }
}

@media (prefers-reduced-motion: reduce){
  .sys-bar .dot, .notice-strip::before, .tx-frame .live::before,
  .term-window .term-bar .live::before{ animation:none }
  .term-line{ animation:none }
}