/* ==========================================================
   HOME PAGE (index.html; loaded after style.css and leaderboard.css)
   The toaster.gg-style layout in KLEO's look, top to bottom:
   hero (crowned logo, blurb, Leaderboard + Discord, scroll hint) → How to join (a self-filling
   Stake sign-up form beside steps 1–3) → Leaderboard preview (crowned podium) → KLEO × Stake
   Rewards → Slot Deck → Join the community → footer. The script is renderHome() in app.js.
   ========================================================== */

/* ---------- 1 · Welcome ---------- */
.h2-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 88vh;
  min-height: 88svh;
  padding-top: 96px;
  padding-bottom: 40px;
  text-align: center;
}
/* scroll hint at the bottom of the hero: floats up and down, the wheel rolls; fades once you scroll */
.h2-hero { position: relative; padding-bottom: 96px; }
.h2-section { scroll-margin-top: 70px; }
.h2-scroll {
  position: absolute;
  left: 50%;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 64px;
  padding: 0;
  border: 0;
  background: none;
  color: #d9f4ff;
  cursor: pointer;
  opacity: 0.75;
  translate: -50% 0;
  transition: opacity 0.4s ease, color 0.2s ease;
}
.h2-scroll svg { animation: h2-lift 2.5s ease-in-out 1s infinite; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.h2-scroll-wheel { animation: h2-wheel 1.8s ease-in-out infinite; }
.h2-scroll:hover { opacity: 1; color: #fff; }
.h2-scroll:hover svg { filter: drop-shadow(0 0 10px rgba(76, 201, 255, 0.7)); }
.h2-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 14px; opacity: 1; }
.h2-scroll.gone { opacity: 0; pointer-events: none; }
@keyframes h2-lift { 0%, 100% { translate: 0 8px; } 50% { translate: 0 -8px; } }
@keyframes h2-wheel { 0% { translate: 0 0; opacity: 1; } 70% { translate: 0 6px; opacity: 0; } 100% { translate: 0 0; opacity: 0; } }
@media (max-width: 760px) { .h2-scroll { display: none; } }   /* not on phones */
.h2 .home-logo-wrap { margin-top: min(11vw, 84px); width: min(520px, 80vw); }
.h2-lead {
  max-width: 560px;
  margin: 26px auto 0;
  font-size: clamp(15.5px, 1.7vw, 17.5px);
  font-weight: 500;
  line-height: 1.65;
  color: rgba(234, 246, 255, 0.82);
  text-wrap: balance;
  animation: lb-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
}
.h2-lead a { color: var(--brand); font-weight: 700; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 0.25s ease; }
.h2-lead a:hover { background-size: 100% 1.5px; }
.h2-gold { color: var(--gold); }
.h2 .home-actions { margin-top: 30px; }
.h2 .home-cta { min-width: 210px; }
.h2-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 210px;
  min-height: 54px;
  padding: 12px 26px;
  border-radius: 999px;
  background: rgba(6, 13, 26, 0.55);
  box-shadow: inset 0 0 0 1.5px rgba(234, 246, 255, 0.55);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.h2-ghost svg { color: #fff; }
.h2-ghost:hover { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1.5px #fff, 0 0 24px -8px rgba(255, 255, 255, 0.6); }
.h2-ghost:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.h2-stake { display: block; width: auto; height: 30px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.h2-x .h2-stake { width: auto; height: 36px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }

/* ---------- primary buttons (Join now, Become a leader, Sign up on Stake) ----------
   filled sapphire blue with white text and a soft offset shadow */
.h2 { --pri-bg: linear-gradient(180deg, #4d8dff 0%, #2563eb 50%, #1a47c2 100%); --pri-bg-hi: linear-gradient(180deg, #6aa1ff 0%, #3474f2 50%, #1f52d1 100%); --pri-ink: #ffffff; --pri-edge: rgba(8, 25, 90, 0.6); --pri-shadow: rgba(30, 80, 220, 0.55); }
.h2-primary {
  background: var(--pri-bg);
  color: var(--pri-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 0 var(--pri-edge), 0 10px 22px -10px var(--pri-shadow);
}
.h2-primary:hover { background: var(--pri-bg-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 var(--pri-edge), 0 14px 28px -10px var(--pri-shadow); }
.h2-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* ---------- 2b · How to join (self-filling Stake sign-up form) ---------- */
/* no panel: the form sits straight on the page with a soft crystal glow, the steps beside it (under it on phones) */
.su-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; max-width: 940px; margin: 30px auto 0; text-align: left; }
.su-topline { display: none; }
.su-stage {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 430px;
  padding: 20px;
  background: radial-gradient(55% 55% at 50% 50%, rgba(76, 201, 255, 0.14), transparent 70%);
}
/* the form leans like a card tossed on the table, on a crystal slab */
.su-tilt { position: relative; width: 290px; transform: skewX(-9deg); }
.su-slab { position: absolute; inset: 0; border-radius: 14px; translate: 14px 14px; background: linear-gradient(160deg, #d9f6ff 0%, #4cc9ff 40%, #1a5fc0 100%); box-shadow: 0 0 30px -6px rgba(76, 201, 255, 0.7); transition: translate 0.3s ease-out, box-shadow 0.3s ease-out; }
/* hover (like customk.live): the form lifts a little and the slab slides further out behind it */
.su-stage:hover .su-slab { translate: 20px 20px; box-shadow: 0 0 40px -4px rgba(76, 201, 255, 0.9); }
.su-stage:hover .su-form { translate: 0 -5px; box-shadow: 0 28px 50px rgba(0, 0, 0, 0.6); }
.su-form {
  transition: translate 0.3s ease-out, box-shadow 0.3s ease-out;
  position: relative;
  padding: 16px 22px 22px;
  border-radius: 14px;
  background: #1a2c38;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: "Outfit", sans-serif;
}
.su-head { display: flex; align-items: center; justify-content: space-between; color: #b1bad3; }
.su-head img { height: 26px; width: auto; }
.su-h { margin: 10px 0 2px; font-size: 16px; font-weight: 800; }
.su-lbl { margin: 12px 0 5px; font-size: 11.5px; font-weight: 700; color: #b1bad3; }
.su-lbl i { font-style: normal; color: #ed4163; }
.su-input {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  background: #0f212e;
  box-shadow: inset 0 0 0 2px #2f4553;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: box-shadow 0.2s ease;
}
.su-input.focus { box-shadow: inset 0 0 0 2px #557086; }
.su-caret { display: none; width: 1.5px; height: 15px; margin-left: 1px; background: #fff; animation: su-blink 1s steps(1) infinite; }
.su-input.focus .su-caret { display: inline-block; }
@keyframes su-blink { 50% { opacity: 0; } }
.su-eye { margin-left: auto; color: #b1bad3; }
.su-check { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 12px; font-weight: 700; }
.su-box { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; box-shadow: inset 0 0 0 2px #2f4553; color: transparent; transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; }
.su-check.on .su-box { background: #1475e1; box-shadow: inset 0 0 0 2px #1475e1; color: #fff; }
.su-ref { height: 0; margin-top: 0; overflow: hidden; transition: height 0.35s ease, margin-top 0.35s ease; }
.su-ref.open { height: 40px; margin-top: 8px; padding: 2px 0; }
.su-btn { display: grid; place-items: center; height: 40px; margin-top: 16px; border-radius: 6px; background: #1475e1; font-size: 13.5px; font-weight: 800; transition: transform 0.12s ease, background-color 0.2s ease; }
.su-btn.press { transform: scale(0.97); background: #105eb8; }
.su-cursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; transition: transform 0.65s cubic-bezier(0.45, 0.05, 0.25, 1); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.su-cursor svg { display: block; transform: skewX(9deg); transition: scale 0.12s ease; }   /* stand the pointer back up */
.su-cursor.down svg { scale: 0.82; }

/* the steps beside it */
.su-copy { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 14px 4px 0; }
.su-steps { width: 100%; }
.su-steps { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.su-steps li { display: flex; gap: 16px; }   /* all three steps at full brightness */
.su-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transform: skewX(-9deg);
  background: rgba(76, 201, 255, 0.12);
  box-shadow: inset 0 0 0 1.5px rgba(76, 201, 255, 0.5);
}
.su-num b { transform: skewX(9deg); font-family: "Teko", sans-serif; font-weight: 700; font-size: 25px; line-height: 1; padding-top: 3px; color: var(--brand); }
.su-steps .su-num { background: var(--pri-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 16px -6px var(--pri-shadow); }
.su-steps .su-num b { color: var(--pri-ink); }
.su-steps h3 { margin: 4px 0 0; font-family: "Teko", sans-serif; font-weight: 700; font-size: 29px; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; }
.su-code { color: var(--gold); text-transform: capitalize; }   /* "Kleo", even inside the caps title */
.su-steps p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: rgba(234, 246, 255, 0.74); text-wrap: pretty; }
.su-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.su-actions .su-go { gap: 10px; margin-top: 0; }   /* level with the code button */
.su-copy { align-items: flex-start; padding: 0; }

@media (max-width: 760px) {
  .su-card { grid-template-columns: 1fr; gap: 10px; max-width: 520px; }
  .su-copy { padding-top: 4px; }
  .su-stage { min-height: 410px; }
  .su-tilt { width: 268px; }
  .su-actions { flex-direction: column; align-items: stretch; align-self: stretch; }
  .su-actions .h2-codebtn { justify-content: center; }
}

/* ---------- shared section bits ---------- */
.h2-section { position: relative; padding-top: 120px; text-align: center; }
.h2-title { margin: 0; }
/* Type roles (front page):
   display  — section titles: Anton, normal case, one size, solid white on a crystal-blue edge
   accent   — the gold line under a title: Teko caps, solid gold
   subhead  — step titles and community names: Teko caps
   numerals — prizes, step numbers, the code: Teko, tabular
   body     — Outfit 16–17px, 1.6 leading, ~60ch
   label    — Outfit 13–14px sentence case, muted (no tiny tracked caps) */
.h2-head {
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(50px, 8.2vw, 86px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-wrap: balance;
  color: #f2fbff;
  text-shadow: 0 3px 0 #1a5fc0, 0 6px 14px rgba(0, 0, 0, 0.55);   /* solid white on a crystal-blue edge */
}
.h2 .cs-opens {
  margin-top: 12px;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: 0.08em;
  background: none;
  color: var(--gold);
  filter: none;
  text-shadow: 0 2px 0 rgba(90, 55, 0, 0.85);
}
.h2 .cs-prize { font-variant-numeric: tabular-nums; }
.h2 .cs-open { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: rgba(234, 246, 255, 0.6); }
.h2 ::selection { background: rgba(76, 201, 255, 0.35); color: #fff; }
.h2-big-btn { min-width: 230px; min-height: 54px; margin-top: 30px; border-radius: 999px; font-size: 15px; }
.h2-text { max-width: 520px; margin: 18px auto 0; font-size: 16px; line-height: 1.65; color: rgba(234, 246, 255, 0.75); text-wrap: pretty; }

/* ---------- 3 · Leaderboard preview ---------- */
.h2-lb .cs-podium { max-width: 520px; }

/* podium hover: the place you point at steps forward (crown lifts upright and glows, its plinth rises
   and lights in its metal, the wager shows), the other two step back. Smooth ease-out, no bounce. */
.h2-lb .cs-spot { color: inherit; text-decoration: none; cursor: pointer; transition: opacity 0.3s ease; outline: none; }
.h2-lb .cs-podium:has(.cs-spot:is(:hover, :focus-visible)) .cs-spot:not(:hover, :focus-visible) { opacity: 0.45; }
.h2-lb .cs-spot .lb-crown { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease; }
.h2-lb .cs-spot:is(:hover, :focus-visible) .lb-crown {
  transform: translateY(-8px) rotate(0deg) scale(1.08);
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 16px rgba(var(--metal), 0.85));
}
/* keep the silver and bronze tints on the crystal crowns while they glow */
.h2-lb .cs-spot.r2:is(:hover, :focus-visible) .lb-crown-png { filter: grayscale(1) brightness(1.45) contrast(1.05) drop-shadow(0 10px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 16px rgba(201, 209, 223, 0.85)); }
.h2-lb .cs-spot.r3:is(:hover, :focus-visible) .lb-crown-png { filter: sepia(1) saturate(1.6) hue-rotate(-18deg) brightness(1) drop-shadow(0 10px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 16px rgba(213, 138, 82, 0.85)); }
.h2-lb .cs-prize, .h2-lb .cs-open { transition: color 0.25s ease; }
.h2-lb .cs-spot:is(:hover, :focus-visible) .cs-open { color: #fff; }
.cs-wager {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--metal));
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin-top 0.35s ease;
}
.h2-lb .cs-spot:is(:hover, :focus-visible) .cs-wager { max-height: 20px; margin-top: 3px; opacity: 1; }
.h2-lb .cs-plinth { transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; }
.h2-lb .cs-spot:is(:hover, :focus-visible) .cs-plinth {
  height: 56px;
  background: linear-gradient(180deg, rgba(var(--metal), 0.42), rgba(var(--metal), 0.08) 85%);
  box-shadow: inset 0 1.5px 0 rgba(var(--metal), 1), inset 0 0 0 1px rgba(var(--metal), 0.35), 0 -10px 30px -12px rgba(var(--metal), 0.6);
  color: rgba(var(--metal), 0.95);
}
.h2-lb .cs-spot.r1:is(:hover, :focus-visible) .cs-plinth { height: 80px; }
.h2-lb .cs-spot.r3:is(:hover, :focus-visible) .cs-plinth { height: 44px; }
.h2-lb .cs-spot:focus-visible .cs-prize { text-decoration: underline; text-underline-offset: 4px; }
/* the gold crown also gets the leaderboard page's glint and sparks */
.h2-lb .cs-spot.r1:is(:hover, :focus-visible) .lb-glint { animation: lb-glint 1.6s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
.h2-lb .cs-spot.r1:is(:hover, :focus-visible) .lb-spark-h { animation: lb-spark 1.3s ease-in-out infinite; }
.h2-lb .cs-spot.r1:is(:hover, :focus-visible) .lb-sh2 { animation-delay: 0.35s; }
.h2-lb .cs-spot.r1:is(:hover, :focus-visible) .lb-sh3 { animation-delay: 0.65s; }
.h2-lb .cs-spot.r1:is(:hover, :focus-visible) .lb-sh4 { animation-delay: 0.95s; }
@media (hover: none) { .h2-lb .cs-wager { max-height: 20px; margin-top: 3px; opacity: 1; } }   /* phones: just show it */

/* ---------- 4 · Slot Deck ---------- */
.h2-deck { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; text-align: left; }
.h2-left { margin-left: 0; justify-content: flex-start; }
.h2-left::before { display: none; }
.h2-deck .h2-text { margin-left: 0; }
.h2-fan { position: relative; height: 380px; }
.h2-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  aspect-ratio: 450 / 590;
  overflow: hidden;
  border-radius: 16px;
  background: #0c1a30;
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.9);
  translate: -50% -50%;
  transition: rotate 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), translate 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.h2-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.h2-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px #2a5fb8, inset 0 0 0 5px rgba(6, 18, 40, 0.65); }   /* dark-blue rail */
/* three real slot cards fanned out (left one furthest back) */
.h2-card:nth-child(1) { rotate: -16deg; translate: -92% -46%; }
.h2-card:nth-child(2) { rotate: -3deg; translate: -54% -54%; z-index: 1; }
.h2-card:nth-child(3) { rotate: 12deg; translate: -10% -44%; z-index: 2; }
.h2-fan:hover .h2-card:nth-child(1) { rotate: -20deg; translate: -102% -46%; }
.h2-fan:hover .h2-card:nth-child(3) { rotate: 16deg; translate: 0% -42%; }
.h2-stats { display: flex; gap: 10px; margin-top: 18px; }
.h2-stats span { padding: 8px 14px; border-radius: 999px; background: rgba(6, 13, 26, 0.7); box-shadow: inset 0 0 0 1px rgba(76, 201, 255, 0.25); font-size: 13px; font-weight: 700; color: rgba(234, 246, 255, 0.75); }
.h2-stats b { color: var(--brand); font-variant-numeric: tabular-nums; }

/* ---------- 5 · Rewards ---------- */
.h2-vip { padding-bottom: 20px; }
.h2-x { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 14px; color: rgba(234, 246, 255, 0.5); font-weight: 700; }
.h2-x img { width: 92px; height: auto; filter: drop-shadow(0 0 10px rgba(76, 201, 255, 0.4)); }
.h2-vip-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; }
.h2-vip-actions .h2-big-btn { margin-top: 0; }
.h2-codebtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(6, 13, 26, 0.6);
  box-shadow: inset 0 0 0 1.5px rgba(234, 246, 255, 0.3);
  color: rgba(234, 246, 255, 0.6);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: box-shadow 0.2s ease, color 0.2s ease;
}
.h2-codebtn b { color: #fff; text-transform: capitalize; }
.h2-codebtn:hover { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(234, 246, 255, 0.8); }
.h2-codebtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.h2-vip .cs-link { display: inline-block; margin-top: 22px; }
/* casino objects floating round the section */
.h2-float { position: absolute; z-index: -1; height: auto; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6)); animation: h2-float 7s ease-in-out infinite; }
.h2-float.f1 { width: 120px; left: 4%; top: 150px; rotate: -16deg; animation-delay: -1s; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(245, 197, 66, 0.45)); }
.h2-float.f2 { width: 70px; left: 20%; top: 110px; opacity: 0.55; filter: blur(1.5px); animation-delay: -3s; }
.h2-float.f3 { width: 150px; right: 2%; top: 300px; animation-delay: -2s; }
.h2-float.f4 { width: 64px; right: 18%; top: 120px; opacity: 0.6; filter: blur(1px); animation-delay: -4.5s; }
.h2-float.f5 { width: 96px; left: 9%; top: 380px; animation-delay: -5.5s; }
@keyframes h2-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

/* ---------- 6 · Community ---------- */
/* no boxes: a caps title, one line on why, three open columns split by hairlines (a glossy app icon
   standing on its own coloured light, the name, a small outlined action), then the other socials */
.h2-community { padding-bottom: 110px; }
.h2-community .h2-head { font-size: clamp(38px, 5.4vw, 60px); text-transform: uppercase; letter-spacing: 0.01em; }
.h2-signup .h2-head { text-transform: uppercase; letter-spacing: 0.01em; }   /* "HOW TO JOIN" */
.h2-comm-sub { max-width: 46ch; margin: 14px auto 0; font-size: 16px; line-height: 1.6; color: rgba(234, 246, 255, 0.7); text-wrap: balance; }
.h2-socials { display: flex; justify-content: center; max-width: 760px; margin: 40px auto 0; }
.h2-soc {
  --c: 76, 201, 255;
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 6px 18px 4px;
  color: #fff;
  text-decoration: none;
}
.h2-soc + .h2-soc::before { content: ""; position: absolute; left: 0; top: 6%; bottom: 6%; width: 1px; background: linear-gradient(transparent, rgba(76, 201, 255, 0.3), transparent); }
.h2-soc-kick { --c: 83, 252, 24; }
.h2-soc-youtube { --c: 255, 48, 64; }
.h2-soc-discord { --c: 124, 134, 255; }
.h2-soc:focus-visible { outline: 2px solid rgb(var(--c)); outline-offset: 6px; border-radius: 14px; }
.h2-soc-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.4), rgba(var(--c), 0.92) 42%, rgba(0, 0, 0, 0.38));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.65), inset 0 -4px 10px rgba(0, 0, 0, 0.35), 0 14px 24px -12px rgba(0, 0, 0, 0.85);
  color: #fff;
  transition: translate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* the coloured light it stands on */
.h2-soc-icon::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -18px;
  height: 12px;
  border-radius: 50%;
  background: rgba(var(--c), 0.55);
  filter: blur(9px);
  opacity: 0.55;
  transition: opacity 0.3s ease, translate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.h2-soc-icon svg { width: 36px; height: 36px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)); }
.h2-soc:hover .h2-soc-icon { translate: 0 -6px; }
.h2-soc:hover .h2-soc-icon::after { opacity: 0.95; translate: 0 6px; }
.h2-soc b { margin-top: 24px; padding-top: 3px; font-family: "Teko", sans-serif; font-weight: 700; font-size: 32px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }
.h2-soc small { margin-top: 2px; font-size: 14px; color: rgba(234, 246, 255, 0.6); }
.h2-soc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 7px 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(var(--c), 0.55);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--c));
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.h2-soc-btn::after { content: "→"; transition: translate 0.2s ease; }
.h2-soc:hover .h2-soc-btn { background: rgba(var(--c), 0.14); box-shadow: inset 0 0 0 1.5px rgba(var(--c), 0.9); }
.h2-soc:hover .h2-soc-btn::after { translate: 3px 0; }
.h2-soc-discord .h2-soc-btn { color: #a3abff; }
.h2-soc-youtube .h2-soc-btn { color: #ff6b78; }
/* X, Instagram and any other socials */
.h2-more { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 36px; font-size: 13.5px; font-weight: 600; color: rgba(234, 246, 255, 0.5); }
.h2-more:empty { display: none; }
.h2-more span { margin-right: 4px; }
.h2-more-link { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(6, 13, 26, 0.7); box-shadow: inset 0 0 0 1px rgba(76, 201, 255, 0.28); color: #fff; transition: box-shadow 0.2s ease, background-color 0.2s ease; }
.h2-more-link svg { width: 17px; height: 17px; }
.h2-more-link:hover { background: rgba(76, 201, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(76, 201, 255, 0.7); }
.h2-more-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }/* the three cards come in one after another */
.h2-community.in .h2-soc { animation: rv-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.h2-community.in .h2-soc:nth-child(2) { animation-delay: 0.1s; }
.h2-community.in .h2-soc:nth-child(3) { animation-delay: 0.2s; }

/* ---------- scrolling ---------- */
/* each block's parts ease up out of a soft blur, one after another (smooth expo ease-out, no bounce) */
.rv-ready .h2-section:not(.in) > :not(.h2-float) { opacity: 0; }
.h2-section.in > :not(.h2-float) { animation: rv-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(var(--rv, 0) * 110ms); }
@keyframes rv-in { from { opacity: 0; translate: 0 28px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
/* the podium builds: 1st, then 2nd, then 3rd rise out of the floor, crowns settle on top */
.cs-spot.r1 { --p: 0; }
.cs-spot.r2 { --p: 1; }
.cs-spot.r3 { --p: 2; }
.h2-lb.in .cs-plinth { transform-origin: 50% 100%; animation: rv-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.3s + var(--p) * 0.12s); }
.h2-lb.in .cs-spot > :not(.cs-plinth) { animation: rv-drop 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.55s + var(--p) * 0.12s); }
@keyframes rv-grow { from { transform: scaleY(0); opacity: 0; } }
@keyframes rv-drop { from { translate: 0 -16px; opacity: 0; } }
/* the slot cards start squared up in one stack, then fan out */
.h2-card { transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.rv-ready .h2-deck:not(.in) .h2-card { rotate: 0deg; translate: -50% -50%; }
/* the floating crown and diamonds drift at different depths as you scroll past (browsers that support it) */
@supports (animation-timeline: view()) {
  .h2-float { animation: h2-float 7s ease-in-out infinite, rv-depth linear both; animation-timeline: auto, view(); }
  .h2-float.f1 { --depth: 70px; }
  .h2-float.f2 { --depth: 30px; }
  .h2-float.f3 { --depth: 90px; }
  .h2-float.f4 { --depth: 25px; }
  .h2-float.f5 { --depth: 55px; }
  @keyframes rv-depth { from { transform: translateY(var(--depth, 40px)); } to { transform: translateY(calc(var(--depth, 40px) * -1)); } }
}
/* ---------- phones ---------- */
@media (max-width: 760px) {
  .h2-section { padding-top: 90px; }
  .h2-deck { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  .h2-left { justify-content: center; margin: 0 auto; }
  .h2-deck .h2-text { margin: 18px auto 0; }
  .h2-stats { justify-content: center; }
  .h2-fan { height: 300px; }
  .h2-card { width: 150px; }
  .h2-soc { padding: 4px 8px; }
  .h2-soc-icon { width: 58px; height: 58px; border-radius: 17px; }
  .h2-soc-icon svg { width: 28px; height: 28px; }
  .h2-soc b { margin-top: 18px; }
  .h2-soc-btn { padding: 6px 11px; font-size: 11.5px; }
  .h2-soc small { display: none; }
  .h2-soc b { font-size: 23px; }
  .h2-float.f1 { width: 74px; top: 60px; }
  .h2-float.f3 { width: 84px; top: 40px; }
  .h2-float.f2, .h2-float.f4, .h2-float.f5 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .h2-lead, .h2-float, .cs-plinth, .cs-spot > * { animation: none !important; }
  .h2-card, .h2-soc-icon { transition: none; }
}