/* ==========================================================================
   Home page — hero slideshow, curtain scroll, marquee, atmospheric process.
   Depends on tokens declared in main.css.
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Layout skeleton — the whole home page is pulled up so the sticky glass
   nav floats over the hero. Below that, the hero is sticky inside a scroller
   the height of two viewports; the curtain content is negative-margined
   back over the hero so it "curtains" up on scroll.
   -------------------------------------------------------------------------- */
.home-wrap {
  --home-nav-clearance: 66px;
  --home-viewport-height: 100vh;

  position: relative;
  z-index: 0;
  margin-top: calc(-1 * var(--home-nav-clearance));
}

/* svh, not dvh: dvh grows the moment a mobile browser hides its toolbar,
   which resized the hero, spacer and curtain offset together mid-scroll and
   made the page jump. svh stays fixed; by the time the toolbar hides, the
   rising curtain already covers the strip below the hero. */
@supports (height: 100svh) {
  .home-wrap { --home-viewport-height: 100svh; }
}

.home-hero-scroller {
  position: relative;
  z-index: 0;
}

.home-hero-spacer {
  height: var(--home-viewport-height);
  pointer-events: none;
}

.home-curtain {
  --home-accent: #167879;
  --home-accent-deep: #105e65;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 1;
  margin-top: calc(-1 * var(--home-viewport-height));
  background:
    radial-gradient(80% 30% at 8% 18%, rgba(95, 154, 180, 0.13), transparent 72%),
    radial-gradient(72% 34% at 96% 70%, rgba(51, 181, 182, 0.10), transparent 70%),
    linear-gradient(
      180deg,
      var(--home-atmosphere-bg, var(--bg)) 0%,
      color-mix(in srgb, var(--home-atmosphere-bg, var(--bg)) 94%, #d7e8ef) 52%,
      var(--home-atmosphere-bg, var(--bg)) 100%
    );
  box-shadow: 0 -30px 70px rgba(13, 29, 46, 0.35);
}

.ev-curtain.home-curtain {
  --home-atmosphere-bg: #edf5f5;
  margin-top: -100svh;
}

/* One continuous atmospheric wash for every post-hero section. The animated
   orbs and particles are direct children of this wrapper, so section edges no
   longer clip them. */
.home-curtain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(105% 24% at 50% 5%, rgba(60, 125, 155, 0.10), transparent 66%),
    radial-gradient(82% 25% at 100% 39%, rgba(112, 157, 176, 0.09), transparent 68%),
    radial-gradient(84% 24% at 0% 70%, rgba(60, 125, 155, 0.09), transparent 68%),
    radial-gradient(90% 22% at 70% 100%, rgba(112, 157, 176, 0.08), transparent 70%);
}

.home-marquee,
.home-process,
.event-section,
.home-allies,
.ev-curtain > .ev-vehicles,
.ev-curtain > .ev-desc {
  position: relative;
  z-index: 1;
}

