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

:root { color-scheme: dark; --bg: #090b10; --white: #f5f4f1; --muted: #94969e; --accent: #c5ff73; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--white); font-family: 'DM Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse 48% 48% at 52% 48%, rgba(82, 105, 80, .14), transparent 74%), radial-gradient(ellipse 35% 38% at 93% 94%, rgba(103, 133, 73, .08), transparent 76%), #090b10; }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .09; z-index: -1; 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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E"); }
.page-shell { width: min(100%, 1600px); min-height: 100svh; margin: auto; padding: 42px clamp(25px, 6.3vw, 110px) 32px; display: flex; flex-direction: column; }
.topbar, .footer { display: flex; justify-content: space-between; align-items: center; }
.wordmark { font: 700 35px/1 'Space Grotesk', sans-serif; letter-spacing: -3px; color: var(--white); text-decoration: none; }
.wordmark-dot, .period { color: var(--accent); }
.status { display: flex; align-items: center; gap: 11px; font: 700 10px/1 'DM Sans', sans-serif; letter-spacing: .23em; color: #d0d1cb; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 17px rgba(197,255,115,.5); animation: breathe 2.8s ease-in-out infinite; }
.hero { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 90px 0 105px; }
.eyebrow { display: flex; gap: 15px; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .35em; color: var(--accent); }
.eyebrow-line { width: 30px; height: 1px; background: var(--accent); }
h1 { margin: 21px 0 22px; font: 700 clamp(56px, 10.5vw, 164px)/1.07 'Space Grotesk', sans-serif; letter-spacing: -.092em; padding-right: .09em; text-wrap: nowrap; }
.period { display: inline-block; margin-left: .025em; }
.subtitle { margin: 0; color: #a3a6a9; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.9; font-weight: 400; }
.divider { width: min(260px, 58vw); height: 1px; background: #292d30; margin-top: 42px; position: relative; }
.divider span { width: 43%; height: 1px; position: absolute; top: 0; left: 0; background: var(--accent); }
.english { color: #6d7174; margin: 23px 0 0; font-size: 10px; letter-spacing: .30em; font-weight: 700; }
.footer { color: #72767a; font-size: 10px; letter-spacing: .17em; font-weight: 700; gap: 16px; }
.arrow { color: var(--accent); font-size: 18px; margin-left: 8px; vertical-align: -2px; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }
@media (max-width: 680px) { .page-shell { padding: 29px 23px 25px; } .wordmark { font-size: 30px; } .status { font-size: 9px; letter-spacing: .15em; } .hero { padding: 85px 0; } .eyebrow { font-size: 9px; letter-spacing: .24em; } .eyebrow-line { width: 19px; } h1 { font-size: clamp(39px, 10.9vw, 72px); letter-spacing: -.085em; margin: 29px 0 25px; } .subtitle { font-size: 14px; } .footer { font-size: 8px; letter-spacing: .09em; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }