:root {
  color-scheme: dark;
  --bg: #050506;
  --fg: #f5f5f7;
  --muted: #a4a4af;
  --line: rgba(255,255,255,.14);
  --accent: #c5b8ff;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--fg); background:
    radial-gradient(ellipse at 72% 42%, rgba(89,76,145,.11), transparent 36%),
    linear-gradient(145deg, #080809 0%, #050506 52%, #09090d 100%);
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.14; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E"); z-index:5; }
.ambient { position:fixed; width:32rem; height:32rem; border-radius:50%; filter:blur(110px); opacity:.12; pointer-events:none; }
.ambient-one { background:#51418f; top:16%; right:8%; }
.ambient-two { background:#293b62; bottom:-22rem; left:12%; }
.site-header, .site-footer { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; width:min(1380px, calc(100% - 10vw)); margin-inline:auto; }
.site-header { padding:34px 0; }
.wordmark { display:inline-flex; align-items:center; gap:13px; color:var(--fg); text-decoration:none; font-size:15px; font-weight:600; letter-spacing:.28em; }
.mark { display:grid; place-items:center; width:29px; height:29px; border:1px solid rgba(255,255,255,.65); border-radius:50%; font-size:17px; font-weight:500; letter-spacing:0; }
.status { display:flex; align-items:center; gap:9px; padding:9px 14px; border:1px solid var(--line); border-radius:999px; color:#d5d5dc; font-size:12px; letter-spacing:.02em; background:rgba(255,255,255,.025); }
.status-dot { width:7px; height:7px; border-radius:50%; background:#a8e7c1; box-shadow:0 0 12px rgba(168,231,193,.8); }
.hero { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(350px, .92fr); align-items:center; width:min(1380px, calc(100% - 10vw)); min-height:calc(100vh - 145px); margin:0 auto; padding:12px 0 54px; }
.hero-copy { position:relative; z-index:2; max-width:720px; padding:30px 0 50px; }
.eyebrow { display:flex; align-items:center; gap:13px; margin:0 0 28px; color:#bcb9c8; font-size:10px; font-weight:500; letter-spacing:.42em; }
.eyebrow span { display:block; width:32px; height:1px; background:linear-gradient(90deg, transparent, rgba(205,195,255,.8)); }
.eyebrow span:last-child { transform:rotate(180deg); }
h1 { max-width:760px; margin:0; font-size:clamp(48px, 6.1vw, 88px); line-height:1.035; letter-spacing:-.075em; font-weight:500; }
h1 em { color:#d0c6ff; font-style:normal; text-shadow:0 0 34px rgba(176,153,255,.24); }
.intro { max-width:510px; margin:27px 0 0; color:var(--muted); font-size:clamp(15px, 1.35vw, 18px); line-height:1.8; font-weight:400; }
.launch-note { display:flex; align-items:center; gap:13px; margin-top:34px; color:#d2d0da; font-size:13px; line-height:1.65; }
.launch-icon { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(203,190,255,.35); border-radius:50%; color:var(--accent); font-size:17px; }
.pillars { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:52px; color:#c9c7d0; font-size:12px; letter-spacing:.015em; }
.pillar { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.pillar-icon { color:#d2caff; font-size:20px; line-height:1; }
.pillar-divider { width:1px; height:22px; background:var(--line); }
.hero-art { position:relative; min-height:620px; height:min(72vh, 760px); display:flex; align-items:center; justify-content:center; margin-left:-6%; }
.hero-art img { position:relative; z-index:1; width:120%; height:112%; max-width:none; object-fit:cover; object-position:48% center; opacity:.91; filter:contrast(1.06) brightness(.83); mask-image:linear-gradient(90deg, transparent 0%, #000 19%, #000 85%, transparent 100%); }
.art-glow { position:absolute; z-index:0; width:65%; aspect-ratio:1; border-radius:50%; background:rgba(118,99,196,.12); filter:blur(75px); }
.art-caption { position:absolute; z-index:2; bottom:8%; left:50%; transform:translateX(-50%); color:rgba(226,222,245,.65); font-size:9px; letter-spacing:.45em; white-space:nowrap; }
.site-footer { padding:18px 0 28px; border-top:1px solid rgba(255,255,255,.09); color:#777782; font-size:11px; letter-spacing:.02em; }
.footer-note { color:#9b98a5; }
.mobile-break { display:none; }
@media (max-width: 900px) {
  .site-header, .site-footer, .hero { width:min(100% - 48px, 680px); }
  .hero { grid-template-columns:1fr; min-height:auto; padding:52px 0 12px; }
  .hero-copy { padding:20px 0 0; }
  h1 { font-size:clamp(48px, 10vw, 76px); }
  .hero-art { min-height:380px; height:52vw; max-height:520px; margin:-12px -10% 0; }
  .hero-art img { width:100%; height:130%; object-position:50% 48%; }
  .art-caption { bottom:5%; }
  .site-footer { margin-top:10px; }
}
@media (max-width: 560px) {
  .site-header, .site-footer, .hero { width:calc(100% - 40px); }
  .site-header { padding:23px 0; }
  .wordmark { gap:9px; font-size:13px; }
  .mark { width:26px; height:26px; font-size:15px; }
  .status { padding:8px 11px; font-size:11px; }
  .hero { padding-top:48px; }
  .eyebrow { margin-bottom:22px; font-size:9px; letter-spacing:.34em; }
  h1 { font-size:clamp(43px, 12vw, 62px); line-height:1.06; letter-spacing:-.07em; }
  .desktop-break { display:none; }
  .intro { margin-top:20px; font-size:15px; line-height:1.7; }
  .launch-note { align-items:flex-start; margin-top:25px; font-size:12px; }
  .mobile-break { display:block; }
  .pillars { gap:13px; margin-top:34px; font-size:10px; }
  .pillar { gap:7px; }
  .pillar-icon { font-size:17px; }
  .pillar-divider { height:17px; }
  .hero-art { min-height:300px; height:78vw; max-height:390px; margin:0 -17% 0; }
  .hero-art img { width:110%; height:130%; object-position:50% center; }
  .art-caption { bottom:3%; font-size:8px; }
  .site-footer { align-items:flex-start; gap:8px; flex-direction:column; padding:17px 0 22px; font-size:10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation:rise-in .8s ease both; }
  .hero-art { animation:fade-in 1.2s .15s ease both; }
  @keyframes rise-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
  @keyframes fade-in { from { opacity:0; } to { opacity:1; } }
}