:root[data-theme="dark"] .home-curtain {
  --home-accent: #33b5b6;
  --home-accent-deep: #167879;
  background:
    radial-gradient(80% 30% at 8% 18%, rgba(77, 139, 165, 0.12), transparent 72%),
    radial-gradient(72% 34% at 96% 70%, rgba(35, 91, 117, 0.16), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, #15353e 52%, var(--bg) 100%);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.home-hero {
  font-family: 'Vazirmatn', sans-serif;
  position: sticky;
  top: 0;
  height: var(--home-viewport-height);
  min-height: 0;
  padding: 112px 0 0;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
}

/* Cinematic diorama — the hero is composed from transparent layers instead of
   a video, so the sky, sun and light stay crisp at any screen size.
   Each `.home-hero__layer` fills the stage and is driven by the scroll
   timeline; its child "rig" takes the intro and pointer parallax, so the
   three GSAP timelines never fight over the same transform.
   Without JS the static composition below is the final frame. */
.home-hero__stage {
  --car-w: min(max(100cqw, 170cqh), 190cqh);
  --car-x: 34cqw;
  --land-w: max(112cqw, 185cqh);
  --horizon: 60cqh;

  position: absolute;
  /* The hero is a fixed svh tall (see .home-wrap), so this container's cq
     units stay put when a mobile toolbar shows or hides. */
  inset: 0;
  z-index: -2;
  overflow: hidden;
  container-type: size;
  background: #0a1322;
}

.home-hero__layer {
  position: absolute;
  inset: 0;
  /* Clip each composited layer to the screen so off-screen landscape and
     car overscan isn't kept in GPU memory. */
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
/* Set by the inline script in home_hero.html until home-hero.js takes over. */
.home-hero[data-intro="pending"] .home-hero__stage > *:not([data-layer="sky"]),
.home-hero[data-intro="pending"] .home-hero__inner { visibility: hidden; }
/* Scroll zoom anchors: the car grows from its wheels, the valley from the ground. */
.home-hero__layer[data-layer="car"] { transform-origin: 34% 80%; }
.home-hero__layer[data-layer="land"] { transform-origin: 50% 100%; }

.home-hero__sky {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(60% 40% at 63% 52%, rgb(255 186 112 / 60%), transparent 70%),
    linear-gradient(180deg,
      #08111f 0%,
      #14223d 20%,
      #332f4f 36%,
      #7a4250 48%,
      #c96a3d 58%,
      #f0a058 66%,
      #f6c07a 72%,
      #e98a45 100%);
}

/* The sun sets behind the peaks, between the car and the headline. */
.home-hero__sun {
  position: absolute;
  left: 63cqw;
  top: 49cqh;
  width: 0;
  height: 0;
}
.home-hero__sun-disc,
.home-hero__sun-halo,
.home-hero__rays {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s);
  aspect-ratio: 1;
  /* Centred with margins: GSAP resets the CSS `translate` property. */
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
}
.home-hero__sun-disc {
  --s: clamp(70px, 9cqw, 150px);
  background: radial-gradient(circle, #fffaf0 0 38%, #ffe2a8 56%, rgb(255 190 110 / 0%) 72%);
  filter: blur(1px);
}
.home-hero__sun-halo {
  --s: 95cqw;
  background: radial-gradient(circle,
    rgb(255 226 170 / 70%) 0%,
    rgb(255 178 98 / 34%) 14%,
    rgb(240 120 70 / 12%) 32%,
    transparent 58%);
  mix-blend-mode: screen;
}
/* The mask fades out exactly at the box edge (closest-side), so the box is
   no larger than the visible rays — this layer is a GPU texture of its full
   size times the device pixel ratio squared, which phones run out of fast. */
.home-hero__rays {
  --s: 100cqmax;
  background: repeating-conic-gradient(from 0deg,
    rgb(255 222 170 / 14%) 0deg 2.2deg,
    transparent 2.2deg 9deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgb(0 0 0 / 35%) 46%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 8%, rgb(0 0 0 / 35%) 46%, transparent 100%);
  mix-blend-mode: screen;
  animation: home-hero-rays 160s linear infinite;
}

/* Thin drifting cloud streaks catch the low sun. */
.home-hero__wisp {
  position: absolute;
  left: 0;
  height: 7cqh;
  width: 60cqw;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgb(255 196 150 / 40%), transparent 70%);
  filter: blur(14px);
  animation: home-hero-wisp 70s linear infinite;
}
.home-hero__wisp:nth-child(1) { top: 22cqh; animation-delay: -10s; }
.home-hero__wisp:nth-child(2) { top: 31cqh; width: 80cqw; height: 5cqh; opacity: 0.8; animation-duration: 95s; animation-delay: -60s; }
.home-hero__wisp:nth-child(3) { top: 14cqh; width: 45cqw; height: 4cqh; opacity: 0.45; animation-duration: 120s; animation-delay: -35s; }

/* Brand lettering stands behind the mountains and the car. */
.home-hero__watermark {
  position: absolute;
  /* Centred on 40cqw by its box, since GSAP owns this element's transforms. */
  left: 0;
  right: 20cqw;
  bottom: 50cqh;
  margin: 0;
  text-align: center;
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: clamp(140px, min(30cqw, 48cqh), 620px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, rgb(255 238 214 / 22%) 25%, rgb(255 196 130 / 4%) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}

.home-hero__land-img,
.home-hero__car-frame {
  position: absolute;
  bottom: 0;
  aspect-ratio: 1672 / 941;
}
.home-hero__land-img {
  left: calc(50% - var(--land-w) / 2);
  /* Keeps the peaks (32% down the photo) at ~40% of the hero on any aspect. */
  bottom: calc(var(--horizon) - var(--land-w) * 0.3827);
  width: var(--land-w);
  height: auto;
}

/* Warm dust settling where the valley meets the foreground rocks. */
.home-hero__haze {
  position: absolute;
  inset: auto 0 0;
  height: 62cqh;
  background:
    linear-gradient(0deg, rgb(26 14 10 / 85%) 0%, rgb(26 14 10 / 0%) 32%),
    linear-gradient(0deg, transparent 30%, rgb(244 168 102 / 22%) 62%, transparent 92%);
}

.home-hero__dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-hero__car-frame {
  /* The cliff stays pinned past the viewport's left edge (with a little
     overscan for pointer parallax); only its far side fades into the valley. */
  left: min(-3cqw, calc(var(--car-x) - var(--car-w) * 0.315));
  width: var(--car-w);
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 14%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 14%);
}
.home-hero__car-img {
  display: block;
  width: 100%;
  height: 100%;
  /* The photo faces left; mirroring it turns the car towards the headline. */
  scale: -1 1;
}

/* Lamp coordinates are the photo's own percentages, mirrored with it. */
.home-hero__lamp {
  position: absolute;
  width: 3.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, #fff 0 18%, rgb(214 238 255 / 85%) 30%, rgb(150 205 255 / 30%) 55%, transparent 72%);
  box-shadow: 0 0 calc(var(--car-w) * 0.03) calc(var(--car-w) * 0.008) rgb(180 222 255 / 45%);
  mix-blend-mode: screen;
}
.home-hero__lamp--a { left: 53.2%; top: 49.3%; }
.home-hero__lamp--b { left: 29.8%; top: 47.4%; }
.home-hero__spill {
  position: absolute;
  left: 42%;
  top: 79%;
  width: 46%;
  height: 12%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(205 230 255 / 32%), transparent);
  mix-blend-mode: screen;
}

/* Legibility for the RTL headline plus soft blends into the nav and curtain. */
.home-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(8 17 31 / 70%) 0%, transparent 24%),
    linear-gradient(0deg, rgb(8 17 31 / 60%) 0%, transparent 20%),
    linear-gradient(270deg, rgb(8 17 31 / 62%) 0%, rgb(8 17 31 / 26%) 32%, transparent 52%);
}

.home-hero__shade {
  position: absolute;
  inset: 0;
  background: #08111f;
  opacity: 0;
  pointer-events: none;
}

/* Faint film grain to keep the flat gradients from looking plastic */
.home-hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.1;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@keyframes home-hero-rays { to { rotate: 360deg; } }
@keyframes home-hero-wisp {
  from { transform: translateX(-70cqw); }
  to { transform: translateX(110cqw); }
}

