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

:root { --ink: #f5f2ed; --muted: #a8a6ad; --line: rgba(245,242,237,.14); --bg: #0b0d14; --panel: #141722; --cyan: #8ff8e1; --pink: #ff7ccf; --orange: #ffad66; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: 'Space Grotesk', system-ui, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.ambient { position: fixed; width: 38rem; height: 38rem; border-radius: 50%; filter: blur(100px); opacity: .13; pointer-events: none; z-index: -1; }
.ambient-one { top: -16rem; right: -8rem; background: var(--pink); }
.ambient-two { bottom: -20rem; left: -12rem; background: var(--cyan); }
.section-shell { width: min(1160px, calc(100% - 48px)); margin: auto; }
.site-header { width: min(1160px, calc(100% - 48px)); height: 88px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; }
.mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--cyan); color: var(--cyan); font-family: 'DM Mono', monospace; }
nav { display: flex; align-items: center; gap: 28px; color: var(--muted); font-size: .85rem; }
nav a:hover, .footer-links a:hover, .text-link:hover, .card-link:hover { color: var(--cyan); }
.nav-button, .button { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--line); padding: 12px 17px; color: var(--ink); transition: .2s ease; }
.nav-button:hover { border-color: var(--cyan); color: var(--cyan); }
.hero { min-height: 650px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 4rem; }
.eyebrow { margin: 0 0 20px; color: var(--cyan); font-family: 'DM Mono', monospace; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.pulse { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 26px; font-size: clamp(4rem, 8vw, 7.6rem); line-height: .88; letter-spacing: -.08em; font-weight: 600; }
h1 em, h2 em { color: var(--pink); font-family: Georgia, serif; font-weight: 400; }
.hero-text { max-width: 470px; color: var(--muted); font-size: 1.1rem; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; }
.button { font-size: .88rem; }
.button-primary { border-color: var(--cyan); color: var(--cyan); }
.button-primary:hover { background: var(--cyan); color: var(--bg); }
.button-light { border-color: var(--ink); color: var(--ink); }
.button-light:hover { background: var(--ink); color: #17131c; }
.text-link, .card-link { color: var(--muted); font-size: .85rem; transition: .2s; }
.hero-orbit { position: relative; height: 450px; }
.orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; transform: rotate(-25deg); }
.orbit-large { inset: 10% 0 10% 8%; border-color: rgba(143,248,225,.4); }
.orbit-small { inset: 25% 18% 25% 20%; border-color: rgba(255,124,207,.45); transform: rotate(55deg); }
.orbit-core { position: absolute; top: 41%; left: 42%; display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; color: var(--bg); background: var(--cyan); font-family: 'DM Mono', monospace; font-size: 1.2rem; box-shadow: 0 0 70px rgba(143,248,225,.35); }
.orbit-label { position: absolute; padding: 7px 10px; border: 1px solid var(--line); color: var(--muted); background: rgba(11,13,20,.7); font-family: 'DM Mono', monospace; font-size: .65rem; }
.label-one { top: 12%; right: 7%; color: var(--pink); } .label-two { bottom: 14%; left: 2%; color: var(--orange); } .label-three { top: 49%; right: -5%; color: var(--cyan); }
.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-family: 'DM Mono', monospace; font-size: .7rem; letter-spacing: .15em; white-space: nowrap; }
.ticker-track { padding: 17px 0; animation: drift 28s linear infinite; } .ticker span { margin: 0 30px; color: var(--pink); }
@keyframes drift { to { transform: translateX(-25%); } }
.section { padding: 125px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 42px; }
.section-heading h2, .idea-panel h2, .contact-section h2 { margin: 0; font-size: clamp(2.7rem, 5vw, 5rem); line-height: .95; letter-spacing: -.06em; font-weight: 500; }
.section-heading > p:last-child { max-width: 270px; margin: 0; color: var(--muted); line-height: 1.5; }
.work-grid { display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 14px; }
.project-card { min-height: 390px; display: flex; flex-direction: column; justify-content: space-between; padding: 25px; border: 1px solid var(--line); background: var(--panel); transition: transform .25s, border-color .25s; }
.project-card:hover { transform: translateY(-7px); border-color: var(--cyan); }
.project-featured { background: linear-gradient(145deg, #192d33, #141722 70%); } .project-spark { background: linear-gradient(145deg, #2b1b2c, #141722 70%); } .project-note { background: linear-gradient(145deg, #2b2119, #141722 70%); }
.project-top { display: flex; justify-content: space-between; color: var(--muted); font-family: 'DM Mono', monospace; font-size: .68rem; text-transform: uppercase; }
.status { color: var(--cyan); } .project-spark .status { color: var(--pink); } .project-note .status { color: var(--orange); }
.project-kicker { margin-bottom: 12px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: .68rem; text-transform: uppercase; }
.project-card h3 { margin-bottom: 14px; font-size: 2rem; letter-spacing: -.05em; } .project-card p:not(.project-kicker) { color: var(--muted); line-height: 1.55; }
.project-card .card-link { align-self: flex-start; margin-top: 25px; }
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; border-top: 1px solid var(--line); }
.about-copy { padding-top: 52px; color: var(--muted); font-size: 1.15rem; line-height: 1.7; } .about-copy p { max-width: 500px; }
.principles { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 35px; } .principles span { padding: 9px 12px; border: 1px solid var(--line); color: var(--ink); font-family: 'DM Mono', monospace; font-size: .65rem; }
.idea-section { padding-top: 0; } .idea-panel { display: grid; grid-template-columns: 1fr .8fr; gap: 3rem; padding: 55px; background: var(--pink); color: #17111b; } .idea-panel .eyebrow { color: #17111b; } .idea-panel h2 em { color: #fff2a5; } .idea-side { align-self: end; max-width: 330px; line-height: 1.6; } .idea-side p { margin-bottom: 28px; }
.contact-section { padding: 80px 0 140px; text-align: center; } .contact-section .eyebrow { margin-bottom: 26px; } .contact-email { display: inline-block; margin-top: 34px; color: var(--cyan); font-family: 'DM Mono', monospace; font-size: clamp(1rem, 2vw, 1.5rem); } .contact-email span { color: var(--pink); }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0 35px; border-top: 1px solid var(--line); color: var(--muted); font-family: 'DM Mono', monospace; font-size: .65rem; } .footer-links { display: flex; gap: 20px; }
@media (max-width: 800px) { .site-header { height: 72px; } nav a:not(.nav-button) { display: none; } .hero { min-height: auto; grid-template-columns: 1fr; gap: 20px; padding-top: 90px; } .hero-orbit { height: 300px; order: -1; } .orbit-core { width: 70px; height: 70px; left: 43%; top: 38%; } .label-three { right: 0; } .section { padding: 85px 0; } .section-heading, .split-section, .idea-panel { display: block; } .section-heading > p:last-child { margin-top: 25px; } .work-grid { grid-template-columns: 1fr; } .project-card { min-height: 320px; } .about-copy { padding-top: 30px; } .idea-panel { padding: 32px; } .idea-side { margin-top: 35px; } .site-footer { display: block; } .footer-links { margin-top: 18px; } }