/* ==========================================================================
   Seb Futures — core stylesheet

   Charcoal + neon purple. The background is a lifted charcoal rather than
   pure black, and depth comes from neon glows in the accent colour.

   ONE purple, three lightnesses. All three sit on hue 272 — if you add a
   shade, match that hue or the theme visibly drifts blue. Split by role,
   which is what keeps it readable:
     --purple        #9d3fef  L59  fills, marks, glows. FAILS as text
                              (3.5:1 on cards), so never use it for copy.
     --purple-bright #c98cff  L78  the neon used as TEXT. 7.6:1 on the
                              page, 6.8:1 on cards.
     --purple-deep   #7c12d9  L46  the dark end of every gradient.
   Never hard-code a purple hex outside this block. The rgba(157, 63, 239)
   values below are --purple at partial alpha; rgba(201, 140, 255) is
   --purple-bright.
   Titles and key figures are neon; body copy is a light gray so long-form
   reading stays comfortable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Charcoal — lifted off pure black so surfaces can stack */
  --bg:            #0a0a0e;
  --bg-elev:       #101015;  /* unused while section banding is off */
  --surface:       #15151b;
  --surface-2:     #1c1c24;
  --border:        #2a2a35;
  --border-soft:   #20202a;
  --paper-deep:    #060609;  /* unused: the footer sits on --bg now */

  /* Neon purple */
  --purple:        #9d3fef;  /* fills, marks, glow — never text */
  --purple-bright: #c98cff;  /* the neon, used as text */
  --purple-deep:   #7c12d9;  /* gradient ends — same hue as --purple, darker */
  --purple-soft:   rgba(157, 63, 239, 0.18);
  --purple-line:   rgba(157, 63, 239, 0.46);
  --purple-ring:   rgba(157, 63, 239, 0.44);
  --purple-glow:   rgba(157, 63, 239, 0.6);

  /* Order-flow colours */
  --blue:          #4d84ff;
  --red:           #ff5c78;
  --red-ink:       #ff7a90;
  --green:         #2fd4b4;
  --green-ink:     #4fe3c6;

  /* Ink */
  --text:          #f4f4f8;
  --text-mid:      #c8c8d8;
  --text-dim:      #9a9ab0;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius:    16px;
  --radius-sm: 11px;
  --radius-lg: 24px;

  /* On charcoal a shadow reads as depth, a glow reads as light */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow:    0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);

  --glow-sm:   0 0 12px rgba(157, 63, 239, 0.5);
  --glow-md:   0 0 22px rgba(157, 63, 239, 0.6);
  --glow-lg:   0 0 42px rgba(157, 63, 239, 0.55);

  /* The neon "lit" look on type */
  --glow-text: 0 0 18px rgba(201, 140, 255, 0.55), 0 0 38px rgba(157, 63, 239, 0.35);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Height of the sticky promo bar. main.js measures the real value
     and overwrites this, so the nav always parks directly beneath it. */
  --promo-h: 46px;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--promo-h) + 90px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text-mid);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection {
  background: var(--purple);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--purple-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Typography
   Titles carry the neon. h1/h2 also glow; h3 does not, so the hierarchy
   still reads when a page has a dozen card headings.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  line-height: 1.12;
  letter-spacing: -0.032em;
  font-weight: 800;
  color: var(--purple-bright);
}

h1, h2 { text-shadow: var(--glow-text); }

h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.85rem); }
h3 { font-size: clamp(1.12rem, 1.9vw, 1.32rem); letter-spacing: -0.02em; }

p { color: var(--text-mid); }

