/* ============================================================
   ECLIPSE 2026 — STYLES
   Dark-committed design. The subject is a total solar eclipse;
   a light mode would fight the content, so we paint one look.
   ============================================================ */

:root {
  --void:        #05060a;
  --void-2:      #0a0c14;
  --panel:       rgba(255, 255, 255, 0.035);
  --panel-brd:   rgba(255, 255, 255, 0.09);
  /* Lime-green corona, tuned to sit near Robinhood's signature green.
     --corona is the pale outer glow, --flare the saturated core. */
  --corona:      #c6f74e;
  --corona-hot:  #e8ffb0;
  --flare:       #7ee026;
  --chromo:      #37c93a;
  --ink:         #e8eaf2;
  --ink-dim:     #9aa0b4;
  --ink-faint:   #5c6377;

  /* Brand colours for the venue buttons. Uniswap's pink at full strength
     overpowers the page, so the button uses a softened pair of it. */
  --uniswap:     #FF37C7;
  --uniswap-soft:#f272cf;
  --uniswap-pale:#f9a3e0;

  /* The floating circle's ring, dimmed to sit closer to the hero corona.
     At full strength it read ~12x brighter than the eclipse it echoes. */
  --ring-1:      #4f7d21;
  --ring-2:      #6d9c2c;
  --ring-3:      #8bb44a;
  --ring-4:      #2f6b30;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  --maxw: 972px;

  /* DexScreener + GMGN + the two 12px gaps in .btn-row. The contract field
     subtracts this so it ends flush with the Uniswap button. */
  --venue-btns-w: 303px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   STARFIELD — canvas sits behind everything
   ============================================================ */
#stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(48px, 7vh, 80px) 24px clamp(36px, 5vh, 60px);
  overflow: hidden;
}

/* The eclipse itself: a black disc with a corona bleeding out */
/* Sized against viewport HEIGHT as well as width — the countdown is the
   point of this page and must clear the fold on short laptop screens. */
.eclipse-stage {
  position: relative;
  width: min(230px, 46vw, 26vh);
  aspect-ratio: 1;
  margin-bottom: clamp(20px, 4vh, 38px);
  display: grid;
  place-items: center;
}

.corona {
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(232, 255, 176, 0.00) 32%,
      rgba(198, 247, 78, 0.30) 34.5%,
      rgba(126, 224, 38, 0.16) 42%,
      rgba(55, 201, 58, 0.07)  55%,
      rgba(55, 201, 58, 0.00)  72%);
  filter: blur(2px);
  animation: breathe 7s ease-in-out infinite;
}

/* Second, sharper ring right at the limb — the "diamond" edge glow */
.corona-inner {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, 0) 47.5%,
    rgba(232, 255, 176, 0.85) 49.2%,
    rgba(198, 247, 78, 0.25) 51.5%,
    rgba(198, 247, 78, 0) 60%);
  filter: blur(1.5px);
  animation: breathe 7s ease-in-out infinite reverse;
}

.moon {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #0d0f18 0%, #05060a 70%);
  box-shadow:
    0 0 0 1px rgba(198, 247, 78, 0.14),
    0 0 90px 12px rgba(126, 224, 38, 0.10),
    inset 0 0 60px rgba(0, 0, 0, 0.9);
  z-index: 2;
}

@keyframes breathe {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.045); }
}

.kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--corona);
  margin-bottom: clamp(12px, 2vh, 20px);
  opacity: 0.9;
}

.hero h1 {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  font-weight: 800;
  background: linear-gradient(180deg, #fff 12%, var(--corona) 62%, var(--flare) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: clamp(24px, 4.5vh, 40px);
}

/* ============================================================
   COUNTDOWN
   ============================================================ */
/* No card chrome — the numbers carry it. Thin dividers keep the four
   units grouped without boxing them in. */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: min(660px, 100%);
  margin: 0 auto 22px;
}

.unit {
  padding: 0 4px;
  position: relative;
}

.unit + .unit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 32%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent, rgba(255, 255, 255, 0.13), transparent);
}

.unit .num {
  font-family: var(--mono);
  font-size: clamp(2.5rem, 10vw, 4.2rem);
  font-weight: 700;
  color: var(--corona-hot);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  display: block;
  line-height: 1;
  text-shadow: 0 0 34px rgba(198, 247, 78, 0.28);
}

.unit .lbl {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 12px;
  display: block;
}

.utc-note {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}

/* Live / happening-now state */
.live-banner {
  display: none;
  background: linear-gradient(90deg, var(--chromo), var(--flare));
  color: #04140a;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 13px 22px;
  border-radius: 999px;
  margin: 0 auto 20px;
  width: fit-content;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.62; } }

