/* AniFlex marketing site — palette matches app theme constants
   (app_colors.dart: primary #05A8FE, purple #BC2FFF, brightOrange #FE5F05,
    aqua #28F3BB, golden #E5FF45, midnight #001A2E, rangoonGreen #191919) */

:root {
  --bg: #0a0d12;
  --bg-panel: #10151c;
  --bg-card: #0d1721;
  --midnight: #001A2E;
  --cyan: #05A8FE;
  --bright-blue: #0ABDF7;
  --violet: #BC2FFF;
  --ember: #FE5F05;
  --aqua: #28F3BB;
  --gold: #E5FF45;
  --green: #33FF00;
  --red: #FF4444;
  --yellow: #F5D426;
  --text: #EAF2F8;
  --text-dim: #93a6b3;
  --line: rgba(5, 168, 254, 0.22);
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Exo 2', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 900px at 50% -5%, #0e1420, transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--cyan); }

/* ===== AMBIENT DEPTH LAYER ===== */
.ambient {
  position: fixed;
  inset: -10% -10% -10% -10%;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
}
.orb-cyan {
  width: 48vw; height: 48vw; min-width: 320px; min-height: 320px;
  top: -6vh; left: -12vw;
  background: radial-gradient(circle, rgba(5, 168, 254, 0.30), transparent 70%);
  animation: drift1 27s ease-in-out infinite;
}
.orb-violet {
  width: 44vw; height: 44vw; min-width: 300px; min-height: 300px;
  top: 34vh; right: -14vw;
  background: radial-gradient(circle, rgba(188, 47, 255, 0.24), transparent 70%);
  animation: drift2 33s ease-in-out infinite;
}
.orb-ember {
  width: 40vw; height: 40vw; min-width: 280px; min-height: 280px;
  bottom: -8vh; left: 22vw;
  background: radial-gradient(circle, rgba(254, 95, 5, 0.16), transparent 70%);
  animation: drift3 39s ease-in-out infinite;
}
@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(6vw, 4vh); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-5vw, -5vh); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(4vw, -3vh); } }
.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 25% 15%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 75% 45%, rgba(255,255,255,0.40), transparent),
    radial-gradient(1.4px 1.4px at 50% 78%, rgba(5,168,254,0.55), transparent),
    radial-gradient(1px 1px at 15% 62%, rgba(188,47,255,0.45), transparent),
    radial-gradient(1px 1px at 90% 85%, rgba(40,243,187,0.45), transparent),
    radial-gradient(1px 1px at 62% 22%, rgba(255,255,255,0.35), transparent);
  background-size: 270px 270px;
  opacity: 0.5;
  animation: twinkle 7s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: 0.34; } 50% { opacity: 0.6; } }

.accent-cyan { color: var(--cyan); }
.accent-violet { color: var(--violet); }
.accent-ember { color: var(--ember); }
.accent-aqua { color: var(--aqua); }
.accent-gold { color: var(--gold); }

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 5.5vw, 2.6rem);
  text-align: center;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
  text-shadow: 0 0 24px rgba(5, 168, 254, 0.35);
}
.section-sub {
  text-align: center;
  color: var(--text-dim);
  margin-bottom: 2rem;
  padding: 0 1.2rem;
}

section, header.hero { padding: 4.5rem 1.1rem; position: relative; }

/* Subtle per-section tints so the page reads with depth, not one flat black slab */
.forge {
  background:
    linear-gradient(180deg, rgba(188,47,255,0.06), transparent 22%),
    radial-gradient(120% 60% at 50% 0%, rgba(5,168,254,0.05), transparent 60%);
}
.features {
  background: linear-gradient(180deg, transparent, rgba(5,168,254,0.035) 50%, transparent);
}
.final-cta {
  background: radial-gradient(ellipse 90% 70% at 50% 115%, rgba(254,95,5,0.12), transparent 60%);
}
.footer { background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35)); }

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hud-grid {
  position: absolute; inset: -20px;
  background-image:
    linear-gradient(rgba(5,168,254,0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,168,254,0.13) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 92% 74% at 50% 42%, black 28%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 92% 74% at 50% 42%, black 28%, transparent 78%);
  pointer-events: none;
  animation: gridBreath 7s ease-in-out infinite;
  will-change: opacity, background-position;
}
/* Brighter, slowly breathing + drifting grid — reads as a live HUD without
   hurting text contrast (it sits behind the centered hero content). */
@keyframes gridBreath {
  0%, 100% { opacity: 0.5;  background-position: 0 0, 0 0; }
  50%      { opacity: 0.95; background-position: 0 9px, 7px 0; }
}
.hero-inner { position: relative; max-width: 640px; }
.hero-logo {
  width: 84px; margin: 0 auto 1.1rem;
  filter: drop-shadow(0 0 18px rgba(5,168,254,0.6));
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 12vw, 4.6rem);
  letter-spacing: 0.12em;
  text-shadow: 0 0 40px rgba(5,168,254,0.45);
}
.hero-tag {
  font-family: var(--font-display);
  font-size: clamp(1rem, 4vw, 1.35rem);
  color: var(--ember);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 0.6rem;
  text-shadow: 0 0 18px rgba(254,95,5,0.5);
}
.hero-sub {
  color: var(--text-dim);
  margin: 1.1rem auto 1.8rem;
  max-width: 460px;
  font-size: 1.05rem;
}
.store-buttons {
  display: flex; gap: 0.9rem;
  justify-content: center; align-items: center;
  flex-wrap: wrap;
}
.badge { height: 52px; width: auto; }
.badge-play { height: 78px; margin: -13px; } /* google badge PNG has built-in padding */
.hero-cta {
  display: inline-block;
  margin-top: 2.2rem;
  color: var(--cyan);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-shadow: 0 0 12px rgba(5,168,254,0.75), 0 0 26px rgba(5,168,254,0.4);
  animation: bob 2.4s ease-in-out infinite;
}
.hero-cta .tri { color: var(--cyan); font-size: 0.72em; }
.hero-cta:hover { text-shadow: 0 0 16px rgba(5,168,254,0.95), 0 0 34px rgba(5,168,254,0.55); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ===== FORGE ===== */
.forge-panel {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  background: linear-gradient(180deg, rgba(5,168,254,0.05), rgba(188,47,255,0.04));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.6rem 1.2rem;
  box-shadow: 0 0 60px rgba(5,168,254,0.07) inset;
}
@media (min-width: 720px) {
  .forge-panel { grid-template-columns: 320px 1fr; padding: 2rem; }
}

.avatar-stage {
  position: relative;
  height: 420px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(rgba(5,168,254,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,168,254,0.045) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 90%, rgba(5,168,254,0.12), transparent 60%),
    #0a1118;
  background-size: 26px 26px, 26px 26px, auto, auto;
  overflow: hidden;
}
.avatar-glow {
  position: absolute; bottom: 8%; left: 50%;
  width: 200px; height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(5,168,254,0.4), transparent 70%);
  filter: blur(6px);
}
.avatar-canvas { position: relative; width: 270px; height: 371px; }
.avatar-canvas img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
/* Effect layers read larger than the body in the app (aura glow spreads, wings
   fan out). Scale from centre so they stay registered with the sprite frame. */
.avatar-canvas img.lyr-aura  { transform: scale(1.08); }
.avatar-canvas img.lyr-wings { transform: scale(1.16); }
.avatar-canvas img.lyr-bolt  { transform: scale(1.05); }
/* Scan sweep: a discrete band (::before) travels top→bottom and fades out each
   pass, so it always clears — no frozen band left behind, even on repeat rolls. */