.lede {
  font-size: clamp(1.04rem, 1.6vw, 1.2rem);
  font-weight: 500;
  color: var(--text);
  max-width: 62ch;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.up   { color: var(--green-ink); }
.down { color: var(--red-ink); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 24px;
}

.container--narrow { max-width: 820px; }

.section { padding-block: clamp(68px, 9vw, 116px); }
.section--tight { padding-block: clamp(52px, 6vw, 78px); }

/* Section banding is off: the whole page sits on one flat --bg. The class is
   still on the markup, so restoring the alternating bands is this rule alone:
     background: var(--bg-elev);
     border-block: 1px solid var(--border-soft);
   Cards keep their own --surface fill, which is what separates content now. */
.section--alt { background: transparent; }

.section__head {
  max-width: 720px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head p { margin-top: 16px; }

/* Split heading — plain lead word, neon payoff, echoing the hero title */
.h2--split { color: var(--text); text-shadow: none; }
.h2--split em {
  font-style: normal;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
}

/* Eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mid);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 20px;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: var(--glow-sm);
}

/* Stacking context for the ambient glows */
.glow-bg { position: relative; isolation: isolate; }

/* --------------------------------------------------------------------------
   5. Promo bar — continuous marquee

   The track holds two identical groups and slides exactly -50%, so the
   second group lands where the first began and the loop is seamless.
   Each group is min-width:100vw, which keeps the bar filled on ultrawide
   screens without more copies in the markup.
   -------------------------------------------------------------------------- */
.promo {
  display: block;
  position: sticky;
  top: 0;
  z-index: 101;              /* above the nav, which parks beneath it */
  background: linear-gradient(100deg, var(--purple-deep) 0%, var(--purple) 55%, var(--purple-deep) 100%);
  box-shadow: 0 2px 30px rgba(157, 63, 239, 0.6);
  color: #fff;
  padding-block: 11px;
  overflow: hidden;
  transition: box-shadow 0.25s;
}

.promo:hover { box-shadow: 0 2px 42px rgba(157, 63, 239, 0.7); }

.promo__track {
  display: flex;
  width: max-content;
  animation: promo-scroll-right 34s linear infinite;
}

/* Let people read the code without chasing it */
.promo:hover .promo__track { animation-play-state: paused; }

.promo__group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-shrink: 0;
  min-width: 100vw;
}

.promo__item {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding-inline: 28px;
  white-space: nowrap;
  color: inherit;
  transition: opacity 0.18s;
}

.promo__item:hover { opacity: 0.82; }

@keyframes promo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Same trick mirrored: start a group's width to the left and travel back to
   zero, so the bar reads right-to-left with no seam. */
@keyframes promo-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.promo__logo {
  height: 19px;
  width: auto;
  flex-shrink: 0;
}

.promo__brand {
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: #fff;
}

.promo__divider {
  width: 1px;
  height: 15px;
  background: rgba(255, 255, 255, 0.38);
}

.promo__text {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
}

.promo__code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  padding: 2px 9px;
  margin-left: 2px;
}

/* --------------------------------------------------------------------------
   6. Navigation — floating bubble with a neon ring
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: var(--promo-h);       /* sits right below the sticky promo bar */
  z-index: 100;
  padding: 16px 24px 0;
}

.nav__bubble {
  position: relative;
  max-width: 1020px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  background: rgba(24, 24, 30, 0.96);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 22px;
  padding: 9px 14px 9px 18px;
  /* Neon ring + even glow wrapping the whole bubble, over a deep cast shadow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px var(--purple-ring),
    0 0 26px 2px rgba(157, 63, 239, 0.38),
    0 10px 30px -6px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.3s var(--ease);
}

.nav.is-stuck .nav__bubble {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px var(--purple-ring),
    0 0 20px 1px rgba(157, 63, 239, 0.32),
    0 8px 24px -6px rgba(0, 0, 0, 0.75);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--text);
  justify-self: start;
}

/* Brand mark — assets/logo-dark.png (light linework, for charcoal) */
.brand__mark {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}

/* SEB glows; FUTURES stays white */
.brand__text { color: var(--text); }

.brand__text span {
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
}

/* Centre column — page titles */
.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-self: center;
}

.nav__links > a {
  padding: 8px 15px;
  border-radius: 11px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  transition: color 0.18s, background 0.18s, text-shadow 0.18s;
}

.nav__links > a:hover {
  color: var(--purple-bright);
  background: var(--purple-soft);
}

.nav__links > a.active {
  color: var(--purple-bright);
  font-weight: 600;
  background: var(--purple-soft);
  text-shadow: var(--glow-text);
}

.nav__links > a.nav__cta {
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
  box-shadow: var(--glow-sm);
  margin-left: 4px;
}

.nav__links > a.nav__cta:hover {
  color: #fff;
  box-shadow: var(--glow-md);
}

/* Highlighted nav item — a slow neon pulse ringing the link so the
   giveaway reads as the standout action without shouting. */
.nav__links > a.nav__hl {
  color: var(--purple-bright);
  font-weight: 600;
  background: var(--purple-soft);
  animation: nav-hl 2.6s ease-in-out infinite;
}

@keyframes nav-hl {
  0%, 100% {
    box-shadow: 0 0 0 1px var(--purple-line), 0 0 9px rgba(157, 63, 239, 0.3);
    text-shadow: 0 0 10px rgba(201, 140, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 0 1px var(--purple), 0 0 22px 2px rgba(157, 63, 239, 0.75);
    text-shadow: var(--glow-text);
  }
}

/* Hold the pulse while the pointer is on it, so it is easy to read */
.nav__links > a.nav__hl:hover { animation-play-state: paused; }

/* Right column — socials */
.nav__social {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}

.nav__social a {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--text);
  transition: color 0.2s, background 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}

.nav__social a:hover {
  color: #fff;
  background: var(--purple);
  transform: translateY(-2px);
  box-shadow: var(--glow-md);
}

.nav__social svg { width: 17px; height: 17px; }

