/* ============================================================
   Aurakeeper — marketing site
   Palette pulled straight from the game (ui_theme.gd, element_types.gd)
   ============================================================ */

:root {
  /* cosmic night sky (key art) */
  --bg-0: #070a1f;
  --bg-1: #0d1234;
  --bg-2: #191a48;
  --bg-3: #2a1a4d;

  /* gold — the logo + primary buttons */
  --gold: #ffc23e;
  --gold-light: #ffd76b;
  --gold-deep: #e09b18;
  --gold-shadow: #b97a10;
  --gold-glow: #ffe9a8;

  /* sky blue — the "REALMS" half of the logo */
  --sky: #5fb8e8;
  --sky-light: #a7e0fb;

  /* parchment — the in-game UI surfaces */
  --cream: #fff6e3;
  --parchment: #fbeecd;
  --parchment-dark: #f0dcae;
  --brown-border: #c69a55;
  --brown-deep: #8a5f2c;
  --ink: #4d3312;
  --ink-soft: #8a6a40;

  /* text on the dark cosmic ground */
  --text: #f0e9df;
  --text-dim: #b9b2d4;

  /* rarity */
  --r-common: #6cb04a;
  --r-rare: #9068c9;
  --r-epic: #e85f8a;
  --r-legendary: #f5a623;

  /* elements */
  --e-ember: #d9541f;
  --e-verdant: #4e8a33;
  --e-stone: #8d6e4a;
  --e-gale: #5a9fb8;
  --e-tide: #2e6fb8;
  --e-radiant: #e0a500;
  --e-umbra: #6b4a9c;

  --maxw: 1160px;
  --radius: 20px;
  --font-display: "Lilita One", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--bg-0);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---- starfield / nebula ground (fixed, behind everything) ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  /* the game's home-screen key art IS the site background.
     Declared twice on purpose: the first is the JPEG every browser can read,
     the second upgrades it to WebP where image-set() parses. A browser that
     can't parse image-set() drops that declaration and keeps the JPEG. */
  background:
    linear-gradient(180deg, rgba(6,9,26,0.40) 0%, rgba(6,9,26,0.56) 52%, rgba(6,9,26,0.80) 100%),
    url("assets/keyart.jpg") center 28% / cover no-repeat,
    var(--bg-1);
  background:
    linear-gradient(180deg, rgba(6,9,26,0.40) 0%, rgba(6,9,26,0.56) 52%, rgba(6,9,26,0.80) 100%),
    image-set(url("assets/keyart.webp") type("image/webp"),
              url("assets/keyart.jpg") type("image/jpeg")) center 28% / cover no-repeat,
    var(--bg-1);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* soft vignette to frame the art and settle the edges */
  background: radial-gradient(ellipse 125% 85% at 50% 40%, transparent 48%, rgba(3,5,18,0.58) 100%);
}

/* ---- layout helpers ---- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { position: relative; }
.eyebrow {
  font-family: var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--gold);
  margin: 0 0 12px;
}
.center { text-align: center; }
.muted { color: var(--text-dim); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; margin: 0; }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; }
a { color: var(--sky-light); text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; display: block; }
/* <picture> is only a wrapper for choosing a source — take it out of the box
   tree so the <img> inside still lays out exactly as a bare <img> did. */
picture { display: contents; }

/* Readable by a screen reader, invisible on screen. Used for the form label
   over the notify input, whose placeholder is the visible cue. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.gold-text {
  background: linear-gradient(180deg, var(--gold-glow) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(120,70,10,0.35));
}
.sky-text { color: var(--sky-light); }

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  padding: 15px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  text-align: center;
}
.btn-gold {
  color: #4a2d05;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow: 0 5px 0 var(--gold-shadow), 0 10px 22px rgba(0,0,0,0.35);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--gold-shadow), 0 14px 26px rgba(0,0,0,0.4); filter: brightness(1.04); }
.btn-gold:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--gold-shadow), 0 6px 14px rgba(0,0,0,0.35); }
.btn-ghost {
  color: var(--text);
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); color: #fff; transform: translateY(-2px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(9,11,30,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { height: 34px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.98rem;
  transition: color 0.15s;
}
.nav-links a:hover { color: #fff; }
/* Qualified past `.nav-links a` — that broader rule outranked a bare
   `.nav-pill` and painted this label in the dim link colour, gold-on-gold. */