/* ============================================================
   SECTIONS
   ============================================================ */
section { position: relative; z-index: 1; padding: 96px 0; }

.section-head { margin-bottom: 44px; max-width: 62ch; }

.section-head .eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--flare);
  display: block;
  margin-bottom: 14px;
}

.section-head h2 {
  font-size: clamp(1.75rem, 4.4vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 14px;
}

.section-head p { color: var(--ink-dim); }

/* The token heading is a sentence, not a title — size it closer to body
   copy so it doesn't shout over the card it introduces. */
#token .section-head h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 600;
  color: var(--ink-dim);
  letter-spacing: -0.01em;
  max-width: 48ch;
  line-height: 1.4;
}

/* Forced break only where there is room for it; on narrow screens the
   sentence should wrap wherever it naturally falls. */
.wrap-md { display: none; }
@media (min-width: 621px) {
  .wrap-md { display: inline; }
}

/* ---------- Fact strip ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--panel-brd);
  border: 1px solid var(--panel-brd);
  border-radius: 16px;
  overflow: hidden;
}

.fact { background: var(--void-2); padding: 26px 22px; }

.fact .v {
  font-family: var(--mono);
  font-size: 1.5rem;
  color: var(--corona);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}

.fact .k {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- Where to watch ---------- */
.locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
}

.loc {
  background: var(--panel);
  border: 1px solid var(--panel-brd);
  border-radius: 16px;
  padding: 24px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.loc:hover { border-color: rgba(198, 247, 78, 0.34); transform: translateY(-3px); }

.loc .flag { font-size: 1.5rem; display: block; margin-bottom: 12px; }

.loc h3 { font-size: 1.12rem; margin-bottom: 4px; }

.loc .region {
  font-size: 0.76rem;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.loc dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; }
.loc dt { font-size: 0.76rem; color: var(--ink-faint); }
.loc dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.83rem;
  color: var(--ink);
  text-align: right;
}
.loc dd.hi { color: var(--corona); }

.loc .note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-brd);
  font-size: 0.82rem;
  color: var(--ink-dim);
}

/* ---------- Path table (compact replacement for the card grid) ---------- */
.path-table {
  border: 1px solid var(--panel-brd);
  border-radius: 16px;
  overflow: hidden;
  background: var(--void-2);
}

.path-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.7fr;
  gap: 16px;
  align-items: center;
  padding: 15px 22px;
  border-bottom: 1px solid var(--panel-brd);
}
.path-row:last-child { border-bottom: 0; }

.path-head {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: rgba(255, 255, 255, 0.02);
  padding: 11px 22px;
}

.path-row .place { font-weight: 600; font-size: 0.95rem; }
.path-row .place em,
.path-row .time em {
  font-style: normal;
  color: var(--ink-faint);
  font-size: 0.76rem;
  margin-left: 7px;
}

.path-row .time {
  font-family: var(--mono);
  font-size: 0.88rem;
  color: var(--ink);
}

.path-row .dur {
  font-family: var(--mono);
  font-size: 0.88rem;
  color: var(--corona);
  text-align: right;
  font-weight: 700;
}

.path-warn {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--ink-dim);
  padding-left: 14px;
  border-left: 2px solid var(--flare);
}
.path-warn strong { color: var(--ink); }

/* ---------- Safety ---------- */
.safety {
  margin-top: 40px;
  border: 1px solid rgba(255, 77, 77, 0.28);
  background: linear-gradient(180deg, rgba(255, 77, 77, 0.07), rgba(255, 77, 77, 0.015));
  border-radius: 18px;
  padding: 30px;
}
.safety h3 { font-size: 1.1rem; margin-bottom: 10px; color: #ffb0b0; }
.safety p { color: var(--ink-dim); font-size: 0.93rem; }
.safety p + p { margin-top: 10px; }

/* ============================================================
   TOKEN
   ============================================================ */
.token-card {
  border: 1px solid var(--panel-brd);
  border-radius: 22px;
  padding: 38px;
  background:
    radial-gradient(900px 340px at 50% -12%, rgba(126, 224, 38, 0.13), transparent 68%),
    var(--void-2);
}

.token-top {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.token-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #05060a 44%, var(--corona) 47%, var(--flare) 62%, transparent 76%);
  flex-shrink: 0;
}

.token-name { font-size: 1.32rem; font-weight: 700; }
.token-sym  { font-family: var(--mono); color: var(--ink-faint); font-size: 0.86rem; }

.chain-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--corona);
  border: 1px solid rgba(198, 247, 78, 0.28);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
}

.rh-mark {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  display: block;
}