.nav__toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--purple-soft);
  border: 1px solid var(--purple-line);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.nav__toggle span {
  display: block;
  width: 16px;
  height: 1.7px;
  background: var(--purple-bright);
  border-radius: 2px;
  transition: transform 0.28s var(--ease), opacity 0.18s;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.18s var(--ease), background 0.18s, border-color 0.18s, box-shadow 0.25s, color 0.18s;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* White ink on the neon fill — charcoal ink fails there.
   Gradient runs fill -> deep so both ends clear 5:1 against white. */
.btn--primary {
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: #fff;
  box-shadow: var(--glow-md), 0 4px 14px rgba(0, 0, 0, 0.45);
}

.btn--primary:hover {
  box-shadow: var(--glow-lg), 0 8px 22px rgba(0, 0, 0, 0.5);
}

.btn--ghost {
  border-color: var(--purple-line);
  color: var(--purple-bright);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--purple);
  background: var(--purple-soft);
  box-shadow: var(--glow-sm);
}

/* Discord blurple — white text clears 4.6:1 on it */
.btn--discord {
  background: #5865f2;
  color: #fff;
  box-shadow: 0 0 20px rgba(88, 101, 242, 0.45), 0 4px 14px rgba(0, 0, 0, 0.45);
}

.btn--discord:hover {
  background: #4752c4;
  box-shadow: 0 0 32px rgba(88, 101, 242, 0.6), 0 8px 22px rgba(0, 0, 0, 0.5);
}

.btn--light {
  background: var(--text);
  color: #141419;
}

.btn--light:hover { background: #fff; }

.btn--sm { padding: 9px 17px; font-size: 0.85rem; }
.btn--lg { padding: 16px 32px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   7b. Head card

   Centres and constrains each page's title block. No border or panel fill —
   readability now comes from the darker page ground, which puts the title at
   8.2:1 on its own.
   -------------------------------------------------------------------------- */
.head-card {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(8px, 2vw, 20px);
}

.head-card--hero { max-width: 780px; }

.head-card .lede { margin-inline: auto; }
.head-card .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(44px, 6vw, 78px) clamp(64px, 9vw, 104px);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 960px;
  height: 560px;
  background: radial-gradient(ellipse at center, rgba(157, 63, 239, 0.3), transparent 68%);
  filter: blur(70px);
  pointer-events: none;
  z-index: -1;
}

/* Hero title: "Trade Smarter," white, the rest in the heading neon.
   Bigger and a step lighter than the global heading weight. */
.hero h1 {
  font-size: clamp(2.6rem, 6.6vw, 4.6rem);
  font-weight: 700;
  color: var(--text);
  text-shadow: none;
  margin-bottom: 16px;
}

.hero h1 em {
  font-style: normal;
  background: none;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
}

/* Bold, white — sits between the title and the lede */
.hero__kicker {
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 14px;
}

.hero .lede { margin-bottom: 32px; }

/* --------------------------------------------------------------------------
   8a. Typing animation

   The animated word is aria-hidden and a static .sr-only list carries the
   same content, so a screen reader hears the words once instead of being
   interrupted on every keystroke.
   -------------------------------------------------------------------------- */
.typer {
  color: var(--purple-bright);
  font-weight: 700;
  text-shadow: var(--glow-text);
  white-space: nowrap;
}

.typer__caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.14em;
  background: var(--purple-bright);
  box-shadow: var(--glow-sm);
  animation: caret-blink 1.05s steps(1) infinite;
}

@keyframes caret-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* The full stop belongs to the sentence, not the typed word */
.typer__stop {
  color: var(--text);
  font-weight: 500;
  text-shadow: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   8b. Partner strip + testimonial carousel

   Both reuse the marquee from the promo bar: two identical groups sliding
   exactly -50%, so the second lands where the first began and the loop has
   no seam. The duplicate group is aria-hidden so it is not read twice.
   -------------------------------------------------------------------------- */
.partners__label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 22px;
}

.partners { overflow: hidden; }

.partners__track {
  display: flex;
  width: max-content;
  animation: promo-scroll 38s linear infinite;
}

.partners__group {
  display: flex;
  align-items: center;
  gap: clamp(44px, 7vw, 88px);
  padding-right: clamp(44px, 7vw, 88px);
  flex-shrink: 0;
}

.partner {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.quotes { overflow: hidden; }

.quotes__track {
  display: flex;
  width: max-content;
  animation: promo-scroll 50s linear infinite;
}

/* Sits below the full-bleed carousel, back on the container grid */
.quotes__more { margin-top: 34px; }

.quotes__group {
  display: flex;
  align-items: flex-start;   /* screenshots differ in height; don't stretch */
  gap: 18px;
  padding-right: 18px;
  flex-shrink: 0;
}

.quote {
  width: 320px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
}

.quote blockquote {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-mid);
}

.quote__who {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}

.quote__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--purple-soft);
  border: 1px solid var(--purple-line);
  color: var(--purple-bright);
  font-size: 0.78rem;
  font-weight: 700;
}

.quote__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Testimonial wall (testimonials.html)

   Columns rather than grid, so cards of different lengths pack without
   leaving the ragged gaps a row-based grid would. Overrides the carousel's
   fixed card width.
   -------------------------------------------------------------------------- */
.quote-wall {
  column-width: 330px;
  column-gap: 20px;
}

