:root {
  --black: #050505;
  --navy: #071122;
  --cream: #f6edbd;
  --cyan: #08e9e9;
  --blue: #172ee8;
  --green: #35f12e;
  --magenta: #f000cf;
  --yellow: #fff12b;
  --red: #f03424;
  --gray: #c4c4c4;
  --border: 3px solid #080808;
  --shadow: 7px 7px 0 #000;
  --mono: "Courier New", Courier, monospace;
  --ui: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; color: #fff; background: var(--black); font-family: var(--mono); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99; opacity: .15; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.08) 4px); mix-blend-mode: overlay; }
::selection { color: #000; background: var(--green); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }

.boot-screen { position: fixed; inset: 0; z-index: 999; display: grid; place-content: center; justify-items: center; gap: 18px; color: var(--green); background: #000; transition: opacity .45s ease, visibility .45s ease; }
.boot-screen.done { opacity: 0; visibility: hidden; }
.boot-screen img { width: 128px; border: 3px solid var(--green); }
.boot-screen p { margin: 0; font-weight: 900; letter-spacing: .08em; text-align: center; }
.progress { width: min(360px, 80vw); height: 22px; padding: 3px; border: 2px solid var(--green); }
.progress span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, var(--green) 0 14px, transparent 14px 18px); animation: boot 1s steps(8) forwards; }
@keyframes boot { to { width: 100%; } }

.site-header { position: sticky; top: 0; z-index: 80; min-height: 68px; display: flex; align-items: center; gap: 24px; padding: 8px clamp(14px, 3vw, 48px); color: #000; background: var(--gray); border-bottom: var(--border); box-shadow: 0 5px 0 rgba(0,0,0,.7); font-family: var(--ui); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 900; white-space: nowrap; }
.brand img { width: 42px; height: 42px; object-fit: cover; border: 2px solid #000; }
.brand small { color: #004f00; font: 700 10px var(--mono); background: var(--green); border: 1px solid #000; padding: 2px 4px; }
nav { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.3vw, 21px); flex: 1; }
nav a { color: #000; font: 700 12px var(--mono); text-decoration: none; text-transform: uppercase; }
nav a:hover, nav a.active { color: #fff; background: var(--blue); outline: 3px solid var(--blue); }
.header-actions .button { font-size: 11px; padding: 10px 12px; }
.menu-toggle { display: none; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 20px; border: 3px solid #000; border-radius: 0; box-shadow: inset 2px 2px 0 rgba(255,255,255,.65), inset -3px -3px 0 rgba(0,0,0,.35), 4px 4px 0 #000; color: #000; font: 900 14px var(--mono); text-decoration: none; text-transform: uppercase; transition: transform .12s, filter .12s, box-shadow .12s; }
.button:hover { filter: brightness(1.12); transform: translate(-2px,-2px); box-shadow: inset 2px 2px 0 rgba(255,255,255,.65), inset -3px -3px 0 rgba(0,0,0,.35), 7px 7px 0 #000; }
.button:active { transform: translate(3px,3px); box-shadow: inset 2px 2px 0 rgba(0,0,0,.4); }
.button-primary { background: var(--green); }
.button-secondary { background: var(--cyan); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.hero { min-height: calc(100vh - 68px); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(320px,.8fr) minmax(500px,1.2fr); align-items: center; gap: clamp(20px, 4vw, 70px); padding: clamp(52px, 7vw, 110px) clamp(18px, 5vw, 84px); overflow: hidden; }
.hero-backdrop { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(0,0,0,.98) 0 38%, rgba(0,0,0,.2)), url("assets/aol-banner.png") center/cover no-repeat; filter: saturate(1.2); opacity: .42; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 76% 48%, rgba(0,238,255,.19), transparent 34%), linear-gradient(180deg, transparent 70%, #050505); }
.eyebrow { margin: 0 0 18px; color: var(--green); font-weight: 900; font-size: 12px; letter-spacing: .08em; }
.status-dot { display: inline-block; width: 10px; height: 10px; margin-right: 7px; background: var(--green); box-shadow: 0 0 12px var(--green); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }
h1, h2 { margin: 0; line-height: .92; letter-spacing: -.065em; text-transform: uppercase; text-wrap: balance; }
h1 { font: 1000 clamp(48px, 6.6vw, 108px)/.9 var(--ui); text-shadow: 4px 4px 0 var(--blue), 7px 7px 0 #000; }
h1 span, h2 em { color: var(--green); font-style: normal; }
.lede { max-width: 650px; margin: 28px 0; font-size: clamp(16px, 1.3vw, 21px); line-height: 1.55; font-weight: 700; }
.pair-box { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 9px; color: #000; background: var(--cream); border: 3px solid #000; outline: 2px solid var(--cream); box-shadow: 6px 6px 0 var(--magenta); }
.pair-box span { font-size: 11px; }
.pair-box strong { font-size: clamp(15px,1.5vw,22px); }
.copy-button { cursor: pointer; color: #fff; background: var(--blue); border: 2px solid #000; padding: 6px 8px; font: 800 10px var(--mono); }
.hero-visual { position: relative; }
.mail-pop { position: absolute; right: -3%; bottom: 4%; display: flex; gap: 10px; padding: 14px 18px; color: #000; background: var(--cream); border: var(--border); box-shadow: 6px 6px 0 var(--magenta); font-weight: 900; animation: bob 2.5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }

.window { color: #000; background: var(--gray); border: 3px solid #000; box-shadow: 10px 10px 0 rgba(0,0,0,.75), 0 0 0 2px #e7e7e7; }
.title-bar { min-height: 30px; display: flex; align-items: center; gap: 5px; padding: 4px 5px 4px 9px; color: #fff; background: linear-gradient(90deg, #07159c, #118ee9); border-bottom: 3px solid #000; font: 900 12px var(--mono); letter-spacing: .03em; }
.title-bar span { margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-bar i { width: 22px; height: 20px; display: grid; place-items: center; color: #000; background: var(--gray); border: 2px solid #000; font: 900 13px/1 var(--ui); font-style: normal; box-shadow: inset 1px 1px #fff; }
.image-window img { display: block; width: 100%; height: auto; background: #000; image-rendering: auto; }
.hero-window { transform: rotate(1deg); }
.window-status { padding: 6px 10px; border-top: 2px solid #000; font: 700 10px var(--mono); }
.magenta-window .title-bar { background: linear-gradient(90deg,#7f0073,var(--magenta)); }
.yellow-window .title-bar { color:#000; background: linear-gradient(90deg,#f1b400,var(--yellow)); }
.blue-window .title-bar { background: linear-gradient(90deg,#0b20bb,#244eff); }
.green-window .title-bar { color:#000; background: linear-gradient(90deg,#0b9f18,var(--green)); }

.ticker { overflow: hidden; color: #000; background: var(--green); border-block: 4px solid #000; font-weight: 1000; font-size: 18px; padding: 10px 0; }
.ticker div { width: max-content; white-space: nowrap; animation: ticker 25s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }

.story-section { min-height: 780px; display: grid; grid-template-columns: minmax(420px, 1.1fr) minmax(340px, .9fr); align-items: center; gap: clamp(34px, 7vw, 110px); max-width: 1500px; margin: auto; padding: clamp(76px, 9vw, 140px) clamp(20px, 5vw, 80px); }
.story-section.reverse .section-visual { order: 2; }
.story-section.reverse .section-copy { order: 1; }
.section-visual { position: relative; }
.section-visual::before { content: ""; position: absolute; inset: 10% -5%; z-index: -1; background: var(--cyan); filter: blur(60px); opacity: .12; }
.section-visual .window { transition: transform .25s ease; }
.section-visual:hover .window { transform: rotate(-1deg) scale(1.015); }
.section-number { display: inline-block; margin: 0 0 18px; padding: 5px 8px; color: #000; background: var(--yellow); border: 2px solid #000; box-shadow: 3px 3px 0 var(--magenta); font-size: 12px; font-weight: 900; }
h2 { font: 1000 clamp(42px,5.3vw,80px)/.93 var(--ui); text-shadow: 3px 3px 0 var(--blue); }
.section-copy > p:not(.section-number) { margin: 25px 0; font-size: clamp(15px,1.35vw,20px); line-height: 1.6; }
.check-list { list-style: none; margin: 0 0 28px; padding: 0; color: var(--cyan); font-size: 12px; font-weight: 900; }
.check-list li { margin: 8px 0; }
.check-list li::before { content: "[✓] "; color: var(--green); }
.loading-widget { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 22px 0 28px; padding: 10px; color: #000; background: var(--gray); border: var(--border); box-shadow: 5px 5px 0 var(--blue); font-size: 11px; font-weight: 900; }
.loading-widget > div { height: 18px; padding: 2px; border: 2px inset #fff; background: #fff; }
.loading-widget i { display: block; height: 100%; width: 87%; background: repeating-linear-gradient(90deg,var(--blue) 0 10px,transparent 10px 13px); }
.folder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0 28px; }
.folder-grid span { padding: 12px; color: #000; background: var(--gray); border: 2px solid #000; box-shadow: 3px 3px 0 var(--cyan); font-size: 11px; font-weight: 900; }
.error-box { position: relative; max-width: 430px; margin: 24px 0 28px; color: #000; background: var(--gray); border: var(--border); box-shadow: 6px 6px 0 var(--red); }
.error-box > div { padding: 5px 8px; color: #fff; background: var(--blue); font-size: 11px; font-weight: 900; }
.error-box p { display: inline-block; margin: 18px 12px; font: 700 13px var(--ui); }
.error-box button { margin: 10px; min-width: 60px; cursor: pointer; background: var(--gray); border: 2px solid #000; box-shadow: inset 2px 2px #fff, inset -2px -2px #555; font: 800 11px var(--ui); }
.error-box.dismissed { visibility: hidden; }
.chat-log { margin: 25px 0 28px; padding: 12px; color: #111; background: #fff; border: 4px solid var(--blue); box-shadow: 6px 6px 0 var(--magenta); font: 14px/1.7 var(--ui); }
.chat-log b { color: var(--blue); }
.typing { color: #666; font-size: 11px; font-style: italic; }
.typing span { animation: blink 1s steps(1) infinite; }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; margin: 25px 0 30px; }
.versus span { display: grid; gap: 3px; padding: 12px; color:#000; background: var(--cream); border: 3px solid #000; font-size: 10px; }
.versus b { color: var(--blue); font-size: 22px; }
.versus i { align-self: center; color: var(--green); font: 900 28px var(--ui); font-style: normal; }

.cable-divider { display: grid; grid-template-columns: auto minmax(30px,1fr) auto minmax(30px,1fr) auto; align-items: center; gap: 12px; max-width: 1100px; margin: auto; padding-inline: 22px; color: var(--cyan); font-size: 11px; text-align: center; }
.cable-divider span { font-size: 28px; }
.cable-divider i { border-top: 3px dashed var(--magenta); }
.pixel-divider { height: 15px; max-width: 900px; margin: auto; display: grid; grid-template-columns: repeat(9,1fr); gap: 8px; padding-inline: 20px; }
.pixel-divider span:nth-child(3n+1) { background: var(--blue); }.pixel-divider span:nth-child(3n+2) { background: var(--magenta); }.pixel-divider span:nth-child(3n) { background: var(--green); }

.final-cta { padding: clamp(80px,10vw,150px) 20px; background: radial-gradient(circle at center, rgba(8,233,233,.2), transparent 45%), linear-gradient(#050505,#080018); text-align: center; }
.final-screen { max-width: 900px; margin: auto; padding-bottom: 44px; color: #000; background: var(--gray); border: 4px solid #000; outline: 3px solid #eee; box-shadow: 15px 15px 0 var(--blue); }
.final-screen > img { width: min(330px, 56vw); margin: 28px auto 0; border: 4px solid #000; }
.final-screen .eyebrow { color: #005d00; }
.final-screen h2 { padding: 0 15px; color: #000; text-shadow: 4px 4px 0 var(--cyan); }
.final-screen h2 em { color: var(--blue); }
.final-screen > p:not(.eyebrow):not(.fine-print) { padding: 0 20px; font-weight: 700; }
.final-screen .cta-row { justify-content: center; padding: 10px 20px; }
.pair-copy { display: block; margin: 22px auto; padding: 10px 24px; cursor: pointer; color: #fff; background: #000; border: 3px solid var(--blue); box-shadow: 4px 4px 0 var(--cyan); font-family: var(--mono); }
.pair-copy span, .pair-copy small { display: block; }.pair-copy span { color: var(--green); font-size: 20px; font-weight: 900; }.pair-copy small { margin-top: 4px; }
.fine-print { margin: 24px 20px 0; font-size: 9px; }

footer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 26px; padding: 15px clamp(16px,4vw,60px); color: #000; background: var(--gray); border-top: 4px solid #000; font-family: var(--ui); }
.footer-brand { display: flex; align-items: center; gap: 9px; font-size: 11px; }.footer-brand img { width: 38px; height: 38px; border: 2px solid #000; }.footer-brand span { font-family: var(--mono); }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }.footer-links a { color: #000; font: 800 10px var(--mono); }
.taskbar-clock { padding: 9px; border: 2px inset #fff; font-size: 12px; font-weight: 700; }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 120; transform: translate(-50%, 100px); padding: 12px 18px; color:#000; background: var(--green); border: 3px solid #000; box-shadow: 5px 5px 0 var(--magenta); font-size: 11px; font-weight: 900; opacity: 0; transition: .25s; }.toast.show { opacity: 1; transform: translate(-50%,0); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .site-header { gap: 10px; }.header-actions { display:none; }nav { justify-content: flex-end; }
  .hero { grid-template-columns: 1fr; padding-top: 80px; }.hero-copy { max-width: 850px; }.hero-visual { max-width: 900px; margin: auto; }
  .story-section { min-height: auto; grid-template-columns: 1fr; max-width: 900px; }.story-section.reverse .section-visual, .story-section.reverse .section-copy { order: initial; }
  .section-visual { max-width: 760px; width: 100%; margin: auto; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 64px; }.site-header { min-height: 62px; padding: 7px 12px; }.brand small { display:none; }.brand span { font-size: 14px; }
  .menu-toggle { display: block; margin-left: auto; padding: 8px; color: #fff; background: var(--blue); border: 2px solid #000; font: 900 11px var(--mono); }
  nav { position: absolute; top: 100%; left: 0; right: 0; display: none; grid-template-columns: 1fr 1fr; padding: 10px; background: var(--gray); border-bottom: 3px solid #000; box-shadow: 0 6px 0 #000; }nav.open { display:grid; }nav a { padding: 10px; border: 1px dotted #333; }
  .hero { min-height: auto; padding: 52px 16px 80px; }.hero-backdrop { background-position: center top; opacity: .28; }.hero-copy { text-align: center; }.eyebrow { font-size: 10px; }.lede { font-size: 15px; }.hero .cta-row { justify-content: center; }.pair-box { max-width: 100%; }.pair-box span { display:none; }.pair-box strong { font-size: 14px; }
  h1 { font-size: clamp(46px,15vw,76px); }h2 { font-size: clamp(39px,12vw,62px); }.mail-pop { right: -2%; bottom: -25px; font-size: 11px; }
  .story-section { padding: 85px 16px; gap: 42px; }.section-copy { text-align:center; }.section-copy .cta-row { justify-content:center; }.check-list { text-align:left; display:inline-block; }.folder-grid { text-align:left; }.error-box { margin-inline:auto; }.chat-log { text-align:left; }
  .cable-divider b { font-size: 9px; }.window { box-shadow: 6px 6px 0 #000; }.title-bar { font-size: 10px; }
  footer { grid-template-columns: 1fr auto; }.footer-links { display:none; }.footer-brand span { display:none; }
}
@media (max-width: 430px) {
  .button { width: 100%; }.cta-row { width:100%; }.folder-grid { grid-template-columns:1fr; }.loading-widget { grid-template-columns:1fr auto; }.loading-widget > span { grid-column: 1/-1; }.versus { grid-template-columns:1fr; }.versus i { transform: rotate(90deg); }.final-screen { box-shadow: 8px 8px 0 var(--blue); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity:1; transform:none; }
}