.scan-overlay {
  position: absolute; inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.scan-overlay.scanning { opacity: 1; }
.scan-overlay::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 22%;
  top: -22%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(5,168,254,0.22) 38%,
    rgba(40,243,187,0.6) 50%,
    rgba(5,168,254,0.22) 62%,
    transparent 100%);
  filter: blur(1px);
  opacity: 0;
}
.scan-overlay.scanning::before {
  animation: scanSweep 0.55s linear 3;
}
@keyframes scanSweep {
  0%   { top: -22%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.forge-controls { display: flex; flex-direction: column; gap: 1.1rem; }
.control-row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.control-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  width: 52px; flex-shrink: 0;
}
.toggle { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.toggle-btn {
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.1em;
  background: transparent; color: var(--text-dim);
  border: none; padding: 0.55rem 1.1rem; cursor: pointer;
  transition: all 0.18s;
}
.toggle-btn.active { background: rgba(5,168,254,0.18); color: var(--cyan); text-shadow: 0 0 10px rgba(5,168,254,0.7); }

.swatches { display: flex; gap: 0.55rem; }
.swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  cursor: pointer; padding: 0;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.swatch.active { border-color: var(--cyan); box-shadow: 0 0 12px rgba(5,168,254,0.7); transform: scale(1.12); }

.control-row-top { align-items: flex-start; }
.control-row-top .control-label { margin-top: 0.45rem; }
.chip-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip {
  font-family: var(--font-body); font-weight: 600; font-size: 0.82rem;
  background: rgba(255,255,255,0.05); color: var(--text-dim);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
  padding: 0.4rem 0.9rem; cursor: pointer;
  transition: all 0.15s;
}
.chip.active { color: var(--cyan); border-color: var(--cyan); background: rgba(5,168,254,0.12); box-shadow: 0 0 10px rgba(5,168,254,0.4); }
.chip.more {
  color: var(--violet); border-color: rgba(188,47,255,0.4);
  background: rgba(188,47,255,0.08); font-weight: 700;
  letter-spacing: 0.02em;
}
.chip.more:hover { border-color: var(--violet); box-shadow: 0 0 10px rgba(188,47,255,0.35); }

.roll-btn {
  margin-top: 0.4rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.02rem; letter-spacing: 0.14em;
  color: #061018;
  background: linear-gradient(90deg, var(--cyan), var(--aqua));
  border: none; border-radius: 12px;
  padding: 1rem 1.2rem; cursor: pointer;
  box-shadow: 0 0 26px rgba(5,168,254,0.45);
  transition: transform 0.12s, box-shadow 0.2s;
}
.roll-btn:hover { transform: translateY(-2px); box-shadow: 0 0 36px rgba(5,168,254,0.65); }
.roll-btn:disabled { opacity: 0.55; cursor: wait; }

/* ===== REVEAL ===== */
.reveal { max-width: 640px; margin: 2.2rem auto 0; }
.reveal.hidden { display: none; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}
.stat-cell {
  border: 1px solid;
  border-radius: 10px;
  padding: 0.55rem 0.2rem;
  text-align: center;
  background: rgba(0,0,0,0.35);
}
.stat-cell .stat-key {
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.12em;
  display: block;
}
.stat-cell .stat-val {
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
}
.stat-str { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(5,168,254,0.35); }
.stat-agl { border-color: var(--violet); color: var(--violet); box-shadow: 0 0 12px rgba(188,47,255,0.35); }
.stat-pow { border-color: var(--red); color: var(--red); box-shadow: 0 0 12px rgba(255,68,68,0.3); }
.stat-bal { border-color: var(--green); color: var(--green); box-shadow: 0 0 12px rgba(51,255,0,0.25); }
.stat-sta { border-color: var(--yellow); color: var(--yellow); box-shadow: 0 0 12px rgba(245,212,38,0.3); }

.class-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(188,47,255,0.12), transparent 55%),
    linear-gradient(180deg, rgba(5,168,254,0.06), rgba(0,0,0,0.25)),
    var(--bg-card);
  padding: 1.8rem 1.4rem;
  text-align: center;
  animation: cardIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  box-shadow: 0 0 50px rgba(5,168,254,0.12);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.class-card-corner {
  position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--cyan);
}
.class-card-corner.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; border-radius: 14px 0 0 0; }
.class-card-corner.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; border-radius: 0 14px 0 0; }
.class-card-corner.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; border-radius: 0 0 0 14px; }
.class-card-corner.br { bottom: -2px; right: -2px; border-left: none; border-top: none; border-radius: 0 0 14px 0; }

.class-eyebrow {
  font-family: var(--font-display); font-size: 0.7rem;
  letter-spacing: 0.34em; color: var(--text-dim);
}
.class-name {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.7rem, 7vw, 2.5rem);
  letter-spacing: 0.08em;
  margin: 0.4rem 0 0.3rem;
  color: var(--cyan);
  text-shadow: 0 0 26px rgba(5,168,254,0.65);
}
.class-flavor { color: var(--text-dim); font-style: italic; margin-bottom: 1.3rem; }

.class-kit { display: grid; gap: 0.9rem; text-align: left; }
.kit-block {
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--aqua);
  border-radius: 8px;
  background: rgba(0,0,0,0.3);
  padding: 0.8rem 1rem;
}
.kit-block:last-child { border-left-color: var(--ember); }
.kit-label {
  font-family: var(--font-display); font-size: 0.72rem;
  letter-spacing: 0.18em; color: var(--aqua);
  margin-bottom: 0.25rem;
}
.kit-label-special { color: var(--ember); }
.kit-text { font-size: 0.95rem; color: var(--text); }