.quote-wall .quote,
.quote-wall .shot {
  width: auto;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   Screenshot testimonial

   The image is the testimonial, so it is never cropped — width/height on the
   <img> reserve the right box while it loads, which stops the column layout
   reflowing under the reader.
   -------------------------------------------------------------------------- */
.shot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.quotes .shot { width: 320px; flex-shrink: 0; }

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot__who {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border-top: 1px solid var(--border-soft);
}

.shot__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--purple-soft);
  border: 1px solid var(--purple-line);
  color: var(--purple-bright);
  font-size: 0.76rem;
  font-weight: 700;
}

.shot__name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}

/* Results disclaimer under the wall */
.wall-note {
  margin-top: 26px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-dim);
  text-align: center;
}

.back-row { margin-bottom: 22px; }
.back-row--end { margin: 34px 0 0; text-align: center; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-mid);
  transition: color 0.18s;
}

.back-link:hover { color: var(--purple-bright); }
.back-link svg { width: 17px; height: 17px; }
.back-row--end .btn svg { width: 17px; height: 17px; }

/* Three-up variant for the highlight row */
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --------------------------------------------------------------------------
   9. Stat strip
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  /* auto-fit, so the row adapts to however many .stat blocks exist
     (home has 3, Discord has 4) instead of leaving an empty column */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  text-align: center;
  transition: transform 0.28s var(--ease), border-color 0.28s, box-shadow 0.28s;
}

.stat:hover {
  transform: translateY(-3px);
  border-color: var(--purple-line);
  box-shadow: var(--glow-sm), var(--shadow);
}

.stat__num {
  font-family: var(--font-mono);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
  line-height: 1.1;
}

.stat__label {
  margin-top: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-mid);
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform 0.28s var(--ease), border-color 0.28s, box-shadow 0.28s;
}

.card:hover {
  transform: translateY(-5px);
  border-color: var(--purple-line);
  box-shadow: var(--glow-md), var(--shadow-lg);
}

.card__icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--purple-soft);
  border: 1px solid var(--purple-line);
  color: var(--purple-bright);
  margin-bottom: 18px;
}

.card__icon svg { width: 19px; height: 19px; }

.card h3 { margin-bottom: 9px; }
.card p { font-size: 0.925rem; }

/* Numbered step cards */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  counter-reset: step;
}

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  transition: transform 0.28s var(--ease), border-color 0.28s, box-shadow 0.28s;
}

.step:hover {
  transform: translateY(-5px);
  border-color: var(--purple-line);
  box-shadow: var(--glow-md), var(--shadow-lg);
}

.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
  margin-bottom: 14px;
}

.step h3 { margin-bottom: 8px; }
.step p { font-size: 0.9rem; }

/* Feature list with checkmarks */
.check-list { display: grid; gap: 13px; }

.check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--text-mid);
}

.check-list li::before {
  content: "";
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 3px;
  border-radius: 50%;
  background-color: var(--purple-soft);
  border: 1px solid var(--purple-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b06ff7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

.check-list li b { color: var(--text); font-weight: 600; }

/* Split layout */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 62px);
  align-items: center;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
}

.panel--light {
  background: var(--text);
  border-color: var(--text);
}

.panel--light h3 { color: #141419; text-shadow: none; }
.panel--light p { color: #4a4d57; }

/* --------------------------------------------------------------------------
   10b. Pricing tiers
   -------------------------------------------------------------------------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: 20px;
}

.tier {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  transition: transform 0.28s var(--ease), border-color 0.28s, box-shadow 0.28s;
}

.tier:hover {
  transform: translateY(-4px);
  border-color: var(--purple-line);
  box-shadow: var(--glow-sm), var(--shadow);
}

/* The middle tier carries the eye */
.tier--featured {
  border-color: var(--purple-line);
  box-shadow: var(--glow-md), var(--shadow-lg);
}

.tier__badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 20px;
  box-shadow: 0 0 14px rgba(157, 63, 239, 0.45);
}

/* Scaling from the left edge keeps it anchored to the card, and transform
   costs no layout, so the tier heading below never shifts. */
.tier__badge--pulse {
  transform-origin: left center;
  animation: tier-zoom 2.6s var(--ease) infinite;
}

@keyframes tier-zoom {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 14px rgba(157, 63, 239, 0.45); }
  50%      { transform: scale(1.16); box-shadow: 0 0 26px rgba(157, 63, 239, 0.8); }
}

.tier__name {
  font-size: clamp(1.16rem, 2vw, 1.3rem);
  margin-bottom: 14px;
}

.tier__sub {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  text-shadow: none;
}

.tier__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  min-height: 52px;
}

.tier__was {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-dim);
  text-decoration: line-through;
}

.tier__amount {
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
}

/* Wordy tiers get a readable size instead of the big numeral */
.tier__amount--text {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.tier__per {
  font-size: 0.86rem;
  color: var(--text-dim);
}

.tier__note {
  font-size: 0.84rem;
  color: var(--text-dim);
  margin-top: 14px;
}

.tier__list { margin: 18px 0 28px; }

/* Buttons line up across cards regardless of list length */
.tier .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   Locked tiers

   The paid plans are taped off until they exist. The cover fills the card so
   nothing behind it is clickable, and their Get Access control is a <span>
   rather than an <a>, so nothing behind it is tabbable either. Removing
   .tier--locked and the .tier__lock element opens a tier back up.
   -------------------------------------------------------------------------- */
.tier--locked {
  position: relative;
  overflow: hidden;
}

/* No lift, and no pulsing badge shimmering away under the cover */
.tier--locked:hover { transform: none; }
.tier--locked .tier__badge--pulse { animation: none; }

.tier__lock {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  cursor: not-allowed;
  background: rgba(8, 8, 12, 0.74);
  -webkit-backdrop-filter: blur(3px) saturate(0.45);
  backdrop-filter: blur(3px) saturate(0.45);
}

/* Slung across the card. Hazard stripes ride the band's edges so it reads as
   cordoned off while the label itself stays on a flat, legible ground. */
.tier__tape {
  position: relative;
  width: 132%;
  padding: 15px 12px;
  transform: rotate(-8deg);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
  background: rgba(12, 12, 17, 0.97);
  box-shadow: 0 0 30px rgba(157, 63, 239, 0.35), 0 10px 30px rgba(0, 0, 0, 0.6);
}

.tier__tape::before,
.tier__tape::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(-45deg,
    var(--purple) 0 7px, rgba(157, 63, 239, 0.16) 7px 14px);
}

.tier__tape::before { top: 0; }
.tier__tape::after  { bottom: 0; }

/* Any button rendered as a disabled span */
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. Discord channel list
   -------------------------------------------------------------------------- */
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
}

.channel {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s var(--ease);
}

.channel:hover {
  border-color: var(--purple-line);
  box-shadow: var(--glow-sm);
  transform: translateY(-3px);
}

.channel__hash {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
  line-height: 1.4;
  flex-shrink: 0;
}

.channel__name {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 3px;
}

.channel__desc {
  font-size: 0.84rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Schedule rows */
.schedule { display: grid; gap: 2px; }

.schedule__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-soft);
}

.schedule__row:last-child { border-bottom: 0; }

.schedule__time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--purple-bright);
  letter-spacing: 0.01em;
}

.schedule__title { font-weight: 600; font-size: 0.95rem; color: var(--text); margin-bottom: 3px; }
.schedule__desc { font-size: 0.86rem; color: var(--text-dim); }

/* --------------------------------------------------------------------------
   12. FAQ accordion
   -------------------------------------------------------------------------- */
.faq-group {
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 26px 10px;
}

.faq-group__title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 18px 0 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
}

.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-item:last-child { border-bottom: 0; }

.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 0;
  text-align: left;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  transition: color 0.18s, text-shadow 0.18s;
}

.faq-item__q:hover,
.faq-item.is-open .faq-item__q {
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
}

.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--purple-soft);
  border: 1px solid var(--purple-line);
  transition: background 0.22s, box-shadow 0.22s;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.6px;
  background: var(--purple-bright);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease), background 0.22s;
}

.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-item.is-open .faq-item__icon {
  background: var(--purple);
  box-shadow: var(--glow-sm);
}

.faq-item.is-open .faq-item__icon::before,
.faq-item.is-open .faq-item__icon::after { background: #fff; }
.faq-item.is-open .faq-item__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-item__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.36s var(--ease);
}

.faq-item__a > div {
  padding: 0 46px 24px 0;
  font-size: 0.94rem;
  color: var(--text-mid);
}

.faq-item__a p + p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   13. Giveaways
   -------------------------------------------------------------------------- */
.giveaway {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--purple-line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 46px);
  overflow: hidden;
  box-shadow: var(--glow-md), var(--shadow-lg);
}

.giveaway::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 90% at 8% 0%, rgba(157, 63, 239, 0.26), transparent 62%);
  pointer-events: none;
}

.giveaway > * { position: relative; }

.giveaway__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-ink);
  background: rgba(47, 212, 180, 0.12);
  border: 1px solid rgba(47, 212, 180, 0.3);
  border-radius: 100px;
  padding: 5px 13px;
  margin-bottom: 20px;
}

.giveaway__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(47, 212, 180, 0.45); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 5px rgba(47, 212, 180, 0); }
}

.giveaway__prize {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 14px;
}

.giveaway__prize span {
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
}

.giveaway__body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

/* Countdown */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.countdown__cell {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 15px 8px;
  text-align: center;
}

