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

:root {
  color-scheme: dark;
  --bg: #0b0b0c;
  --text: #f1f0ed;
  --muted: #858480;
  --line: rgba(255,255,255,.12);
  --accent: #c4f06a;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(ellipse at 72% 48%, rgba(110,128,78,.08), transparent 34%), var(--bg);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.page { width: min(1440px, 100%); min-height: 100vh; margin: 0 auto; padding: 0 7.1%; display: flex; flex-direction: column; }
.topbar { min-height: 100px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.status { color: #aaa9a5; font-size: 11px; letter-spacing: .04em; }
.status-dot { width: 6px; height: 6px; margin-right: 8px; display: inline-block; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px rgba(196,240,106,.65); }
.hero { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 6%; padding: 65px 0 75px; min-height: 620px; }
.hero-copy { position: relative; z-index: 1; padding: 15px 0; }
.eyebrow { margin: 0 0 27px; color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
h1 { margin: 0; font-family: Manrope, sans-serif; font-size: clamp(64px, 8.7vw, 122px); line-height: .98; font-weight: 500; letter-spacing: -.085em; }
h1 span { color: #777773; }
.intro { max-width: 390px; margin: 31px 0 30px; color: #a09f9b; font-size: 14px; line-height: 1.85; }
.notify-link { display: inline-flex; align-items: center; gap: 29px; padding: 0 0 10px; border-bottom: 1px solid rgba(196,240,106,.55); font-size: 12px; transition: gap .2s ease, color .2s ease; }
.notify-link span, .footer a span { color: var(--accent); }
.notify-link:hover { gap: 38px; color: var(--accent); }
.art { min-height: 430px; position: relative; display: grid; place-items: center; overflow: hidden; }
.art::before { content: ''; position: absolute; width: min(36vw, 470px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.04); border-radius: 50%; }
.orbit { position: absolute; width: min(29vw, 380px); aspect-ratio: 1; border: 1px solid rgba(220,228,204,.14); border-radius: 50%; transform: rotate(-28deg) scaleY(.48); }
.orbit-one { width: min(36vw, 470px); transform: rotate(33deg) scaleY(.47); border-color: rgba(196,240,106,.2); }
.orbit-two { transform: rotate(-48deg) scaleY(.55); }
.orbit-three { width: min(22vw, 280px); transform: rotate(78deg) scaleY(.7); border-color: rgba(255,255,255,.09); }
.orb { width: clamp(100px, 16vw, 210px); aspect-ratio: 1; z-index: 1; border-radius: 50%; background: radial-gradient(circle at 32% 27%, #e1f6b1 0, #a6ca6a 9%, #4a5837 31%, #20231b 63%, #0d0e0c 78%); box-shadow: inset -18px -20px 40px rgba(0,0,0,.8), 0 0 90px rgba(155,190,92,.13); }
.art-caption { position: absolute; bottom: 20px; width: 100%; display: flex; justify-content: space-between; color: #757570; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.footer { min-height: 76px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #73726e; font-size: 10px; letter-spacing: .04em; }
.footer a { color: #a5a49f; }
.footer a:hover { color: var(--text); }

@media (min-width: 1500px) { .hero { min-height: 700px; } }
@media (max-width: 760px) {
  .page { padding: 0 7%; }
  .topbar { min-height: 76px; }
  .status { max-width: 160px; text-align: right; line-height: 1.5; }
  .hero { grid-template-columns: 1fr; gap: 0; padding: 70px 0 35px; min-height: auto; }
  .hero-copy { padding: 0; }
  h1 { font-size: clamp(66px, 17vw, 104px); }
  .intro { max-width: 350px; }
  .art { min-height: 300px; margin: 10px -6% 0; }
  .orbit { width: min(66vw, 340px); }
  .orbit-one { width: min(80vw, 410px); }
  .orbit-three { width: min(48vw, 240px); }
  .art::before { width: min(82vw, 420px); }
  .orb { width: clamp(125px, 34vw, 190px); }
  .footer { min-height: 70px; gap: 12px; font-size: 9px; }
}
@media (max-width: 420px) {
  .status { max-width: 125px; font-size: 9px; }
  .footer span:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }