/* tir — marketing site.
 *
 * Single stylesheet for index.html, support.html, privacy.html.
 * Mobile-first. Mirrors the in-app design language: warm-near-black
 * canvas, electric cyan accent, lowercase microcopy. Mirrors aaam.dev's
 * humm marketing page architecture (museum-gallery hero phone, scroll-
 * snap feature rail, atmospheric halo, manifesto card, dual-CTA flow)
 * adapted to tir's cyan accent and game-loop story.
 *
 * NOTE on .phone aspect ratio:
 *   Same as humm/style.css — we do NOT set `aspect-ratio` on the .phone
 *   wrapper. The inner <img> drives the height via its intrinsic
 *   1206×2622 ratio. Setting aspect-ratio on a flex child with padding
 *   produces a WebKit warping bug (vertically squished image). The
 *   bezel ring lives on the <img>, not the wrapper.
 */

:root {
  --bg: #0b0b12;
  --surface: #13141f;
  --card: #191b29;
  --card-soft: #16151f;
  --border: #28293b;
  --border-soft: rgba(40, 41, 59, 0.55);

  --text: #f7f7f7;
  --muted: #9d9eae;
  --dim: #686a80;

  /* Single-accent rule (KB §tir_brief): electric cyan only on marketing
   * chrome. Success-green / gold appear only inside actual in-app UI
   * captures, never on chrome. */
  --accent: #00e5ff;
  --accent-warm: #66f0ff;       /* outer-halo cyan (matches icon corona) */
  --accent-soft: rgba(0, 229, 255, 0.1);
  --accent-glow: rgba(0, 229, 255, 0.22);

  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-deep: 0 32px 80px rgba(0, 0, 0, 0.55);

  --t-eyebrow: clamp(0.68rem, 0.62rem + 0.2vw, 0.78rem);
  --t-h1: clamp(2.6rem, 2rem + 4.5vw, 4.6rem);
  --t-h2: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  --t-h3: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  --t-body: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
  --t-sub: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
}

* { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11", "tnum";
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient cyan halo (top-of-page). Same recipe as hum's rose halo;
 * different palette. Suppressed on doc pages. */
.halo {
  position: fixed;
  inset: -20% -20% auto -20%;
  height: 90vh;
  background: radial-gradient(
    60% 60% at 50% 0%,
    rgba(0, 229, 255, 0.18) 0%,
    rgba(102, 240, 255, 0.08) 30%,
    rgba(0, 229, 255, 0.02) 55%,
    transparent 75%
  );
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

body.page-doc .halo { display: none; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

a:hover,
a:focus-visible { opacity: 0.85; }

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

/* TOP BAR ─────────────────────────────────────────────────────────── */
.topbar {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
}

.brand-mark {
  /* Transparent-canvas brand mark (icon-adaptive-foreground source).
     The ring + dot + dual cyan halo are baked into the PNG, so it
     sits flat on the page bg with no boundary square. We slightly
     overscale (26px vs the original 22px iOS touch icon) to keep the
     inner ring at the same optical weight, since the haloed canvas
     reserves ~25% margin around the mark itself. No border-radius
     (nothing to round) and no box-shadow (would stack a second glow
     on top of the baked halo). */
  width: 26px;
  height: 26px;
  display: block;
}

.brand-name {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.topnav {
  display: flex;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  font-size: 0.9rem;
  color: var(--muted);
}

.topnav a { color: var(--muted); }
.topnav a:hover, .topnav a:focus-visible { color: var(--text); opacity: 1; }

main {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

/* HERO ───────────────────────────────────────────────────────────── */
.hero {
  text-align: center;
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 4rem);
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow-center { text-align: center; }

h1 {
  margin: 0 auto;
  max-width: 18ch;
  font-size: var(--t-h1);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--text);
  text-wrap: balance;
}

/* Hero accent — single solid cyan word. tir's brief is single-accent
 * (cyan only, no gradient), so we skip the gradient-text treatment
 * hum uses on its rose accents. */
.hero-accent {
  color: var(--accent);
}

.hero-sub {
  margin: clamp(0.85rem, 2vw, 1.1rem) auto 0;
  max-width: 34ch;
  font-size: var(--t-sub);
  line-height: 1.45;
  color: var(--muted);
  font-weight: 300;
  text-wrap: balance;
}

/* PHONE MOCKUP ────────────────────────────────────────────────────── */
.hero-stage {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

/* Two-layer atmospheric halo behind the hero phone — bright core +
 * cooler outer atmosphere. Static. Same recipe as hum's hero, tinted
 * cyan. Makes the phone feel "lit in space" rather than stickered
 * onto a flat circle. */
.hero-stage::before,
.hero-stage::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.hero-stage::before {
  width: clamp(360px, 100vw, 720px);
  height: clamp(360px, 100vw, 720px);
  background: radial-gradient(
    circle,
    rgba(0, 229, 255, 0.18) 0%,
    rgba(102, 240, 255, 0.08) 35%,
    transparent 70%
  );
  filter: blur(28px);
}

.hero-stage::after {
  width: clamp(260px, 70vw, 480px);
  height: clamp(260px, 70vw, 480px);
  background: radial-gradient(
    circle,
    rgba(0, 229, 255, 0.32) 0%,
    rgba(102, 240, 255, 0.14) 38%,
    transparent 72%
  );
  filter: blur(16px);
}

/* PROMO HERO — the promotional screenshot already has a built-in device
 * frame, bezel, and caption, so no CSS phone wrapper. Sized generously
 * and given a layered shadow + accent glow like the old phone--hero. */
.promo-hero {
  width: clamp(230px, 64vw, 360px);
  height: auto;
  display: block;
  border-radius: clamp(10px, 3vw, 16px);
  filter:
    drop-shadow(0 32px 80px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 28px rgba(0, 229, 255, 0.22));
}

/* .phone wraps a raw screenshot in a device-style border + shadow. The
 * inner <img> drives height via its intrinsic dimensions (no
 * aspect-ratio on the wrapper). See file header note. */
.phone {
  --phone-w: clamp(200px, 58vw, 300px);
  width: var(--phone-w);
  display: block;
  position: relative;
  filter: drop-shadow(0 22px 56px rgba(0, 0, 0, 0.55));
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(26px, calc(var(--phone-w) * 0.12), 38px);
  border: 1px solid rgba(0, 229, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.phone--hero {
  --phone-w: clamp(230px, 64vw, 360px);
  filter:
    drop-shadow(0 32px 80px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 28px rgba(0, 229, 255, 0.22));
}

.phone--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: clamp(26px, calc(var(--phone-w) * 0.12), 38px);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 6%,
    transparent 14%
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}

/* CTA BUTTON ─────────────────────────────────────────────────────── */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  margin-top: clamp(1.8rem, 4vw, 2.4rem);
  padding: 0.85rem 1.6rem;
  background: var(--text);
  color: var(--bg);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.2s ease,
    border-color 0.2s ease, background 0.2s ease;
}

.cta-button:hover,
.cta-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(0, 229, 255, 0.22);
  opacity: 1;
}

.cta-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.cta-button:active { transform: translateY(0); }

.cta-button--bottom { margin-top: 1.2rem; }

.cta-button--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.cta-button--secondary:hover,
.cta-button--secondary:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 8px 32px rgba(0, 229, 255, 0.12);
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.8rem, 4vw, 2.4rem);
}

.cta-group .cta-button { margin-top: 0; }

.cta-icon { flex-shrink: 0; }

/* TRUST ROW ──────────────────────────────────────────────────────── */
.trust-row {
  margin: clamp(2rem, 4vw, 2.5rem) auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.4rem;
  font-size: 0.85rem;
  color: var(--dim);
  letter-spacing: 0.02em;
}

.trust-row li {
  position: relative;
  padding-left: 1rem;
}

.trust-row li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--accent);
  opacity: 0.65;
}

.trust-row li:first-child { padding-left: 0; }
.trust-row li:first-child::before { display: none; }