/* Portrait phones and tablets: the car fills the lower half under the text. */
@media (orientation: portrait) {
  /* Peaks drop to ~55% so the sunset fills the sky behind the copy, and the
     whole car fits between the screen edges. */
  .home-hero__stage {
    --car-w: min(200cqw, 105cqh);
    --car-x: 50cqw;
    --horizon: 45cqh;
  }
  .home-hero__layer[data-layer="car"] { transform-origin: 50% 85%; }
  .home-hero__sky {
    background:
      radial-gradient(70% 30% at 76% 58%, rgb(255 186 112 / 65%), transparent 70%),
      linear-gradient(180deg,
        #08111f 0%,
        #14223d 14%,
        #332f4f 28%,
        #7a4250 40%,
        #c96a3d 50%,
        #f0a058 57%,
        #f6c07a 62%,
        #e98a45 100%);
  }
  /* The sun sets into the ridge just past the car's roofline. */
  .home-hero__sun { left: 76cqw; top: 61cqh; }
  .home-hero__sun-disc { --s: 15cqw; }
  .home-hero__sun-halo { --s: 150cqw; }
  .home-hero__rays { --s: 190cqw; }
  /* The copy sits on dark sky here; skipping the per-frame shadow repaint
     keeps the colour sweep cheap on phones. */
  .home-hero__title { filter: none; }
  /* Too little room between copy and ridge for the lettering to read. */
  .home-hero__watermark { display: none; }
  .home-hero__scrim {
    background:
      linear-gradient(180deg, rgb(8 17 31 / 70%) 0%, rgb(8 17 31 / 25%) 30%, transparent 50%),
      linear-gradient(0deg, rgb(8 17 31 / 55%) 0%, transparent 16%);
  }
}

@media (orientation: portrait) and (max-width: 767px) {
  .home-hero .home-hero__inner { padding-top: 16px; }
}

/* Headline colour sweep (after pomeloagency.com's "AGENCY."): a repeating
   amber → mist → turquoise band travels one full tile per loop, so it never
   reverses, and `ease` makes each pass surge through the middle and settle
   at the ends. A text-shadow would show through the transparent glyphs, so
   legibility comes from a drop-shadow filter instead. */
.home-hero__title {
  background: linear-gradient(90deg, var(--brand-amber), #e0e0e0, var(--brand-turquoise));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 12px rgb(8 17 31 / 55%));
  animation: home-hero-title-gradient 5s ease infinite;
}
@keyframes home-hero-title-gradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.home-hero__inner {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 32px 56px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: end;
}

.home-hero__content {
  min-width: 0;
  align-self: start;
  padding-top: clamp(24px, 5vh, 64px);
  text-align: right;
}
.home-hero__title-line { display: block; }
.home-hero__word { display: inline-block; }

.home-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #cbd8e5;
  margin-bottom: 26px;
  line-height: 1.8;
}

.home-hero__badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #33b5b6;
  box-shadow: 0 0 12px #33b5b6;
  animation: blink 2.4s ease-in-out infinite;
}

.home-hero__title {
  margin: 0;
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: clamp(3rem, 6vw, 5.25rem);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: normal;
  color: #fff;
  text-wrap: balance;
}

.home-hero__title-accent {
  margin-top: 8px;
  font-size: 0.57em;
  font-weight: 500;
  line-height: 1.8;
  color: #d0e3ee;
}

.home-hero__lede {
  margin: 0 0 30px;
  max-width: 38ch;
  font-size: 1rem;
  line-height: 2.15;
  color: #c3cbd7;
  font-weight: 400;
  text-wrap: pretty;
}

.home-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.home-hero__cta {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}

.home-hero__cta svg { width: 18px; height: 18px; flex-shrink: 0; }

.home-hero__cta--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 14px 34px rgba(51, 181, 182, 0.38);
}
.home-hero__cta--primary:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
}

.home-hero__cta--ghost {
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  background: transparent;
}
.home-hero__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.55);
}

.home-hero__ledger {
  color: #fff;
  text-shadow: 0 2px 18px rgba(13, 29, 46, 0.25);
}

.home-hero__ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.home-hero__ledger-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: normal;
  color: #fff;
}

.home-hero__ledger-eyebrow-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #33b5b6;
}

.home-hero__ledger-caption {
  font-family: 'Manrope', 'Vazirmatn', sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.5);
}

.home-hero__stats {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.home-hero__stat {
  min-width: 0;
  padding: 26px 24px;
}

.home-hero__stat-value {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.home-hero__stat-value span { font-size: clamp(2.25rem, 3.6vw, 2.875rem); }
.home-hero__stat-value b {
  font-size: 1.375rem;
  color: #33b5b6;
  line-height: 1.1;
  font-weight: 800;
}

.home-hero__stat-label {
  margin: 10px 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.66);
}

.home-hero__dots {
  position: absolute;
  inset-inline-start: 32px;
  bottom: 26px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.home-hero__dot {
  width: 10px; height: 6px;
  border: 0; padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: width 0.35s ease, background 0.35s ease;
}
.home-hero__dot.is-active {
  width: 30px;
  background: #ffffff;
}
.home-hero__dot:hover { background: rgba(255, 255, 255, 0.7); }

.home-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 36px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.66);
  transform: translateX(-50%);
  transition: color 0.2s ease;
  animation: home-scroll-float 2.4s ease-in-out infinite;
}

.home-hero__scroll:hover { color: #fff; }

.home-hero__scroll-mouse {
  position: relative;
  width: 22px;
  height: 34px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
}

.home-hero__scroll-mouse span {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
  animation: home-scroll-wheel 1.8s ease-in-out infinite;
}

@keyframes home-scroll-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(5px); }
}