.countdown__val {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 600;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown__unit {
  margin-top: 7px;
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.countdown__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
  text-align: center;
}

/* Winners table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  white-space: nowrap;
}

tbody td {
  padding: 16px 20px;
  font-size: 0.9rem;
  color: var(--text-mid);
  border-bottom: 1px solid var(--border-soft);
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--purple-soft); }

td.winner { color: var(--text); font-weight: 600; }
td.prize { color: var(--purple-bright); font-family: var(--font-mono); font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--purple-line);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 68px) clamp(26px, 4vw, 48px);
  text-align: center;
  overflow: hidden;
  box-shadow: var(--glow-md), var(--shadow-lg);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(157, 63, 239, 0.28), transparent 68%);
  pointer-events: none;
}

.cta-band > * { position: relative; }

.cta-band h2 { margin-bottom: 16px; }
.cta-band p { margin: 0 auto 30px; max-width: 52ch; }

/* --------------------------------------------------------------------------
   15. Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-block: clamp(40px, 5vw, 66px) clamp(34px, 4vw, 52px);
  overflow: hidden;
}

.page-head::after {
  content: "";
  position: absolute;
  top: -290px;
  left: 50%;
  transform: translateX(-50%);
  width: 840px;
  height: 490px;
  background: radial-gradient(ellipse at center, rgba(157, 63, 239, 0.28), transparent 68%);
  filter: blur(70px);
  pointer-events: none;
  z-index: -1;
}

.page-head h1 { margin-bottom: 18px; }
.page-head .lede { margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   15b. Tabs + giveaway entry panel
   -------------------------------------------------------------------------- */
.page-head--center { text-align: center; }
.page-head--center .lede { margin-inline: auto; }

.tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto clamp(26px, 4vw, 38px);
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
}

.tab {
  padding: 10px 30px;
  border-radius: 100px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-mid);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, box-shadow 0.25s;
}

.tab:hover { color: var(--purple-bright); }

.tab[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
  box-shadow: var(--glow-sm);
}

.tab-panel[hidden] { display: none; }

.entry-panel { text-align: center; }

.entry-lead {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.35;
  margin-bottom: 26px;
}

.entry-actions {
  display: grid;
  gap: 12px;
  max-width: 420px;
  margin-inline: auto;
}

.entry-note {
  margin-top: 20px;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.entry-note a {
  color: var(--purple-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Rules stay left-aligned even though the entry panel above is centred */
#rules .check-list { text-align: left; }

@media (max-width: 460px) {
  .tab { padding: 10px 20px; font-size: 0.86rem; }
}

/* --------------------------------------------------------------------------
   16. Disclaimer + footer
   -------------------------------------------------------------------------- */
.disclaimer {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
}

.disclaimer h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--purple-bright);
  margin-bottom: 10px;
}

.disclaimer p { font-size: 0.84rem; line-height: 1.7; color: var(--text-mid); }

/* --------------------------------------------------------------------------
   Footer

   Deliberately no border-top: the page ground already runs edge to edge, so a
   rule would be the only seam left on the site. Separation comes from the last
   section's own padding instead.

   One wrapping row — brand | links | socials — then a single small line. The
   risk disclosure is collapsed rather than trimmed: the headline warning is
   the always-visible summary, and the full text stays in the DOM.
   -------------------------------------------------------------------------- */
.footer {
  background: var(--bg);
  padding-block: 30px 22px;
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.brand--sm { font-size: 0.9rem; gap: 8px; }
.brand--sm .brand__mark { height: 26px; }

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
}

.footer__nav a {
  font-size: 0.84rem;
  color: var(--text-mid);
  transition: color 0.18s, text-shadow 0.18s;
}

.footer__nav a:hover { color: var(--purple-bright); text-shadow: var(--glow-text); }

.socials { display: flex; gap: 7px; }

.socials a {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-mid);
  transition: color 0.2s, background 0.2s, transform 0.2s var(--ease), box-shadow 0.2s, border-color 0.2s;
}

.socials a:hover {
  color: #fff;
  background: var(--purple);
  border-color: var(--purple);
  transform: translateY(-2px);
  box-shadow: var(--glow-sm);
}

.socials svg { width: 14px; height: 14px; }

.footer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  margin-top: 18px;
}

.footer__copy { font-size: 0.74rem; color: var(--text-dim); }

.footer__risk { font-size: 0.74rem; color: var(--text-dim); max-width: 78ch; }

.footer__risk summary {
  cursor: pointer;
  list-style: none;
  transition: color 0.18s;
}

.footer__risk summary::-webkit-details-marker { display: none; }

/* Own marker, so the row stays one clean line */
.footer__risk summary::after {
  content: "+";
  margin-left: 7px;
  font-family: var(--font-mono);
  color: var(--text-dim);
}

.footer__risk[open] summary::after { content: "\2212"; }
.footer__risk summary:hover { color: var(--text-mid); }
.footer__risk summary strong { color: var(--text-mid); }

.footer__risk p {
  margin-top: 9px;
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   17. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .nav__links > a { padding: 8px 12px; font-size: 0.875rem; }
  .nav__bubble { gap: 12px; }
}