/* Contract row */
.ca-label {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

/* Address field and chain badge share a row, so the space to the right of
   a short address is used rather than left blank. */
.ca-line {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

/* Matches the Uniswap button below it. That button is flex:1 in a row with
   two fixed-width venue buttons, so its width is the card minus those two
   plus the gaps between them — mirror that here rather than letting this
   row stretch to the badge, which is narrower. */
.ca-row {
  display: flex;
  flex: 0 0 auto;
  width: calc(100% - var(--venue-btns-w));
  min-width: 0;
  align-items: stretch;
  gap: 14px;
  max-width: 100%;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid var(--panel-brd);
  border-radius: 13px;
  padding: 9px 9px 9px 20px;
}

/* flex:1 pushes the copy button to the right edge of the field instead of
   leaving it tucked against the end of the address. */
.ca-row code {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--ink);
  overflow-x: auto;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  scrollbar-width: none;
}
.ca-row code::-webkit-scrollbar { display: none; }

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--void);
  background: var(--corona);
  border: 0;
  border-radius: 8px;
  padding: 11px 15px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.12s ease;
  flex-shrink: 0;
  min-width: 86px;
}

.copy-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.copy-btn:hover  { background: var(--corona-hot); }
.copy-btn:active { transform: scale(0.96); }
.copy-btn.done   { background: #6ee7a8; }
.copy-btn:disabled { background: var(--ink-faint); cursor: not-allowed; }

/* Buttons */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 27px;
  border-radius: 12px;
  font-weight: 650;
  font-size: 0.94rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.2s ease;
  white-space: nowrap;
}

/* Uniswap pink — the venue's own colour, so the button reads as "this
   takes you to Uniswap" rather than as another site button. */
.btn-primary {
  background: linear-gradient(135deg, var(--uniswap-pale), var(--uniswap-soft));
  color: #2a0520;
  box-shadow: 0 8px 26px rgba(255, 55, 199, 0.16);
  flex: 1;
  min-width: 210px;
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #fbb6e8, var(--uniswap));
  box-shadow: 0 12px 34px rgba(255, 55, 199, 0.3);
}

/* Secondary venues are references, not the action — keep them compact so
   the Uniswap button takes the room they give up. */
.btn-ghost {
  background: var(--panel);
  border-color: var(--panel-brd);
  color: var(--ink);
  padding: 15px 16px;
  font-size: 0.86rem;
  gap: 7px;
  flex: 0 0 auto;
}
.btn-ghost:hover { border-color: rgba(198, 247, 78, 0.34); transform: translateY(-2px); }

.btn[aria-disabled="true"] {
  opacity: 0.42;
  pointer-events: none;
  filter: grayscale(0.5);
}

/* Pending-launch notice */
.pending {
  display: none;
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: 11px;
  background: rgba(198, 247, 78, 0.07);
  border: 1px solid rgba(198, 247, 78, 0.2);
  font-size: 0.86rem;
  color: var(--corona);
}

.risk-note {
  margin-top: 22px;
  font-size: 0.8rem;
  color: var(--ink-faint);
  line-height: 1.6;
}

/* ---------- "After totality" hook ---------- */
.after {
  margin-top: 26px;
  padding: 34px 38px;
  border: 1px solid var(--panel-brd);
  border-radius: 18px;
  background:
    radial-gradient(680px 240px at 8% 0%, rgba(126, 224, 38, 0.09), transparent 70%),
    var(--void-2);
}

.after-eyebrow {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--flare);
  display: block;
  margin-bottom: 16px;
}

.after-line {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink-dim);
  margin-bottom: 18px;
  max-width: 60ch;
}

.after-line strong {
  color: var(--corona);
  font-weight: 700;
  display: block;
  margin-top: 4px;
}

.after-sub {
  font-size: 0.95rem;
  color: var(--ink-faint);
  line-height: 1.75;
  /* Wider than the usual reading measure — this block sits alone in a
     card, so the extra width reads as deliberate rather than sprawling. */
  max-width: 84ch;
}

.after-sub + .after-sub { margin-top: 14px; }

.after-sub strong { color: var(--ink-dim); font-weight: 650; }

.after-sub a {
  color: var(--corona);
  font-weight: 750;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 247, 78, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.after-sub a:hover {
  color: var(--corona-hot);
  border-bottom-color: var(--corona-hot);
}

@media (max-width: 620px) {
  .after { padding: 26px 22px; }
}

/* ---------- External-link icon inside the primary button ---------- */
.btn-ext-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.45;
}

