/* ============================================================
   Fit4Race — prototype styles
   ============================================================ */
:root {
  /* ---- F4R brand palette (brandbook v2) ---- */
  /* steel-grey scale */
  --steel-1: #1c252c;   /* F4R acélszürke (primary dark) */
  --steel-2: #3c444a;
  --steel-3: #5d6368;
  --steel-4: #7d8286;
  --steel-5: #9ea2a5;
  /* yellow scale */
  --yellow:   #f8d000;  /* F4R sárga (primary) */
  --yellow-2: #fadb3d;
  --yellow-3: #fbe46b;
  --yellow-4: #fcec9a;
  --yellow-5: #fdf3c0;

  --bg-0: #11171c;            /* a touch darker than steel, for depth */
  --bg-1: #1c252c;            /* brand steel grey */
  --card: rgba(255, 255, 255, 0.04);
  --card-border: rgba(158, 162, 165, 0.22);  /* steel-tinted hairline */
  --yellow-bright: #fbe46b;
  --yellow-deep: #e6bf00;
  --cream: #f4f6f8;          /* brand uses white + yellow (no cream) */
  --text: #f4f6f8;
  --muted: #9ea2a5;          /* brand steel-5 */
  --maxw: 1320px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  /* Ghino is the brand font; Poppins is a close geometric stand-in for the web demo */
  font-family: "Poppins", "Ghino", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* IMPORTANT: body must NOT have a fixed height — the gradient paints over the
     body box, and a viewport-sized body makes it TILE down the page (the pale
     horizontal bands). min-height lets the box grow with the content instead,
     and no-repeat + a solid base color make repeating impossible. */
  background-color: var(--bg-0);
  background-image:
    radial-gradient(1200px 700px at 50% -10%, rgba(248, 208, 0, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  background-repeat: no-repeat;
  color: var(--text);
  min-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- ambient background (cheap, static) ----
   The old radial vignette produced visible banding rings on dark screens.
   Fix: a gentler glow + a fine SVG-noise grain layer that dithers the
   gradient so bands can't form. */
.bg-glow {
  position: fixed;
  top: -300px; left: 50%;
  width: 1300px; height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(248, 208, 0, 0.06), rgba(248, 208, 0, 0.02) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.bg-grain {
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 40px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.logo {
  position: absolute;
  left: 40px; top: 50%;
  transform: translateY(-50%);
  display: block;
}
.logo img { height: 58px; width: auto; display: block; }

.menu { display: flex; gap: 64px; }
.menu a {
  color: var(--text);
  text-decoration: none;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .2px;
  opacity: .92;
  transition: color .25s, opacity .25s;
}
.menu a:hover { color: var(--yellow); opacity: 1; }
.menu a {
  position: relative;
}
.menu a::after {
  content: "";
  position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.menu a:hover::after { transform: scaleX(1); }

/* small "Let's talk" pill on the right, mirroring the logo */
.nav-cta {
  position: absolute;
  right: 40px; top: 50%;
  transform: translateY(-50%);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: #15181c;
  text-decoration: none;
  background: var(--yellow);
  box-shadow: 0 6px 18px rgba(249, 210, 0, 0.22);
  transition: transform .2s var(--ease), box-shadow .25s, background .25s;
}
.nav-cta:hover { transform: translateY(calc(-50% - 2px)); background: var(--yellow-2); box-shadow: 0 10px 26px rgba(249, 210, 0, 0.35); }
/* in the experience view the fixed ← Back button owns the top-right corner */
body.view-detail .nav-cta { display: none; }

/* ============================================================
   STAGE + HEADLINE
   ============================================================ */
.stage {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 40px 28px;
}

.headline {
  text-align: center;
  font-size: clamp(22px, 3.4vw, 50px);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 24px auto 44px;
  line-height: 1.05;
  color: var(--cream);
  white-space: nowrap;                               /* keep it on one line */
  text-shadow: 0 0 34px rgba(243, 233, 198, 0.16);  /* soft, cheap glow */
}

.hl-word { color: var(--cream); }

/* ---- hero subline + CTAs (home only) ---- */
.hero-lead {
  text-align: center;
  margin: -14px auto 40px;
}
.hero-lead-text {
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
}
.hero-lead-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.btn-primary,
.btn-outline {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .25s, border-color .25s, color .25s, background .25s;
}
.btn-primary {
  color: #15181c;
  background: linear-gradient(100deg, #d9b600 0%, #f8d000 20%, #fdf3c0 38%, #fbe46b 50%, #fdf3c0 62%, #f8d000 80%, #d9b600 100%);
  background-size: 240% 100%;
  animation: hl-shimmer 4.5s ease-in-out infinite;
  box-shadow: 0 6px 20px rgba(249, 210, 0, 0.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(249, 210, 0, 0.4); }
.btn-outline {
  color: var(--text);
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.03);
}
.btn-outline:hover { transform: translateY(-2px); border-color: var(--yellow); color: var(--yellow); }
.stage[data-view="detail"] .hero-lead { display: none; }

/* animated yellow gradient + gentle "magic" glow */
.hl-accent {
  background: linear-gradient(
    100deg,
    #d9b600 0%,
    #f8d000 20%,
    #fdf3c0 38%,
    #fbe46b 50%,
    #fdf3c0 62%,
    #f8d000 80%,
    #d9b600 100%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hl-shimmer 4.5s ease-in-out infinite, hl-glow 3s ease-in-out infinite;
  will-change: background-position, filter;
}
@keyframes hl-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes hl-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 205, 0, 0.30)); }
  50%      { filter: drop-shadow(0 0 26px rgba(255, 232, 110, 0.80)); }
}

/* headline suffix crossfade (4 Everyone <-> 4 Motorsport) */
.hl-suffix {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.suffix-text {
  display: inline-block;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  color: var(--cream);
}
.hl-suffix [data-detail] {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
}
.stage[data-view="detail"] .hl-suffix [data-home] {
  opacity: 0;
  transform: translateY(-8px);
}
.stage[data-view="detail"] .hl-suffix [data-detail] {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   DECK (cards + racing detail share this box)
   ============================================================ */
.deck {
  position: relative;
  min-height: 560px;
}

/* ---- CARDS ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  transition: opacity .5s var(--ease), transform .55s var(--ease), filter .5s var(--ease);
}
/* hide the home deck when the racing experience is open */
.stage[data-view="detail"] .deck { display: none; }

.card {
  position: relative;
  height: 560px;
  border-radius: 22px;
  border: 1px solid var(--card-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 40%, rgba(0,0,0,0.25)),
    var(--card);
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.card:hover,
.card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--yellow);                 /* yellow stroke on hover */
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(249,210,0,0.35);
  outline: none;
}

.card-text {
  position: absolute;
  top: 30px; left: 30px; right: 30px;
  z-index: 2;            /* sits BEHIND the figure */
  pointer-events: none;
}
.card-title {
  font-size: 30px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.42);   /* darkened by default */
  line-height: 1.04;
  margin-bottom: 6px;
  transition: color .3s var(--ease);
}
.card-list {
  list-style: none;
  /* fade the list out toward the bottom — last item reaches 0% opacity */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
}
.card-list li {
  font-size: 21px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.22);   /* darkened by default */
  line-height: 1.28;
  transition: color .3s var(--ease);
}

/* brighten text + turn the title yellow when the card is active */
.card:hover .card-title,
.card:focus-visible .card-title { color: var(--yellow); }

.card:hover .card-list li,
.card:focus-visible .card-list li { color: rgba(255, 255, 255, 0.88); }

/* the person — darkened + desaturated by default */
.figure {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  height: 78%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  z-index: 3;            /* sits IN FRONT of the card text */
  filter: grayscale(0.75) brightness(0.5) contrast(0.95);
  transition: filter .45s var(--ease), transform .5s var(--ease), height .5s var(--ease);
  pointer-events: none;
}
/* hover / focus -> full colour + brightness */
.card:hover .figure,
.card:focus-visible .figure {
  filter: grayscale(0) brightness(1) contrast(1);
  transform: translateX(-50%) translateY(-4px) scale(1.03);
}

/* when one card is hovered, dim the others a touch more */
.cards:hover .card:not(:hover) .figure { filter: grayscale(0.85) brightness(0.4); }

.card-hint {
  position: absolute;
  bottom: 18px; left: 0; right: 0;
  text-align: center;
  z-index: 4;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--yellow);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.card:hover .card-hint,
.card:focus-visible .card-hint { opacity: .9; transform: translateY(0); }

/* ============================================================
   RACING EXPERIENCE (full-bleed, scrollable)
   ============================================================ */
.racing-xp {
  display: none;
  position: relative;
  left: 50%; right: 50%;
  width: 100vw;
  margin-left: -50vw; margin-right: -50vw;
  margin-top: 8px;
}
.stage[data-view="detail"] .racing-xp { display: block; }

/* ---- Racing view: full-screen hero with the nav floating on the image ---- */
/* (the nav is a sibling of .stage, so we hook off a body class set in script.js) */
body.view-detail .nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
}
body.view-detail .headline { display: none; }   /* drop the "Empowering…" headline */
body.view-detail .stage { padding-top: 0; }      /* let the hero reach the top edge */
body.view-detail .racing-xp { margin-top: 0; }

/* ---- HERO: full-width modal, image as background ---- */
.xp-hero {
  position: relative;
  min-height: 100vh;          /* full screen when the racing view opens */
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--card-border);
}
/* cinematic "letterbox open" + light sweep when the racing view appears */
.stage[data-view="detail"] .xp-hero { animation: heroOpen 1.15s cubic-bezier(.16,1,.3,1) both; }
@keyframes heroOpen {
  0%   { clip-path: inset(46% 0 46% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.xp-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,240,185,0.16) 47%, rgba(255,255,255,0.30) 50%, rgba(255,240,185,0.16) 53%, transparent 62%);
  transform: translateX(-130%);
  opacity: 0;
}
.stage[data-view="detail"] .xp-hero::after { animation: heroSweep 1.2s ease .55s both; }
@keyframes heroSweep {
  0%   { transform: translateX(-130%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}
.hero-bg {
  position: absolute; inset: 0;
  /* --hero-img is swapped per category by script.js */
  background-image:
    linear-gradient(90deg, rgba(6,9,11,0.95) 0%, rgba(6,9,11,0.74) 34%, rgba(6,9,11,0.22) 66%, rgba(6,9,11,0.6) 100%),
    linear-gradient(0deg, rgba(6,9,11,0.85) 0%, transparent 30%, transparent 78%, rgba(6,9,11,0.55) 100%),
    var(--hero-img, url("assets/racing-bg.png"));
  background-size: cover;
  background-position: center;
}
.stage[data-view="detail"] .hero-bg { animation: heroBg 1.9s cubic-bezier(.16,1,.3,1) .15s both; }
@keyframes heroBg {
  0%   { opacity: 0; transform: scale(1.22) translateX(50px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateX(0); }
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 56px;
  display: flex;
  align-items: center;
}
.hero-content { flex: 1; max-width: 620px; }
.stage[data-view="detail"] .hero-title { animation: heroTitle 1s cubic-bezier(.16,1,.3,1) .6s both; }
@keyframes heroTitle {
  0%   { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.stage[data-view="detail"] .rotator { animation: heroRot .9s var(--ease) .92s both; }
@keyframes heroRot {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: none; }
}
.hero-title {
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.4px;
  line-height: 1.06;
  margin-bottom: 44px;
}
.hero-title .rk { color: var(--yellow); }

/* "Let's talk" CTA — animated yellow gradient + glow (like the headline accent) */
.cta-talk {
  display: inline-block;
  margin-top: 36px;
  padding: 15px 38px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #15181c;                 /* dark, readable on yellow */
  text-decoration: none;
  cursor: pointer;
  opacity: 0;                     /* revealed by the entrance animation */
  background: linear-gradient(
    100deg,
    #d9b600 0%, #f8d000 20%, #fdf3c0 38%, #fbe46b 50%, #fdf3c0 62%, #f8d000 80%, #d9b600 100%
  );
  background-size: 240% 100%;
  box-shadow: 0 6px 20px rgba(249, 210, 0, 0.28);
  transition: transform .2s var(--ease);
}
.cta-talk:hover { transform: translateY(-2px); }
.cta-talk:active { transform: translateY(0); }
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 6px 18px rgba(249, 210, 0, 0.25); }
  50%      { box-shadow: 0 10px 32px rgba(255, 226, 90, 0.60); }
}
@keyframes ctaIn {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: none; }
}
.stage[data-view="detail"] .cta-talk {
  animation:
    hl-shimmer 4.5s ease-in-out infinite,
    cta-glow 3s ease-in-out infinite,
    ctaIn .8s var(--ease) 1.05s both;
}

/* the driver — slides from a central spot OUT to the side */
.hero-figure {
  position: absolute;
  right: 6%;
  bottom: 0;
  height: 82%;              /* tuned so the driver reads ≈75% of the modal height */
  width: auto;
  object-fit: contain;
  object-position: bottom center;
  z-index: 1;
  filter: drop-shadow(0 24px 44px rgba(0,0,0,0.55));
  pointer-events: none;
}
.stage[data-view="detail"] .hero-figure { animation: heroFig 1.5s cubic-bezier(.16,1,.3,1) .35s both; }
@keyframes heroFig {
  0%   { opacity: 0; transform: translateX(-230px) scale(.88); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.scroll-cue {
  position: absolute;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: cueBob 1.8s ease-in-out infinite;
}
@keyframes cueBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* ---- looping strengths rotator (lives in the hero) ---- */
.rotator {
  height: 192px;            /* 3 rows * 64px */
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
}
.rotator-list { list-style: none; transition: transform .6s var(--ease); }
.rotator-list li {
  height: 64px;
  display: flex;
  align-items: center;
  font-size: 34px;
  font-weight: 700;
  color: rgba(255,255,255,0.28);
  transition: color .5s var(--ease);
}
.rotator-list li.is-active { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.18); }

/* ---- BODY: stacked explainer modals ---- */
.xp-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px 110px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.xp-modal {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
  border: 1px solid var(--card-border);
  border-radius: 22px;
  padding: 44px 48px;
}
.reveal-up {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-up.in { opacity: 1; transform: none; }

.xp-eyebrow { color: var(--yellow); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; font-size: 14px; margin-bottom: 16px; }
.xp-h { font-size: clamp(24px, 3vw, 40px); font-weight: 800; color: #fff; letter-spacing: -0.4px; }
.xp-h .rk { color: var(--yellow); }
.xp-sub { color: var(--muted); font-size: 18px; margin-top: 8px; }
.xp-text { color: rgba(255,255,255,0.7); font-size: 17px; line-height: 1.65; margin-top: 14px; max-width: 640px; }
.xp-text.center { margin: 16px auto 0; text-align: center; max-width: 720px; }

/* MODAL 1 — what we do + lap time */
.xp-do-grid { display: grid; grid-template-columns: 1.25fr 0.95fr; gap: 44px; align-items: center; }
.achieve-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.achieve-list li {
  position: relative;
  padding-left: 38px;
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 700;
  color: #fff;
}
.achieve-list li::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 12px rgba(249,210,0,0.45);
}
.achieve-list li::after {
  content: "✓";
  position: absolute; left: 5px; top: 50%; transform: translateY(-52%);
  color: #0a0e0f; font-size: 13px; font-weight: 900;
}

/* lap-time widget (motorsport timing) */
.laptime {
  background: rgba(0,0,0,0.42);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 26px 30px;
  text-align: center;
}
.laptime-label { display: block; color: var(--muted); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 8px; }
.laptime-value {
  display: block;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
  line-height: 1;
}
.laptime-value .ms { color: var(--yellow); }
.laptime-value .sep { opacity: .5; }
.laptime-delta { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.delta {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 26px;
  font-weight: 800;
  color: #c06bff;
  background: rgba(170,80,255,0.14);
  border: 1px solid rgba(170,80,255,0.55);
  padding: 5px 13px;
  border-radius: 9px;
  box-shadow: 0 0 18px rgba(170,80,255,0.30);
}
.delta-note { color: rgba(255,255,255,0.72); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.delta-arrow { color: #c06bff; font-size: 16px; }

/* MODAL 2 — season charts */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 30px; }
.chart { background: rgba(0,0,0,0.3); border: 1px solid var(--card-border); border-radius: 16px; padding: 18px 18px 8px; }
.chartsvg { width: 100%; height: auto; display: block; }
.chart .line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart .bad { stroke: #7d8286; }
.chart .good { stroke: var(--yellow); filter: drop-shadow(0 0 6px rgba(249,210,0,0.5)); }
.chart .axis { stroke: rgba(255,255,255,0.16); stroke-width: 1.5; }
.chart .target { stroke: rgba(255,255,255,0.16); stroke-width: 1.5; stroke-dasharray: 5 6; }
.chart figcaption { text-align: center; margin-top: 10px; color: var(--muted); font-weight: 700; font-size: 15px; }
.chart.is-good figcaption { color: var(--yellow); }

/* MODAL 3 — championship */
.champ-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 28px 0 24px; }
.champ-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.champ-card .cause { color: var(--yellow); font-weight: 800; font-size: 19px; }
.champ-card .arrow { color: var(--muted); font-size: 22px; line-height: 1; }
.champ-card .effect { color: #fff; font-weight: 600; font-size: 18px; }
.champ-conclusion { text-align: center; color: rgba(255,255,255,0.85); font-size: 18px; line-height: 1.6; max-width: 760px; margin: 0 auto; }
.champ-conclusion strong { color: var(--yellow); font-weight: 800; }

/* ---- Trusted-by logo marquee ---- */
.trusted {
  padding: 54px 0 72px;
  text-align: center;
}
.trusted-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 32px;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
  pointer-events: none;          /* never react to the mouse */
}
.marquee-group {
  display: flex;
  align-items: center;
  gap: 80px;
  padding-right: 80px;          /* equal trailing gap keeps the loop seamless */
}
.brand {
  height: 62px;
  width: auto;
  object-fit: contain;
  opacity: 0.62;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   "Performance is engineered" — white human-vs-machine section
   ============================================================ */
.engineered {
  position: relative;
  background: #ffffff;
  color: #1b2330;
  overflow: hidden;
  padding: 96px 24px 104px;
  isolation: isolate;
}
/* floating dots backdrop */
.eng-dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.eng-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(28, 35, 46, 0.10);
  animation: floatDot var(--dur, 9s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
@keyframes floatDot {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx, 0), var(--dy, -22px)); }
}

/* side images — slide in from the edges and stay */
.eng-helmet, .eng-car {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: transform 1s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
/* both deliberately spill past the screen edges (cropped by overflow:hidden) */
.eng-helmet {
  left: -20%; top: 50%;
  height: 50vw; max-height: 840px;   /* same visible height as the car */
  width: auto;
  transform: translate(-130%, -50%);
}
.eng-car {
  right: -17%; top: 50%;
  width: 46%; max-width: 760px; height: auto;
  transform: translate(130%, -50%);
}
/* non-racing categories: the left image is the category's PERSON (the human
   side of the human-vs-machine comparison) instead of the helmet */
.eng-helmet.is-person {
  left: -2%;
  height: 38vw; max-height: 560px;
  filter: drop-shadow(0 18px 34px rgba(28, 35, 46, 0.28));
}
/* non-racing machine side: flat SVG illustration instead of the car photo —
   slightly smaller and tucked less far off-screen */
.eng-car.is-flat {
  right: -4%;
  width: 34%; max-width: 540px;
}
.engineered.in .eng-helmet { transform: translate(0, -50%); opacity: 1; }
.engineered.in .eng-car { transform: translate(0, -50%); opacity: 1; }

/* centre content */
.eng-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease) .15s, transform .8s var(--ease) .15s;
}
.engineered.in .eng-content { opacity: 1; transform: none; }
.eng-title {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.6px;
  color: #1b2330;
}
.eng-title .hl-y { color: #efb100; }
.eng-sub {
  color: #46505f;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.6;
  margin: 18px auto 0;
  max-width: 660px;
}
.eng-compare {
  margin: 48px auto 0;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: baseline;
}
.cmp-row .human,
.cmp-row .machine {
  font-weight: 800;
  font-size: clamp(18px, 2.1vw, 27px);
  letter-spacing: -0.2px;
  line-height: 1.18;
}
.cmp-row .human  { text-align: right; color: #efb100; }
.cmp-row .machine { text-align: left;  color: #1b2330; }

@media (max-width: 900px) {
  .eng-helmet { opacity: .12 !important; height: 50vw; }
  .eng-car { opacity: .12 !important; width: 46%; }
  .engineered.in .eng-helmet,
  .engineered.in .eng-car { opacity: .12; }
}
@media (max-width: 560px) {
  .cmp-row { gap: 18px; }
  .eng-helmet, .eng-car { display: none; }
}

/* ============================================================
   Video previews (intro + success stories) — placeholders
   ============================================================ */
/* shared play button */
.play-btn {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(249, 210, 0, 0.95);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  transition: transform .25s var(--ease), background .25s;
}
.play-btn::before {           /* triangle */
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent #15181c;
  margin-left: 6px;
}
.play-btn::after {            /* pulsing ring */
  content: "";
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(249, 210, 0, 0.55);
  animation: playPulse 2.2s ease-out infinite;
}
@keyframes playPulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.45); opacity: 0; }
}
.play-btn.small { width: 60px; height: 60px; }
.play-btn.small::before { border-width: 11px 0 11px 18px; }
.play-btn.small::after { display: none; }

/* ---- intro video ---- */
.intro-video {
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 24px 84px;
  text-align: center;
}
.iv-eyebrow { color: var(--yellow); text-transform: uppercase; letter-spacing: 3px; font-size: 13px; font-weight: 800; margin-bottom: 12px; }
.iv-title { font-size: clamp(24px, 3vw, 40px); font-weight: 800; color: #fff; letter-spacing: -0.4px; margin-bottom: 30px; }
.iv-title .rk { color: var(--yellow); }
.video-card {
  position: relative;
  margin: 0 auto;
  max-width: 920px;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  cursor: pointer;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.video-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.video-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.35)); transition: background .4s; }
.video-card:hover img { transform: scale(1.04); }
.video-card:hover .play-btn,
.video-card:focus-visible .play-btn { transform: translate(-50%, -50%) scale(1.1); background: var(--yellow); }

/* ---- success stories ---- */
.stories {
  max-width: 1180px;
  margin: 0 auto;
  padding: 84px 24px 110px;
  text-align: center;
}
.stories-title { font-size: clamp(24px, 3vw, 40px); font-weight: 800; color: #fff; letter-spacing: -0.4px; }
.stories-title .rk { color: var(--yellow); }
.stories-sub { color: var(--muted); margin-top: 8px; font-size: 17px; margin-bottom: 40px; }
.stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.story-card { cursor: pointer; text-align: left; }
.story-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--card-border);
}
.story-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.story-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.42)); transition: background .4s; }
.story-card:hover .story-thumb img { transform: scale(1.05); }
.story-card:hover .play-btn { transform: translate(-50%, -50%) scale(1.12); background: var(--yellow); }
.story-meta { padding: 14px 4px 0; }
.story-name { display: block; color: #fff; font-weight: 800; font-size: 17px; }
.story-role { display: block; color: var(--muted); font-size: 14px; margin-top: 3px; }

@media (max-width: 820px) {
  .stories-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

/* ============================================================
   Results — season performance comparison
   ============================================================ */
.results {
  max-width: 1100px;
  margin: 0 auto;
  padding: 84px 24px 100px;
  text-align: center;
}
.results-title {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1.12;
}
.results-title .rk { color: var(--yellow); }
.results-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 17px;
  line-height: 1.65;
  max-width: 760px;
  margin: 18px auto 0;
}
/* extra chart bits (reuses .charts/.chart/.line/.axis/.figcaption) */
.chart .grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.chart .area { stroke: none; }
.chart .bad-area { fill: rgba(125, 130, 134, 0.16); }
.chart .good-area { fill: rgba(249, 210, 0, 0.14); }
.chart .pt { stroke: none; }
.chart .bad-pt { fill: #9ea2a5; }
.chart .good-pt { fill: var(--yellow); }
.chart .axlabel { fill: rgba(255, 255, 255, 0.45); font-size: 11px; font-weight: 600; }
.chart .dnf-dot { fill: #ffffff; stroke: rgba(255, 255, 255, 0.22); stroke-width: 6; }
.chart .dnf-label { fill: #ffffff; font-size: 12px; font-weight: 800; letter-spacing: .5px; }
.chart .finish-label { fill: var(--yellow); font-size: 12px; font-weight: 800; letter-spacing: .5px; opacity: .85; }

/* ============================================================
   Holistic approach — bg matches the diagram's background
   ============================================================ */
.holistic {
  /* steel stays solid behind the centred diagram, but fades into the page
     gradient at the top/bottom edges so there's no hard rectangle seam */
  background: linear-gradient(180deg,
    transparent 0%,
    var(--steel-1) 15%,
    var(--steel-1) 85%,
    transparent 100%);
  padding: 92px 24px 104px;
}
.holistic-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.h-eyebrow { color: var(--yellow); text-transform: uppercase; letter-spacing: 3px; font-size: 13px; font-weight: 800; margin-bottom: 14px; }
.h-title { font-size: clamp(26px, 3.4vw, 44px); font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.h-title .rk { color: var(--yellow); }
.h-lead { color: rgba(255, 255, 255, 0.72); font-size: 17px; line-height: 1.65; margin-top: 16px; max-width: 540px; }
.h-lead strong { color: var(--yellow); font-weight: 800; }
.h-pillars { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.h-pillars li { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; border-left: 2px solid rgba(249, 210, 0, 0.6); }
.hp-k { color: #fff; font-weight: 800; font-size: 16px; }
.hp-v { color: var(--muted); font-size: 14px; }
.holistic-figure { text-align: center; }
.holistic-figure img { width: 100%; max-width: 540px; height: auto; display: block; margin: 0 auto; }

@media (max-width: 860px) {
  .holistic-inner { grid-template-columns: 1fr; gap: 28px; }
  .holistic-figure { order: -1; }
  .h-lead { max-width: none; }
}

/* ============================================================
   Our services — 3-pillar cards
   ============================================================ */
.services {
  max-width: 1180px;
  margin: 0 auto;
  padding: 90px 24px 112px;
  text-align: center;
}
.services-eyebrow { color: var(--yellow); text-transform: uppercase; letter-spacing: 3px; font-size: 13px; font-weight: 800; margin-bottom: 14px; }
.services-title { font-size: clamp(26px, 3.4vw, 44px); font-weight: 800; color: #fff; letter-spacing: -0.5px; margin-bottom: 44px; }
.services-title .rk { color: var(--yellow); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; }
.service-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 32px 28px;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(249, 210, 0, 0.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}
.service-num { display: inline-block; font-size: 14px; font-weight: 800; color: var(--yellow); letter-spacing: 2px; margin-bottom: 14px; }
.service-name { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.service-desc { color: rgba(255, 255, 255, 0.66); font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.service-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.service-list li { position: relative; padding-left: 22px; color: rgba(255, 255, 255, 0.82); font-size: 15px; font-weight: 600; }
.service-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }

@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ============================================================
   What we offer — expandable feature grid (Apple-style)
   ============================================================ */
.features {
  max-width: 1180px;
  margin: 0 auto;
  padding: 90px 24px 96px;
  text-align: center;
}
.feat-eyebrow { color: var(--yellow); text-transform: uppercase; letter-spacing: 3px; font-size: 13px; font-weight: 800; margin-bottom: 14px; }
.feat-section-title { font-size: clamp(26px, 3.4vw, 44px); font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.feat-section-title .rk { color: var(--yellow); }
.feat-section-sub { color: rgba(255, 255, 255, 0.7); font-size: 17px; line-height: 1.65; max-width: 720px; margin: 16px auto 48px; }

/* Masonry-by-columns: cards are distributed into explicit columns (script.js),
   so expanding a card only pushes the cards BELOW it in its own column —
   the other columns (and the rest of its row) stay put. */
.features-grid {
  display: flex;
  align-items: flex-start;       /* each column sizes to its own content */
  gap: 18px;
  text-align: left;
}
.feat-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.features-grid[data-cols="1"] { max-width: 460px; margin: 0 auto; }

.feature-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 24px;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s, background .3s;
}
.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(249, 210, 0, 0.5);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
}
.feature-card:focus-visible {
  outline: none;
  border-color: rgba(249, 210, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(249, 210, 0, 0.25);
}
.feature-card.open {
  border-color: rgba(249, 210, 0, 0.55);
  background: linear-gradient(180deg, rgba(249, 210, 0, 0.07), rgba(255,255,255,0.012));
}

.feat-icon {
  display: inline-flex;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border-radius: 13px;
  background: rgba(249, 210, 0, 0.12);
  color: var(--yellow);
  margin-bottom: 18px;
}
.feat-icon svg { width: 24px; height: 24px; }
.feat-title { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -0.2px; line-height: 1.25; }

/* descriptions are always visible — the old +/expand pattern left the cards
   looking like empty boxes */
.feat-desc {
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 10px;
}
.feat-toggle { display: none; }

/* Column count is set by script.js to match these widths: ≤480→1, ≤760→2,
   ≤1080→3, else 4 (kept in JS so the explicit-column DOM stays in sync). */

/* ---- back button (fixed, only while in racing view) ---- */
.back-btn {
  position: fixed;
  top: 22px; right: 26px;
  z-index: 60;
  display: none;
  align-items: center;
  background: rgba(20,24,26,0.7);
  border: 1px solid var(--card-border);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .25s, border-color .25s, transform .25s;
}
.stage[data-view="detail"] .back-btn { display: inline-flex; }
.back-btn:hover { background: rgba(40,46,50,0.85); border-color: rgba(255,255,255,0.28); transform: translateX(-2px); }

/* ============================================================
   ENTRANCE ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
}
body.loaded .reveal {
  animation: reveal-in .8s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes reveal-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
  .reveal-up { opacity: 1; transform: none; transition: none; }
  .hl-accent { animation: none; }
  .rotator-list { transition: none; }
  .xp-hero, .xp-hero::after, .hero-bg, .hero-content, .hero-title, .rotator, .hero-figure { animation: none !important; }
  .scroll-cue { animation: none; }
  .marquee-track { animation: none; }
  .eng-dot { animation: none; }
  .eng-helmet, .eng-car, .eng-content { transition: none; }
  .cta-talk { opacity: 1 !important; animation: none !important; }
  .play-btn::after { animation: none; display: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .deck { min-height: auto; }
  .hero-inner { padding: 0 32px; }
  .hero-content { max-width: 58%; }
  .hero-figure { right: 0; height: 84%; opacity: .9; }
  .xp-do-grid { grid-template-columns: 1fr; gap: 28px; }
  .champ-grid { grid-template-columns: 1fr; }
  .champ-card { flex-direction: row; justify-content: center; gap: 14px; }
  .champ-card .arrow { transform: rotate(-90deg); }
}
@media (max-width: 640px) {
  .charts { grid-template-columns: 1fr; }
  .hero-figure { opacity: .35; }
  .hero-content { max-width: 100%; }
  .xp-modal { padding: 30px 22px; }
}
@media (max-width: 760px) {
  /* nav: logo goes back into the flow so it can't collide with the menu */
  .nav { justify-content: space-between; padding: 18px 20px; }
  .logo { position: static; transform: none; }
  .logo img { height: 40px; }
  .menu { gap: 22px; }
  .menu a { font-size: 15px; }

  /* headline: let it wrap on small screens */
  .headline {
    white-space: normal;
    font-size: clamp(30px, 8.6vw, 40px);
    line-height: 1.12;
    margin: 18px auto 34px;
  }
  .hero-lead { margin-top: 0; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME EXTRAS — stat strip + trusted-by on the landing
   ============================================================ */
.stage[data-view="detail"] .home-extra { display: none; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 64px auto 0;
  padding: 34px 10px;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}
.stat { text-align: center; }
.stat-n {
  display: block;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.5px;
}
.stat-n em {
  font-style: normal;
  color: var(--yellow);
  font-size: 0.62em;
  margin-left: 2px;
}
.stat-l {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
}

/* trusted-by reused on home — slightly tighter than the detail version */
.home-trusted { padding: 44px 0 10px; }
.home-trusted .trusted-label { margin-bottom: 24px; }
.home-trusted .brand { height: 52px; opacity: .75; }

/* ============================================================
   GLOBAL FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--card-border);
  background: rgba(9, 13, 16, 0.72);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px 40px 46px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
}
.footer-brand img { height: 46px; width: auto; }
.footer-brand p { margin-top: 14px; color: var(--muted); font-size: 15px; font-weight: 600; }
.footer-col h4 {
  color: var(--yellow);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.footer-col p { color: var(--muted); font-size: 15px; line-height: 1.9; }
.footer-col a { color: var(--muted); text-decoration: none; transition: color .25s; }
.footer-col a:hover { color: #fff; }
.footer-base {
  border-top: 1px solid rgba(158, 162, 165, 0.12);
  text-align: center;
  padding: 18px 20px;
  color: var(--steel-4);
  font-size: 13px;
}
@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr 1fr; padding: 44px 24px 36px; }
}

/* ============================================================
   TRANSITION POLISH
   ============================================================ */
/* season chart traces draw themselves in when the section reveals */
.reveal-up .chartsvg .line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}
.reveal-up.in .chartsvg .line {
  animation: chart-draw 1.7s var(--ease) .3s forwards;
}
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
.reveal-up .chartsvg .pt,
.reveal-up .chartsvg .dnf-dot,
.reveal-up .chartsvg .dnf-label,
.reveal-up .chartsvg .finish-label { opacity: 0; transition: opacity .5s var(--ease) 1.5s; }
.reveal-up.in .chartsvg .pt,
.reveal-up.in .chartsvg .dnf-dot,
.reveal-up.in .chartsvg .dnf-label,
.reveal-up.in .chartsvg .finish-label { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal-up .chartsvg .line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .reveal-up .chartsvg .pt, .reveal-up .chartsvg .dnf-dot,
  .reveal-up .chartsvg .dnf-label, .reveal-up .chartsvg .finish-label { opacity: 1; transition: none; }
  .btn-primary { animation: none; }
}

/* nav-cta tucks away on small screens */
@media (max-width: 760px) {
  .nav-cta { display: none; }
}