/* PRODUCT HUNT BADGE ─────────────────────────────────────────────── */
.ph-badge {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.6rem, 3vw, 2rem);
}
.ph-badge a {
  display: inline-block;
  line-height: 0;
}
.ph-badge img {
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.ph-badge img:hover {
  opacity: 1;
}

/* SECTIONS ───────────────────────────────────────────────────────── */
section {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

section h2 {
  margin: 0 auto;
  max-width: 22ch;
  text-align: center;
  font-size: var(--t-h2);
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
  text-wrap: balance;
}

.how,
.features,
.promise,
.final-cta {
  border-top: 1px solid var(--border-soft);
}

/* HOW IT WORKS ───────────────────────────────────────────────────── */
.how {
  text-align: center;
}

.how-list {
  list-style: none;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.4rem);
  max-width: 720px;
  text-align: left;
  counter-reset: how-counter;
}

.how-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 1.4rem);
  align-items: start;
  padding: 1.2rem 1.4rem;
  background: rgba(25, 27, 41, 0.55);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease;
}

.how-step:hover {
  border-color: rgba(0, 229, 255, 0.28);
}

.how-num {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: var(--accent);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.18);
}

.how-body h3 {
  margin: 0 0 0.4rem;
  font-size: var(--t-h3);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
}

.how-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.55;
}

.how-coda {
  margin: clamp(1.6rem, 4vw, 2.2rem) auto 0;
  max-width: 38ch;
  color: var(--dim);
  font-size: 0.95rem;
  font-style: italic;
  text-wrap: balance;
}

.how-coda em {
  color: var(--accent);
  font-style: normal;
  font-weight: 400;
}

/* FEATURES — promotional deck rail ──────────────────────────────── */
.features {
  position: relative;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* Promotional screenshots already carry their own device frame, caption,
 * and halo — no .phone wrapper needed. The rail scrolls horizontally on
 * mobile (touch-swipe) and wraps to a 3-column grid on desktop. */
.promo-rail {
  --gap: clamp(0.8rem, 2.5vw, 1.4rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding: 1rem clamp(1rem, 4vw, 2.5rem) 1.5rem;
  margin-inline: calc(-1 * clamp(1rem, 4vw, 2.5rem));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.promo-rail::-webkit-scrollbar { display: none; }

.promo-card {
  flex: 0 0 min(72vw, 260px);
  scroll-snap-align: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(0, 229, 255, 0.18);
  transition: transform 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
  filter: drop-shadow(0 16px 48px rgba(0, 0, 0, 0.55));
}

.promo-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 229, 255, 0.38);
  box-shadow: 0 0 32px rgba(0, 229, 255, 0.15);
}

.promo-card img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 880px) {
  .promo-rail {
    overflow: visible;
    scroll-snap-type: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: 0;
    padding: 1rem 0 0;
  }
  .promo-card { flex: initial; }
  .rail-hint { display: none; }
}

@media (min-width: 1200px) {
  .promo-rail {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.rail-hint {
  margin: 0.4rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--dim);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* PROMISE ────────────────────────────────────────────────────────── */
.promise {
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) 0;
  position: relative;
}

.promise-headline {
  margin: 0 auto;
  max-width: 18ch;
  font-size: clamp(2rem, 1.6rem + 2.5vw, 3rem);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text);
}

.promise-accent {
  color: var(--accent);
}

.promise-list {
  list-style: none;
  margin: clamp(2rem, 4vw, 2.6rem) auto 0;
  padding: 1.4rem 1.6rem;
  max-width: 28rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1.4rem;
  background: rgba(0, 229, 255, 0.03);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: var(--radius-lg);
  font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.08rem);
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;
}

.promise-list li {
  position: relative;
  padding-left: 1.5rem;
  text-align: left;
}

/* Subtle ✕ marker — these are absences, not features. */
.promise-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background-image:
    linear-gradient(45deg, transparent 45%, var(--accent) 45%, var(--accent) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--accent) 45%, var(--accent) 55%, transparent 55%);
  opacity: 0.7;
}

.promise-coda {
  margin-top: 1.5rem;
  color: var(--dim);
  font-size: 0.95rem;
  font-style: italic;
}

/* FINAL CTA ──────────────────────────────────────────────────────── */
.final-cta {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 0 2rem;
}

