:root {
  color-scheme: dark;
  --page: #071006;
  --text: #fffdfb;
  --muted: #d7e2cf;
  --lime: #aaff00;
  --acid: #d9ff27;
  --deep-green: #163d0a;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: #030702;
  color: var(--text);
  font-family: "DM Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.landing-shell {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  margin: 0 auto;
  max-width: 430px;
  background:
    radial-gradient(ellipse 78% 30% at 50% 18%, rgba(109, 212, 13, .22), transparent 70%),
    radial-gradient(ellipse 120% 55% at -2% 84%, rgba(44, 116, 11, .25), transparent 62%),
    linear-gradient(145deg, #020602 0%, #071006 50%, #031006 74%, #0d2405 100%);
}

.ambient { position: absolute; pointer-events: none; z-index: -1; border-radius: 999px; filter: blur(24px); }
.ambient-top { top: 6%; left: 17%; width: 78%; height: 25%; background: rgba(138, 255, 0, .13); }
.ambient-bottom { right: -28%; bottom: 3%; width: 105%; height: 26%; background: rgba(71, 173, 9, .16); }

.hero {
  min-height: 100svh;
  padding: clamp(3.5rem, 8.5svh, 6.3rem) 2.15rem 2.45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.brand { width: min(58vw, 15rem); line-height: 0; filter: drop-shadow(0 .55rem 1.15rem rgba(148, 255, 0, .27)); }
.brand img { display: block; width: 100%; height: auto; border-radius: 50%; mix-blend-mode: screen; }

.eyebrow { margin: 1.35rem 0 1.1rem; color: var(--acid); font-size: .82rem; font-weight: 700; letter-spacing: .29em; text-shadow: 0 0 .8rem rgba(184, 255, 0, .42); }

h1 { margin: 0; font-size: clamp(2.34rem, 9.9vw, 2.68rem); line-height: 1.2; letter-spacing: -.055em; font-weight: 800; }
h1 strong { color: var(--acid); font: inherit; text-shadow: 0 0 1.2rem rgba(170, 255, 0, .25); }

.actions { width: 100%; margin-top: 1.7rem; }

.action {
  width: 100%;
  min-height: 6.38rem;
  padding: 1rem 1.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .86rem;
  border-radius: 1.45rem;
  color: white;
  text-decoration: none;
  font-size: 1.48rem;
  font-weight: 700;
  letter-spacing: -.045em;
  transition: transform 180ms ease, filter 180ms ease;
}

.action:hover { filter: brightness(1.08); transform: translateY(-2px); }
.action:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.action svg { width: 1.93rem; height: 1.93rem; flex: 0 0 auto; }

.action-primary {
  color: #071006;
  background: linear-gradient(115deg, #b9ff10, #e0ff2f 48%, #91e900);
  box-shadow: 0 0 0 1.5rem rgba(134, 246, 12, .1), 0 .7rem 2rem rgba(153, 255, 0, .24);
}

.action-primary svg { margin-left: .3rem; }
.redirect-note { margin: 2.3rem 0 2.72rem; color: #d7e2cf; font-size: 1.03rem; letter-spacing: -.038em; }

.action-telegram {
  min-height: 6.08rem;
  background: linear-gradient(115deg, #367b14, #70bd16);
  box-shadow: 0 .65rem 1.9rem rgba(103, 220, 14, .2);
  font-size: 1.36rem;
}

.action-telegram svg { width: 2rem; height: 2rem; }

@media (max-height: 760px) {
  .hero { padding-top: 2.5rem; }
  .brand { width: min(54vw, 12rem); }
  .eyebrow { margin-top: 1.1rem; }
  .actions { margin-top: 1.8rem; }
  .action { min-height: 5.65rem; }
  .redirect-note { margin: 1.6rem 0 1.9rem; }
}

@media (min-width: 431px) {
  body { padding: 1.5rem; }
  .landing-shell { border-radius: 1.55rem; min-height: calc(100svh - 3rem); box-shadow: 0 1.5rem 6rem rgba(0, 0, 0, .42); }
  .hero { min-height: calc(100svh - 3rem); }
}