.nav-links a.nav-pill {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: #4a2d05;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
  padding: 7px 15px;
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--gold-shadow);
}
.nav-links a.nav-pill:hover { color: #2f1c02; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2.5px; background: var(--text); margin: 5px 0; border-radius: 2px; transition: 0.2s; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 44px 0 72px;
  min-height: calc(92vh - 66px);
  display: flex;
  align-items: center;
}
.hero-grid {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.hero-body {
  padding: 34px clamp(20px, 4vw, 46px);
  border-radius: 30px;
  /* soft dark stage so the logo + copy stay legible over the art */
  background: radial-gradient(ellipse at center, rgba(6,9,26,0.66) 0%, rgba(6,9,26,0.36) 58%, transparent 82%);
}
/* height:auto is load-bearing: the width/height attributes on the <img> (there so
   the logo reserves its box before it loads) arrive as presentational hints, and
   without this the hinted height survives the CSS width and stretches the mark. */
.hero-logo { width: min(500px, 100%); height: auto; margin: 0 auto 10px; filter: drop-shadow(0 12px 30px rgba(0,0,0,0.55)); }
.hero-tag {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.12;
  margin: 6px 0 16px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.hero-sub { font-size: 1.15rem; color: var(--text); max-width: 34rem; margin: 0 auto 28px; text-shadow: 0 1px 10px rgba(0,0,0,0.75); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }

/* coming-soon / app store badge */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, #14173a, #0b0d24);
  border: 1.5px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
  color: #fff;
}
.store-badge .apple { display: inline-flex; align-items: center; color: #fff; margin-top: -2px; }
.store-badge .bt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-badge .bt small { font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.04em; text-transform: uppercase; }
.store-badge .bt b { font-family: var(--font-display); font-weight: 400; font-size: 1.28rem; }
.store-badge.soon { opacity: 0.96; }
.store-badge.soon .bt b { color: var(--gold-light); }

.notify {
  margin: 26px auto 0;
  max-width: 30rem;
}
.notify p { font-size: 0.95rem; color: var(--text); margin-bottom: 10px; text-shadow: 0 1px 8px rgba(0,0,0,0.75); }
.notify-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.notify-form input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
}
.notify-form input[type="email"]::placeholder { color: rgba(255,255,255,0.45); }
.notify-form input[type="email"]:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,194,62,0.25); }
.notify-form .btn { padding: 13px 24px; font-size: 1rem; }
.hidden-field { position: absolute; left: -9999px; }

/* (phone mockup removed — the home-screen art is now the page background) */

/* ============================================================
   generic section blocks
   ============================================================ */
.section { padding: 76px 0; }
.section-head { max-width: 42rem; margin: 0 auto 52px; text-align: center; }
.section-head p { font-size: 1.12rem; color: var(--text); margin-top: 14px; text-shadow: 0 1px 10px rgba(0,0,0,0.7); }

/* pillars (CoC x Farmville x Pokemon) */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pillar {
  background: rgba(10,13,38,0.60);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 30px 26px;
  text-align: center;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.pillar:hover { transform: translateY(-4px); border-color: rgba(255,194,62,0.45); background: rgba(16,20,52,0.72); }
.pillar .ico { font-size: 2.6rem; margin-bottom: 12px; }
.pillar h3 { color: var(--gold-light); margin-bottom: 8px; }
.pillar p { color: var(--text-dim); font-size: 0.98rem; margin: 0; }

/* feature blocks — parchment cards on cosmic ground (like in-game UI) */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin: 0 auto; }
.feature + .feature { margin-top: 96px; }
.feature.flip .feature-media { order: 2; }
.feature-body .eyebrow { text-align: left; }
.feature-body h2 { margin-bottom: 18px; }
.feature-body p { color: var(--text-dim); font-size: 1.08rem; }
.feature-list { list-style: none; padding: 0; margin: 20px 0 0; }
.feature-list li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--text); }
.feature-list li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 16px; height: 16px;
  background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold-deep));
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255,194,62,0.5);
}
.feature-list li b { color: #fff; font-weight: 800; }

/* parchment panel used for feature media collages */
.panel {
  background: linear-gradient(180deg, var(--cream), var(--parchment) 60%, var(--parchment-dark));
  border: 3px solid var(--brown-border);
  border-radius: 22px;
  box-shadow: 0 22px 50px rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.6);
  padding: 26px;
  position: relative;
}
.panel-caption {
  font-family: var(--font-display);
  color: var(--brown-deep);
  font-size: 0.95rem;
  text-align: center;
  margin-top: 14px;
}

/* building collage */
.build-collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; }
.build-collage img { width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(90,60,20,0.35)); }
.build-collage .big { grid-column: span 3; max-width: 62%; margin: 0 auto; }

/* battle / elements mini showcase inside a panel */
.battle-media { display: flex; align-items: center; justify-content: center; gap: 8px; }
.battle-media img { width: 44%; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.3)); }
.battle-vs { font-family: var(--font-display); font-size: 2rem; color: var(--e-ember); }

/* ============================================================
   CREATURE GALLERY
   ============================================================ */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 38px; }