@media (max-width: 960px) {
  .giveaway__body { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .nav { top: var(--promo-h); padding-top: 12px; }

  /* Bubble collapses to brand | socials | burger, links become a dropdown */
  .nav__bubble {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px 8px 16px;
  }

  .nav__social { margin-left: auto; }

  .nav__links {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    background: rgba(24, 24, 30, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    box-shadow:
      0 0 0 1px var(--purple-ring),
      0 0 26px 2px rgba(157, 63, 239, 0.38),
      0 12px 30px -6px rgba(0, 0, 0, 0.75);
    transform: translateY(-10px) scale(0.98);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s, transform 0.28s var(--ease), visibility 0.24s;
  }

  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__links > a { padding: 12px 16px; font-size: 0.96rem; text-align: left; }

  .nav__toggle { display: flex; }

  .schedule__row { grid-template-columns: 1fr; gap: 5px; }
  .btn-row .btn { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  .container { padding-inline: 18px; }
  .nav { padding-inline: 14px; }
  .countdown { grid-template-columns: repeat(2, 1fr); }
  .faq-group { padding-inline: 18px; }
  .faq-item__a > div { padding-right: 8px; }
  .promo__item { gap: 9px; padding-inline: 20px; }
  .brand__text { font-size: 0.9rem; }
}

/* --------------------------------------------------------------------------
   18b. Phones

   Everything here lives inside a max-width query, so the desktop layout is
   untouched. The goal is the same design at phone scale rather than a
   different one: the desktop rhythm is built for a 1080px column and simply
   scaling it down leaves a page that is mostly empty space, so the vertical
   padding, card padding and type sizes all come down together. Nothing is
   hidden and no screenshot is cropped — only the spacing around them.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

  /* --- vertical rhythm: the single biggest win on scroll length ---------- */
  .section        { padding-block: 46px; }
  .section--tight { padding-block: 32px; }
  .section__head  { margin-bottom: 26px; }
  .section__head p { margin-top: 10px; }
  .hero           { padding-block: 26px 38px; }
  .page-head      { padding-block: 26px 22px; }
  .container      { padding-inline: 16px; }

  /* --- type scale -------------------------------------------------------
     A phone is a third the width of the desktop column, so the desktop
     heading ratios (h2 is 3.1x body, h1 4.4x) cannot survive intact: an h2
     at 3x body would be 500px wide on a 358px screen. The scale below works
     from both ends instead — headings pushed to the largest size that still
     fits the longest real title on the site, body copy eased down a step —
     which restores the hierarchy without wrapping every heading.

       h3 1.43x body  (desktop 1.43x — exact)
       h2 2.00x body  (desktop 3.08x)
       h1 2.11x body  (desktop 4.43x)
       hero 2.69x     (desktop 4.97x)
     --------------------------------------------------------------------- */
  h1            { font-size: 1.85rem; }
  h2            { font-size: 1.75rem; }
  h3            { font-size: 1.25rem; }

  /* Two of the longer h2s still cannot fit one line; balance splits them
     evenly rather than leaving one orphan word. */
  h1, h2, .lede { text-wrap: balance; }
  .hero h1      { font-size: 2.35rem; margin-bottom: 12px; }
  .hero__kicker { font-size: 1.05rem; margin-bottom: 10px; }
  .lede         { font-size: 1.05rem; }
  .hero .lede   { margin-bottom: 24px; }
  .eyebrow      { font-size: 0.64rem; padding: 5px 12px; margin-bottom: 12px; }

  /* Body copy down a step, which is the other half of the ratio */
  .card p, .faq-item__a p, .check-list li,
  .tier__note, .footer__nav a { font-size: 0.875rem; }

  /* Two short lines beat one wrapping awkwardly mid-phrase */
  .h2--split em { display: block; }

  /* --- buttons: full width, so the tap target is the whole row ---------- */
  .btn            { padding: 12px 20px; font-size: 0.9rem; }
  .btn--lg        { padding: 14px 22px; font-size: 0.94rem; }
  .btn-row        { gap: 10px; }
  .btn-row .btn   { flex: 1 1 100%; }

  /* --- stats: keep all three on one row; stacked they ate a whole screen - */
  .stats       { grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 8px; }
  .stat        { padding: 14px 8px; }
  .stat__num   { font-size: 1.15rem; }
  .stat__label { font-size: 0.66rem; line-height: 1.35; margin-top: 4px; }

  /* --- cards ------------------------------------------------------------- */
  .card-grid   { gap: 12px; }
  .card        { padding: 20px 18px; }
  .card__icon  { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 13px; }

  /* --- pricing ----------------------------------------------------------- */
  .tiers            { gap: 14px; }
  .tier             { padding: 24px 20px 22px; }
  .tier__badge      { font-size: 0.62rem; padding: 5px 12px; margin-bottom: 14px; }
  .tier__name       { margin-bottom: 10px; }
  .tier__price      { min-height: 0; margin-bottom: 4px; }
  .tier__list       { margin: 14px 0 22px; gap: 10px; }
  .check-list li    { gap: 10px; }
  .tier__tape       { font-size: 0.72rem; letter-spacing: 0.16em; padding: 12px 8px; }

  /* --- FAQ --------------------------------------------------------------- */
  .faq-group    { padding-inline: 18px; margin-bottom: 14px; }
  .faq-item__q  { padding: 16px 0; font-size: 1rem; gap: 14px; }

  /* --- testimonials ------------------------------------------------------ */
  .quotes__group  { gap: 12px; padding-right: 12px; }
  .quotes .shot   { width: min(78vw, 320px); }
  .quotes__more   { margin-top: 24px; }
  .quote-wall     { column-gap: 14px; }
  .quote-wall .shot { margin-bottom: 14px; }
  .shot__who      { padding: 10px 13px; }
  .shot__avatar   { width: 26px; height: 26px; font-size: 0.7rem; }
  .shot__name     { font-size: 0.8rem; }

  /* --- closing CTA + footer ---------------------------------------------- */
  .cta-band       { padding: 32px 20px; }
  .cta-band p     { margin-bottom: 22px; }
  .footer         { padding-block: 24px 20px; }
  .footer__bar    { justify-content: center; text-align: center; gap: 12px; }
  .footer__nav    { gap: 6px 16px; }
  .footer__foot   { justify-content: center; text-align: center; margin-top: 14px; }
  .disclaimer     { padding: 16px 18px; }
  .disclaimer p   { font-size: 0.8rem; }

  /* --- the hard purple line under the nav --------------------------------
     The desktop glow is a 960px ellipse positioned so its bright core sits
     20px below the hero's top edge. On a wide screen the ellipse is narrower
     than the hero, so overflow:hidden only nicks its corners and the cut fades
     out at both ends. At phone width the same ellipse is 2.5x wider than the
     screen, so the clip runs straight across the full width at near-peak
     brightness — and because the blur is applied to the element before the
     parent clips it, nothing softens that edge. Refit so the gradient has
     already faded to transparent at every boundary it gets clipped on.
     ---------------------------------------------------------------------- */
  .hero::after {
    top: -60px;
    width: 140vw;
    height: 460px;
    filter: blur(56px);
  }

  /* --- top bar ----------------------------------------------------------- */
  .nav              { padding: 10px 14px 0; }
  .nav__bubble      { gap: 8px; padding: 7px 8px 7px 12px; border-radius: 18px; }
  .brand__mark      { height: 26px; }
  .brand__text      { font-size: 0.82rem; }
  .nav__social      { gap: 2px; }
  .nav__social a    { width: 30px; height: 30px; border-radius: 9px; }
  .nav__social svg  { width: 16px; height: 16px; }
  .nav__toggle      { width: 32px; height: 32px; border-radius: 9px; }
  .nav__links       { padding: 10px; border-radius: 16px; top: calc(100% + 9px); }
  .nav__links > a   { padding: 11px 14px; font-size: 0.92rem; }

  /* The desktop glow is sized for a 1020px bubble; at phone width the same
     spread reads as a purple haze around the whole bar. */
  .nav__bubble {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 0 1px var(--purple-ring),
      0 0 14px 1px rgba(157, 63, 239, 0.3),
      0 8px 20px -6px rgba(0, 0, 0, 0.7);
  }

  /* --- promo marquee ----------------------------------------------------- */
  .promo          { padding-block: 9px; }
  .promo__item    { gap: 8px; padding-inline: 16px; }
  .promo__brand   { font-size: 0.79rem; }
  .promo__text    { font-size: 0.79rem; }
  .promo__code    { font-size: 0.76rem; padding: 2px 7px; }
  .partners__label { margin-bottom: 14px; }
}

/* Small phones — 360px and below */
@media (max-width: 380px) {
  .hero h1     { font-size: 2.1rem; }
  h1           { font-size: 1.65rem; }
  h2           { font-size: 1.58rem; }
  h3           { font-size: 1.16rem; }
  .lede        { font-size: 1rem; }
  .card p, .faq-item__a p, .check-list li { font-size: 0.85rem; }
  .brand__text { font-size: 0.78rem; }
  .stat__num   { font-size: 1.02rem; }
  .stat__label { font-size: 0.61rem; }
  .stat        { padding: 12px 6px; }
  .container   { padding-inline: 14px; }
}

/* --------------------------------------------------------------------------
   19. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }

  /* Caret sits solid; initTyper() also skips the animation entirely */
  .typer__caret { animation: none !important; opacity: 1; }

  .tier__badge--pulse {
    animation: none !important;
    transform: scale(1.16);
    box-shadow: 0 0 26px rgba(157, 63, 239, 0.8);
  }

  /* Hold the highlighted nav item lit rather than frozen mid-pulse */
  .nav__links > a.nav__hl {
    animation: none !important;
    box-shadow: 0 0 0 1px var(--purple), 0 0 14px rgba(157, 63, 239, 0.5);
    text-shadow: var(--glow-text);
  }

  /* Park the marquee as a single static, centred message */
  .promo { overflow: hidden; }
  .promo__track { animation: none !important; transform: none !important; width: 100%; }
  .promo__group { min-width: 0; justify-content: center; width: 100%; }
  .promo__group + .promo__group { display: none; }
  .promo__item + .promo__item { display: none; }
}