/* ---------- Venue logos on the secondary buttons ---------- */
.venue-logo {
  height: 17px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

/* DexScreener ships as a single-colour mark, so it inherits button text
   colour; GMGN's logo has its own palette and is left alone. */
.venue-logo-dex {
  width: 15px;
  height: 15px;
  color: var(--ink);
}

.venue-logo-gmgn { height: 17px; }

/* ---------- Chart ---------- */
.chart-shell {
  margin-top: 26px;
  border: 1px solid var(--panel-brd);
  border-radius: 18px;
  overflow: hidden;
  background: var(--void-2);
  position: relative;
  height: 520px;
}

.chart-shell iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 30px;
  color: var(--ink-faint);
}
.chart-empty .big { font-size: 2rem; opacity: 0.5; }

/* ============================================================
   ECLIPSE VIDEO DOCK
   Small player pinned top-right, expandable to a full-screen
   overlay. Renders nothing until a YouTube URL is configured.
   ============================================================ */
.video-dock {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 70;
  width: 288px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--void-2);
  border: 1px solid var(--panel-brd);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.25s ease;
}
.video-dock[hidden] { display: none; }
.video-dock:hover { box-shadow: 0 18px 52px rgba(0, 0, 0, 0.7); }

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border-top: 1px solid var(--panel-brd);
}

.video-label {
  flex: 1;
  min-width: 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-expand {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--panel-brd);
  background: var(--panel);
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.video-expand:hover { color: var(--corona); border-color: rgba(198, 247, 78, 0.4); }
.video-expand svg { width: 13px; height: 13px; }

/* Expanded: the dock becomes a centred overlay with a backdrop. */
.video-dock.expanded {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: auto;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  border: 0;
  border-radius: 0;
  background: rgba(2, 4, 2, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: none;
}
.video-dock.expanded .video-frame {
  width: min(1100px, 100%);
  max-height: 78vh;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--panel-brd);
}
.video-dock.expanded .video-bar {
  width: min(1100px, 100%);
  border-top: 0;
  padding: 0;
}
.video-dock.expanded .video-label { font-size: 0.85rem; color: var(--ink); }

body.video-open { overflow: hidden; }

/* Phones: sit under the header area at a size that still leaves the
   hero readable, and drop the dock entirely on very short screens. */
@media (max-width: 720px) {
  .video-dock { width: 172px; top: 12px; right: 12px; border-radius: 11px; }
  .video-label { font-size: 0.62rem; }
  .video-bar { padding: 6px 6px 6px 9px; }
  .video-dock.expanded { padding: 14px; }
}

@media (max-height: 560px) and (max-width: 720px) {
  .video-dock:not(.expanded) { display: none; }
}

/* ============================================================
   FLOATING BUY CTA
   Pinned right, vertically centred. The rotating border is a
   conic gradient spun via an @property-animated angle; browsers
   without @property just get a static gradient ring.
   ============================================================ */
@property --fab-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.buy-fab {
  position: fixed;
  right: 26px;
  /* Sits low rather than centred — at 50% it competed with the headline
     for attention; down here it reads as a footnote you scroll toward. */
  top: 72%;
  transform: translateY(-50%);
  z-index: 60;
  text-decoration: none;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  padding: 2px;                      /* thickness of the spinning ring */
  background: conic-gradient(
    from var(--fab-angle),
    var(--ring-1), var(--ring-2), var(--ring-3), var(--ring-4), var(--ring-1));
  animation: fab-spin 4s linear infinite;
  box-shadow: 0 10px 34px rgba(126, 224, 38, 0.10);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

@keyframes fab-spin {
  to { --fab-angle: 360deg; }
}

.buy-fab:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 14px 44px rgba(126, 224, 38, 0.22);
}
.buy-fab:active { transform: translateY(-50%) scale(0.98); }

.fab-inner {
  position: relative;
  z-index: 1;                        /* above the progress ring */
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #070a06;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.fab-text {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  line-height: 1.3;
}

.fab-text strong {
  color: var(--corona);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

/* Glyph swaps arrow -> check when the token section is reached. */
.fab-glyph {
  position: relative;
  width: 17px;
  height: 17px;
  color: var(--corona);
}
.fab-glyph svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

/* Three states: before the token (down arrow), at it (check),
   past it (up arrow — the useful direction is now backwards). */
.glyph-arrow { animation: fab-bob 1.7s ease-in-out infinite; }
.glyph-check,
.glyph-up { opacity: 0; transform: scale(0.6); }

.buy-fab.at-token .glyph-arrow,
.buy-fab.past-token .glyph-arrow { opacity: 0; transform: scale(0.6); animation: none; }

.buy-fab.at-token .glyph-check { opacity: 1; transform: scale(1); }

.buy-fab.past-token .glyph-up {
  opacity: 1;
  transform: scale(1);
  animation: fab-bob-up 1.7s ease-in-out infinite;
}

@keyframes fab-bob-up {
  0%, 100% { transform: translateY(2px);  opacity: 0.75; }
  50%      { transform: translateY(-3px); opacity: 1; }
}

/* Nudges downward to suggest scrolling. */
@keyframes fab-bob {
  0%, 100% { transform: translateY(-2px); opacity: 0.75; }
  50%      { transform: translateY(3px);  opacity: 1; }
}

/* Scroll-progress ring, drawn over the spinning gradient border. */
.fab-progress {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);       /* start the sweep at 12 o'clock */
  pointer-events: none;
}

.fab-track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 6;
}

