:root {
  color-scheme: dark;
  --page: #07130f;
  --page-deep: #040a07;
  --panel: #0d1b14;
  --line: #263a2d;
  --text: #f4f7f3;
  --muted: #a1b0a5;
  --lime: #a8d94d;
  --lime-light: #c6e86b;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--page-deep); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 50% 5%, #123c2b 0%, #0a1d14 40%, var(--page-deep) 100%);
  color: var(--text);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

.page-shell { display: flex; width: min(100%, 1440px); min-height: calc(100vh - 34px); flex-direction: column; margin-inline: auto; }
.site-header { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--display); font-size: 15px; font-weight: 750; letter-spacing: -.035em; text-decoration: none; }
.brand img { width: 38px; height: 38px; border: 1px solid #ffffff25; border-radius: 11px; object-fit: cover; }
.header-note { display: inline-flex; align-items: center; gap: 8px; color: #bfcec2; font-size: 12px; font-weight: 600; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px #a8d94d19; }

.hero { position: relative; display: flex; min-height: min(740px, calc(100vh - 140px)); flex: 1; flex-direction: column; justify-content: center; overflow: hidden; margin-block: 14px 18px; padding: 50px 24px 32px; border: 1px solid #d9f0d015; border-radius: 26px; background: linear-gradient(155deg, #0d2117ed, #07120df5 75%); box-shadow: 0 26px 100px #0007, inset 0 1px #ffffff09; isolation: isolate; }
.hero::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 30%, #14432d77, transparent 51%), linear-gradient(140deg, #ffffff04, transparent 35%); content: ""; }
.hero-content { position: relative; z-index: 1; display: flex; width: min(100%, 720px); flex-direction: column; align-items: center; align-self: center; text-align: center; }
.logo-frame { display: grid; width: clamp(112px, 18vw, 170px); aspect-ratio: 1; place-items: center; margin-bottom: clamp(25px, 4vw, 42px); padding: 6px; border: 1px solid #a8d94d55; border-radius: 31%; background: linear-gradient(145deg, #173d28, #0b1b12); box-shadow: 0 0 0 9px #a8d94d0a, 0 18px 55px #0006; }
.hero-logo { display: block; width: 100%; height: 100%; border-radius: 26%; object-fit: cover; }
.eyebrow { margin: 0 0 15px; color: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: .18em; line-height: 1.5; }
h1 { max-width: 100%; margin: 0; color: var(--text); font-family: var(--display); font-size: clamp(38px, 7vw, 76px); font-weight: 760; letter-spacing: -.075em; line-height: 1.04; }
.coming-soon { margin: 23px 0 0; color: var(--lime-light); font-size: clamp(15px, 2.2vw, 20px); font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.accent-rule { width: clamp(46px, 8vw, 72px); height: 3px; margin: 23px 0 17px; border-radius: 3px; background: var(--lime); box-shadow: 0 0 18px #a8d94d66; }
.tagline { max-width: 540px; margin: 0; color: #c2d0c5; font-size: clamp(17px, 2.6vw, 22px); font-weight: 450; letter-spacing: -.02em; }
.orb { position: absolute; z-index: 0; width: clamp(300px, 42vw, 620px); aspect-ratio: 1; border: 1px solid #a8d94d0e; border-radius: 50%; pointer-events: none; }
.orb::before, .orb::after { position: absolute; inset: 11%; border: 1px solid #a8d94d0a; border-radius: inherit; content: ""; }
.orb::after { inset: 23%; }
.orb-one { top: -45%; left: -24%; }
.orb-two { right: -24%; bottom: -57%; width: clamp(360px, 50vw, 700px); }
.hero-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: auto; padding-top: 35px; color: #819388; font-size: 11px; font-weight: 600; }
.footer-line { width: min(12vw, 95px); height: 1px; background: linear-gradient(90deg, transparent, #a8d94d66, transparent); }
.site-footer { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 7px 0 3px; color: #7f9084; font-size: 11px; text-align: center; }
.site-footer p { margin: 0; }
.footer-mark { color: var(--lime); font-size: 10px; font-weight: 850; letter-spacing: .14em; }

@media (max-width: 560px) {
  body { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .page-shell { min-height: calc(100svh - 24px); }
  .site-header { min-height: 55px; gap: 8px; }
  .brand { gap: 8px; font-size: 13px; }
  .brand img { width: 34px; height: 34px; border-radius: 10px; }
  .header-note { max-width: 145px; font-size: 10px; text-align: right; }
  .hero { min-height: min(650px, calc(100svh - 112px)); margin-block: 9px 10px; padding: 36px 18px 22px; border-radius: 20px; }
  .logo-frame { margin-bottom: 27px; border-radius: 28%; }
  .eyebrow { max-width: 250px; font-size: 9px; letter-spacing: .14em; }
  .coming-soon { margin-top: 20px; letter-spacing: .2em; }
  .accent-rule { margin-top: 21px; }
  .tagline { max-width: 300px; }
  .hero-footer { gap: 9px; font-size: 9px; }
  .footer-line { width: 26px; }
  .site-footer { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}