@keyframes home-scroll-wheel {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  75%, 100% { opacity: 0; transform: translate(-50%, 10px); }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.home-marquee {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  border-block: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  mask-image: linear-gradient(to left, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.home-marquee__track {
  display: flex;
  width: max-content;
  gap: 56px;
  animation: home-marquee-scroll 28s linear infinite;
  will-change: transform;
}

.home-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-2);
  white-space: nowrap;
}

.home-marquee__item svg {
  width: 18px; height: 18px;
  color: var(--home-accent);
  flex-shrink: 0;
}

@keyframes home-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   PROCESS — atmospheric background: 6 orbs breathing, 16 particles drifting
   ========================================================================== */
.home-process {
  padding: 120px 0 130px;
  background: transparent;
}

.home-process__aura,
.home-process__particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* --- Breathing orbs --- */
.home-process__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(66px);
  will-change: opacity;
  opacity: 0.34;
  animation: home-orb-breathe 16s ease-in-out infinite;
}

.home-process__orb--1 {
  top: -3%;
  inset-inline-start: 5%;
  width: min(34vw, 420px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(46, 116, 149, 0.46), transparent 70%);
  animation-duration: 14s;
}
.home-process__orb--2 {
  top: 38%;
  inset-inline-end: 2%;
  width: min(30vw, 380px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(92, 148, 171, 0.42), transparent 70%);
  animation-duration: 19s;
  animation-delay: 2.5s;
}
.home-process__orb--3 {
  top: 52%;
  inset-inline-start: 7%;
  width: min(22vw, 300px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(157, 196, 211, 0.55), transparent 70%);
  animation-duration: 23s;
  animation-delay: 5s;
}
.home-process__orb--4 {
  top: 66%;
  inset-inline-end: 6%;
  width: min(32vw, 400px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(38, 103, 135, 0.42), transparent 70%);
  animation-duration: 16s;
  animation-delay: 1.5s;
}
.home-process__orb--5 {
  top: 82%;
  inset-inline-start: 2%;
  width: min(30vw, 380px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(103, 151, 170, 0.34), transparent 70%);
  animation-duration: 21s;
  animation-delay: 4s;
}
.home-process__orb--6 {
  bottom: -10%;
  inset-inline-end: 28%;
  width: min(24vw, 320px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(146, 190, 207, 0.50), transparent 70%);
  animation-duration: 25s;
  animation-delay: 6s;
}

@keyframes home-orb-breathe {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 0.88; }
}

/* --- Particle shapes --- */
.home-particle { position: absolute; }

.home-particle--dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--home-accent);
  opacity: 0.5;
}

.home-particle--ring {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(51, 181, 182, 0.42);
}

.home-particle--square {
  width: 28px; height: 28px;
  border-radius: 9px;
  border: 1px solid rgba(51, 181, 182, 0.32);
  opacity: 0.75;
}

.home-particle--triangle {
  width: 0; height: 0;
  border-inline: 11px solid transparent;
  border-bottom: 19px solid rgba(51, 181, 182, 0.30);
  transform-origin: 50% 65%;
}

.home-particle--diamond {
  width: 18px; height: 18px;
  border: 1px solid rgba(51, 181, 182, 0.36);
  transform: rotate(45deg);
  opacity: 0.65;
}

.home-particle--pill {
  width: 30px; height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(51, 181, 182, 0.32);
  opacity: 0.7;
}

.home-particle--blob {
  width: 22px; height: 22px;
  background: rgba(51, 181, 182, 0.20);
  border-radius: 58% 42% 38% 62% / 46% 55% 45% 54%;
}

.home-particle--plus {
  width: 14px; height: 14px;
  color: rgba(51, 181, 182, 0.42);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}

/* --- Particle positions + individual animations --- */
.home-particle--p1  { top:  9%; inset-inline-start: 14%; animation: home-part-orbit 12s linear infinite; }
.home-particle--p2  { top: 31%; inset-inline-start:  8%; animation: home-part-orbit 18s linear infinite reverse; opacity: 0.4; }
.home-particle--p3  { top: 62%; inset-inline-start: 12%; animation: home-part-orbit 15s linear infinite; opacity: 0.45; }
.home-particle--p4  { top: 37%; inset-inline-end:  12%; animation: home-part-sway 17s ease-in-out infinite; }
.home-particle--p5  { top: 22%; inset-inline-start: 26%; animation: home-part-bob 21s ease-in-out infinite; }
.home-particle--p6  { top: 13%; inset-inline-end:   8%; animation: home-part-spin 26s linear infinite; }
.home-particle--p7  { top: 41%; inset-inline-start: 34%; animation: home-part-sway 13s ease-in-out 1s infinite; }
.home-particle--p8  { top:  4%; inset-inline-start: 22%; animation: home-part-morph 18s ease-in-out infinite; }
.home-particle--p9  { top: 56%; inset-inline-end:   4%; width: 34px; height: 34px; background: rgba(92, 148, 171, 0.18); animation: home-part-morph 24s ease-in-out 3s infinite; }
.home-particle--p10 { top: 17%; inset-inline-start:  5%; animation: home-part-sway 20s ease-in-out 2s infinite; }
.home-particle--p11 { top: 44%; inset-inline-end:  34%; animation: home-part-spin 34s linear reverse infinite; }
.home-particle--p12 { top: 33%; inset-inline-start: 48%; animation: home-part-float 19s ease-in-out 1.5s infinite; }
.home-particle--p13 { top:  4%; inset-inline-start:  3%; width: 12px; height: 12px; animation: home-part-float 10s ease-in-out infinite; }
.home-particle--p14 { top: 78%; inset-inline-start:  6%; animation: home-part-float 12s ease-in-out infinite; }
.home-particle--p15 { top: 70%; inset-inline-end:  16%; animation: home-part-bob 22s ease-in-out infinite; }
.home-particle--p16 { top: 92%; inset-inline-start: 20%; animation: home-part-sway 19s ease-in-out 1s infinite; }