.filter-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  cursor: pointer;
  transition: 0.15s;
}
.filter-btn:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.filter-btn.active { color: #1a1330; background: var(--gold); border-color: var(--gold); box-shadow: 0 3px 0 var(--gold-shadow); }

.creatures { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 18px; }
.creature {
  background: linear-gradient(180deg, var(--cream), var(--parchment) 70%, var(--parchment-dark));
  border: 2px solid var(--rc, var(--brown-border));
  border-radius: 18px;
  padding: 14px 12px 12px;
  text-align: center;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35), inset 0 2px 0 rgba(255,255,255,0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}
.creature:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(0,0,0,0.5), 0 0 0 2px var(--rc); }
.creature .pool {
  position: relative;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.creature .pool::before {
  content: "";
  position: absolute;
  width: 108px; height: 60px;
  bottom: 6px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ec, var(--rc)) 55%, transparent), transparent 70%);
  filter: blur(4px);
}
.creature .pool img { position: relative; max-height: 120px; width: auto; filter: drop-shadow(0 8px 8px rgba(60,40,10,0.35)); transition: transform 0.2s; }
.creature:hover .pool img { transform: scale(1.07) translateY(-3px); }
.creature .cname { font-family: var(--font-display); color: var(--ink); font-size: 1.02rem; line-height: 1.1; }
.creature .badges { display: flex; gap: 6px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.pill {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.pill.rare-pill { color: #fff; }

/* rarity ribbon corner */
.creature .ribbon {
  position: absolute;
  top: 10px; right: -30px;
  transform: rotate(45deg);
  background: var(--rc);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 3px 34px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.roster-note { text-align: center; margin-top: 34px; color: var(--text-dim); }

/* ============================================================
   ELEMENTS RING
   ============================================================ */
.ring-section .wrap { max-width: 900px; }
.ring { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; }
.ring .el {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 10px;
  border-radius: 16px;
  min-width: 92px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
}
.ring .el img { width: 44px; height: 44px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.ring .el span { font-family: var(--font-display); font-size: 0.9rem; }
.ring .arrow { color: var(--gold); font-size: 1.5rem; opacity: 0.7; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta {
  text-align: center;
  padding: 90px 0 100px;
  position: relative;
}
.cta-card {
  max-width: 760px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(42,26,77,0.75), rgba(13,15,36,0.85));
  border: 1.5px solid rgba(255,194,62,0.28);
  border-radius: 28px;
  padding: 54px 40px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}
.cta-card h2 { margin-bottom: 14px; }
.cta-card p { color: var(--text-dim); font-size: 1.15rem; max-width: 34rem; margin: 0 auto 30px; }
.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(7,10,31,0.6);
  padding: 44px 0 40px;
}
.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; }
/* width:auto so the intrinsic width/height attributes on the <img> (there so the
   logo reserves its space before it loads) don't fight the fixed height. */
.footer-brand img { height: 40px; width: auto; margin-bottom: 12px; }
.footer-brand p { color: var(--text-dim); font-size: 0.92rem; max-width: 22rem; }
.footer-links { display: flex; gap: 54px; flex-wrap: wrap; }
.footer-col h4 { font-family: var(--font-display); font-weight: 400; font-size: 0.95rem; color: var(--gold-light); margin: 0 0 12px; letter-spacing: 0.05em; }
.footer-col a { display: block; color: var(--text-dim); font-size: 0.92rem; margin-bottom: 9px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--text-dim); font-size: 0.85rem; }

/* ============================================================
   sub-pages (support / privacy)
   ============================================================ */
.doc { padding: 60px 20px 90px; }
/* These pages are long-form reading laid over the key art, and the art has
   bright passages in it — measured on terms.html, the brightest 1% of the text
   column put body copy at 3.3:1 and the brightest spots near 1:1, well under AA.
   So the document is read off a surface instead of off whatever the picture is
   doing underneath: the pillars' own treatment (dark translucent plate, blurred,
   hairline border), which keeps the art visible behind it and the words legible
   on top. Worst case over the brightest pixel in the art is now ~5.7:1. */
.doc-wrap {
  max-width: 760px;
  padding: 40px clamp(20px, 4vw, 44px) 48px;
  background: rgba(10,13,38,0.86);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius);
}
.doc h1 { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 8px; }
.doc .updated { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 40px; }
.doc h2 { font-size: 1.5rem; margin: 40px 0 14px; color: var(--gold-light); }
.doc h3 { font-size: 1.15rem; margin: 26px 0 10px; }
.doc p, .doc li { color: var(--text); font-size: 1.05rem; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc a { text-decoration: underline; }
.doc .card-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 24px 26px;
  margin: 24px 0;
}
.doc .card-box p:last-child { margin-bottom: 0; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px; color: var(--text-dim); font-weight: 700; }
.back-link:hover { color: var(--gold-light); }

/* ============================================================
   reveal-on-scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav-links {
    position: absolute;
    top: 66px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(9,11,30,0.97);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 8px 0 16px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 24px; width: 100%; }
  .nav-links .nav-pill { margin: 10px 24px 0; }
  .nav-toggle { display: block; }

  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .hero-logo { margin-left: auto; margin-right: auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .notify { margin-left: auto; margin-right: auto; }
  .feature-body .eyebrow { text-align: center; }

  .feature { grid-template-columns: 1fr; gap: 34px; }
  .feature.flip .feature-media { order: 0; }
  .feature-body { text-align: center; }
  .feature-list { display: inline-block; text-align: left; }
}

@media (max-width: 620px) {
  .pillars { grid-template-columns: 1fr; }
  .creatures { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
  .footer-grid { flex-direction: column; }
  .hero { padding: 30px 0 60px; }
  .section { padding: 56px 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}