:root {
  --paper: #f2efe8;
  --ink: #141412;
  --line: #c9c3b8;
  --soft: #ded8cd;
  --signal: #f04a24;
  --acid: #d8ff36;
  --muted: #68645d;
  --dark: #1a1a18;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}
body::selection { background: var(--acid); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display:block; width:100%; }

.grain {
  position: fixed; inset: 0; pointer-events:none; z-index: 99; opacity:.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.site-header {
  min-height: 76px; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  padding: 0 3.2vw; border-bottom:1px solid var(--line); position:relative; z-index:20;
}
.brand { display:inline-flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.08em; font-size:13px; }
.brand-mark { display:grid; place-items:center; width:35px; height:35px; background:var(--ink); color:var(--paper); letter-spacing:-.08em; font-size:12px; }
.nav { display:flex; gap:34px; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.nav a { position:relative; }
.nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:2px; background:var(--signal); transition:.25s; }
.nav a:hover::after { right:0; }
.header-status { justify-self:end; font: 11px/1.2 "Courier New", monospace; text-transform:uppercase; letter-spacing:.08em; display:flex; gap:8px; align-items:center; }
.pulse { width:7px; height:7px; border-radius:50%; background:#2ca65b; box-shadow:0 0 0 0 rgba(44,166,91,.45); animation:pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 7px rgba(44,166,91,0); } 100% { box-shadow:0 0 0 0 rgba(44,166,91,0); } }

.hero { min-height:calc(100vh - 76px); display:grid; grid-template-columns: 1.06fr .94fr; border-bottom:1px solid var(--line); }
.hero-copy { padding:8.3vw 4.2vw 4.5vw 6vw; display:flex; flex-direction:column; justify-content:center; }
.eyebrow,.label { font:700 11px/1.2 "Courier New", monospace; letter-spacing:.16em; text-transform:uppercase; }
.hero h1 { margin:24px 0 28px; font-size:clamp(62px,7.8vw,132px); line-height:.83; letter-spacing:-.065em; font-weight:900; text-transform:uppercase; }
.hero h1 em { color:var(--signal); font-style:normal; }
.lede { max-width:640px; font-size:clamp(18px,1.45vw,25px); line-height:1.45; color:#34332f; margin:0; }
.hero-actions { display:flex; align-items:center; gap:26px; margin-top:38px; }
.primary,.secondary { border:0; cursor:pointer; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.primary { background:var(--ink); color:white; padding:17px 20px; min-width:210px; display:flex; justify-content:space-between; align-items:center; }
.primary:hover { background:var(--signal); }
.text-link { font-size:12px; text-transform:uppercase; font-weight:800; letter-spacing:.08em; border-bottom:1px solid var(--ink); padding-bottom:4px; }
.hero-stats { margin-top:64px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); padding-top:18px; max-width:700px; }
.hero-stats div { display:flex; flex-direction:column; gap:6px; }
.hero-stats b { font:700 24px/1 "Courier New", monospace; }
.hero-stats span { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.hero-media { position:relative; min-height:640px; overflow:hidden; background:#777; }
.hero-media>img { height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.08); }
.hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(20,20,18,.72)); }
.photo-tag { position:absolute; z-index:2; left:24px; top:24px; background:var(--acid); padding:8px 10px; font:700 10px/1 "Courier New", monospace; letter-spacing:.12em; }
.commit-card { position:absolute; z-index:3; left:7%; right:7%; bottom:7%; background:rgba(242,239,232,.93); backdrop-filter:blur(12px); border:1px solid #fff; padding:22px; display:grid; grid-template-columns:auto 1fr; gap:8px 18px; }
.commit-head { grid-column:1/-1; font:700 10px/1 "Courier New", monospace; letter-spacing:.12em; display:flex; align-items:center; gap:8px; }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.green { background:#2ca65b; }
.commit-card code { font:700 12px/1.2 "Courier New", monospace; background:var(--ink); color:var(--acid); padding:7px 9px; align-self:start; }
.commit-card strong { font-size:20px; }
.commit-card>span { grid-column:2; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }

.ticker { overflow:hidden; border-bottom:1px solid var(--line); background:var(--acid); }
.ticker-track { display:flex; width:max-content; align-items:center; gap:28px; padding:12px 0; animation:ticker 28s linear infinite; font:700 11px/1 "Courier New", monospace; letter-spacing:.08em; }
.ticker-track i { font-style:normal; color:var(--signal); }
@keyframes ticker { to { transform:translateX(-50%); } }

.section { padding:100px 6vw; border-bottom:1px solid var(--line); }
.section-head { display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:end; margin-bottom:52px; }
.section-index { font:700 11px/1 "Courier New", monospace; color:var(--signal); }
.section h2,.cta h2 { margin:12px 0 0; font-size:clamp(44px,5.2vw,82px); line-height:.94; letter-spacing:-.05em; text-transform:uppercase; }
.section-head p { margin:0; font-size:17px; line-height:1.55; color:var(--muted); max-width:560px; }

.pipeline-card { background:var(--dark); color:#f6f2e8; border:1px solid #000; box-shadow:12px 12px 0 var(--signal); }
.pipeline-top { display:flex; justify-content:space-between; align-items:end; padding:24px; border-bottom:1px solid #3a3935; }
.pipeline-top>div:first-child { display:flex; flex-direction:column; gap:8px; }
.pipeline-top strong { font:700 13px/1 "Courier New", monospace; color:var(--acid); text-transform:uppercase; }
.pipeline-meta { font:11px/1.2 "Courier New", monospace; color:#aaa69e; }
.stages { display:grid; grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr 34px 1fr 34px 1fr; align-items:center; padding:28px; }
.stage { min-height:126px; border:1px solid #494842; padding:18px; display:flex; flex-direction:column; justify-content:space-between; transition:.25s; position:relative; }
.stage span { color:#817f78; font:10px/1 "Courier New", monospace; }
.stage b { font-size:17px; }
.stage small { color:#96938c; font:10px/1.2 "Courier New", monospace; text-transform:uppercase; }
.stage.active { border-color:var(--acid); background:#262720; box-shadow:inset 0 -3px 0 var(--acid); }
.stage.done { border-color:#5da66c; }
.stage.done::after { content:"✓"; position:absolute; right:12px; top:10px; color:#6fd183; font-weight:900; }
.connector { height:1px; background:#55524c; }
.connector.active { background:var(--acid); box-shadow:0 0 8px rgba(216,255,54,.45); }
.terminal { margin:0 24px 24px; border-top:1px solid #3a3935; padding:20px 0 0; min-height:92px; font:12px/1.7 "Courier New", monospace; }
.terminal span { color:var(--acid); }
.terminal .muted { color:#8b8881; }
.terminal .ok { color:#77d98d; }
.terminal .warn { color:#f2b54b; }

.photo-grid { display:grid; grid-template-columns:1.35fr .65fr; grid-template-rows:340px 340px; border-bottom:1px solid var(--line); }
.photo-panel { position:relative; overflow:hidden; }
.photo-panel.large { grid-row:1/3; border-right:1px solid var(--line); }
.photo-panel.network { border-top:1px solid var(--line); }
.photo-panel img { width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.12); transition:transform .6s ease; }
.photo-panel:hover img { transform:scale(1.025); }
.shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 25%,rgba(10,10,10,.78)); }
.photo-copy { position:absolute; z-index:2; left:36px; right:36px; bottom:34px; color:white; }
.photo-copy span { font:700 10px/1 "Courier New", monospace; letter-spacing:.14em; color:var(--acid); }
.photo-copy h3 { margin:12px 0 10px; font-size:clamp(32px,4vw,66px); line-height:.92; letter-spacing:-.04em; text-transform:uppercase; }
.photo-copy p { max-width:520px; color:#e2dfd7; line-height:1.5; margin:0; }
.photo-copy.compact h3 { font-size:34px; }
.metrics-panel { padding:34px; background:var(--signal); color:white; display:flex; flex-direction:column; }
.big-number { font:900 clamp(72px,8vw,124px)/.9 Arial,sans-serif; letter-spacing:-.07em; margin-top:18px; }
.sub { text-transform:uppercase; font-size:11px; letter-spacing:.1em; }
.bars { height:105px; display:flex; gap:7px; align-items:flex-end; margin:30px 0 24px; border-bottom:1px solid rgba(255,255,255,.45); }
.bars i { flex:1; height:var(--h); background:var(--acid); }
.metrics-panel dl { margin:auto 0 0; }
.metrics-panel dl div { display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.35); padding:11px 0; font:11px/1.2 "Courier New", monospace; }
.metrics-panel dt,.metrics-panel dd { margin:0; }

.releases { background:#e8e3da; }
.release-board { border-top:2px solid var(--ink); }
.release-row { display:grid; grid-template-columns:2fr .8fr .9fr .5fr .6fr; gap:18px; padding:18px 0; border-bottom:1px solid var(--line); align-items:center; font:12px/1.3 "Courier New", monospace; }
.release-row.head { font-size:9px; letter-spacing:.14em; color:var(--muted); padding:12px 0; }
.release-row b { display:block; font:800 15px/1.2 Arial,sans-serif; }
.release-row small { display:block; color:var(--muted); margin-top:5px; }
.status-ok,.status-warn { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:7px; }
.status-ok { background:#31a55b; }.status-warn { background:#e69522; }

.cta { padding:90px 6vw; background:var(--ink); color:var(--paper); display:flex; justify-content:space-between; align-items:end; gap:40px; }
.cta .eyebrow { color:var(--acid); }
.secondary { background:var(--acid); color:var(--ink); padding:18px 20px; min-width:260px; display:flex; justify-content:space-between; }
.secondary:hover { background:var(--signal); color:white; }
footer { min-height:120px; padding:0 3.2vw; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; border-top:1px solid #2d2d29; background:var(--ink); color:#a8a59d; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
footer .brand { color:var(--paper); } footer p { text-align:center; } footer>span { text-align:right; }

.toast { position:fixed; right:22px; bottom:22px; z-index:100; background:var(--ink); color:white; border-left:4px solid var(--acid); padding:15px 18px; font:11px/1.4 "Courier New", monospace; max-width:360px; transform:translateY(150%); transition:.3s ease; box-shadow:0 14px 40px rgba(0,0,0,.25); }
.toast.show { transform:translateY(0); }

@media (max-width: 980px) {
  .site-header { grid-template-columns:1fr auto; } .nav { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { padding:80px 7vw 64px; }
  .hero-media { min-height:520px; }
  .section-head { grid-template-columns:1fr; gap:24px; }
  .stages { grid-template-columns:1fr; gap:8px; }
  .connector { width:1px; height:18px; margin-left:28px; }
  .stage { min-height:86px; }
  .photo-grid { grid-template-columns:1fr; grid-template-rows:520px 360px 420px; }
  .photo-panel.large { grid-row:auto; border-right:0; }
  .photo-panel.network { border-top:1px solid var(--line); }
  .release-row { grid-template-columns:1.6fr .8fr .8fr; }
  .release-row span:nth-child(4),.release-row span:nth-child(5) { display:none; }
  .cta { flex-direction:column; align-items:flex-start; }
}

@media (max-width: 640px) {
  .site-header { min-height:64px; padding:0 18px; } .header-status { font-size:9px; }
  .hero { min-height:0; }
  .hero-copy { padding:58px 20px 44px; }
  .hero h1 { font-size:17vw; }
  .lede { font-size:17px; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .hero-stats { grid-template-columns:1fr; gap:18px; }
  .hero-media { min-height:440px; }
  .commit-card { left:18px; right:18px; bottom:18px; grid-template-columns:1fr; }
  .commit-card>span { grid-column:1; }
  .section { padding:72px 20px; }
  .section h2,.cta h2 { font-size:12vw; }
  .pipeline-card { box-shadow:7px 7px 0 var(--signal); }
  .pipeline-top { align-items:flex-start; gap:10px; flex-direction:column; }
  .pipeline-meta { text-align:left; }
  .stages { padding:18px; }
  .terminal { margin:0 18px 18px; }
  .photo-grid { grid-template-rows:480px 360px 360px; }
  .photo-copy { left:22px; right:22px; bottom:22px; }
  .metrics-panel { padding:24px; }
  .release-row { grid-template-columns:1.4fr .7fr .9fr; font-size:10px; }
  .cta { padding:70px 20px; }
  footer { padding:28px 20px; grid-template-columns:1fr; gap:16px; }
  footer p,footer>span { text-align:left; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}