@keyframes home-part-orbit {
  from { transform: rotate(0deg) translateX(26px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(26px) rotate(-360deg); }
}
@keyframes home-part-sway {
  0%, 100% { transform: translate3d(0,0,0) rotate(-8deg); }
  50%      { transform: translate3d(-22px, -16px, 0) rotate(14deg); }
}
@keyframes home-part-bob {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  33%      { transform: translate3d(14px, -18px, 0) rotate(120deg); }
  66%      { transform: translate3d(-10px, -8px, 0) rotate(240deg); }
}
@keyframes home-part-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes home-part-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes home-part-morph {
  0%, 100% {
    border-radius: 58% 42% 38% 62% / 46% 55% 45% 54%;
    transform: translate3d(0,0,0) rotate(0deg);
  }
  50% {
    border-radius: 38% 62% 60% 40% / 62% 38% 62% 38%;
    transform: translate3d(12px, -20px, 0) rotate(24deg);
  }
}

/* --- Section header + grid --- */
.home-process__inner {
  position: relative;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 32px;
  z-index: 1;
}

.home-process__header {
  text-align: center;
  max-width: 64ch;
  margin: 0 auto 52px;
}

.home-process__eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--home-accent);
  margin-bottom: 16px;
}

.home-process__title {
  margin: 0 0 18px;
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--fg);
  text-wrap: balance;
}

.home-process__lede {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.95;
  color: var(--muted-2);
  font-weight: 400;
  text-wrap: pretty;
}

.home-process__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

/* Simple translucent card — mirrors the reference design (Home.dc.html):
   a soft two-stop surface gradient, one hairline border, and ONE diffuse
   brand-tinted shadow. No inset highlights, no stacked shadows — that
   layering is what made the hover feel abrupt. A single shadow interpolates
   cleanly, so the lift reads as a smooth glide instead of a jump. */
.home-step {
  position: relative;
  padding: 30px 26px 32px;
  border-radius: 26px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--surface) 88%, transparent) 0%,
    color-mix(in srgb, var(--surface) 62%, transparent) 100%);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(16, 94, 101, 0.08);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.28s ease,
              border-color 0.28s ease,
              background 0.28s ease;
}

.home-step:hover {
  transform: translateY(-6px);
  border-color: rgba(51, 181, 182, 0.28);
  box-shadow: 0 20px 50px rgba(16, 94, 101, 0.16);
}

.home-step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.home-step__icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--home-accent) 0%, var(--home-accent-deep) 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(16, 94, 101, 0.28);
}

.home-curtain .btn--primary {
  background: linear-gradient(140deg, var(--home-accent) 0%, var(--home-accent-deep) 100%);
  box-shadow: 0 4px 24px rgba(16, 94, 101, 0.28);
}

.home-curtain .btn--primary:hover {
  box-shadow: 0 8px 32px rgba(16, 94, 101, 0.38);
}

.home-step__icon svg { width: 22px; height: 22px; }

.home-step__index {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  opacity: 0.8;
}

.home-step__title {
  margin: 0 0 12px;
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.home-step__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.95;
  color: var(--muted-2);
  text-wrap: pretty;
}

/* ==========================================================================
   EVENTS — continues the visual language of the purchase process
   ========================================================================== */
.home-curtain .event-section {
  max-width: 1220px;
  padding: 40px 32px 120px;
}

.home-curtain .event-section__header {
  max-width: 64ch;
  margin: 0 auto 24px;
  text-align: center;
}

.home-curtain .event-section__label {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--home-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.event-section__title {
  margin: 0 0 18px;
  color: var(--fg);
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.event-section__lede {
  margin: 0;
  color: var(--muted-2);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.95;
  text-wrap: pretty;
}

.event-carousel { position: relative; }

.event-carousel__controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}

.event-carousel__arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--home-accent) 18%, var(--border));
  border-radius: 50%;
  color: var(--home-accent);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 6px 18px rgba(16, 94, 101, 0.08);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.event-carousel__arrow:hover:not(:disabled) {
  color: #fff;
  border-color: var(--home-accent);
  background: var(--home-accent);
  box-shadow: 0 9px 24px rgba(16, 94, 101, 0.24);
  transform: translateY(-2px);
}

.event-carousel__arrow:disabled { opacity: 0.28; cursor: default; }
.event-carousel__arrow svg { width: 21px; height: 21px; }

.event-carousel__viewport {
  overflow-x: auto;
  direction: rtl;
  margin-inline: -10px;
  padding: 14px 10px 40px;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.event-carousel__viewport::-webkit-scrollbar { display: none; }
.event-carousel__viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }

.event-carousel__track {
  display: flex;
  gap: 20px;
  width: max-content;
  direction: rtl;
}

/* Event card, after the event page's vehicle card (event-lineup.css): a
   padded card with the banner inset, and the status in a tab of the card's
   own surface cut into the banner's lower corner. Quieter than its model:
   no spec tiles or price, just the name, the sale window (the amber sun on
   the line marks how much of it has passed: unrisen for upcoming events,
   lit while live, dimmed once over) and one action. Colours are the
   lineup's, so the two cards read as one family. */
