@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700;800&display=swap');

:root { --black: #070809; --panel: #101316; --line: #2b3034; --ink: #f3f6ee; --muted: #abb2aa; --acid: #d8ff37; --cyan: #4cf4dc; --coral: #ff705c; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--ink); font-family: "IBM Plex Mono", monospace; line-height: 1.6; }
a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; }
.site-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px max(5vw, 28px); border-bottom: 1px solid var(--line); background: rgba(7, 8, 9, .92); position: sticky; top: 0; z-index: 3; backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 9px; font: 700 14px "Orbitron", sans-serif; letter-spacing: -.3px; } .brand img { width: 35px; height: 35px; border-radius: 50%; object-fit: contain; background: #fff; }
nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 32px); font-size: 11px; color: var(--muted); } nav a:hover, nav a:focus-visible { color: var(--acid); } .nav-cta { border: 1px solid var(--acid); padding: 8px 13px; color: var(--acid); }
.hero { min-height: calc(100vh - 76px); padding: 12vh max(5vw, 28px) 52px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); align-items: center; gap: 40px; border-bottom: 1px solid var(--line); }
.grid-field, .apply-grid { position: absolute; inset: 0; pointer-events: none; opacity: .32; background-image: linear-gradient(#26302e 1px, transparent 1px), linear-gradient(90deg, #26302e 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.hero-copy, .machine { position: relative; z-index: 1; }.signal, .section-kicker { margin: 0 0 18px; font-size: 11px; letter-spacing: 1.5px; color: var(--cyan); }.signal span { display: inline-block; width: 8px; height: 8px; background: var(--acid); margin-right: 9px; box-shadow: 0 0 14px var(--acid); }
h1, h2, h3 { font-family: "Orbitron", sans-serif; line-height: 1.1; } h1 { margin: 0; font-size: clamp(3.5rem, 8vw, 7.8rem); letter-spacing: -5px; } h1 em, h2 span, h2 em { color: var(--acid); font-style: normal; }.hero-lede { max-width: 610px; font-size: clamp(1rem, 1.7vw, 1.28rem); margin: 28px 0 12px; }.welcome { color: var(--muted); max-width: 570px; font-size: 14px; }.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; gap: 18px; min-height: 48px; padding: 0 19px; border: 1px solid var(--ink); font: 600 11px "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .5px; transition: transform .2s, background .2s, color .2s; }.button:hover { transform: translate(-3px, -3px); }.primary { color: var(--black); background: var(--acid); border-color: var(--acid); }.secondary { color: var(--ink); }.secondary:hover { background: var(--ink); color: var(--black); }
.machine { width: min(440px, 78vw); aspect-ratio: 1; justify-self: center; border: 1px solid #34413d; border-radius: 50%; background: radial-gradient(circle, rgba(76,244,220,.09), transparent 55%); }.orbit { position: absolute; inset: 12%; border: 1px solid var(--cyan); border-radius: 50%; transform: rotate(-28deg); }.orbit-two { inset: 27%; border-color: var(--acid); transform: rotate(52deg); }.core { position: absolute; inset: 34%; display: grid; place-items: center; border: 1px solid var(--acid); background: #111a14; box-shadow: 0 0 40px rgba(216,255,55,.25), inset 0 0 30px rgba(76,244,220,.09); }.core span { font: 700 clamp(2rem, 5vw, 3.4rem) "Orbitron", sans-serif; color: var(--acid); }.node { position: absolute; padding: 7px; background: var(--black); border: 1px solid var(--line); color: var(--cyan); font-size: 9px; letter-spacing: 1px; }.node-a { top: 10%; left: 3%; }.node-b { right: -3%; top: 45%; }.node-c { bottom: 8%; left: 12%; color: var(--acid); }.scroll-cue { position: absolute; bottom: 20px; left: max(5vw, 28px); font-size: 9px; letter-spacing: 1px; color: var(--muted); }
.section { padding: 112px max(5vw, 28px); border-bottom: 1px solid var(--line); }.intro, .sequence, .tracks, .deliverables { max-width: 1440px; margin: auto; }.intro-grid, .tracks-heading, .mentors, .after { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 8vw, 140px); align-items: start; }h2 { margin: 0; font-size: clamp(2.25rem, 5vw, 5rem); letter-spacing: -3px; }.intro-grid p, .tracks-heading p, .mentor-copy p, .after p { margin: 0 0 18px; color: var(--muted); max-width: 600px; }.text-link { color: var(--acid); font-size: 12px; border-bottom: 1px solid currentColor; padding-bottom: 4px; }.text-link span { margin-left: 9px; }.principles, .deliverable-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 90px; border-top: 1px solid var(--line); }.principles article, .deliverable-grid article { min-height: 220px; padding: 26px 26px 16px 0; border-right: 1px solid var(--line); }.principles article + article, .deliverable-grid article + article { padding-left: 26px; }.principles article:last-child, .deliverable-grid article:last-child { border-right: 0; }.principles b, .deliverable-grid span { color: var(--acid); font-size: 12px; }.principles h3, .deliverable-grid h3 { margin: 42px 0 12px; font-size: 17px; }.principles p, .deliverable-grid p { color: var(--muted); font-size: 13px; margin: 0; }
.sequence { background: var(--panel); max-width: none; padding-left: max(5vw, calc((100vw - 1300px) / 2)); padding-right: max(5vw, calc((100vw - 1300px) / 2)); }.sequence h2 { margin-bottom: 58px; }.timeline { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 26px; padding: 24px 0; border-bottom: 1px solid var(--line); }.timeline span { color: var(--cyan); font-size: 12px; }.timeline h3 { margin: 0 0 6px; font-size: clamp(1.05rem, 2vw, 1.5rem); }.timeline p { margin: 0; color: var(--muted); font-size: 13px; }
.tracks-heading { margin-bottom: 60px; }.track-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); }.track-grid article { padding: 22px; min-height: 236px; border-right: 1px solid var(--line); transition: background .2s; }.track-grid article:last-child { border: 0; }.track-grid article:hover { background: #19201c; }.track-id { font-size: 10px; color: var(--cyan); }.track-grid h3 { margin: 78px 0 11px; font-size: 17px; }.track-grid p { margin: 0; color: var(--muted); font-size: 12px; }.ai-line { margin: 32px 0 0; color: var(--muted); font-size: 12px; }.ai-line span { color: var(--coral); margin-right: 16px; }
.mentors { max-width: 1440px; margin: auto; }.mentor-panel { padding: 34px; border: 1px solid var(--cyan); background: linear-gradient(135deg, #101b1a, #101316); }.panel-label { color: var(--cyan); font-size: 10px; letter-spacing: 1px; }.mentor-panel ul { padding: 0; margin: 28px 0; list-style: none; }.mentor-panel li { border-bottom: 1px solid #31423e; padding: 12px 0; font-size: 13px; }.mentor-panel li::before { content: "+"; color: var(--acid); margin-right: 13px; }.deliverables { text-align: center; }.deliverable-grid { text-align: left; }.after { background: var(--acid); color: var(--black); max-width: none; }.after .section-kicker, .after p { color: #273323; }.after h2 { color: var(--black); }.after h2 span { color: var(--black); }
.apply { padding: 120px max(5vw, 28px); text-align: center; position: relative; overflow: hidden; }.apply > *:not(.apply-grid) { position: relative; z-index: 1; }.apply h2 { font-size: clamp(3rem, 7vw, 6.5rem); }.apply p:not(.signal) { color: var(--muted); margin: 20px auto 30px; max-width: 500px; }.light { background: var(--ink); color: var(--black); border-color: var(--ink); } footer { display: flex; justify-content: space-between; padding: 24px max(5vw, 28px); color: var(--muted); font-size: 10px; } footer a { color: var(--ink); font-family: "Orbitron", sans-serif; }
@media (max-width: 800px) { .site-header { padding: 12px 20px; } nav a:not(.nav-cta) { display: none; } .hero, .intro-grid, .tracks-heading, .mentors, .after { grid-template-columns: 1fr; }.hero { padding-top: 72px; }.machine { width: min(350px, 82vw); }.principles, .deliverable-grid { grid-template-columns: 1fr; margin-top: 55px; }.principles article, .deliverable-grid article, .principles article + article, .deliverable-grid article + article { min-height: auto; padding: 25px 0; border-right: 0; border-bottom: 1px solid var(--line); }.principles article:last-child, .deliverable-grid article:last-child { border-bottom: 0; }.principles h3, .deliverable-grid h3 { margin-top: 18px; }.track-grid { grid-template-columns: 1fr 1fr; }.track-grid article { border-bottom: 1px solid var(--line); }.track-grid article:nth-child(2n) { border-right: 0; }.track-grid article:last-child { border-bottom: 0; }.timeline li { grid-template-columns: 48px 1fr; }.section { padding: 76px 28px; } footer { gap: 10px; font-size: 8px; } }
@media (max-width: 430px) { h1 { letter-spacing: -3px; }.track-grid { grid-template-columns: 1fr; }.track-grid article { min-height: 180px; border-right: 0; }.track-grid h3 { margin-top: 46px; }.hero-actions .button { width: 100%; justify-content: space-between; } }