.final-cta h2 {
  font-size: clamp(2.4rem, 2rem + 3vw, 3.6rem);
  font-weight: 200;
  letter-spacing: -0.03em;
  /* `margin: 0 auto` preserves the auto-centering inherited from the
   * generic `section h2` rule — without it, the 22ch-wide h2 block
   * hugs the section's left edge on wide viewports even though its
   * inner text is still centered. */
  margin: 0 auto 0.6rem;
  text-wrap: balance;
}

.final-cta-sub {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 auto 0.5rem;
  max-width: 32ch;
  text-wrap: balance;
}

.cta-microcopy {
  margin: 1.4rem 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--dim);
}

.cta-microcopy a { color: var(--muted); }
.cta-microcopy a:hover { color: var(--accent); opacity: 1; }

/* MOBILE POLISH (≤480px) ─────────────────────────────────────────
 * Tightens padding, stacks CTAs full-width, trims section rhythm.
 * Mirrors hum's mobile pass. */
@media (max-width: 480px) {
  .promise-list {
    grid-template-columns: 1fr;
    max-width: 22rem;
    gap: 0.55rem;
    padding: 1.15rem 1.3rem;
  }

  .cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    max-width: 22rem;
    margin-inline: auto;
  }

  .cta-group .cta-button {
    width: 100%;
    padding: 0.9rem 1.2rem;
    font-size: 0.98rem;
  }

  .topbar { padding: 1rem 1.1rem; }
  .hero { padding: 1.25rem 0 2rem; }
  section { padding: 2.5rem 0; }

  .trust-row {
    gap: 0.5rem 1rem;
    font-size: 0.82rem;
  }

  .how-list {
    gap: 0.7rem;
  }

  .how-step {
    padding: 1rem 1.1rem;
    grid-template-columns: 32px 1fr;
    gap: 0.9rem;
  }

  .how-num {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }

  /* Topnav: hide secondary anchors on narrow screens (support/privacy
   * still reachable via footer). Keeps the brand + a single quick
   * anchor visible without wrapping. */
  .topnav a:nth-child(2),
  .topnav a:nth-child(n+4) { display: none; }
}

/* DOC PAGE ───────────────────────────────────────────────────────── */
body.page-doc { background: var(--bg); }

.privacy, body.page-doc main {
  max-width: 720px;
  padding-top: 1rem;
  padding-bottom: 5rem;
}

body.page-doc h1 {
  font-size: clamp(2rem, 1.6rem + 2vw, 2.8rem);
  font-weight: 200;
  letter-spacing: -0.03em;
  margin: 1.5rem 0 0.5rem;
}

body.page-doc h2 {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 2rem 0 0.5rem;
  color: var(--text);
  letter-spacing: -0.01em;
  text-align: left;
  max-width: none;
}

body.page-doc p, body.page-doc li {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

body.page-doc ol, body.page-doc ul {
  padding-left: 1.25rem;
  margin: 0.5rem 0 1rem;
}

body.page-doc strong { color: var(--text); font-weight: 500; }

body.page-doc .meta {
  color: var(--dim);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.card h2 { margin-top: 0; }

/* FOOTER ─────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2.5rem 1rem 3rem;
  border-top: 1px solid var(--border-soft);
  color: var(--dim);
  font-size: 0.85rem;
}

.footer-brand {
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.site-footer nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0.5rem 0 1rem;
}

.site-footer a { color: var(--muted); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--accent); opacity: 1; }

.footer-meta { margin: 0; font-size: 0.75rem; color: var(--dim); }

/* ENTRANCE ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .topbar       { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) both; }
  .hero .eyebrow  { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) 0.05s both; }
  h1            { animation: rise 0.7s cubic-bezier(.2,.7,.2,1) 0.1s both; }
  .hero-sub     { animation: rise 0.7s cubic-bezier(.2,.7,.2,1) 0.15s both; }
  .hero-stage   { animation: rise 0.8s cubic-bezier(.2,.7,.2,1) 0.22s both; }
  .cta-group    { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) 0.30s both; }
  .trust-row    { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) 0.38s both; }
  .ph-badge     { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) 0.44s both; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* REDUCE MOTION ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}