.home-event {
  --event-surface: var(--brand-ink, #152d43);
  --event-edge: rgb(199 225 228 / 14%);
  --event-photo: #20334e;
  --event-ink: #eef7f7;
  --event-muted: #b1cfd5;
  --event-track: rgb(199 225 228 / 24%);
  --event-fill: var(--brand-turquoise, #33b5b6);
  --event-sun: var(--brand-amber, #faa831);
  --event-action: var(--brand-turquoise, #33b5b6);
  --event-action-hover: color-mix(in srgb, var(--event-action) 82%, #fff);
  --event-on-action: #10263a;
  flex: 0 0 min(380px, calc(100vw - 48px));
  width: min(380px, calc(100vw - 48px));
  scroll-snap-align: start;
}

.home-event__link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px;
  border: 1px solid var(--event-edge);
  border-radius: 22px;
  background: var(--event-surface);
  color: var(--event-ink);
  box-shadow: 0 1px 2px rgb(20 40 70 / 4%), 0 12px 32px -12px rgb(20 40 70 / 14%);
  transition: border-color 0.25s ease;
}

.home-event__link:hover { border-color: color-mix(in srgb, var(--event-fill) 50%, transparent); }
.home-event__link:focus-visible { outline: 2px solid var(--event-fill); outline-offset: 3px; }

.home-event__photo {
  position: relative;
  aspect-ratio: 1.78 / 1;
  overflow: hidden;
  border-radius: 16px;
  /* The tab covers this corner; rounding it would clip the tab. */
  border-end-end-radius: 0;
  background: var(--event-photo);
}

.home-event__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.home-event--ended .home-event__img { filter: saturate(0.35); }

/* The tab: square to the banner's corner, rounded on its open corner, and
   joined to the banner's edges by two concave fillets. */
.home-event__tab {
  --r: 14px;
  position: absolute;
  inset-inline-end: -1px;
  bottom: -1px;
  padding: 8px 16px 1px 15px;
  border-start-start-radius: var(--r);
  background: var(--event-surface);
}
.home-event__tab::before,
.home-event__tab::after {
  content: "";
  position: absolute;
  width: var(--r);
  height: var(--r);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - 0.5px), var(--event-surface) var(--r));
}
.home-event__tab::before { bottom: 100%; left: 0; }
.home-event__tab::after { bottom: 0; left: 100%; }

.home-event__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--event-fill);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
}
.home-event__status::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.home-event--live .home-event__status { color: var(--event-live-ink, var(--event-sun)); }
.home-event--live .home-event__status::before { background: var(--event-sun); box-shadow: 0 0 0 3px rgb(250 168 49 / 22%); }
.home-event--upcoming .home-event__status::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.home-event--ended .home-event__status { color: var(--event-muted); }

.home-event__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 6px 2px;
}

.home-event__name {
  margin: 0;
  color: var(--event-ink);
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.45;
  text-wrap: balance;
}

.home-event__desc {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--event-muted);
  font-size: 0.875rem;
  line-height: 1.9;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* The sale window: start date, the horizon, end date, on one line. */
.home-event__window {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: auto 0 0;
  padding: 18px 0 14px;
  color: var(--event-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.home-event__horizon {
  --progress: 0%;
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--event-track);
}

.home-event__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--progress);
  border-radius: inherit;
  background: var(--event-fill);
}

.home-event__sun {
  position: absolute;
  top: 50%;
  /* Clamped so the sun never clips at either end of the line. */
  inset-inline-start: clamp(6px, var(--progress), calc(100% - 6px));
  width: 12px;
  height: 12px;
  margin-block-start: -6px;
  margin-inline-start: -6px;
  border-radius: 50%;
  background: var(--event-sun);
  box-shadow: 0 0 0 3px var(--event-surface), 0 0 16px 4px rgb(250 168 49 / 35%);
}

.home-event--upcoming .home-event__sun {
  background: var(--event-surface);
  border: 2px solid var(--event-sun);
  box-shadow: 0 0 0 3px var(--event-surface);
}

.home-event--ended .home-event__sun {
  background: var(--event-muted);
  box-shadow: 0 0 0 3px var(--event-surface);
}

.home-event--ended .home-event__fill { background: var(--event-muted); opacity: 0.5; }

/* The card is one link; this is its visible action. */
.home-event__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 13px;
  background: var(--event-action);
  color: var(--event-on-action);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background 0.2s ease;
}
.home-event__link:hover .home-event__cta { background: var(--event-action-hover); }
.home-event--ended .home-event__cta { background: transparent; color: var(--event-ink); box-shadow: inset 0 0 0 1px var(--event-edge); }
.home-event--ended .home-event__link:hover .home-event__cta { background: transparent; box-shadow: inset 0 0 0 1px var(--event-fill); }

/* Light: navy takes the action and turquoise's darker shade the status, as
   on the event lineup. */
:root[data-theme="light"] .home-event {
  --event-surface: #fff;
  --event-edge: #d6e9eb;
  --event-photo: #e3f0f2;
  --event-ink: #20334e;
  --event-muted: #526e7a;
  --event-track: #c7e1e4;
  --event-fill: #167879;
  --event-live-ink: #8a5a12;
  --event-action: #2c4569;
  --event-action-hover: #20334e;
  --event-on-action: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .home-event__link, .home-event__cta { transition: none; }
}

.home-hero__badge svg { width: 18px; height: 18px; }
.event-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.event-carousel__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--home-accent) 20%, transparent);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.event-carousel__dots button[aria-current="true"] {
  background: var(--home-accent);
  transform: scale(1.12);
}

.home-curtain .event-empty {
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 12px 40px rgba(16, 94, 101, 0.08);
}

/* ==========================================================================
   PARTNER NETWORK
   ========================================================================== */
.home-allies {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 100px 0 110px;
}

.home-allies__dots {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  color: var(--home-accent);
  opacity: 0.16;
  background-image: radial-gradient(currentColor 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}

.home-allies__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: min(30vw, 360px);
  aspect-ratio: 1;
  margin: calc(min(30vw, 360px) / -2);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  filter: blur(64px);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--home-accent) 40%, transparent), transparent 70%);
  transition: opacity 0.5s ease, transform 0.18s ease-out;
  will-change: transform;
}