.class-evolve {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.class-evolve b { color: var(--violet); font-weight: 700; }

.ascend { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; align-items: center; }
.ascend-btn {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1rem; letter-spacing: 0.16em;
  color: #fff;
  background: linear-gradient(90deg, var(--violet), var(--ember));
  border: none; border-radius: 12px;
  padding: 1rem 2.2rem; cursor: pointer;
  box-shadow: 0 0 26px rgba(188,47,255,0.45);
  transition: transform 0.12s, box-shadow 0.2s;
}
.ascend-btn:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(254,95,5,0.55); }
.reroll-btn {
  background: none; border: none; color: var(--text-dim);
  font-family: var(--font-body); font-size: 0.9rem;
  cursor: pointer; text-decoration: underline;
}
.upsell {
  margin-top: 0.3rem;
  max-width: 420px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ===== FEATURES ===== */
.features { max-width: 1000px; margin: 0 auto; }
.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: center;
  margin: 3.6rem 0;
}
@media (min-width: 760px) {
  .feature-row { grid-template-columns: 1fr 300px; }
  .feature-row.reverse { grid-template-columns: 300px 1fr; }
  .feature-row.reverse .feature-text { order: 2; }
  .feature-row.reverse .phone-frame { order: 1; }
}
.feature-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}
.feature-text p { color: var(--text-dim); font-size: 1.02rem; max-width: 520px; }

.phone-frame {
  justify-self: center;
  width: min(270px, 78vw);
  border: 3px solid #2a3742;
  border-radius: 30px;
  padding: 8px;
  background: #05080c;
  box-shadow: 0 0 40px rgba(5,168,254,0.12), 0 18px 40px rgba(0,0,0,0.5);
}
.phone-frame img { border-radius: 20px; width: 100%; }
.phone-frame.small { width: 230px; flex-shrink: 0; }

