/* ============================================================
   CordIQ - main.css
   Token model adapted from Vercel Geist (4px grid, muted/border
   alpha scales) onto CordIQ navy #1e2030 + white.
   ============================================================ */

/* ---------- Montserrat, self-hosted variable font ----------
   ONE file spans the whole 400-800 weight axis. The previous setup pulled five
   separate static weights from fonts.googleapis.com (185 KB, five requests);
   this is 37 KB in one, and it drops two third-party origins - which also
   removes the "a content delivery network receives your IP" case from
   privacy.html section 4.

   The old Google request also asked for weight 300 and italic 400. Neither is
   referenced anywhere in the CSS, and `em` is deliberately styled
   font-style:normal further down, so the italic could never have rendered.

   font-weight is a RANGE, not a value - that is what makes a variable font
   serve every weight between 400 and 800 from a single file. Do not "fix" it
   to a single number.

   unicode-range is kept exactly as Google generated it, so latin-ext is only
   fetched when a character on the page actually needs it. Today nothing does,
   so real visitors download only the 37 KB latin file. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/montserrat-var-latin.woff2") format("woff2-variations"),
       url("../assets/fonts/montserrat-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/montserrat-var-latin-ext.woff2") format("woff2-variations"),
       url("../assets/fonts/montserrat-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Color - brand */
  --navy: #1e2030;
  --bg: #0d0e15;            /* page background, derived darker step of navy */
  --bg-elev: #14161f;       /* raised background */
  --surface: #1e2030;       /* brand navy as card surface */
  --surface-2: #262a3c;     /* hover / elevated surface */

  /* Color - foreground (Geist-style alpha scale on white) */
  --fg: #ffffff;
  --fg-muted: rgba(255, 255, 255, 0.64);
  --fg-faint: rgba(255, 255, 255, 0.52);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Accent - cool indigo derived from the navy, never used as body text */
  --accent: #aab4ff;
  --accent-dim: rgba(170, 180, 255, 0.14);

  /* Chip hues (bento) */
  --hue-indigo: #a5adff;
  --hue-teal: #7fe0cf;
  --hue-rose: #ff9db8;
  --hue-amber: #ffd18a;

  /* Type - Geist scale mapped to Montserrat */
  --font: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --text-xs: 0.75rem;      /* 12 */
  --text-sm: 0.875rem;     /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg: 1.125rem;     /* 18 */
  --text-xl: 1.5rem;       /* 24 */
  --text-2xl: 2rem;        /* 32 */
  --text-3xl: 2.75rem;     /* 44 */
  --display: clamp(2.5rem, 6.5vw, 5.5rem);
  --display-2: clamp(2.25rem, 4.6vw, 3.9rem);

  /* Space - 4px grid */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem;
  --s-24: 6rem; --s-32: 8rem;

  /* Vertical section rhythm - one token so stacked sections can't double up */
  --section-y: clamp(4.5rem, 7.5vw, 7rem);

  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --container: 76rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Lenis drives scrolling - native smooth scroll must stay off or the two fight. */
html { scroll-padding-top: 6rem; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

::selection { background: rgba(170, 180, 255, 0.28); }

/* Keyboard focus - visible on both the dark page and the white pill buttons */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn-solid:focus-visible { outline-color: var(--navy); outline-offset: -5px; }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--fg);
  color: var(--navy);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.7rem 1.3rem;
  border-radius: 0 0 12px 12px;
  transition: transform 0.25s var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

/* ---------- Shared type ---------- */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--s-6);
}
.section-tag::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--border-strong);
}

em { font-style: normal; color: var(--accent); }

.br-desktop { display: block; }
@media (max-width: 720px) { .br-desktop { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 0.72rem 1.5rem;
  transition: transform 0.35s var(--ease-out), background 0.25s, border-color 0.25s, color 0.25s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-solid { background: var(--fg); color: var(--navy); }
.btn-solid:hover { background: #e8eaf5; transform: translateY(-2px); }
.btn-ghost {
  border: 1px solid var(--border-strong);
  color: var(--fg);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.4); transform: translateY(-2px); }
.btn-lg { padding: 0.95rem 2rem; font-size: var(--text-base); }
.btn-sm { padding: 0.55rem 1.1rem; font-size: var(--text-xs); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset-inline: 0;
  top: var(--s-4);
  z-index: 100;
  display: flex;
  justify-content: center;
  padding-inline: var(--s-4);
  transition: transform 0.45s var(--ease-out);
  will-change: transform;
}
/* Retract on scroll-down so the bar never sits on a headline; return on scroll-up */
.nav.is-hidden { transform: translateY(calc(-100% - var(--s-4))); }
.nav-inner {
  width: 100%;
  max-width: var(--container);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0.6rem 0.9rem 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.nav.is-scrolled .nav-inner {
  background: rgba(20, 22, 31, 0.72);
  border-color: var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.nav-brand { display: inline-flex; align-items: center; gap: var(--s-3); }
.nav-brand img { border-radius: 9px; }
.nav-wordmark { font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; }
.nav-wordmark b { font-weight: 800; }
.nav-links { display: flex; gap: var(--s-8); }
.nav-links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-muted);
  transition: color 0.25s;
}
.nav-links a:hover { color: var(--fg); }
.nav-cta { display: flex; gap: var(--s-2); }

.nav-burger { display: none; flex-direction: column; gap: 6px; padding: var(--s-3); }
.nav-burger span { width: 22px; height: 2px; background: var(--fg); transition: transform 0.3s, opacity 0.3s; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(13, 14, 21, 0.96);
  backdrop-filter: blur(20px);
  display: none;
  align-items: center; justify-content: center;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu nav { display: flex; flex-direction: column; gap: var(--s-6); text-align: center; }
.mobile-menu nav a { font-size: var(--text-xl); font-weight: 600; }

@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
/* Two stacked clips crossfade at the loop point - see initHeroLoop() in main.js.
   Background stands in for a poster frame, matched to the loop's average tone
   (rgb 27,33,46) so there is no flash before the first decoded frame. */
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--hero-fade, 900ms) linear;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, #23283a 0%, #14161f 70%, #0d0e15 100%);
}
/* A carries .is-active in the markup, so if main.js never runs the hero still
   shows its poster frame rather than going blank. */
.hero-media video.is-active { opacity: 0.78; }
#heroParticles { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The logo now sits behind the headline. The veil is a narrow band tied to the
   text block rather than a broad wash, so the mark's ring and glow stay visible
   above and below the copy while the type still clears AA contrast. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, transparent 24%, rgba(13, 14, 21, 0.5) 38%, rgba(13, 14, 21, 0.5) 62%, transparent 76%),
    radial-gradient(ellipse 85% 65% at 50% 45%, transparent 42%, rgba(13, 14, 21, 0.5) 100%),
    linear-gradient(to bottom, rgba(13, 14, 21, 0.5), rgba(13, 14, 21, 0.1) 35%, rgba(13, 14, 21, 0.9) 92%, var(--bg) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--s-16);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  margin-bottom: var(--s-8);
}
.hero-title {
  font-size: var(--display);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.04;
  margin-bottom: var(--s-6);
}
/* Each .hero-line is its own stagger unit, so the three spans stay as written on
   wide screens. On narrow ones a span is too long for one line and wraps anyway;
   `balance` splits it evenly instead of leaving an orphan ("Custom Discord" /
   "bots"). It only applies to short blocks, so it costs nothing on desktop where
   nothing wraps, and browsers without it just wrap normally. */
.hero-title span { display: block; text-wrap: balance; }
.hero-sub {
  max-width: 34rem;
  color: var(--fg-muted);
  font-size: var(--text-lg);
  font-weight: 400;
  margin-bottom: var(--s-8);
}
.hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }

.hero-foot {
  position: absolute;
  bottom: var(--s-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.hero-scroll {
  width: 22px; height: 34px;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  display: flex; justify-content: center;
  padding-top: 6px;
}
.hero-scroll i {
  width: 3px; height: 7px; border-radius: 3px;
  background: var(--fg-muted);
  animation: scrollNudge 2s var(--ease-out) infinite;
}
@keyframes scrollNudge {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(9px); opacity: 0; }
  56% { transform: translateY(0); opacity: 0; }
}
@media (max-width: 860px), (max-height: 700px) {
  .hero-foot { display: none; }
}

/* ============================================================
   PROOF / STATS
   ============================================================ */
.proof {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
}
.proof .container { position: relative; z-index: 2; }
.proof-title {
  font-size: var(--display-2);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
  max-width: 54rem;
  margin-bottom: var(--s-6);
}
.proof-sub {
  color: var(--fg-muted);
  max-width: 36rem;
  margin-bottom: var(--s-12);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
}
.stat {
  padding: var(--s-8) var(--s-6) 0 0;
  border-right: 1px solid var(--border);
}
.stat:last-child { border-right: none; }
.stat-value {
  display: block;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--s-3);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: var(--text-sm);
  color: var(--fg-faint);
  font-weight: 500;
}
.proof-ghost {
  position: absolute;
  right: -0.06em;
  bottom: -0.28em;
  font-size: clamp(12rem, 28vw, 24rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.045);
  user-select: none;
  pointer-events: none;
}
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 0; border-top: none; }
  .stat { border-top: 1px solid var(--border); padding: var(--s-6) var(--s-4) var(--s-2) 0; }
  .stat:nth-child(2n) { border-right: none; }
}

/* ============================================================
   SERVICES BENTO + TILT CARDS
   ============================================================ */
.services { padding: var(--section-y) 0; }
.services-title {
  font-size: var(--display-2);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: var(--s-12);
}
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.bento-wide { grid-column: span 2; }

.tilt-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-elev) 100%);
  padding: var(--s-8);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color 0.3s;
  display: flex;
  flex-direction: column;
}
.tilt-card:hover { border-color: var(--border-strong); }

.card-glow {
  position: absolute; inset: -40%;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--glow, rgba(170,180,255,0.12)) 0%, transparent 45%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.card-shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.06) 48%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.tilt-card:hover .card-glow { opacity: 1; }

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-8);
}
.card-chip {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
}
.card-chip svg { width: 20px; height: 20px; }
.chip-indigo { color: var(--hue-indigo); background: rgba(165, 173, 255, 0.09); }
.chip-teal   { color: var(--hue-teal);   background: rgba(127, 224, 207, 0.08); }
.chip-rose   { color: var(--hue-rose);   background: rgba(255, 157, 184, 0.08); }
.chip-amber  { color: var(--hue-amber);  background: rgba(255, 209, 138, 0.08); }
.card-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
}
.tilt-card h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-3);
}
.tilt-card p {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  margin-bottom: var(--s-8);
  flex: 1;
}
.card-foot {
  display: flex;
  gap: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}
.card-foot b { color: var(--fg); font-weight: 700; }

/* Action tile - fills the 9th cell so the grid closes cleanly */
.bento-cta {
  justify-content: flex-end;
  background: linear-gradient(160deg, rgba(170, 180, 255, 0.10) 0%, var(--bg-elev) 100%);
  border-color: rgba(170, 180, 255, 0.22);
}
.bento-cta h3 { margin-bottom: var(--s-2); }
.bento-cta p { flex: 0; margin-bottom: var(--s-6); }
.bento-cta-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
}
.bento-cta-arrow svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease-out); }
.bento-cta:hover .bento-cta-arrow svg { transform: translateX(5px); }

@media (max-width: 1020px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-wide, .bento-cta { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento-wide, .bento-cta { grid-column: span 1; }
}

/* ============================================================
   CTA
   ============================================================ */
.cta {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
  border-block: 1px solid var(--border);
}
.cta-media { position: absolute; inset: 0; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.cta-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(13, 14, 21, 0.92) 20%, rgba(13, 14, 21, 0.55) 70%, rgba(13, 14, 21, 0.75));
}
.cta-content { position: relative; z-index: 2; }
.cta-title {
  font-size: var(--display-2);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: var(--s-6);
}
.cta-sub { color: var(--fg-muted); max-width: 32rem; margin-bottom: var(--s-12); }
.cta-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  padding-top: var(--s-24);
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-8);
  padding-bottom: var(--s-16);
}
.footer-brand p {
  margin-top: var(--s-6);
  font-size: var(--text-sm);
  color: var(--fg-faint);
}
.footer-social {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-8);
}
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  transition: color 0.25s, border-color 0.25s, transform 0.25s var(--ease-out);
}
.footer-social a:hover {
  color: var(--fg);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.footer-social svg { width: 17px; height: 17px; }
.footer-col { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-col h4 {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--s-2);
}
.footer-col a {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  transition: color 0.25s;
  width: fit-content;
}
.footer-col a:hover { color: var(--fg); }
.footer-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hue-teal);
  box-shadow: 0 0 12px var(--hue-teal);
  animation: statusPulse 2.4s ease-in-out infinite;
}
@keyframes statusPulse { 50% { opacity: 0.5; } }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--fg-faint);
  flex-wrap: wrap;
}
.footer-ghost {
  font-size: clamp(6rem, 21vw, 20rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.72;
  text-align: center;
  color: transparent;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.005));
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  pointer-events: none;
  transform: translateY(0.08em);
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

/* ============================================================
   REVEAL STATES (pre-JS + reduced motion)
   ============================================================ */
.js .hero-line { opacity: 0; transform: translateY(28px); }
.js [data-reveal] { opacity: 0; transform: translateY(36px); }
.js .proof-title, .js .proof-sub, .js .stats,
.js .services-title, .js .services .section-tag, .js .proof .section-tag,
.js .cta-content > * { opacity: 0; transform: translateY(30px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .js .hero-line, .js [data-reveal],
  .js .proof-title, .js .proof-sub, .js .stats,
  .js .services-title, .js .services .section-tag, .js .proof .section-tag,
  .js .cta-content > * { opacity: 1 !important; transform: none !important; }
}