.fab-bar {
  fill: none;
  stroke: var(--ring-3);
  stroke-width: 6;
  stroke-linecap: round;
  /* 2πr for r=47 ≈ 295.3 — set as the dash length so offset maps to progress */
  stroke-dasharray: 295.3;
  stroke-dashoffset: 295.3;
  transition: stroke-dashoffset 0.15s linear;
}

.buy-fab.at-token .fab-bar { stroke: var(--flare); }

/* Between ~720px and 1100px the countdown spans nearly the full width, so a
   vertically-centred circle lands on top of it. Pin it to the bottom-right
   instead, below the timer entirely. */
@media (max-width: 1100px) {
  .buy-fab {
    top: auto;
    bottom: 24px;
    transform: none;
  }
  .buy-fab:hover { transform: scale(1.06); }
  .buy-fab:active { transform: scale(0.98); }
}

/* On phones, shrink and drop to the bottom-right so it clears content
   and sits where the thumb already is. */
@media (max-width: 720px) {
  .buy-fab {
    top: auto;
    bottom: 18px;
    right: 16px;
    width: 100px;
    height: 100px;
    transform: none;
  }
  .buy-fab:hover { transform: scale(1.06); }
  .buy-fab:active { transform: scale(0.98); }
  .fab-text { font-size: 0.6rem; letter-spacing: 0.07em; }
  .fab-glyph { width: 15px; height: 15px; }
}

/* Short phones (~640px tall): the hero and countdown fill the viewport
   edge to edge, leaving nowhere for the circle to sit without covering the
   timer. Hide it over the hero and fade it in once the reader scrolls. */
@media (max-height: 700px) and (max-width: 720px) {
  .buy-fab {
    width: 78px;
    height: 78px;
    bottom: 10px;
    right: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .buy-fab.scrolled { opacity: 1; visibility: visible; }
  .fab-text { font-size: 0.48rem; letter-spacing: 0.04em; }
  .fab-inner { gap: 2px; }
  .fab-glyph { width: 12px; height: 12px; }
}

/* Browsers without @property can't animate the angle; keep a static ring
   rather than a stuck-looking animation. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .buy-fab {
    background: linear-gradient(135deg, var(--flare), var(--corona));
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .buy-fab { animation: none; }
  .glyph-arrow { animation: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--panel-brd);
  padding: 46px 0 60px;
  text-align: center;
}

.footer-links {
  display: flex;
  gap: 26px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.footer-links a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--corona); }

/* Social links stand out from the in-page nav links beside them. */
.footer-links a.social-link {
  color: var(--corona);
  font-weight: 750;
  letter-spacing: 0.06em;
}
.footer-links a.social-link:hover { color: var(--corona-hot); }

footer .fine {
  color: var(--ink-faint);
  font-size: 0.78rem;
  max-width: 66ch;
  margin: 0 auto;
  line-height: 1.7;
}

footer .copyright {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--panel-brd);
  color: var(--ink-faint);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
}
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 620px) {
  section { padding: 68px 0; }
  /* Short phones (~640px tall) need the hero a touch tighter to keep
     the countdown and its UTC line above the fold. */
  .hero { padding-top: clamp(36px, 5vh, 56px); }
  .eclipse-stage { width: min(200px, 44vw, 24vh); }
  .countdown { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .unit { padding: 0 2px; }
  .unit .lbl { font-size: 0.52rem; letter-spacing: 0.16em; margin-top: 9px; }
  .token-card { padding: 24px 20px; }
  /* Buttons stack on phones, so there is nothing to align to — go full width. */
  .ca-row { flex-direction: column; padding: 13px; gap: 12px; width: 100%; }
  .copy-btn { padding: 11px; width: 100%; }
  .btn-primary { min-width: 100%; }
  .btn { width: 100%; }
  .safety { margin-top: 30px; padding: 24px; }
  .chart-shell { height: 440px; }
  .chain-badge { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}