/* ===== CLASS CONSTELLATION (illustrative diagram) ===== */
.class-showcase {
  position: relative;
  max-width: 640px;
  margin: 4.2rem auto;
  text-align: center;
}
.class-showcase .feature-title { font-size: clamp(1.3rem, 5vw, 1.7rem); margin-bottom: 0.7rem; }
.showcase-lead {
  color: var(--text-dim);
  max-width: 520px;
  margin: 0 auto 1.6rem;
  font-size: 1rem;
}
.class-wheel {
  --r: clamp(96px, 31vw, 146px);
  position: relative;
  width: min(86vw, 380px);
  aspect-ratio: 1;
  margin: 0.5rem auto 0;
}
.wheel-ring {
  position: absolute; inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(5,168,254,0.18);
  box-shadow: 0 0 40px rgba(5,168,254,0.10) inset;
}
.wheel-spokes {
  position: absolute; inset: 6%;
  border-radius: 50%;
  background: repeating-conic-gradient(from -90deg,
    rgba(120,160,220,0.16) 0deg 0.5deg, transparent 0.5deg 24deg);
  -webkit-mask: radial-gradient(circle, transparent 26%, #000 28%, #000 99%, transparent 100%);
  mask: radial-gradient(circle, transparent 26%, #000 28%, #000 99%, transparent 100%);
}
.wheel-core {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 26%; height: 26%;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  background: radial-gradient(circle, rgba(13,23,33,0.95), rgba(10,14,20,0.9));
  border: 1px solid rgba(143,154,179,0.5);
  box-shadow: 0 0 26px rgba(143,154,179,0.25), 0 0 40px rgba(5,168,254,0.12);
}
.core-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(0.5rem, 2.4vw, 0.72rem);
  letter-spacing: 0.04em;
  color: #cbd3e4;
  line-height: 1;
}
.core-tag {
  font-family: var(--font-display);
  font-size: clamp(0.36rem, 1.6vw, 0.48rem);
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-top: 0.3em;
}
.wheel-node {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  transform: rotate(calc(var(--i) * 24deg)) translateY(calc(-1 * var(--r)));
}
.wheel-node > b {
  position: absolute;
  transform: translate(-50%, -50%) rotate(calc(var(--i) * -24deg));
  display: block;
  white-space: nowrap;
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(0.52rem, 2.05vw, 0.72rem);
  letter-spacing: 0.01em;
  padding: 0.22em 0.5em;
  border-radius: 999px;
  border: 1px solid var(--c);
  color: #f0f5fb;
  background: rgba(8,12,18,0.82);
  box-shadow: 0 0 10px -2px var(--c);
}
.wheel-node.pure > b {
  color: #05101a;
  background: var(--c);
  box-shadow: 0 0 14px -1px var(--c);
  font-weight: 800;
}
/* Codex stat colors (from spire_class_codex_page.dart) */
.stat-str { --c: #3DA9FF; }
.stat-agl { --c: #A06BFF; }
.stat-pow { --c: #FF5252; }
.stat-bal { --c: #3DDC84; }
.stat-sta { --c: #FFD24A; }

.wheel-legend {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem;
  justify-content: center; align-items: center;
  margin-top: 1.4rem;
}
.wheel-legend .lg {
  font-family: var(--font-display); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.55rem; border-radius: 6px;
  border: 1px solid currentColor;
}
.lg-str { color: #3DA9FF; } .lg-agl { color: #A06BFF; } .lg-pow { color: #FF5252; }
.lg-bal { color: #3DDC84; } .lg-sta { color: #FFD24A; }
.lg-note { color: var(--text-dim); font-size: 0.76rem; width: 100%; }
.showcase-note {
  margin-top: 0.9rem;
  font-size: 0.74rem; color: #5f6b78; font-style: italic;
}

/* ===== FINAL CTA / FOOTER ===== */
.final-cta { text-align: center; }
.footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 2.4rem 1.2rem 3rem;
  text-align: center;
}
.footer-links { display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.footer-links a { color: var(--text-dim); text-decoration: none; font-size: 0.92rem; }
.footer-links a:hover { color: var(--cyan); }
.footer-copy { color: var(--text-dim); font-size: 0.88rem; }
.footer-fine { color: #5a6a76; font-size: 0.72rem; margin-top: 0.7rem; max-width: 560px; margin-left: auto; margin-right: auto; }

/* ===== SPIRE VIDEO FRAME ===== */
.video-frame {
  justify-self: center;
  width: min(280px, 80vw);
  border: 1px solid rgba(229,255,69,0.28);
  border-radius: 22px;
  padding: 7px;
  background: #05080c;
  box-shadow: 0 0 42px rgba(229,255,69,0.12), 0 18px 40px rgba(0,0,0,0.55);
  overflow: hidden;
}
.video-frame video {
  width: 100%; height: auto;
  display: block;
  border-radius: 16px;
}

/* ===== STREAK PET ===== */
.pet-section { position: relative; }
.pet-inner {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 1.4rem;
  align-items: center;
}
@media (min-width: 760px) {
  .pet-inner { grid-template-columns: 280px 1fr; }
}
.pet-stage {
  position: relative;
  justify-self: center;
  width: min(230px, 60vw);
  aspect-ratio: 1;
  display: flex; align-items: flex-end; justify-content: center;
}
.pet-shadow {
  position: absolute; bottom: 7%; left: 50%;
  width: 56%; height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(188,47,255,0.45), transparent 70%);
  filter: blur(5px);
}
.pet-egg {
  width: 82%;
  transform-origin: 50% 100%; /* base planted, rocks from the top */
  animation: eggShake 2s ease-in-out infinite;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.5));
}
/* 3 quick shakes, then rest, every 2s */
@keyframes eggShake {
  0%   { transform: rotate(0deg); }
  6%   { transform: rotate(-8deg); }
  12%  { transform: rotate(7deg); }
  18%  { transform: rotate(-6deg); }
  24%  { transform: rotate(5deg); }
  30%  { transform: rotate(-3deg); }
  36%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.pet-copy p { color: var(--text-dim); font-size: 1.02rem; max-width: 520px; }
.pet-tag { color: var(--violet); font-weight: 700; margin-top: 0.7rem; }

/* ===== SCATTERED STICKERS (decorative, click-through) =====
   Each sticker anchors either to a whole short section (hero, forge, pet,
   final-cta — all position:relative, single-screen tall, so a corner offset
   never reaches the centered content) or to one specific .feature-row /
   .class-showcase (also position:relative) so it lands in that row's own
   outer gutter — never in the shared coordinate space of the giant
   .features section, which is what let stickers collide with the section
   title and with each other across the hero/forge seam. */
.sticker {
  position: absolute;
  width: clamp(42px, 8.5vw, 64px);
  height: auto;
  opacity: 0.92;
  pointer-events: none; /* never blocks clicks even if it visually nears content */
  z-index: 4;
  filter: drop-shadow(0 4px 9px rgba(0,0,0,0.55));
  user-select: none;
  -webkit-user-drag: none;
}

/* Hero / Forge — opposite corners so the two no longer stack at the seam */
.s-hero   { bottom: 3%;  left: 5%;   transform: rotate(-8deg); }
.s-forge  { top: 1.4rem; right: 4%;  transform: rotate(-11deg); }

/* Feature rows — sit in the row's own outer gutter (outside both grid
   columns), vertically centered on that row only, well clear of its text
   and phone/video frame regardless of column order. */
.feature-row { position: relative; }
.s-row1-l { top: 50%; left: -76px;  transform: translateY(-50%) rotate(-10deg); }
.s-row1-r { top: 50%; right: -76px; transform: translateY(-50%) rotate(8deg); }
.s-row2-l { top: 50%; left: -76px;  transform: translateY(-50%) rotate(9deg); }
.s-row2-r { top: 50%; right: -76px; transform: translateY(-50%) rotate(-7deg); }
.s-row3-l { top: 50%; left: -76px;  transform: translateY(-50%) rotate(-6deg); }
.s-row3-r { top: 50%; right: -76px; transform: translateY(-50%) rotate(11deg); }
.s-row4-l { top: 50%; left: -76px;  transform: translateY(-50%) rotate(7deg); }
.s-row4-r { top: 50%; right: -76px; transform: translateY(-50%) rotate(-9deg); }
.s-row5-l { top: 50%; left: -76px;  transform: translateY(-50%) rotate(-11deg); }
.s-row5-r { top: 50%; right: -76px; transform: translateY(-50%) rotate(6deg); }

/* Class constellation diagram — corners of its own 640px box, outside the
   wheel, still inside the wider .features container. */
.s-show-tl { top: -0.4rem; left: -3.4rem;  transform: rotate(-9deg); }
.s-show-tr { top: -0.4rem; right: -3.4rem; transform: rotate(10deg); }
.s-show-bl { bottom: -0.4rem; left: -3.4rem;  transform: rotate(8deg); }
.s-show-br { bottom: -0.4rem; right: -3.4rem; transform: rotate(-10deg); }

/* Streak pet + final CTA */
.s-pet-l  { top: 8%;      left: 6%;   transform: rotate(-12deg); }
.s-pet-r  { top: 8%;      right: 6%;  transform: rotate(12deg); }
.s-cta-l  { top: 1.2rem;  left: 6%;   transform: rotate(-9deg); }
.s-cta-r  { bottom: 1.2rem; right: 6%; transform: rotate(9deg); }

/* On phones there's no side gutter around rows/showcase (they're full width),
   so re-anchor every "beside content" sticker to sit just above or below
   that block instead — same horizontal-separation trick that fixes the
   hero/forge seam, applied locally to each row. Hero/forge/pet/cta keep
   their corner placement (those sections have no side content to graze). */
@media (max-width: 620px) {
  .sticker { width: clamp(38px, 12vw, 50px); opacity: 0.85; }
  .s-hero  { bottom: 2%;  left: 3%; }
  .s-forge { top: 0.7rem; right: 2%; }

  .s-row1-l, .s-row2-l, .s-row3-l, .s-row4-l, .s-row5-l {
    top: -3.4rem; bottom: auto; left: 2%; right: auto; transform: none;
  }
  .s-row1-r, .s-row2-r, .s-row3-r, .s-row4-r, .s-row5-r {
    top: auto; bottom: -3.4rem; left: auto; right: 2%; transform: none;
  }

  .s-show-tl { top: -3.2rem; left: 4%;  bottom: auto; right: auto; transform: none; }
  .s-show-tr { top: -3.2rem; right: 4%; bottom: auto; left: auto;  transform: none; }
  .s-show-bl { bottom: -3.2rem; left: 4%;  top: auto; right: auto; transform: none; }
  .s-show-br { bottom: -3.2rem; right: 4%; top: auto; left: auto;  transform: none; }

  .s-pet-l { top: 4%; left: 3%; }
  .s-pet-r { top: 4%; right: 3%; }
  .s-cta-l { top: 0.7rem; left: 2%; }
  .s-cta-r { bottom: 0.7rem; right: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}