.home-allies__auras { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.home-allies__auras span { position: absolute; aspect-ratio: 1; border-radius: 50%; animation: home-allies-breathe 17s ease-in-out infinite; }
.home-allies__auras span:nth-child(1) { top: 2%; left: 4%; width: min(30vw, 380px); filter: blur(66px); background: radial-gradient(closest-side, color-mix(in srgb, var(--home-accent) 34%, transparent), transparent 70%); }
.home-allies__auras span:nth-child(2) { right: 6%; bottom: -8%; width: min(26vw, 340px); filter: blur(70px); background: radial-gradient(closest-side, color-mix(in srgb, var(--home-accent) 26%, transparent), transparent 70%); animation-duration: 22s; animation-delay: 3s; }
.home-allies__auras span:nth-child(3) { top: 44%; right: 32%; width: min(20vw, 260px); filter: blur(62px); background: radial-gradient(closest-side, rgba(160, 190, 235, 0.45), transparent 70%); animation-duration: 26s; animation-delay: 6s; }

.home-allies__inner { max-width: 1220px; margin: 0 auto; padding: 0 32px; }

.home-allies__eyebrow {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 auto 14px;
  padding: 8px 18px;
  border: 1px solid color-mix(in srgb, var(--home-accent) 28%, transparent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--home-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.home-allies__eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--home-accent); }

.home-allies__map { position: relative; width: 100%; max-width: 880px; margin: 0 auto; aspect-ratio: 1000 / 920; }
.home-allies__network { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.home-allies__edges line { stroke: color-mix(in srgb, var(--fg) 14%, transparent); stroke-width: 1.2; transition: stroke 0.3s ease, stroke-width 0.3s ease; }
:root[data-theme="dark"] .home-allies__edges line:not(.is-active) { stroke: rgba(255, 255, 255, 0.16); }
.home-allies__edges line.is-active { stroke: var(--allies-hover, var(--home-accent)); stroke-width: 2.4; }
.home-allies__orbit { fill: none; stroke: color-mix(in srgb, var(--fg) 14%, transparent); stroke-width: 1.2; stroke-dasharray: 6 8; transform-origin: 500px 460px; animation: home-allies-spin 120s linear infinite; transition: stroke 0.3s ease; }
:root[data-theme="dark"] .home-allies__orbit:not(.is-active) { stroke: rgba(255, 255, 255, 0.16); }
.home-allies__orbit.is-active { stroke: var(--allies-hover, var(--home-accent)); }
/* Pulses leave the hub along each spoke and fade a third of the way out.
   HTML dots animating transform/opacity run on the compositor; the SVG
   <animateMotion> they replace repainted the whole curtain every frame.
   1cqw of the map = 10 units of the network's 1000-wide viewBox. */
.home-allies__map { container-type: inline-size; }
.home-allies__pulses { position: absolute; inset: 0; pointer-events: none; }
.home-allies__pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1cqw;
  aspect-ratio: 1;
  margin: -0.5cqw 0 0 -0.5cqw;
  border-radius: 50%;
  background: var(--home-accent);
  opacity: 0;
  animation: home-allies-pulse 10.2s linear infinite;
}
.home-allies__pulse:nth-child(1) { --dx: 0cqw;     --dy: -35cqw; }
.home-allies__pulse:nth-child(2) { --dx: 28.5cqw;  --dy: -17cqw; animation-delay: -1.7s; }
.home-allies__pulse:nth-child(3) { --dx: 28.5cqw;  --dy: 17cqw;  animation-delay: -3.4s; }
.home-allies__pulse:nth-child(4) { --dx: 0cqw;     --dy: 35cqw;  animation-delay: -5.1s; }
.home-allies__pulse:nth-child(5) { --dx: -28.5cqw; --dy: 17cqw;  animation-delay: -6.8s; }
.home-allies__pulse:nth-child(6) { --dx: -28.5cqw; --dy: -17cqw; animation-delay: -8.5s; }
@keyframes home-allies-pulse {
  0% { transform: translate(0, 0); opacity: 0; }
  2% { opacity: 1; }
  30% { opacity: 1; }
  33.333% { transform: translate(calc(var(--dx) / 3), calc(var(--dy) / 3)); opacity: 0; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
.home-allies__hub { fill: color-mix(in srgb, var(--fg) 14%, transparent); transition: fill 0.3s ease; }
.home-allies__hub.is-active { fill: var(--allies-hover, var(--home-accent)); }

.home-allies__title { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 13%; text-align: center; pointer-events: none; }
.home-allies__title > div { width: 100%; text-align: center; }
.home-allies__title h2 { margin: 0; color: var(--fg); font-family: 'Lalezar', 'Vazirmatn', sans-serif; font-size: clamp(1.75rem, 3.6vw, 3rem); line-height: 1.3; font-weight: 400; letter-spacing: normal; }
.home-allies__title h2 span { color: var(--home-accent); }
.home-allies__title p { margin: 16px 0 0; color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; }

.home-ally {
  position: absolute;
  width: min(18%, 168px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  place-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted-2);
  font: inherit;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 18px 40px rgba(13, 29, 46, 0.12);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.3s ease;
}

.home-ally svg { width: 30px; height: 30px; fill: none; stroke: var(--home-accent); stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s ease; }
.home-ally:hover svg, .home-ally:focus-visible svg { stroke: var(--allies-hover, var(--home-accent)); }
.home-ally img { width: 30px; height: 30px; object-fit: contain; }
.home-ally span { display: block; width: 100%; font-size: 0.75rem; font-weight: 700; text-align: center; }
.home-ally:hover, .home-ally:focus-visible { z-index: 3; border-color: var(--allies-hover, var(--home-accent)); transform: translate(-50%, -50%) scale(1.12); animation: home-allies-ring 1.6s ease-in-out infinite; }
.home-ally--0 { top: 12%; left: 50%; }.home-ally--1 { top: 31.5%; left: 78.5%; }.home-ally--2 { top: 68.5%; left: 78.5%; }
.home-ally--3 { top: 88%; left: 50%; }.home-ally--4 { top: 68.5%; left: 21.5%; }.home-ally--5 { top: 31.5%; left: 21.5%; }

@keyframes home-allies-spin { to { transform: rotate(360deg); } }
@keyframes home-allies-breathe { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.85; } }
@keyframes home-allies-ring {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--allies-hover, var(--home-accent)) 28%, transparent), 0 18px 40px rgba(8,10,22,.12); }
  50% { box-shadow: 0 0 0 14px transparent, 0 18px 40px rgba(8,10,22,.12); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 1025px) {
  .home-hero__ledger {
    position: relative;
    left: clamp(-80px, calc((1220px - 100vw) / 2), 0px);
  }
}

