:root {
  --bg: #0a0d16;
  --panel: #111522;
  --panel-2: #171b29;
  --cream: #eee4d0;
  --paper: #f5efdf;
  --ink: #151821;
  --muted: #8f96a7;
  --line: rgba(255,255,255,.12);
  --blue: #4e42cc;
  --blue2: #7569eb;
  --cyan: #76e3f2;
  --green: #9eefbf;
  --orange: #ea7b45;
  --yellow: #f0cc55;
  --red: #d7564d;
  --max: 1440px;
  --pad: clamp(22px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: #f6f2e9;
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
body::selection { background: var(--blue2); color: white; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .032;
  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='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.site-header {
  height: 84px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 36px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 13px; min-width: 190px; }
.brand-mark {
  width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.4);
  display: grid; place-items: center; position: relative; border-radius: 2px;
  font-family: "Courier New", monospace; font-size: 10px; letter-spacing: -.5px;
}
.brand-mark i { position: absolute; background: var(--blue2); }
.brand-mark i:first-child { width: 13px; height: 2px; left: -7px; }
.brand-mark i:last-child { width: 13px; height: 2px; right: -7px; }
.brand-mark::before, .brand-mark::after { content:""; position:absolute; width:2px; height:13px; background:var(--blue2); }
.brand-mark::before { top:-7px; } .brand-mark::after { bottom:-7px; }
.brand-name, .footer-brand { font: 800 19px/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: -.06em; }
.brand-name span, .footer-brand span { color: var(--blue2); }
.nav { justify-self: center; display: flex; gap: 34px; color: #adb3c1; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav a { transition: color .2s ease; }
.nav a:hover { color: white; }
.header-status { font: 700 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; color:#d7dbe5; border:1px solid var(--line); padding: 11px 13px; display:flex; align-items:center; gap:9px; }
.header-status span { width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 12px rgba(234,123,69,.8); }

.hero {
  max-width: var(--max);
  margin: 0 auto;
  min-height: 720px;
  padding: clamp(72px, 8vw, 126px) var(--pad) 72px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
  gap: clamp(36px, 5vw, 90px);
  align-items: center;
  position: relative;
}
.eyebrow { margin: 0 0 20px; color: var(--blue2); font: 800 11px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow.light { color: var(--cyan); }
.hero h1, .section h2, .screen-copy h2, .instruction-copy h2, .manual-copy h2, .final-cta h2 {
  margin: 0;
  font-weight: 570;
  letter-spacing: -.055em;
  line-height: .96;
}
.hero h1 { font-size: clamp(58px, 6.2vw, 98px); max-width: 780px; }
.hero h1 em { color: var(--cream); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.hero-intro { max-width: 640px; margin: 30px 0 0; color:#afb4c0; font-size: clamp(17px, 1.45vw, 21px); line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }
.button { min-height:52px; padding:0 19px; display:inline-flex; align-items:center; justify-content:center; gap:18px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border:1px solid transparent; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue2); color:white; }
.button-primary:hover { background:#897ff4; }
.button-ghost { border-color:var(--line); color:#d7dbe4; }
.button-ghost:hover { border-color:rgba(255,255,255,.4); }
.button-dark { background:var(--ink); color:white; margin-top:28px; }
.hero-meta { display:flex; gap:0; margin-top:52px; border-top:1px solid var(--line); padding-top:20px; }
.hero-meta div { padding-right:26px; margin-right:26px; border-right:1px solid var(--line); }
.hero-meta div:last-child { border-right:0; margin-right:0; }
.hero-meta small, .hero-meta strong { display:block; }
.hero-meta small { color:#6f7685; font:700 9px/1 ui-monospace,Consolas,monospace; letter-spacing:.14em; margin-bottom:8px; }
.hero-meta strong { font:700 11px/1 ui-monospace,Consolas,monospace; letter-spacing:.06em; }

.hero-visual { min-height: 560px; position: relative; display:grid; place-items:center; isolation:isolate; }
.hero-grid { position:absolute; inset:4% -2%; z-index:-3; opacity:.55; background-image:linear-gradient(rgba(117,105,235,.14) 1px, transparent 1px),linear-gradient(90deg,rgba(117,105,235,.14) 1px, transparent 1px); background-size:42px 42px; mask-image:radial-gradient(circle at center, #000 15%, transparent 72%); }
.hero-orbit { position:absolute; border:1px solid rgba(117,105,235,.26); border-radius:50%; z-index:-2; }
.orbit-a { width:520px; height:520px; }
.orbit-b { width:390px; height:390px; border-style:dashed; transform:rotate(-18deg); }
.hero-visual::before { content:""; position:absolute; width:390px; height:390px; background:radial-gradient(circle, rgba(78,66,204,.42), rgba(78,66,204,0) 70%); filter:blur(4px); z-index:-4; }
.hero-visual img { width:min(110%, 820px); filter: drop-shadow(0 34px 34px rgba(0,0,0,.55)); transform:rotate(-2deg); }
.floating-tag { position:absolute; padding:12px 13px; background:rgba(10,13,22,.86); border:1px solid rgba(117,105,235,.45); backdrop-filter:blur(8px); color:#fff; font:800 10px/1.45 ui-monospace,Consolas,monospace; letter-spacing:.06em; box-shadow:0 15px 40px rgba(0,0,0,.25); }
.floating-tag span { color:#8e96a9; font-size:8px; }
.tag-a { left:3%; top:16%; }
.tag-b { right:0; bottom:20%; }
.tag-b b { color:var(--cyan); font-weight:800; }
.hero-caption { position:absolute; right:0; bottom:5%; color:#686f80; font:700 9px/1 ui-monospace,Consolas,monospace; letter-spacing:.15em; }

.ticker { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:#c1c6d0; background:#0d101a; }
.ticker-track { width:max-content; display:flex; align-items:center; gap:28px; padding:17px 0; animation:ticker 30s linear infinite; font:800 10px/1 ui-monospace,Consolas,monospace; letter-spacing:.15em; }
.ticker-track i { color:var(--blue2); font-style:normal; font-size:8px; }
@keyframes ticker { to { transform:translateX(-50%); } }

.section { max-width:var(--max); margin:0 auto; padding:clamp(100px,10vw,160px) var(--pad); position:relative; }
.section-number { position:absolute; left:var(--pad); top:45px; color:#4d5361; font:700 10px/1 ui-monospace,Consolas,monospace; }
.intro-section { display:grid; grid-template-columns:.96fr 1.04fr; gap:clamp(50px,8vw,130px); align-items:end; }
.section h2 { font-size:clamp(52px,5.5vw,86px); }
.intro-copy { max-width:650px; color:#9da4b2; font-size:18px; line-height:1.75; }
.intro-copy p { margin:0 0 24px; }
.intro-copy strong { color:#f3f1eb; font-weight:560; }

.pds-screen-section { max-width:var(--max); margin:0 auto; padding:0 var(--pad) clamp(100px,10vw,160px); display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(40px,7vw,110px); align-items:center; }
.screen-copy h2 { font-size:clamp(48px,5vw,78px); }
.screen-copy > p:not(.eyebrow) { color:#9ca2b0; font-size:17px; line-height:1.72; max-width:520px; margin:28px 0; }
.screen-note { color:#d8dce5; font:700 11px/1.4 ui-monospace,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; display:flex; gap:12px; align-items:center; }
.screen-note span { color:var(--cyan); font-size:18px; }
.pds-monitor { background:#2e2a93; border:12px solid #181a22; outline:1px solid #363a48; box-shadow:0 34px 90px rgba(0,0,0,.52), inset 0 0 70px rgba(0,0,0,.22); min-height:480px; position:relative; overflow:hidden; }
.pds-monitor::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 4px); mix-blend-mode:overlay; }
.monitor-bar { background:#d8d3ff; color:#27217e; padding:10px 14px; font:800 10px/1 ui-monospace,Consolas,monospace; letter-spacing:.05em; display:flex; justify-content:space-between; }
.monitor-bar span { color:#4c43b7; }
.pds-monitor pre { margin:0; padding:36px 42px 66px; color:#f0efff; font:700 clamp(12px,1.15vw,16px)/1.5 ui-monospace,"Courier New",monospace; text-shadow:0 0 8px rgba(255,255,255,.18); white-space:pre-wrap; }
.pds-monitor .muted { color:#aca7ee; }
.pds-monitor .cyan { color:#82f1ff; }
.pds-monitor .green { color:#a3ffcc; }
.cursor { animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.monitor-footer { position:absolute; bottom:0; left:0; right:0; padding:13px 16px; display:flex; gap:26px; background:rgba(15,13,78,.55); color:#c3bfff; font:800 9px/1 ui-monospace,Consolas,monospace; letter-spacing:.08em; }

.photo-band { max-width:var(--max); margin:0 auto; padding:0 var(--pad) clamp(100px,10vw,160px); display:grid; grid-template-columns:1.35fr .65fr; gap:18px; }
.photo-card { margin:0; background:var(--paper); color:var(--ink); overflow:hidden; position:relative; min-height:560px; }
.photo-card img { height:100%; object-fit:cover; }
.photo-wide img { object-position:center; }
.photo-tall img { object-position:center; }
.photo-card figcaption { position:absolute; left:18px; right:18px; bottom:18px; background:rgba(245,239,223,.94); color:#252732; padding:13px 15px; display:flex; justify-content:space-between; gap:18px; font:800 10px/1.3 ui-monospace,Consolas,monospace; letter-spacing:.06em; }
.photo-card figcaption span { color:#7269cf; }

.build-section { border-top:1px solid var(--line); }
.build-heading { display:grid; grid-template-columns:.7fr 1.3fr; gap:30px; align-items:start; margin-bottom:70px; }
.build-heading h2 { font-size:clamp(50px,5.3vw,82px); }
.build-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.build-card { min-height:320px; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; position:relative; background:rgba(255,255,255,.01); transition:background .2s ease, transform .2s ease; }
.build-card:hover { background:rgba(255,255,255,.035); }
.build-card.featured { background:var(--blue); }
.card-id { color:#727989; font:700 10px/1 ui-monospace,Consolas,monospace; }
.featured .card-id { color:#bbb5ff; }
.build-card h3 { font-size:25px; letter-spacing:-.035em; line-height:1.05; margin:60px 0 16px; font-weight:600; }
.build-card p { margin:0; color:#9299a8; font-size:14px; line-height:1.65; max-width:330px; }
.featured p { color:#d5d2ff; }
.status-pill { margin-top:auto; align-self:flex-start; padding:8px 9px; border:1px solid rgba(255,255,255,.3); font:800 8px/1 ui-monospace,Consolas,monospace; letter-spacing:.11em; color:white; }
.status-pill.dim { color:#747c8d; border-color:#303644; }

.instruction-section { max-width:var(--max); margin:0 auto; padding:0 var(--pad) clamp(100px,10vw,160px); display:grid; grid-template-columns:1.05fr .95fr; gap:0; }
.instruction-image { background:#f4f0e5; padding:clamp(20px,4vw,55px); overflow:hidden; }
.instruction-image img { height:100%; max-height:720px; object-fit:contain; filter:grayscale(.1) contrast(.95); }
.instruction-copy { background:#1e2264; padding:clamp(42px,6vw,88px); display:flex; flex-direction:column; justify-content:center; }
.instruction-copy h2 { font-size:clamp(48px,4.7vw,74px); }
.instruction-copy > p:not(.eyebrow) { color:#b9bde1; font-size:17px; line-height:1.72; max-width:540px; margin:28px 0 36px; }
.registers { display:flex; flex-wrap:wrap; gap:8px; }
.registers span { width:52px; height:52px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.19); font:800 12px/1 ui-monospace,Consolas,monospace; color:#cfd3ff; }

.manual-section { background:var(--cream); color:var(--ink); padding:clamp(100px,10vw,160px) var(--pad); }
.manual-wrap { max-width:calc(var(--max) - (var(--pad) * 2)); margin:0 auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(60px,9vw,150px); align-items:center; }
.manual-object { width:min(100%, 470px); aspect-ratio:.73; display:grid; grid-template-columns:44px 1fr; transform:rotate(-3deg); filter:drop-shadow(0 25px 25px rgba(49,40,28,.22)); justify-self:center; }
.manual-spine { background:#292c33; color:#c9c1b0; writing-mode:vertical-rl; transform:rotate(180deg); display:flex; align-items:center; justify-content:center; font:700 10px/1 ui-monospace,Consolas,monospace; letter-spacing:.18em; }
.manual-cover { background:#d6d0c4; padding:44px 38px; border:1px solid #9f9a91; position:relative; overflow:hidden; }
.manual-cover::after { content:""; position:absolute; inset:0; opacity:.13; background:repeating-linear-gradient(0deg,#000 0,#000 1px,transparent 1px,transparent 5px); }
.manual-logo { font:900 44px/1 Arial,sans-serif; letter-spacing:-.08em; position:relative; z-index:2; }
.manual-rule { width:100%; height:4px; background:#2d3037; margin:12px 0 34px; }
.manual-cover h3 { font:700 clamp(34px,4vw,56px)/.96 Arial,sans-serif; letter-spacing:-.06em; margin:0; text-transform:uppercase; }
.manual-cover > p { font:700 15px/1 ui-monospace,Consolas,monospace; letter-spacing:.22em; margin-top:20px; }
.manual-code { position:absolute; bottom:36px; left:38px; color:#65615a; font:700 10px/1.5 ui-monospace,Consolas,monospace; }
.manual-copy .eyebrow { color:#675dd0; }
.manual-copy h2 { font-size:clamp(52px,5vw,80px); }
.manual-copy > p:not(.eyebrow) { color:#5e5d5b; font-size:17px; line-height:1.72; max-width:580px; margin:28px 0 0; }
.manual-note { display:block; margin-top:17px; color:#8a857e; font-size:11px; }

.photo-band-second { padding-top:clamp(100px,10vw,160px); grid-template-columns:1.25fr .75fr; }
.motherboard-card { min-height:600px; }
.quote-card { min-height:600px; background:#d06a3d; padding:clamp(36px,5vw,70px); display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.quote-card::after { content:"6502"; position:absolute; right:-18px; bottom:-22px; color:rgba(0,0,0,.07); font:900 150px/1 Arial,sans-serif; letter-spacing:-.09em; }
.quote-mark { font:100 90px/1 Georgia,serif; opacity:.7; }
.quote-card blockquote { margin:8px 0 24px; font:400 clamp(34px,3.8vw,58px)/1.05 Georgia,serif; letter-spacing:-.04em; }
.quote-card p { margin:0; font:800 9px/1 ui-monospace,Consolas,monospace; letter-spacing:.14em; text-transform:uppercase; }

.final-cta { max-width:var(--max); margin:0 auto; padding:clamp(90px,10vw,145px) var(--pad); border-top:1px solid var(--line); display:grid; grid-template-columns:1fr .8fr auto; gap:clamp(35px,6vw,100px); align-items:end; }
.final-cta h2 { font-size:clamp(54px,6vw,92px); }
.final-cta > p { color:#969dab; font-size:16px; line-height:1.7; max-width:520px; margin:0 0 6px; }
.round-link { width:62px; height:62px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-size:21px; transition:background .2s ease, border-color .2s ease; }
.round-link:hover { background:var(--blue); border-color:var(--blue); }

footer { max-width:var(--max); margin:0 auto; padding:34px var(--pad) 44px; border-top:1px solid var(--line); display:grid; grid-template-columns:.35fr 1fr auto; gap:35px; align-items:start; color:#737b8c; font-size:11px; line-height:1.55; }
.footer-copy { max-width:700px; }
.footer-copy p { margin:0 0 5px; }
.footer-copy a { color:#aeb4c1; text-decoration:underline; text-underline-offset:3px; }
.footer-right { text-align:right; font:700 9px/1.6 ui-monospace,Consolas,monospace; letter-spacing:.11em; }
.footer-right span { color:#505768; }

@media (max-width: 1050px) {
  .nav { display:none; }
  .site-header { grid-template-columns:1fr auto; }
  .hero { grid-template-columns:1fr; padding-top:76px; }
  .hero-visual { min-height:500px; }
  .intro-section, .pds-screen-section, .instruction-section, .manual-wrap { grid-template-columns:1fr; }
  .intro-section { align-items:start; }
  .pds-screen-section { padding-top:0; }
  .photo-band, .photo-band-second { grid-template-columns:1fr; }
  .photo-tall { min-height:430px; }
  .build-grid { grid-template-columns:repeat(2,1fr); }
  .build-heading { grid-template-columns:1fr; }
  .instruction-copy { min-height:560px; }
  .manual-object { width:min(78vw,440px); }
  .final-cta { grid-template-columns:1fr; align-items:start; }
  .round-link { margin-top:8px; }
  footer { grid-template-columns:1fr; }
  .footer-right { text-align:left; }
}

@media (max-width: 650px) {
  :root { --pad:20px; }
  .site-header { height:72px; }
  .brand { min-width:0; }
  .header-status { font-size:8px; padding:10px; }
  .hero { min-height:0; padding-top:64px; }
  .hero h1 { font-size:clamp(50px,15vw,72px); }
  .hero-intro { font-size:16px; }
  .hero-meta { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .hero-meta div { border-right:0; margin-right:0; padding-right:0; }
  .hero-visual { min-height:380px; }
  .hero-visual img { width:120%; max-width:none; }
  .orbit-a { width:330px; height:330px; }
  .orbit-b { width:260px; height:260px; }
  .tag-a { left:0; top:8%; }
  .tag-b { right:0; bottom:10%; }
  .section { padding-top:110px; padding-bottom:110px; }
  .section h2, .screen-copy h2, .instruction-copy h2, .manual-copy h2, .final-cta h2 { font-size:clamp(45px,13vw,64px); }
  .intro-copy { font-size:16px; }
  .pds-monitor { min-height:400px; border-width:8px; }
  .pds-monitor pre { padding:28px 20px 68px; font-size:11px; }
  .monitor-footer { gap:14px; font-size:7px; }
  .photo-card, .motherboard-card, .quote-card { min-height:430px; }
  .build-grid { grid-template-columns:1fr; }
  .build-card { min-height:280px; }
  .instruction-copy { padding:52px 26px; min-height:520px; }
  .manual-section { padding-left:20px; padding-right:20px; }
  .manual-cover { padding:34px 26px; }
  .manual-code { left:26px; }
  .final-cta { padding-top:100px; padding-bottom:100px; }
  .photo-card figcaption { font-size:8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .ticker-track, .cursor { animation:none; }
  .button { transition:none; }
}

/* Retro-geek status panel */
.geek-card { justify-content:center; }
.geek-kicker { margin:0 0 24px !important; font:800 10px/1 ui-monospace,Consolas,monospace !important; letter-spacing:.16em !important; }
.geek-big { font:900 clamp(90px,10vw,160px)/.78 Arial,sans-serif; letter-spacing:-.08em; margin:0 0 42px; }
.geek-lines { display:grid; gap:10px; position:relative; z-index:2; }
.geek-lines span { font:800 11px/1.5 ui-monospace,Consolas,monospace; letter-spacing:.025em; }
.geek-small { margin:34px 0 0 !important; max-width:430px; font:700 11px/1.6 ui-monospace,Consolas,monospace !important; text-transform:none !important; letter-spacing:.02em !important; position:relative; z-index:2; }