@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; font-family: 'DM Sans', sans-serif; background: #15181d; color: #f3f5ee; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; }
.page-shell { min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(circle at 78% 46%, #302b27 0, transparent 34%), #15181d; }
.site-header, .site-footer { width: min(100% - 112px, 1440px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
.site-header { padding-top: 38px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: #f3f5ee; font: 700 25px/1 'Space Grotesk', sans-serif; letter-spacing: -.065em; text-decoration: none; }
.brand-period { color: #ffb84d; }
.brand-mark { width: 30px; height: 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; transform: rotate(-10deg); }
.brand-mark span { border: 2px solid #ffb84d; border-radius: 2px; }
.brand-mark span:nth-child(2) { opacity: .48; }.brand-mark span:nth-child(3) { opacity: .68; }
.status { display: flex; align-items: center; gap: 9px; color: #afbec1; font: 500 12px/1 'Space Grotesk', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #ffb84d; box-shadow: 0 0 0 4px #ffb84d20, 0 0 18px #ffb84d80; }
.hero { position: relative; width: min(100% - 112px, 1440px); margin: auto; min-height: 660px; display: grid; grid-template-columns: 50% 50%; align-items: center; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 48px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 34px; color: #ffb84d; font: 600 11px/1 'Space Grotesk', sans-serif; letter-spacing: .23em; }
.eyebrow-line { width: 22px; height: 1px; background: #ffb84d; }
h1 { margin: 0; max-width: 760px; font: 500 clamp(64px, 7vw, 112px)/.98 'Space Grotesk', sans-serif; letter-spacing: -.085em; white-space: nowrap; }
h1 em { color: #ffb84d; font-style: normal; }
.intro { max-width: 490px; margin: 38px 0 0; color: #abbabf; font-size: 18px; line-height: 1.7; }
.launch-note { display: inline-flex; align-items: center; gap: 13px; margin-top: 42px; padding-top: 26px; border-top: 1px solid #ffffff24; color: #84969c; font-size: 13px; }
.launch-note strong { color: #dce9e3; font-weight: 600; }
.launch-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #ffb84d75; border-radius: 50%; color: #ffb84d; font-size: 17px; }
.visual { position: relative; width: min(54vw, 690px); aspect-ratio: 1; justify-self: end; margin-right: -7%; }
.visual-grid { position: absolute; inset: 0; opacity: .36; background-image: linear-gradient(#42737c45 1px, transparent 1px), linear-gradient(90deg, #42737c45 1px, transparent 1px); background-size: 57px 57px; mask-image: radial-gradient(circle, black 22%, transparent 70%); }
.visual-glow { position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, #a4e96725 0, #63d7c710 35%, transparent 69%); filter: blur(26px); }
.focus-ring { position: absolute; border: 1px solid #a3e2ca36; border-radius: 50%; }
.focus-ring-outer { inset: 9%; box-shadow: inset 0 0 70px #ffb84d08, 0 0 50px #a6e7b00a; }
.focus-ring-inner { inset: 21%; border-color: #ffb84d99; box-shadow: 0 0 48px #ffb84d1b, inset 0 0 36px #ffb84d12; }
.focus-ring-inner::before, .focus-ring-inner::after { content: ''; position: absolute; background: #ffb84d; border-radius: 50%; width: 5px; height: 5px; box-shadow: 0 0 16px #ffb84d; }
.focus-ring-inner::before { top: 14%; left: 14%; }.focus-ring-inner::after { bottom: 14%; right: 14%; }
.focus-core { position: absolute; inset: 31%; overflow: hidden; border: 1px solid #ffb84d90; border-radius: 50%; background: radial-gradient(circle, #b9ee6d22, #16323488 58%, #0c2028); box-shadow: 0 0 0 10px #a9ebbd0a, 0 0 60px #ffb84d32, inset 0 0 50px #aaf3781a; }
.core-grid { position: absolute; inset: -10%; transform: rotate(-16deg); background-image: linear-gradient(#bcf6a82d 1px, transparent 1px), linear-gradient(90deg, #bcf6a82d 1px, transparent 1px); background-size: 32px 32px; }
.core-point { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border: 2px solid #ddffae; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 13px #d4ff9a13, 0 0 28px #ffb84d; }
.crosshair { position: absolute; background: #ffb84d9c; }.crosshair-top, .crosshair-bottom { width: 1px; height: 43px; left: 50%; }.crosshair-top { top: 1%; }.crosshair-bottom { bottom: 1%; }.crosshair-left, .crosshair-right { height: 1px; width: 43px; top: 50%; }.crosshair-left { left: 1%; }.crosshair-right { right: 1%; }
.coordinate { position: absolute; color: #a9c9bd; font: 500 10px/1 'Space Grotesk', sans-serif; letter-spacing: .16em; }.coordinate-a { left: 13%; top: 16%; }.coordinate-b { right: 6%; bottom: 13%; }
.site-footer { gap: 20px; padding-block: 30px 34px; border-top: 1px solid #ffffff17; color: #6f858b; font-size: 12px; }.site-footer > span:last-child { color: #a9b9b7; }.site-footer > span:last-child span { margin-left: 8px; color: #ffb84d; }
@media (max-width: 900px) { .site-header, .site-footer, .hero { width: min(100% - 48px, 700px); }.hero { min-height: auto; display: flex; flex-direction: column; align-items: stretch; padding: 100px 0 55px; }.hero-copy { padding-bottom: 0; }h1 { font-size: clamp(50px, 10vw, 82px); }.visual { width: min(100%, 620px); align-self: center; margin: 16px 0 -15px; }.site-footer .footer-center { display: none; } }
@media (max-width: 540px) { .site-header { padding-top: 26px; }.brand { font-size: 22px; }.brand-mark { width: 25px; height: 25px; }.status { font-size: 10px; }.hero { padding-top: 84px; }.eyebrow { font-size: 9px; letter-spacing: .17em; margin-bottom: 28px; }h1 { font-size: clamp(45px, 11.6vw, 64px); white-space: normal; }.intro { font-size: 16px; margin-top: 28px; }.launch-note { margin-top: 30px; }.visual { width: 117%; margin-left: -8.5%; margin-bottom: -5%; }.site-footer { font-size: 11px; padding-block: 22px; } }
@media (prefers-reduced-motion: no-preference) { .visual-glow { animation: breathe 8s ease-in-out infinite; }@keyframes breathe { 50% { opacity: .6; transform: scale(.94); } } }

.app-icon { position: absolute; inset: 24%; width: 52%; height: 52%; object-fit: contain; border-radius: 24%; filter: drop-shadow(0 22px 38px #0008); }
.features { width: min(100% - 112px, 1440px); margin: 0 auto 90px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.features > div { border-top: 1px solid #ffffff28; padding: 24px 12px 0 0; }
.feature-number { color: #ffb84d; font: 600 11px/1 'Space Grotesk', sans-serif; letter-spacing: .15em; }
.features h2 { margin: 22px 0 12px; font: 500 24px/1.2 'Space Grotesk', sans-serif; letter-spacing: -.04em; }
.features p { max-width: 330px; margin: 0; color: #abbabf; font-size: 14px; line-height: 1.7; }
@media (max-width: 900px) { .features { width: min(100% - 48px, 700px); gap: 20px; margin-bottom: 65px; } }
@media (max-width: 650px) { .features { grid-template-columns: 1fr; gap: 30px; } .features h2 { margin-top: 12px; } }