@media (max-width: 1024px) {
  .home-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 72px;
  }
  .home-hero__ledger { max-width: 640px; }
  .home-process { padding: 96px 0 108px; }
}

@media (max-width: 768px) {
  .home-hero__inner {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 84px;
    gap: 32px;
  }
  .home-hero__badge { font-size: 0.75rem; margin-bottom: 20px; }
  .home-hero__title { font-size: clamp(2.5rem, 10vw, 3.75rem); margin-bottom: 20px; }
  .home-hero__title-accent { font-size: 0.54em; }
  .home-hero__lede { font-size: 0.9375rem; line-height: 2; }
  .home-hero__cta { padding: 13px 22px; font-size: 0.875rem; }
  .home-hero__stat { padding: 20px 18px; }
  .home-hero__dots { inset-inline-start: 24px; bottom: 22px; }

  .home-marquee { padding: 14px 0; }
  .home-marquee__track { gap: 40px; }
  .home-marquee__item { font-size: 0.8125rem; }

  .home-process { padding: 80px 0 88px; }
  .home-process__inner { padding: 0 24px; }
  .home-process__header { margin-bottom: 36px; }
  .home-process__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .home-step { padding: 24px 22px 26px; border-radius: 22px; }

  .home-curtain .event-section { padding: 32px 24px 88px; }
  .home-curtain .event-section__header { margin-bottom: 22px; }
  .home-curtain .event-empty { border-radius: 22px; }
  .event-carousel__controls { display: none; }
  .event-carousel__track { gap: 16px; }

  .home-allies { padding: 76px 0 84px; }
  .home-allies__inner { padding: 0 14px; }
  .home-allies__eyebrow { font-size: 0.6875rem; padding: 7px 14px; }
  .home-allies__title h2 { font-size: clamp(1.375rem, 6.5vw, 1.875rem); }
  .home-allies__title p { margin-top: 10px; font-size: 0.625rem; letter-spacing: 0.13em; }
  .home-ally { width: 20%; padding: 4px; }
  .home-ally svg { width: 22px; height: 22px; }
  .home-ally span { font-size: 0.625rem; }

  .home-process__orb--3,
  .home-process__orb--5 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-curtain.home-curtain { margin-top: 0; }
  .home-hero__rays,
  .home-hero__wisp,
  .home-hero__title,
  .home-hero__content,
  .home-hero__ledger,
  .home-hero__badge-dot,
  .home-marquee__track,
  .home-process__orb,
  .home-particle,
  .home-hero__scroll,
  .home-hero__scroll-mouse span,
  .home-allies__orbit,
  .home-allies__auras span,
  .home-ally {
    animation: none !important;
  }
  .home-allies__pulses { display: none; }
  .home-hero__dust { display: none; }
}

/* ==========================================================================
   Performance
   -------------------------------------------------------------------------- */

/* Sections well below the fold skip layout+paint entirely while off-screen.
   Only applied where it's safe — the process section stays fully rendered so
   its atmospheric layers don't pop in as the curtain rises. */
.event-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 640px;
}

/* Isolate paint on the process decoration layers (they're below the hero and
   nothing above depends on their paint tree). */
.home-process__aura,
.home-process__particles {
  contain: paint;
}

/* Off-screen animation pause. JS sets data-visible on the hero, marquee, and
   process wrappers via IntersectionObserver — anything that keeps ticking off
   the viewport gets frozen here. The dust canvas is paused separately by
   its own rAF loop in home-hero.js. */
.home-hero[data-visible="false"] .home-hero__rays,
.home-hero[data-visible="false"] .home-hero__wisp,
.home-hero[data-visible="false"] .home-hero__title,
.home-hero[data-visible="false"] .home-hero__badge-dot,
.home-marquee[data-visible="false"] .home-marquee__track,
.home-curtain[data-visible="false"] .home-process__orb,
.home-curtain[data-visible="false"] .home-particle,
.home-allies[data-visible="false"] .home-allies__pulse,
.home-allies[data-visible="false"] .home-allies__orbit,
.home-allies[data-visible="false"] .home-allies__auras span {
  animation-play-state: paused;
}

/* Phones: hold the ambient decoration still. Each blurred orb is a ~520px
   GPU layer at 3x density while it animates, and anything animating beneath
   the sections forces Chrome to give every section above it its own layer
   too. Frozen, they paint into the page instead (~400 MB → ~270 MB of layers
   on a 390px @3x screen), so the curtain scroll has memory to spare. */
@media (max-width: 767px) {
  /* Without the 62–70px blur filters, which phones must re-run for every
     tile scrolled into view; a larger soft gradient gives the same glow. */
  .home-process__orb,
  .home-allies__auras span {
    animation: none;
    will-change: auto;
    opacity: 0.6;
    filter: none;
    scale: 1.8;
  }
  .home-particle,
  .home-allies__orbit {
    animation: none;
  }
}

/* The mouse-follow glow can never show on touch screens; drop its layer. */
@media (hover: none), (pointer: coarse) {
  .home-allies__cursor { display: none; }
}

/* Amber is a restrained spark, as in the palette's storm/sun reference. */
.home-hero__ledger-eyebrow-dot {
  background: var(--brand-amber);
  box-shadow: 0 0 12px rgb(250 168 49 / 25%);
}
:root[data-theme="dark"] .ev-curtain.home-curtain {
  --home-atmosphere-bg: var(--bg);
}