:root {
  color-scheme: dark;
  --base: #0d1f1b;
  --mint: #3fc98e;
  --white: #fff;
  --muted: rgb(255 255 255 / 68%);
  --line: rgb(255 255 255 / 14%);
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--base);
  color: var(--white);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .24em; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; }
img { display: block; max-width: 100%; }
p { line-height: 1.55; }
h1, h2, h3, p, figure { margin: 0; }
[hidden] { display: none !important; }

.teaser {
  isolation: isolate;
  position: relative;
  min-block-size: 100vh;
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
}
.ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 63% 26%, rgb(63 201 142 / 9%), transparent 53%);
}
.halo {
  position: absolute;
  left: 50%;
  top: 51%;
  width: clamp(330px, 64vmin, 680px);
  aspect-ratio: 1;
  transform: translate(-50%, -39%) rotate(-24deg);
}
.halo::before, .halo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 25deg, transparent 7%, rgb(63 201 142 / 10%) 32%, rgb(63 201 142 / 72%) 63%, rgb(63 201 142 / 32%) 79%, transparent 98%);
  mask-image: radial-gradient(circle closest-side, transparent 94%, #fff 98%, transparent 100%);
}
.halo::before { filter: blur(14px); opacity: .8; }
.halo::after { filter: blur(3px); opacity: .54; }
.teaser-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 64px 24px 40px;
}
.teaser-lockup { display: grid; justify-items: center; text-align: center; }
.mark {
  width: 108px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(63 201 142 / 42%);
  border-radius: 28px;
  background: var(--base);
  box-shadow: 0 0 40px rgb(63 201 142 / 10%);
}
.teaser h1 {
  margin-block-start: 23px;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1;
  letter-spacing: -.063em;
  font-weight: 680;
}
.mint-rule { margin-block-start: clamp(36px, 8vh, 82px); width: 37px; height: 1px; background: var(--mint); }
.soon { margin-block-start: 17px; font-size: clamp(1.25rem, 3vw, 1.65rem); font-weight: 350; }
.teaser-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 24px max(30px, env(safe-area-inset-bottom));
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 17px;
  border: 1px solid var(--mint);
  border-radius: 8px;
  font-weight: 650;
  text-decoration: none;
  background: var(--mint);
  color: var(--base);
}
.button:hover { background: var(--white); color: var(--base); border-color: var(--white); }
.button-quiet { background: transparent; color: var(--white); border-color: rgb(63 201 142 / 46%); }
.socials { display: flex; align-items: center; gap: 8px; }
.social-placeholder {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
}

.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: absolute; left: 20px; top: 12px; z-index: 4; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.mast { min-height: 82px; display: flex; justify-content: space-between; gap: 20px; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 9px; align-items: center; font-weight: 720; text-decoration: none; white-space: nowrap; }
.nav { display: flex; flex-wrap: wrap; gap: 10px 23px; align-items: center; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--white); text-decoration: underline; }
.release { isolation: isolate; position: relative; }
.release .ambient { bottom: auto; height: min(780px, 110vw); }
.release .halo { left: 79%; top: 38%; }
.hero { padding-block: clamp(55px, 11vw, 130px) clamp(64px, 11vw, 120px); max-width: 790px; }
.hero h1 { margin-block-start: 12px; font-size: clamp(2.8rem, 8vw, 6.4rem); letter-spacing: -.065em; line-height: .99; font-weight: 670; }
.hero h1 span { color: var(--mint); }
.eyebrow { color: var(--mint); font-size: .86rem; font-weight: 650; letter-spacing: .03em; }
.lead { margin-block: 24px; max-width: 48ch; color: var(--muted); font-size: clamp(1.08rem, 2.2vw, 1.35rem); }
.hint { margin-block-start: 10px; color: var(--muted); font-size: .9rem; }
.section { padding-block: clamp(39px, 7vw, 80px); border-top: 1px solid var(--line); }
.section h2, .legal h1 { margin-block-end: 14px; font-size: clamp(2rem, 5.1vw, 3.6rem); letter-spacing: -.053em; line-height: 1.08; }
.section > p { color: var(--muted); max-width: 66ch; }
.steps, .benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-block-start: 28px; }
.steps figure, .benefits article, .plan { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.frame { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 10px; text-align: center; color: var(--muted); border: 1px dashed rgb(63 201 142 / 35%); border-radius: 7px; }
.steps figcaption, .benefits p { margin-block-start: 10px; color: var(--muted); line-height: 1.55; }
.steps figcaption strong { color: var(--white); display: block; margin-block-end: 4px; }
.plan { display: grid; justify-items: start; gap: 12px; max-width: 620px; margin-block-start: 20px; }
.plan p, .legal p { color: var(--muted); }
.faq details { border-bottom: 1px solid var(--line); max-width: 780px; padding-block: 16px; }
.faq summary { cursor: pointer; font-weight: 630; }
.faq details p { margin-block-start: 12px; color: var(--muted); }
.footer { padding-block: 28px; border-top: 1px solid var(--line); }
.footer .nav { margin-block-start: 15px; }
.legal { max-width: 780px; padding-block: 55px; }
.legal h2 { margin-block: 32px 8px; }
.legal .eyebrow { margin-block-end: 12px; }

@media (max-width: 680px) {
  .mast { flex-wrap: wrap; gap: 10px; padding-block: 15px; }
  .mast > * { width: 100%; }
  .steps, .benefits { grid-template-columns: minmax(0, 1fr); }
  .release .halo { left: 75%; top: 55%; }
}
@media (max-width: 360px) {
  .teaser-footer { gap: 10px; padding-inline: 14px; }
  .wrap { width: calc(100% - 36px); }
}
@media (max-height: 540px) and (orientation: landscape) {
  .teaser-main { padding-block: 28px 12px; }
  .mark { width: 70px; border-radius: 19px; }
  .mark img { width: 54px; height: 54px; }
  .teaser h1 { margin-block-start: 14px; }
  .mint-rule { margin-block-start: 23px; }
}