/* ─────────────────────────────────────────────────────
   OSUS Homepage — Minimal Light Redesign
   home.css — homepage-only styles
   ───────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════
   UNIFIED HOMEPAGE CANVAS
   One continuous light OSUS background across all sections.
   Scoped to body.home so internal pages are unaffected.
   ═══════════════════════════════════════════════════ */

body.home {
  background-color: var(--warm-white);
  /* Gradients use fixed attachment → always positioned relative to viewport,
     creating identical ambient color in hero AND every section below it.
     Dot grid uses scroll so it tiles uniformly across the full document. */
  background-image:
    radial-gradient(circle at 14% 22%, rgba(145, 185, 180, 0.22) 0%, transparent 40%),
    radial-gradient(circle at 86% 16%, rgba(255, 150, 25, 0.13)  0%, transparent 34%),
    radial-gradient(circle at 16% 74%, rgba(110,  25, 70, 0.10)  0%, transparent 36%),
    radial-gradient(circle at 74% 84%, rgba(15,   40, 55, 0.08)  0%, transparent 40%),
    radial-gradient(rgba(15, 40, 55, 0.028) 1px, transparent 1px);
  background-attachment: fixed, fixed, fixed, fixed, scroll;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 30px 30px;
}

/* ═══════════════════════════════════════════════════
   HP HERO — Light, minimal, two-column
   ═══════════════════════════════════════════════════ */

.hp-hero {
  position: relative;
  background: transparent;
  /* No overflow:clip — allows ambient glows to bleed naturally into sections
     below, eliminating the hard visual boundary between hero and page. */
  padding-top: var(--header-height);
  min-height: 92svh;
  display: flex;
  align-items: center;
}

/* Slow-drifting ambient color layers — give the hero atmosphere living motion.
   Two pseudo-elements carry blurred radial gradients that drift at different
   speeds. They sit at z-index 0; all hero content lives at z-index 2 via
   .hp-hero__inner, .hp-hero__content, and .hp-hero__visual — guaranteeing
   the animated layers never cover text, circles, logo, or buttons. */
.hp-hero::before,
.hp-hero::after {
  content: '';
  position: absolute;
  inset: -18%;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}

.hp-hero::before {
  background:
    radial-gradient(circle at 22% 38%, rgba(145, 185, 180, 0.28), transparent 34%),
    radial-gradient(circle at 76% 34%, rgba(255, 150, 25,  0.14), transparent 30%),
    radial-gradient(circle at 28% 78%, rgba(110,  25, 70,  0.10), transparent 34%);
  filter: blur(12px);
  animation: osusAmbientDriftOne 18s ease-in-out infinite alternate;
}

.hp-hero::after {
  background:
    radial-gradient(circle at 82% 68%, rgba(15,  40, 55,  0.08), transparent 32%),
    radial-gradient(circle at 14% 24%, rgba(145, 185, 180, 0.16), transparent 30%);
  filter: blur(18px);
  animation: osusAmbientDriftTwo 22s ease-in-out infinite alternate;
}

@keyframes osusAmbientDriftOne {
  0%   { transform: translate3d(0,     0,    0) scale(1);    opacity: 0.85; }
  100% { transform: translate3d(2.5%, -1.5%, 0) scale(1.04); opacity: 1;    }
}

@keyframes osusAmbientDriftTwo {
  0%   { transform: translate3d(0,    0,    0) scale(1);    opacity: 0.7; }
  100% { transform: translate3d(-2%,  1.8%, 0) scale(1.03); opacity: 0.9; }
}

/* Multi-tone ambient glows across the full section */
.hp-hero__glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}

.hp-hero__glow--sage {
  left: 0;
  top: -20%;
  width: 68%;
  height: 155%;
  background: radial-gradient(ellipse at center, rgba(145, 185, 180, 0.26) 0%, transparent 68%);
}

.hp-hero__glow--burg {
  left: 8%;
  bottom: -24%;
  width: 58%;
  height: 90%;
  background: radial-gradient(ellipse at center, rgba(110, 25, 70, 0.13) 0%, transparent 65%);
}

.hp-hero__glow--warm {
  right: 0;
  top: -8%;
  width: 56%;
  height: 95%;
  background: radial-gradient(ellipse at center, rgba(255, 150, 25, 0.11) 0%, transparent 60%);
}

.hp-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  /* RTL: column 1 (right) = text, column 2 (left) = visual — 50/50 */
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: clamp(var(--space-12), 7vh, var(--space-20));
}

/* ── Hero Content (right column in RTL) ──────────── */

.hp-hero__content {
  position: relative;
  z-index: 2;
}

.hp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(145, 185, 180, 0.10);
  border: 1px solid rgba(145, 185, 180, 0.35);
  color: #4e8f8a;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-6);
}

.hp-hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  flex-shrink: 0;
}

.hp-hero__headline {
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  font-weight: var(--weight-black);
  color: var(--navy);
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-6);
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(15, 40, 55, 0.10);
}

.hp-hero__headline em {
  font-style: normal;
  color: var(--orange); /* fallback */
}

/* Gradient text on the highlighted phrase — Arabic reads right-to-left,
   so "to left" places warm orange at the reading start (right edge)
   and the sage/burgundy finish at the end (left edge). */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hp-hero__headline em {
    background: linear-gradient(
      to left,
      #FF9619 0%,
      #F5A040 28%,
      #91B9B4 66%,
      #6E1946 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.hp-hero__desc {
  font-size: clamp(var(--text-base), 1.8vw, var(--text-lg));
  color: var(--text-secondary);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-10);
  max-width: 44ch;
}

.hp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* ── Hero Visual (left column in RTL) ───────────── */

.hp-hero__visual {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-6);
  overflow: visible;
}

/* ── Decorative path-lines SVG — full-column overlay ── */
.hp-deco-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}


/* ═══════════════════════════════════════════════════
   HERO VISUAL — 4-circle diamond stage
   ─────────────────────────────────────────────────
   Diamond arrangement:
     Top    = Navy     / طالب
     Right  = Orange   / رائد أعمال
     Bottom = Burgundy / مستثمر
     Left   = Sage     / جهة داعمة

   Each circle centered at --cc-arm from stage center.
   Adjacent d = √2 × arm ≈ 153px; circle Ø 252px → ~99px overlap.
   Even opposite pairs overlap ~36px → true petal / flower pattern.
   ═══════════════════════════════════════════════════ */

.hero-circles-stage {
  --cs-size: 480px;   /* stage width / height */
  --cc-size: 252px;   /* circle diameter */
  --cc-half: 126px;   /* half diameter — for margin centering */
  --cc-arm:  108px;   /* arm from stage center to each circle center */

  position: relative;
  z-index: 1;
  width: var(--cs-size);
  height: var(--cs-size);
  overflow: visible;
  flex-shrink: 0;
}

/* Center logo card — white circle with OSUS logo */
.hero-circles-logo-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background: white;
  box-shadow:
    0 4px 20px rgba(15, 40, 55, 0.13),
    0 1px 4px rgba(15, 40, 55, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}

.hero-circles-logo-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Circle base ───────────────────────────────── */
.hero-circle {
  position: absolute;
  width: var(--cc-size);
  height: var(--cc-size);
  margin-left: calc(-1 * var(--cc-half));
  margin-top:  calc(-1 * var(--cc-half));
  border-radius: 50%;
  border: 2.5px solid currentColor;   /* clearer, still elegant identity outline */
  cursor: pointer;
  transition:
    transform  0.26s var(--ease-spring),
    box-shadow 0.26s var(--ease-standard),
    background 0.26s var(--ease-standard);
}

/* Ambient luminous aura — a soft, color-matched light halo behind each circle.
   Rendered ABOVE the stage but BELOW the circle's icon/tip (z-index below).
   Diffused via blur; visible yet calm. Respects reduced-motion. */
.hero-circle::before {
  content: '';
  position: absolute;
  inset: -32px;
  border-radius: 999px;
  background: radial-gradient(circle, currentColor 0%, transparent 68%);
  opacity: 0.18;
  filter: blur(22px);
  z-index: 0;
  pointer-events: none;
}
/* Keep the circle's own content crisply above the halo */
.hero-circle-icon,
.hero-circle-tip { z-index: 1; }
/* Circle halo is intentionally STATIC now — no continuous aura pulse
   (the Hero must be fully still after its one-time entrance). */
@keyframes hp-circle-aura {
  0%, 100% { opacity: 0.14; transform: scale(1); }
  50%      { opacity: 0.24; transform: scale(1.05); }
}

.hero-circle:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

/* Diamond positions — calc() auto-updates across breakpoints */
.hero-circle--top    { left: calc(var(--cs-size) / 2);                  top: calc(var(--cs-size) / 2 - var(--cc-arm)); }
.hero-circle--right  { left: calc(var(--cs-size) / 2 + var(--cc-arm));  top: calc(var(--cs-size) / 2); }
.hero-circle--bottom { left: calc(var(--cs-size) / 2);                  top: calc(var(--cs-size) / 2 + var(--cc-arm)); }
.hero-circle--left   { left: calc(var(--cs-size) / 2 - var(--cc-arm));  top: calc(var(--cs-size) / 2); }

/* Color variants */
.hero-circle--top    { color: var(--navy);     background: rgba(15,  40,  55,  0.04); box-shadow: 0 0 32px 2px rgba(15,  40,  55,  0.16); }
.hero-circle--right  { color: var(--orange);   background: rgba(255, 150, 25,  0.05); box-shadow: 0 0 34px 3px rgba(255, 150, 25,  0.22); }
.hero-circle--bottom { color: var(--burgundy); background: rgba(110, 25,  70,  0.04); box-shadow: 0 0 32px 2px rgba(110, 25,  70,  0.18); }
.hero-circle--left   { color: var(--sage);     background: rgba(145, 185, 180, 0.07); box-shadow: 0 0 34px 3px rgba(145, 185, 180, 0.30); }

/* ═══════════════════════════════════════════════════════════════════════
   HERO ENTRANCE  (one-time progressive reveal — NO continuous motion)
   Staged hierarchy: badge/accreditation → headline → paragraph → CTAs →
   circle visual → circle icons. Plays ONCE on load, then the Hero is static.
   Idle motion uses the INDIVIDUAL translate/scale properties so it composes
   with each element's own hover transform; vertical/opacity motion reads the
   same in Arabic (RTL) and English (LTR). Gated to prefers-reduced-motion:
   no-preference, so reduced-motion users get the Hero fully visible & static.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* Initial hidden state — applied ONLY when JS is active (html.js) AND before the
     reveal is triggered, so the Hero is NEVER trapped invisible if JS is disabled or
     fails. Homepage-scoped. (Circle icons are excluded — their `backwards` fill hides
     them and returns to their natural 0.6 resting opacity, preserving hover.) */
  html.js body.home:not(.hero-in) .site-header .header-inner > *,
  html.js body.home:not(.hero-in) .hp-hero__eyebrow,
  html.js body.home:not(.hero-in) .hp-hero__accred,
  html.js body.home:not(.hero-in) .hp-hero__headline,
  html.js body.home:not(.hero-in) .hp-hero__desc,
  html.js body.home:not(.hero-in) .hp-hero__actions > *,
  html.js body.home:not(.hero-in) .hp-hero__visual { opacity: 0; }

  /* Entrance trigger — `body.hero-in` is added post-paint (via rAF) so the animation
     clock starts at reveal time and the FULL choreography is always visible from 0.
     Tasteful overlap: header → context → headline → copy → CTAs → visual → icons. */
  body.home.hero-in .site-header .header-inner > * { animation: hero-in-up 0.50s var(--ease-decelerate) 0.02s both; }  /* Stage 1 — header/nav content */
  body.home.hero-in .hp-hero__eyebrow  { animation: hero-in-up 0.55s var(--ease-decelerate) 0.12s both; }             /* Stage 2 — badge + accreditation */
  body.home.hero-in .hp-hero__accred   { animation: hero-in-up 0.55s var(--ease-decelerate) 0.20s both; }
  body.home.hero-in .hp-hero__headline { animation: hero-in-up 0.65s var(--ease-decelerate) 0.30s both; }             /* Stage 3 — headline leads */
  body.home.hero-in .hp-hero__desc     { animation: hero-in-up 0.60s var(--ease-decelerate) 0.46s both; }             /* Stage 4 — paragraph */
  body.home.hero-in .hp-hero__actions > *:nth-child(1) { animation: hero-in-up 0.55s var(--ease-decelerate) 0.58s both; }  /* Stage 5 — CTAs (primary, then secondary) */
  body.home.hero-in .hp-hero__actions > *:nth-child(2) { animation: hero-in-up 0.55s var(--ease-decelerate) 0.66s both; }
  body.home.hero-in .hp-hero__visual   { animation: hero-in-visual 0.80s var(--ease-decelerate) 0.50s both; }         /* Stage 6 — circle visual + logo */
  body.home.hero-in .hero-circle--top    .hero-circle-icon { animation: hero-in-icon 0.5s var(--ease-decelerate) 0.95s backwards; }  /* Stage 7 — icons resolve last */
  body.home.hero-in .hero-circle--right  .hero-circle-icon { animation: hero-in-icon 0.5s var(--ease-decelerate) 1.05s backwards; }
  body.home.hero-in .hero-circle--bottom .hero-circle-icon { animation: hero-in-icon 0.5s var(--ease-decelerate) 1.15s backwards; }
  body.home.hero-in .hero-circle--left   .hero-circle-icon { animation: hero-in-icon 0.5s var(--ease-decelerate) 1.10s backwards; }
}

@keyframes hero-in-up     { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes hero-in-visual { from { opacity: 0; scale: 0.98; }       to { opacity: 1; scale: 1; } }
@keyframes hero-in-icon   { from { opacity: 0; translate: 0 4px; }  to { opacity: 0.6; translate: 0 0; } }

/* Hover / active: stronger fill + glow + scale */
.hero-circle--top:hover,    .hero-circle--top.is-active    { transform: scale(1.05); background: rgba(15,  40,  55,  0.09); box-shadow: 0 0 50px 4px rgba(15,  40,  55,  0.24); z-index: 3; }
.hero-circle--right:hover,  .hero-circle--right.is-active  { transform: scale(1.05); background: rgba(255, 150, 25,  0.10); box-shadow: 0 0 50px 4px rgba(255, 150, 25,  0.32); z-index: 3; }
.hero-circle--bottom:hover, .hero-circle--bottom.is-active { transform: scale(1.05); background: rgba(110, 25,  70,  0.09); box-shadow: 0 0 50px 4px rgba(110, 25,  70,  0.26); z-index: 3; }
.hero-circle--left:hover,   .hero-circle--left.is-active   { transform: scale(1.05); background: rgba(145, 185, 180, 0.17); box-shadow: 0 0 50px 4px rgba(145, 185, 180, 0.40); z-index: 3; }

/* ── Icon inside each circle — centered at circle midpoint ── */
.hero-circle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  pointer-events: none;
  opacity: 0.60;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity   0.26s var(--ease-standard),
    transform 0.26s var(--ease-standard);
}

/* Unified hover / active — single rule, no per-direction overrides needed */
.hero-circle:hover .hero-circle-icon,
.hero-circle.is-active .hero-circle-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-circle-icon { transition: opacity 0.26s var(--ease-standard); }
  .hero-circle:hover .hero-circle-icon,
  .hero-circle.is-active .hero-circle-icon { transform: translate(-50%, -50%) scale(1); }
}

/* ── Tooltips ──────────────────────────────────── */
.hero-circle-tip {
  position: absolute;
  background: var(--warm-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.3rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--navy);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  opacity: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition:
    opacity   0.22s var(--ease-standard),
    transform 0.22s var(--ease-standard);
}

.hero-circle-tip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hero-circle--top    .hero-circle-tip::before { background: var(--navy); }
.hero-circle--right  .hero-circle-tip::before { background: var(--orange); }
.hero-circle--bottom .hero-circle-tip::before { background: var(--burgundy); }
.hero-circle--left   .hero-circle-tip::before { background: var(--sage); }

/* Top → tooltip above */
.hero-circle--top .hero-circle-tip {
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
}
.hero-circle--top:hover .hero-circle-tip,
.hero-circle--top.is-active .hero-circle-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Right → tooltip to the right */
.hero-circle--right .hero-circle-tip {
  top: 50%;
  left: calc(100% + 14px);
  transform: translateY(-50%) translateX(-6px);
}
.hero-circle--right:hover .hero-circle-tip,
.hero-circle--right.is-active .hero-circle-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Bottom → tooltip below */
.hero-circle--bottom .hero-circle-tip {
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
}
.hero-circle--bottom:hover .hero-circle-tip,
.hero-circle--bottom.is-active .hero-circle-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Left → tooltip to the left */
.hero-circle--left .hero-circle-tip {
  top: 50%;
  right: calc(100% + 14px);
  transform: translateY(-50%) translateX(6px);
}
.hero-circle--left:hover .hero-circle-tip,
.hero-circle--left.is-active .hero-circle-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── Full-width baseline decoration — spans hero width ─── */
.hp-hero-baseline {
  position: absolute;
  inset-inline: clamp(24px, 5vw, 80px);
  bottom: clamp(6px, 2.5vh, 28px);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.hp-baseline-left,
.hp-baseline-right {
  flex: 1;
  height: 1px;
  background: linear-gradient(to var(--end, right), transparent 0%, rgba(145, 185, 180, 0.28) 20%, rgba(145, 185, 180, 0.28) 80%, transparent 100%);
  position: relative;
}
.hp-baseline-left  { --end: left; }
.hp-baseline-right { --end: right; }

/* Left segment: sage dot + orange dot — very subtle */
.hp-baseline-left::before {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(145, 185, 180, 0.5);
  top: 50%; left: 22%;
  transform: translate(-50%, -50%);
}
.hp-baseline-left::after {
  content: '';
  position: absolute;
  width: 3.5px; height: 3.5px;
  border-radius: 50%;
  background: rgba(255, 150, 25, 0.45);
  top: 50%; left: 62%;
  transform: translate(-50%, -50%);
}

/* Right segment: burgundy dot + sage dot — very subtle */
.hp-baseline-right::before {
  content: '';
  position: absolute;
  width: 3.5px; height: 3.5px;
  border-radius: 50%;
  background: rgba(110, 25, 70, 0.4);
  top: 50%; left: 38%;
  transform: translate(-50%, -50%);
}
.hp-baseline-right::after {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(145, 185, 180, 0.5);
  top: 50%; left: 78%;
  transform: translate(-50%, -50%);
}

.hp-baseline-leaf {
  width: 34px;
  height: 30px;
  flex-shrink: 0;
}

@media (max-width: 430px) {
  .hp-hero-baseline { display: none; }
}

/* ═══════════════════════════════════════════════════
   HERO BUTTON OVERRIDES
   Scoped to .hp-hero__actions so the global button system
   is unaffected. Hero primary = navy; secondary = orange ghost.
   ═══════════════════════════════════════════════════ */
.hp-hero__actions .btn--primary {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
  box-shadow: 0 3px 12px rgba(15, 40, 55, 0.20), 0 1px 2px rgba(15, 40, 55, 0.10);
}
.hp-hero__actions .btn--primary:hover {
  background: #193a52;
  border-color: #193a52;
  box-shadow: 0 8px 28px rgba(15, 40, 55, 0.28);
  transform: translateY(-2px);
}
.hp-hero__actions .btn--secondary {
  color: var(--orange);
  border-color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.hp-hero__actions .btn--secondary:hover {
  background: rgba(255, 150, 25, 0.07);
  color: var(--orange);
}

.hp-btn-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* ═══════════════════════════════════════════════════
   QUIZ MODAL
   ═══════════════════════════════════════════════════ */
.hero-quiz-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(9, 21, 32, 0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease-standard);
}

.hero-quiz-modal.is-open {
  opacity: 1;
  pointer-events: all;
}

.hero-quiz-modal__card {
  background: var(--warm-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-7) var(--space-8) var(--space-7);
  width: 100%;
  max-width: 460px;
  box-shadow: var(--shadow-xl);
  position: relative;
  transform: translateY(24px) scale(0.97);
  opacity: 0;
  transition:
    transform 0.38s var(--ease-spring),
    opacity   0.3s  var(--ease-standard);
}

.hero-quiz-modal.is-open .hero-quiz-modal__card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.hero-quiz-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.hero-quiz-modal__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--navy);
  margin: 0;
}

.hero-quiz-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
}
.hero-quiz-modal__close:hover { background: var(--warm-200); color: var(--navy); }
.hero-quiz-modal__close:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.hero-quiz-modal__body {
  padding: var(--space-10) 0;
  text-align: center;
}

.hero-quiz-modal__placeholder {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-loose);
  margin: 0;
}

.hero-quiz-modal__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-color);
}

/* ─── Section brand divider — shared between homepage sections ───
   Mirrors the hero baseline: two gradient lines + brand-color dots
   + SVG leaf center mark. Revealed via data-reveal="fade" on scroll.
   ────────────────────────────────────────────────────────────────── */

.section-brand-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline: clamp(24px, 5vw, 80px);
  pointer-events: none;
}

.section-brand-divider .divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to var(--end, right),
    transparent 0%,
    rgba(145, 185, 180, 0.28) 20%,
    rgba(145, 185, 180, 0.28) 80%,
    transparent 100%
  );
  position: relative;
}

.section-brand-divider .divider-line-start { --end: left; }
.section-brand-divider .divider-line-end   { --end: right; }

/* Left segment dots: sage · orange */
.section-brand-divider .divider-line-start::before {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(145, 185, 180, 0.5);
  top: 50%; left: 22%;
  transform: translate(-50%, -50%);
}
.section-brand-divider .divider-line-start::after {
  content: '';
  position: absolute;
  width: 3.5px; height: 3.5px;
  border-radius: 50%;
  background: rgba(255, 150, 25, 0.45);
  top: 50%; left: 62%;
  transform: translate(-50%, -50%);
}

/* Right segment dots: burgundy · sage */
.section-brand-divider .divider-line-end::before {
  content: '';
  position: absolute;
  width: 3.5px; height: 3.5px;
  border-radius: 50%;
  background: rgba(110, 25, 70, 0.4);
  top: 50%; left: 38%;
  transform: translate(-50%, -50%);
}
.section-brand-divider .divider-line-end::after {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(145, 185, 180, 0.5);
  top: 50%; left: 78%;
  transform: translate(-50%, -50%);
}

.section-brand-divider .divider-mark {
  width: 34px;
  height: 30px;
  flex-shrink: 0;
}

@media (max-width: 430px) {
  .section-brand-divider { display: none; }
}

/* ═══════════════════════════════════════════════════
   HP PERSONAS — Premium Role Discovery System
   ═══════════════════════════════════════════════════ */

.hp-personas {
  background: transparent;
  position: relative;
}

/* ── Section header ──────────────────────────────── */

.roles-header { margin-top: var(--space-4); margin-bottom: var(--space-4); }

.roles-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: rgba(255, 150, 25, 0.08);
  border: 1px solid rgba(255, 150, 25, 0.25);
  color: var(--navy);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-5);
}

.roles-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

.roles-title { position: relative; color: var(--navy); }

.roles-title__em {
  font-style: normal;
  color: #5a9490; /* sage-tinted fallback */
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .roles-title__em {
    background: linear-gradient(to left, var(--sage) 0%, #2a5a75 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.roles-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to left, var(--orange), var(--sage));
  margin: var(--space-4) auto 0;
}

/* ── Per-bubble color tokens — stronger, clearer ─── */

.role-bubble[data-role-color="orange"] {
  --role-color:         #FF9619;
  --role-icon-bg:       rgba(255, 150, 25, 0.20);
  --role-icon-border:   rgba(255, 150, 25, 0.45);
  --role-border:        rgba(255, 150, 25, 0.52);
  --role-border-active: rgba(255, 150, 25, 0.90);
  --role-glow:          0 0 40px rgba(255, 150, 25, 0.32);
  --role-bg:            radial-gradient(circle at center, rgba(255, 150, 25, 0.13) 0%, rgba(255, 255, 255, 0.93) 65%);
}

.role-bubble[data-role-color="sage"] {
  --role-color:         #91B9B4;
  --role-icon-bg:       rgba(145, 185, 180, 0.22);
  --role-icon-border:   rgba(145, 185, 180, 0.50);
  --role-border:        rgba(145, 185, 180, 0.58);
  --role-border-active: rgba(145, 185, 180, 0.95);
  --role-glow:          0 0 40px rgba(145, 185, 180, 0.32);
  --role-bg:            radial-gradient(circle at center, rgba(145, 185, 180, 0.14) 0%, rgba(255, 255, 255, 0.93) 65%);
}

.role-bubble[data-role-color="navy"] {
  --role-color:         #0F2837;
  --role-icon-bg:       rgba(15, 40, 55, 0.14);
  --role-icon-border:   rgba(15, 40, 55, 0.35);
  --role-border:        rgba(15, 40, 55, 0.36);
  --role-border-active: rgba(15, 40, 55, 0.70);
  --role-glow:          0 0 40px rgba(15, 40, 55, 0.20);
  --role-bg:            radial-gradient(circle at center, rgba(15, 40, 55, 0.10) 0%, rgba(255, 255, 255, 0.93) 65%);
}

.role-bubble[data-role-color="burgundy"] {
  --role-color:         #6E1946;
  --role-icon-bg:       rgba(110, 25, 70, 0.16);
  --role-icon-border:   rgba(110, 25, 70, 0.42);
  --role-border:        rgba(110, 25, 70, 0.44);
  --role-border-active: rgba(110, 25, 70, 0.85);
  --role-glow:          0 0 40px rgba(110, 25, 70, 0.28);
  --role-bg:            radial-gradient(circle at center, rgba(110, 25, 70, 0.11) 0%, rgba(255, 255, 255, 0.93) 65%);
}

/* ── Bubble cluster — absolute positioned ecosystem ─ */

.roles-bubble-cluster {
  position: relative;
  height: 500px;
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

/* ── Role bubble — TRUE CIRCLE (width = height) ───── */

.role-bubble {
  position: absolute;
  width:  var(--bubble-size);
  height: var(--bubble-size);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: var(--navy);
  background: var(--role-bg, rgba(255, 255, 255, 0.92));
  border: 2px solid var(--role-border, rgba(145, 185, 180, 0.52));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm), 0 4px 20px rgba(15, 40, 55, 0.08);
  padding: 18px;
  box-sizing: border-box;
  /* Scroll reveal — JS adds .is-visible. Truly hidden & inert until then. */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.82);
  transition:
    opacity      0.60s var(--ease-decelerate),
    transform    0.60s var(--ease-decelerate),
    border-color 0.26s var(--ease-standard),
    box-shadow   0.26s var(--ease-standard);
}

.role-bubble.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.role-bubble:hover,
.role-bubble.is-active {
  border-color: var(--role-border-active, var(--role-border));
  box-shadow: var(--role-glow), var(--shadow-md);
  z-index: 2;
}

.role-bubble:focus-visible {
  outline: 3px solid var(--role-color, var(--orange));
  outline-offset: 6px;
}

/* ── Bubble size tiers ────────────────────────────── */
/* width = height → true circles guaranteed            */

/* All bubbles — uniform, generous & elegant (compact two-band composition) */
.role-bubble--lg  { --bubble-size: clamp(160px, 14vw, 184px); padding: 18px; }
.role-bubble--ml  { --bubble-size: clamp(160px, 14vw, 184px); padding: 18px; }
.role-bubble--md  { --bubble-size: clamp(160px, 14vw, 184px); padding: 18px; }
.role-bubble--sm  { --bubble-size: clamp(160px, 14vw, 184px); padding: 18px; }

/* ── Desktop bubble positions — freeform constellation ─
   Positions are deliberately scattered: no shared row,
   no shared column, no grid lanes. Each bubble occupies
   a unique vertical band; horizontal positions zigzag
   across the full section width.
   Reference width: 1280px. All positions verified
   non-overlapping including bubble radii.              */

/* Compact two-band composition — two soft, gently-staggered horizontal bands
   (5 upper, 5 lower). Bands are offset horizontally so nothing lines up into a
   column, and each circle's height varies by only a small amount so it reads
   as a controlled, premium editorial scatter — not a grid, not chaotic. The
   upper band starts at ~18% (leaving the upper-left for the CTA); the lower
   band extends further left. Compact 500px canvas keeps it all in view. */
/* ── Upper band (~55–70px) ── */
.roles-bubble-cluster > .role-bubble:nth-child(3)  { left: 18%; top: 62px;  }  /* حاضنة أو مسرعة */
.roles-bubble-cluster > .role-bubble:nth-child(7)  { left: 34%; top: 48px;  }  /* الجهة التنظيمية */
.roles-bubble-cluster > .role-bubble:nth-child(9)  { left: 51%; top: 66px;  }  /* مدير البرامج */
.roles-bubble-cluster > .role-bubble:nth-child(4)  { left: 67%; top: 50px;  }  /* الجهة الداعمة */
.roles-bubble-cluster > .role-bubble:nth-child(1)  { left: 84%; top: 60px;  }  /* رائد الأعمال — right anchor */
/* ── Lower band (~278–296px), offset from the upper band ── */
.roles-bubble-cluster > .role-bubble:nth-child(5)  { left: 6%;  top: 292px; }  /* مزود التدريب */
.roles-bubble-cluster > .role-bubble:nth-child(8)  { left: 24%; top: 278px; }  /* المدرب المستقل */
.roles-bubble-cluster > .role-bubble:nth-child(10) { left: 42%; top: 296px; }  /* مقدم خدمات الأعمال */
.roles-bubble-cluster > .role-bubble:nth-child(2)  { left: 60%; top: 280px; }  /* المستثمر */
.roles-bubble-cluster > .role-bubble:nth-child(6)  { left: 78%; top: 288px; }  /* الاستشاري */

/* ── Bubble icon badge ───────────────────────────── */

.role-bubble__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--role-icon-bg, rgba(145, 185, 180, 0.18));
  border: 1.5px solid var(--role-icon-border, rgba(145, 185, 180, 0.40));
  font-size: 0.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 5px;
  transition: transform 0.28s var(--ease-spring);
}

/* All icons uniform — matching the original ML (المستثمر) bubble icon */
.role-bubble--lg .role-bubble__icon,
.role-bubble--ml .role-bubble__icon,
.role-bubble--md .role-bubble__icon,
.role-bubble--sm .role-bubble__icon { width: 32px; height: 32px; font-size: 0.95rem; margin-bottom: 6px; }

.role-bubble:hover .role-bubble__icon,
.role-bubble.is-active .role-bubble__icon {
  transform: scale(1.14);
}

/* ── Bubble text ─────────────────────────────────── */

.role-bubble__title {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--navy);
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
  transition: color 0.22s var(--ease-standard);
}

/* All titles uniform — 13px matching the ML standard */
.role-bubble--lg .role-bubble__title,
.role-bubble--ml .role-bubble__title,
.role-bubble--md .role-bubble__title,
.role-bubble--sm .role-bubble__title { font-size: 13px; }

.role-bubble:hover .role-bubble__title,
.role-bubble.is-active .role-bubble__title {
  color: var(--role-color, var(--navy));
}

.role-bubble__hint {
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.4;
  margin-top: 3px;
}

/* Hints visible on all bubbles — all are now uniform ML size */

/* ── CTA footer — positioning wrapper only, upper-left of cluster ── */

.hp-personas__footer {
  /* Inside .roles-bubble-cluster (position: relative) — upper-left empty zone */
  position: absolute;
  left: 0;
  top: 10px;
  z-index: 3;
  /* Width bound: stays left of الاستشاري bubble (left: 16%) with 12px gap */
  max-width: calc(16% - 12px);
  /* Initial hidden state — JS adds .is-cta-visible after circles settle */
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 0.70s var(--ease-decelerate),
    transform 0.70s var(--ease-decelerate);
}

.hp-personas__footer.is-cta-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .hp-personas__footer {
    transition: none;
  }
}

/* ── Roles section CTA — "التاجر" circle style as pill button ─── */

.hp-personas__footer .btn {
  /* Premium glassy gradient-border pill — matches .hp-how-cta__btn */
  background:
    linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)) padding-box,
    linear-gradient(135deg, #91B9B4, #FF9619, #6E1946) border-box;
  border: 2px solid transparent;
  color: #0F2837;
  text-shadow: none;
  font-family: inherit;   /* use the section/site font (Tajawal), not the global .btn --font-arabic stack */
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  padding-inline: var(--space-4);
  padding-block: var(--space-3);
  white-space: normal;
  line-height: 1.4;
  text-align: center;
  width: 100%;
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 2px 12px rgba(15, 40, 55, 0.08),
    0 4px 24px rgba(255, 150, 25, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
  animation: howCTABreath 4s ease-in-out infinite;
  transition:
    transform      0.28s var(--ease-spring),
    box-shadow     0.28s var(--ease-standard);
  margin-top: 0;
}

/* Soft orange breathing glow — mirrors التاجر circle active state */
@keyframes rolesCTABreath {
  0%, 100% {
    box-shadow:
      0 2px 12px rgba(15, 40, 55, 0.07),
      0 4px 20px rgba(255, 150, 25, 0.12),
      0 0 0 0   rgba(255, 150, 25, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }
  50% {
    box-shadow:
      0 4px 18px rgba(15, 40, 55, 0.10),
      0 0  30px rgba(255, 150, 25, 0.28),
      0 0 0 6px rgba(255, 150, 25, 0.09),
      inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }
}

/* Hover — matches التاجر circle hover: stronger orange border + ambient glow */
.hp-personas__footer .btn:hover {
  transform: translateY(-3px);
  background:
    linear-gradient(rgba(255, 249, 240, 0.97), rgba(255, 249, 240, 0.97)) padding-box,
    linear-gradient(135deg, #91B9B4, #FF9619, #6E1946) border-box;
  box-shadow:
    0 0  34px rgba(255, 150, 25, 0.26),
    0 8px 32px rgba(15, 40, 55, 0.14),
    0 0 0 6px rgba(145, 185, 180, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
  animation-play-state: paused;
}

/* Focus */
.hp-personas__footer .btn:focus-visible {
  outline: 3px solid rgba(255, 150, 25, 0.70);
  outline-offset: 4px;
  animation-play-state: paused;
}

/* Reduced motion: keep border/shadow, disable pulse */
@media (prefers-reduced-motion: reduce) {
  .hp-personas__footer .btn {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════
   HP HOW IT WORKS — Premium Journey System
   4 branded steps, gradient track, scroll reveal.
   ═══════════════════════════════════════════════════ */

.hp-how { background: transparent; }

/* ── Section header ──────────────────────────────── */

.process-header { margin-bottom: var(--space-12); }

.process-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: rgba(145, 185, 180, 0.12);
  border: 1px solid rgba(145, 185, 180, 0.35);
  color: var(--navy);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-5);
}

.process-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

.process-title { position: relative; color: var(--navy); }

.process-title__em { font-style: normal; color: var(--orange); }

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .process-title__em {
    background: linear-gradient(to left, var(--orange) 0%, var(--sage) 55%, var(--burgundy) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* Decorative accent underline below title */
.process-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to left, var(--orange), var(--sage));
  margin: var(--space-4) auto 0;
}

/* ── Per-step color tokens ───────────────────────── */

.process-step[data-step-color="orange"] {
  --step-color:        #FF9619;
  --step-bg-hover:     rgba(255, 150, 25, 0.10);
  --step-border:       rgba(255, 150, 25, 0.28);
  --step-border-hover: rgba(255, 150, 25, 0.55);
  --step-glow:         0 0 28px rgba(255, 150, 25, 0.22);
  --step-shadow-hover: 0 8px 30px rgba(255, 150, 25, 0.16);
}

.process-step[data-step-color="sage"] {
  --step-color:        #91B9B4;
  --step-bg-hover:     rgba(145, 185, 180, 0.12);
  --step-border:       rgba(145, 185, 180, 0.30);
  --step-border-hover: rgba(145, 185, 180, 0.60);
  --step-glow:         0 0 28px rgba(145, 185, 180, 0.22);
  --step-shadow-hover: 0 8px 30px rgba(145, 185, 180, 0.16);
}

.process-step[data-step-color="burgundy"] {
  --step-color:        #6E1946;
  --step-bg-hover:     rgba(110, 25, 70, 0.09);
  --step-border:       rgba(110, 25, 70, 0.22);
  --step-border-hover: rgba(110, 25, 70, 0.48);
  --step-glow:         0 0 28px rgba(110, 25, 70, 0.16);
  --step-shadow-hover: 0 8px 30px rgba(110, 25, 70, 0.13);
}

.process-step[data-step-color="navy"] {
  --step-color:        #0F2837;
  --step-bg-hover:     rgba(15, 40, 55, 0.08);
  --step-border:       rgba(15, 40, 55, 0.18);
  --step-border-hover: rgba(15, 40, 55, 0.38);
  --step-glow:         0 0 28px rgba(15, 40, 55, 0.14);
  --step-shadow-hover: 0 8px 30px rgba(15, 40, 55, 0.14);
}

/* ── Timeline wrapper ───────────────────────────── */

.process-timeline {
  position: relative;
  margin-top: var(--space-12);
}

/* ── Gradient track line ────────────────────────── */

.process-track {
  position: absolute;
  /* Vertically centered at the 72px node circles */
  top: 36px;
  /* RTL: from right edge of step-1 node center to left edge of step-4 node center */
  right: calc(12.5% + 36px);
  left:  calc(12.5% + 36px);
  height: 2px;
  pointer-events: none;
  z-index: 0;
  border-radius: 1px;
  overflow: hidden;
}

.process-track__fill {
  width: 100%;
  height: 100%;
  /* Gradient flows left (RTL direction): orange at step-1 (right) → navy at step-4 (left) */
  background: linear-gradient(to left, #FF9619 0%, #91B9B4 33%, #6E1946 66%, #0F2837 100%);
  /* Draw from right to left on scroll reveal */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1.0s var(--ease-decelerate);
  border-radius: 1px;
}

.process-track__fill.is-drawn { transform: scaleX(1); }

/* ── Steps grid ─────────────────────────────────── */

.hp-steps.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  list-style: none;
  margin-top: 0;
  position: relative;
  z-index: 1;
}

/* Clear the old connector pseudo-element */
.hp-steps.process-steps::after { display: none; }

/* ── Individual step ────────────────────────────── */

.hp-step.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 0;
  /* Scroll reveal — starts hidden; JS adds .is-visible with staggered delay */
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.55s var(--ease-decelerate),
    transform 0.55s var(--ease-decelerate);
}

.hp-step.process-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sibling dimming when any step is hovered */
.process-timeline:has(.process-step.is-hovered) .process-step:not(.is-hovered) {
  opacity: 0.48;
  transition:
    opacity   0.28s var(--ease-standard),
    transform 0.55s var(--ease-decelerate);
}

/* ── Node (icon circle) ─────────────────────────── */

.process-node {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-6);
  z-index: 2;
  flex-shrink: 0;
}

/* Override all old hp-step__number styles */
.hp-step__number.process-node__circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  /* Solid opaque fill — hides the connector line cleanly behind the circle */
  background: #ffffff;
  border: 2px solid var(--step-border, rgba(145, 185, 180, 0.35));
  color: var(--step-color, var(--navy));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-sm);
  margin-bottom: 0;
  transition:
    border-color  0.30s var(--ease-standard),
    background    0.30s var(--ease-standard),
    box-shadow    0.30s var(--ease-standard),
    transform     0.30s var(--ease-spring);
}

/* Neutralise the old first-child orange fill */
.hp-step.process-step:first-child .hp-step__number.process-node__circle {
  background: #ffffff;
  color: var(--step-color);
  box-shadow: var(--shadow-sm);
}

.process-step.is-hovered .hp-step__number.process-node__circle {
  border-color: var(--step-border-hover, var(--step-border));
  background: var(--step-bg-hover, rgba(255, 255, 255, 0.98));
  box-shadow: var(--step-glow, var(--shadow-md)), var(--shadow-md);
  transform: scale(1.10) translateY(-4px);
}

.process-node__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  transition: transform 0.28s var(--ease-spring);
}

.process-step.is-hovered .process-node__icon { transform: scale(1.12); }

/* Ambient pulse ring — orange (step 1) only */
.process-node__pulse { display: none; }

.process-step[data-step-color="orange"] .process-node__pulse {
  display: block;
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 150, 25, 0.35);
  pointer-events: none;
  z-index: 0;
  animation: processNodePulse 3.5s ease-in-out infinite;
}

@keyframes processNodePulse {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  60%       { transform: scale(1.22); opacity: 0;   }
}

/* ── Content card ───────────────────────────────── */

.hp-step__content.process-card {
  position: relative;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--step-border, rgba(145, 185, 180, 0.28));
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5) var(--space-6);
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    border-color  0.30s var(--ease-standard),
    box-shadow    0.30s var(--ease-standard),
    transform     0.30s var(--ease-spring),
    background    0.30s var(--ease-standard);
}

.process-step.is-hovered .hp-step__content.process-card {
  border-color: var(--step-border-hover, var(--step-border));
  box-shadow: var(--step-shadow-hover, var(--shadow-md));
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.97);
}

/* Top accent line — 3px color stripe */
.process-card__accent {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--step-color, var(--sage));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  opacity: 0.65;
  transition: opacity 0.28s var(--ease-standard);
}

.process-step.is-hovered .process-card__accent { opacity: 1; }

/* Ordinal Arabic numeral */
.process-card__num {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  color: var(--step-color, var(--navy));
  line-height: 1;
  margin-bottom: var(--space-3);
  opacity: 0.75;
  letter-spacing: -0.02em;
  transition: opacity 0.28s var(--ease-standard);
}

.process-step.is-hovered .process-card__num { opacity: 1; }

/* Title / desc — override old hp-step__ base rules */
.hp-step.process-step .hp-step__title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--navy);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.hp-step.process-step .hp-step__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-loose);
  max-width: none;
  margin-inline: 0;
  flex: 1;
}

/* ── CTA ─────────────────────────────────────────── */

.process-cta {
  text-align: center;
  margin-top: var(--space-12);
}

.process-cta__btn { padding-inline: 2.5rem; }

/* ── How-it-works CTA — premium glassy gradient-border pill ─── */

.hp-how-cta__btn {
  /* Gradient border: paint-over btn--secondary's solid navy border */
  background:
    linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)) padding-box,
    linear-gradient(135deg, #91B9B4, #FF9619, #6E1946) border-box;
  border: 2px solid transparent;
  color: #0F2837;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 2px 12px rgba(15, 40, 55, 0.08),
    0 4px 24px rgba(255, 150, 25, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
  animation: howCTABreath 4s ease-in-out infinite;
  transition:
    transform  0.28s var(--ease-spring),
    box-shadow 0.28s var(--ease-standard);
}

/* Idle shine sweep */
.hp-how-cta__btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -90%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: skewX(-12deg);
  animation: howCTAShine 6s ease-in-out infinite;
  pointer-events: none;
}

/* Breathing glow — sage → orange pulse */
@keyframes howCTABreath {
  0%, 100% {
    box-shadow:
      0 2px 12px rgba(15, 40, 55, 0.07),
      0 4px 20px rgba(255, 150, 25, 0.08),
      0 0 0 0   rgba(145, 185, 180, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.90);
  }
  50% {
    box-shadow:
      0 4px 18px rgba(15, 40, 55, 0.11),
      0 0  28px rgba(255, 150, 25, 0.18),
      0 0 0 5px rgba(145, 185, 180, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.90);
  }
}

@keyframes howCTAShine {
  0%   { left: -90%; opacity: 0; }
  8%   { opacity: 1; }
  45%  { left: 130%; opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

/* Hover — lift + richer border glow + warm background tint */
.hp-how-cta__btn:hover {
  transform: translateY(-3px);
  color: #0F2837;
  background:
    linear-gradient(rgba(255, 249, 240, 0.97), rgba(255, 249, 240, 0.97)) padding-box,
    linear-gradient(135deg, #91B9B4, #FF9619, #6E1946) border-box;
  box-shadow:
    0 0  34px rgba(255, 150, 25, 0.26),
    0 8px 32px rgba(15, 40, 55, 0.14),
    0 0 0 6px rgba(145, 185, 180, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
  animation-play-state: paused;
}

/* Focus */
.hp-how-cta__btn:focus-visible {
  outline: 3px solid rgba(255, 150, 25, 0.65);
  outline-offset: 4px;
  animation-play-state: paused;
}

/* Reduced motion — keep hover, disable continuous animation */
@media (prefers-reduced-motion: reduce) {
  .hp-how-cta__btn          { animation: none; }
  .hp-how-cta__btn::before  { display: none; }
}

/* Mobile — prevent any overflow from wide padding */
@media (max-width: 599px) {
  .hp-how-cta__btn { padding-inline: var(--space-8); }
}

/* ═══════════════════════════════════════════════════
   HP PRODUCTS — Full 11-Product Ecosystem Showcase
   ═══════════════════════════════════════════════════ */

/* Offset for sticky header when navigating via anchor links */
/* Navbar scroll targets — zero-height anchors placed inside each section,
   directly before its tag/pill. Navbar links point here so the scroll lands on
   the pill (not the section's outer top edge, which sits below the preceding
   divider). Offset uses the SCROLLED header height (the header shrinks to 60px
   once the page is scrolled) plus a small gap, so the pill appears ~20px under
   the navbar and the divider stays hidden above it. */
.nav-anchor {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--header-height-scroll, 60px) + 20px);
}
/* Fallback for any links still pointing at the outer section ids (footer, etc.) */
#who-is-it-for,
#how-it-works,
#products {
  scroll-margin-top: var(--header-height, 72px);
}

.hp-products {
  background: transparent;
}

/* ── Section header ──────────────────────────────── */

.products-header {
  margin-bottom: var(--space-8);
}

.products-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: rgba(110, 25, 70, 0.07);
  border: 1px solid rgba(110, 25, 70, 0.22);
  color: var(--burgundy);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-5);
}

.products-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

.products-title {
  position: relative;
  color: var(--navy);
}

.products-title__em {
  font-style: normal;
  /* Dynamic accent — set to the selected community's colour via --hpc-title-c
     (updated by initProductCards on every community switch). */
  color: var(--hpc-title-c, #6E1946);
  -webkit-text-fill-color: var(--hpc-title-c, #6E1946);
  /* Soft luminous aura in the same dynamic colour — subtle, premium */
  text-shadow: 0 0 18px rgba(var(--hpc-title-rgb, 110,25,70), 0.30);
  transition: color 0.4s ease, -webkit-text-fill-color 0.4s ease, text-shadow 0.4s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .products-title__em { animation: hpc-title-breathe 4.8s ease-in-out infinite; }
}
@keyframes hpc-title-breathe {
  0%, 100% { text-shadow: 0 0 14px rgba(var(--hpc-title-rgb, 110,25,70), 0.20); }
  50%      { text-shadow: 0 0 24px rgba(var(--hpc-title-rgb, 110,25,70), 0.42); }
}

.products-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to left, var(--orange), var(--burgundy));
  margin: var(--space-4) auto 0;
}

/* ── Category filter pills ───────────────────────── */

.hp-products__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  margin-bottom: var(--space-2);
}

.hp-products__filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border: 1.5px solid var(--warm-300);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-secondary);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background    0.22s var(--ease-standard),
    border-color  0.22s var(--ease-standard),
    color         0.22s var(--ease-standard),
    box-shadow    0.22s var(--ease-standard);
}

.hp-products__filter-btn:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--warm-400);
  color: var(--navy);
}

.hp-products__filter-btn:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* "الكل" active state */
.hp-products__filter-btn.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
  box-shadow: 0 4px 14px rgba(15, 40, 55, 0.22);
}

.hp-products__filter-btn[data-filter-cat="education"].is-active {
  background: #4e8f8a;
  border-color: #4e8f8a;
  color: white;
  box-shadow: 0 4px 14px rgba(145, 185, 180, 0.30);
}

.hp-products__filter-btn[data-filter-cat="incubation"].is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--navy);
  box-shadow: 0 4px 14px rgba(255, 150, 25, 0.28);
}

.hp-products__filter-btn[data-filter-cat="market"].is-active {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: white;
  box-shadow: 0 4px 14px rgba(110, 25, 70, 0.22);
}

.hp-products__filter-btn[data-filter-cat="ai"].is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
  box-shadow: 0 4px 14px rgba(15, 40, 55, 0.22);
}

/* Count badge inside "الكل" filter */
.hp-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--weight-bold);
  background: rgba(255, 255, 255, 0.22);
}

/* ── Per-category color tokens ────────────────────── */

[data-product-cat="edu"] {
  --prod-color:        #91B9B4;
  --prod-border:       rgba(145, 185, 180, 0.22);
  --prod-border-hover: rgba(145, 185, 180, 0.64);
  --prod-badge-bg:     rgba(145, 185, 180, 0.12);
  --prod-badge-border: rgba(145, 185, 180, 0.28);
  --prod-glow:         0 10px 40px rgba(145, 185, 180, 0.20), 0 3px 14px rgba(145, 185, 180, 0.10);
}

[data-product-cat="inc"] {
  --prod-color:        #FF9619;
  --prod-border:       rgba(255, 150, 25, 0.20);
  --prod-border-hover: rgba(255, 150, 25, 0.58);
  --prod-badge-bg:     rgba(255, 150, 25, 0.10);
  --prod-badge-border: rgba(255, 150, 25, 0.26);
  --prod-glow:         0 10px 40px rgba(255, 150, 25, 0.16), 0 3px 14px rgba(255, 150, 25, 0.08);
}

[data-product-cat="mkt"] {
  --prod-color:        #6E1946;
  --prod-border:       rgba(110, 25, 70, 0.16);
  --prod-border-hover: rgba(110, 25, 70, 0.50);
  --prod-badge-bg:     rgba(110, 25, 70, 0.08);
  --prod-badge-border: rgba(110, 25, 70, 0.22);
  --prod-glow:         0 10px 40px rgba(110, 25, 70, 0.13), 0 3px 14px rgba(110, 25, 70, 0.07);
}

[data-product-cat="ai"] {
  --prod-color:        #0F2837;
  --prod-border:       rgba(15, 40, 55, 0.14);
  --prod-border-hover: rgba(15, 40, 55, 0.38);
  --prod-badge-bg:     rgba(15, 40, 55, 0.06);
  --prod-badge-border: rgba(15, 40, 55, 0.16);
  --prod-glow:         0 10px 40px rgba(15, 40, 55, 0.14), 0 3px 14px rgba(15, 40, 55, 0.07);
}

/* ── Eco grid (11 cards, 3 columns) ──────────────── */

.hp-products__eco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}

/* ── Ecosystem card — base ────────────────────────── */

.hp-ec-card {
  position: relative;
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid var(--prod-border, rgba(145, 185, 180, 0.20));
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 4px rgba(15, 40, 55, 0.06), 0 4px 18px rgba(15, 40, 55, 0.04);
  /* Scroll reveal state */
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition:
    opacity   0.55s var(--ease-decelerate),
    transform 0.55s var(--ease-decelerate);
}

.hp-ec-card.is-visible {
  opacity: 1;
  transform: none;
  transition:
    border-color 0.28s var(--ease-standard),
    box-shadow   0.28s var(--ease-standard),
    background   0.28s var(--ease-standard),
    transform    0.28s var(--ease-spring);
}

/* Top accent stripe */
.hp-ec-card::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--prod-color, var(--sage));
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  opacity: 0.42;
  transition: opacity 0.28s var(--ease-standard);
  pointer-events: none;
}

.hp-ec-card:hover::before { opacity: 1; }

.hp-ec-card:hover {
  border-color: var(--prod-border-hover, rgba(145, 185, 180, 0.55));
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--prod-glow, var(--shadow-lg));
  transform: translateY(-5px);
  z-index: 1;
}

.hp-ec-card:focus-within {
  outline: 2px solid var(--prod-color, var(--sage));
  outline-offset: 3px;
  border-radius: var(--radius-2xl);
}

/* Hidden by filter */
.hp-ec-card[data-hidden="true"] {
  display: none;
}

/* Filter enter animation */
@keyframes ecCardEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.hp-ec-card.is-filter-entering {
  animation: ecCardEnter 0.30s var(--ease-decelerate) forwards;
}

/* ── Card top row: icon + status badge ───────────── */

.hp-ec-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.hp-ec-card__icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.hp-ec-card__status {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}

.hp-ec-card__status--open {
  background: rgba(46, 125, 90, 0.10);
  color: var(--color-success);
  border: 1px solid rgba(46, 125, 90, 0.25);
}

.hp-ec-card__status--upcoming {
  background: rgba(255, 150, 25, 0.10);
  color: var(--color-warning);
  border: 1px solid rgba(255, 150, 25, 0.22);
}

/* ── Category label ──────────────────────────────── */

.hp-ec-card__cat {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0;
}

.hp-ec-card__cat--education  { color: #4e8f8a; }
.hp-ec-card__cat--incubation { color: #C07900; }
.hp-ec-card__cat--market     { color: var(--burgundy); }
.hp-ec-card__cat--ai         { color: var(--navy); }

/* ── Product name ─────────────────────────────────── */

.hp-ec-card__name {
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
  transition: color 0.24s var(--ease-standard);
}

.hp-ec-card:hover .hp-ec-card__name {
  color: var(--prod-color, var(--navy));
}

/* ── Tagline ──────────────────────────────────────── */

.hp-ec-card__tagline {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
  margin: 0;
}

/* ── Description ──────────────────────────────────── */

.hp-ec-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  flex: 1;
  margin: 0;
}

/* ── Feature tags ─────────────────────────────────── */

.hp-ec-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hp-ec-card__tag {
  font-size: var(--text-xs);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
}

.hp-ec-card__tag--sage     { background: var(--sage-10);     color: #3a7a76;        border: 1px solid var(--sage-20); }
.hp-ec-card__tag--orange   { background: var(--orange-10);   color: #a06010;        border: 1px solid var(--orange-20); }
.hp-ec-card__tag--burgundy { background: var(--burgundy-10); color: var(--burgundy); border: 1px solid var(--burgundy-20); }
.hp-ec-card__tag--navy     { background: var(--navy-05);     color: var(--navy);    border: 1px solid var(--navy-10); }

/* ── CTA button ───────────────────────────────────── */

.hp-ec-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: 1.5px solid var(--prod-border-hover, rgba(15, 40, 55, 0.18));
  color: var(--navy);
  background: rgba(255, 255, 255, 0.55);
  margin-top: auto;
  transition:
    background   0.22s var(--ease-standard),
    border-color 0.22s var(--ease-standard),
    color        0.22s var(--ease-standard),
    transform    0.22s var(--ease-spring);
}

.hp-ec-card__cta:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
  transform: translateY(-1px);
}

.hp-ec-card__cta:focus-visible {
  outline: 3px solid var(--prod-color, var(--sage));
  outline-offset: 3px;
}

/* ── Filter count text ────────────────────────────── */

.hp-products__filter-count {
  display: block;
  width: 100%;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
  margin-inline: auto;
}

/* ── Footer CTA area ─────────────────────────────── */

.hp-products__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  margin-top: var(--space-12);
}

/* ═══════════════════════════════════════════════════
   HP FINAL CTA — Premium Closing Statement
   ═══════════════════════════════════════════════════ */

.hp-cta {
  /* Soft OSUS identity atmosphere — same gradient language as the Hero
     background (sage · orange · burgundy · navy over the warm canvas). Each
     glow fades to transparent well before the section edges, so it layers over
     the continuous body.home canvas with no visible band / hard seam. */
  background:
    radial-gradient(58% 62% at 16% 24%, rgba(145, 185, 180, 0.20) 0%, transparent 60%),
    radial-gradient(55% 58% at 85% 20%, rgba(255, 150, 25,  0.13) 0%, transparent 58%),
    radial-gradient(60% 62% at 82% 86%, rgba(110,  25, 70,  0.10) 0%, transparent 60%),
    radial-gradient(56% 58% at 18% 88%, rgba(15,   40, 55,  0.06) 0%, transparent 60%);
  /* Reduced top padding so the closing CTA sits closer to the products
     section above (previously a large ~10rem top gap). Bottom keeps balanced
     breathing room before the footer. */
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(4.5rem, 9vw, 8rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* No section-local background box here.
   This closing section relies entirely on the continuous body.home canvas —
   the exact same treatment as the .hp-products section above it — so the
   ambient gradients flow across both with no clipped edge / horizontal seam.
   (A local ::before clipped by overflow:hidden is what created the visible
   band before; removing it makes the whole area read as one canvas.) */
.hp-cta::before,
.hp-cta::after { content: none; }

/* ── Decorative depth rings ───────────────────────── */

.hp-cta__deco {
  /* Oval/elliptical decorative outline rings removed from this last section
     only. This wrapper holds solely the three .hp-cta__ring ellipses, so
     hiding it removes the oval shapes while leaving the section, its
     background, text, and buttons unchanged. */
  display: none;
}

.hp-cta__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(145, 185, 180, 0.22);
  transform-origin: center;
}

.hp-cta__ring--1 {
  width: min(640px, 100vw);
  height: min(200px, 32vw);
  margin-left: min(-320px, -50vw);
  margin-top: min(-100px, -16vw);
  border-color: rgba(145, 185, 180, 0.20);
  animation: ctaRingDrift 28s linear infinite;
}

.hp-cta__ring--2 {
  width: min(900px, 130vw);
  height: min(280px, 45vw);
  margin-left: min(-450px, -65vw);
  margin-top: min(-140px, -22.5vw);
  border-color: rgba(255, 150, 25, 0.16);
  animation: ctaRingDrift 42s linear infinite reverse;
}

.hp-cta__ring--3 {
  width: min(480px, 75vw);
  height: min(150px, 24vw);
  margin-left: min(-240px, -37.5vw);
  margin-top: min(-75px, -12vw);
  border-color: rgba(110, 25, 70, 0.16);
  animation: ctaRingDrift 20s linear infinite;
}

@keyframes ctaRingDrift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Container ────────────────────────────────────── */

.hp-cta__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ── Staggered reveal delays ──────────────────────── */

.hp-cta .hp-cta__eyebrow[data-reveal] { transition-delay:   0ms; }
.hp-cta .hp-cta__title[data-reveal]   { transition-delay: 110ms; }
.hp-cta .hp-cta__desc[data-reveal]    { transition-delay: 220ms; }
.hp-cta .hp-cta__buttons[data-reveal] { transition-delay: 340ms; }

/* ── Eyebrow ──────────────────────────────────────── */

.hp-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: rgba(255, 150, 25, 0.10);
  border: 1px solid rgba(255, 150, 25, 0.28);
  color: var(--orange);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-8);
}

.hp-cta__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
  animation: ctaDotPulse 2.6s ease-in-out infinite;
}

@keyframes ctaDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(0.80); }
}

/* ── Title ────────────────────────────────────────── */

.hp-cta__title {
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  font-weight: var(--weight-black);
  color: var(--navy); /* #0F2837 — readable on the light canvas */
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  text-wrap: balance;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-shadow: none;
}

.hp-cta__title em {
  font-style: normal;
  background: linear-gradient(to left, var(--orange) 0%, #d1702a 45%, var(--burgundy) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Subtitle ─────────────────────────────────────── */

.hp-cta__desc {
  font-size: clamp(var(--text-base), 1.65vw, var(--text-lg));
  color: var(--text-secondary); /* muted navy — readable on light */
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--space-12);
  line-height: var(--leading-loose);
}

/* ── Buttons ──────────────────────────────────────── */

.hp-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
}

/* Primary — premium orange with warm glow */
.hp-cta__btn-primary.btn {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--navy);
  font-weight: var(--weight-bold);
  box-shadow:
    0 4px 22px rgba(255, 150, 25, 0.38),
    0 1px 6px  rgba(255, 150, 25, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    transform   0.26s var(--ease-spring),
    box-shadow  0.26s var(--ease-standard),
    background  0.22s var(--ease-standard);
}

.hp-cta__btn-primary.btn:hover {
  background: #ffa333;
  border-color: #ffa333;
  transform: translateY(-3px);
  box-shadow:
    0 10px 40px rgba(255, 150, 25, 0.52),
    0 3px 12px  rgba(255, 150, 25, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.hp-cta__btn-primary.btn:focus-visible {
  outline: 3px solid rgba(255, 150, 25, 0.70);
  outline-offset: 4px;
}

/* Ghost — light outline button, readable on the light canvas */
.hp-cta__btn-ghost.btn {
  background: rgba(255, 255, 255, 0.60);
  border: 1.5px solid var(--navy-20);
  color: var(--navy);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition:
    background   0.26s var(--ease-standard),
    border-color 0.26s var(--ease-standard),
    color        0.26s var(--ease-standard),
    transform    0.26s var(--ease-spring),
    box-shadow   0.26s var(--ease-standard);
}

.hp-cta__btn-ghost.btn:hover {
  background: rgba(255, 255, 255, 0.90);
  border-color: var(--sage);
  color: var(--navy);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 6px 24px rgba(145, 185, 180, 0.18);
}

.hp-cta__btn-ghost.btn:focus-visible {
  outline: 3px solid rgba(145, 185, 180, 0.60);
  outline-offset: 4px;
}

/* Mobile: stack buttons */
@media (max-width: 767px) {
  .hp-cta__buttons {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  .hp-cta__buttons .btn {
    justify-content: center;
  }
}

/* Static section — all looping motion disabled (ring drift rotation + dot
   pulse). Rings and dot keep their exact visual; only the animation is removed,
   so nothing in this section moves, rotates, floats, pulses, or fades on loop. */
.hp-cta__ring,
.hp-cta__eyebrow-dot {
  animation: none !important;
}

/* ═══════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
   ═══════════════════════════════════════════════════ */

@keyframes hp-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade-in only — used on circles to avoid transform conflict with hover scale */
@keyframes hp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

/* Tablet — 1024px */
@media (max-width: 1023px) {

  .hp-hero {
    min-height: auto;
    padding-block-end: var(--space-16);
  }

  .hp-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-12);
  }

  .hp-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hp-hero__desc { max-width: none; }

  /* Circles scaled for tablet layout */
  .hero-circles-stage {
    --cs-size: 380px;
    --cc-size: 200px;
    --cc-half: 100px;
    --cc-arm:   86px;
  }
  .hero-circle {
    margin-left: calc(-1 * var(--cc-half));
    margin-top:  calc(-1 * var(--cc-half));
  }
  .hero-circle-icon {
    width: 26px;
    height: 26px;
  }
  .hero-circles-logo-card {
    width: 86px;
    height: 86px;
    padding: 13px;
  }

  /* Bubble cluster — switch to flex wrap at tablet */
  .roles-bubble-cluster {
    position: static;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
  }

  /* CTA — revert to static inside flex cluster at tablet */
  .hp-personas__footer {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    max-width: 320px;
    width: auto;
    margin: 0 auto var(--space-6);
    order: -1; /* show before the circles in the flex layout */
  }

  .role-bubble {
    position: static;
    --bubble-size: 175px;
  }

  .role-bubble--lg  { --bubble-size: 175px; }
  .role-bubble--ml  { --bubble-size: 175px; }
  .role-bubble--md  { --bubble-size: 175px; }
  .role-bubble--sm  { --bubble-size: 175px; }

  /* Process section — tablet: 2×2 grid, hide track */
  .process-track { display: none; }

  .hp-steps.process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .hp-products__eco-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet Small — 768px */
@media (max-width: 767px) {
  /* Scale circles stage */
  .hero-circles-stage {
    --cs-size: 310px;
    --cc-size: 164px;
    --cc-half:  82px;
    --cc-arm:   70px;
  }
  .hero-circle {
    margin-left: calc(-1 * var(--cc-half));
    margin-top:  calc(-1 * var(--cc-half));
  }
  .hero-circle-icon {
    width: 22px;
    height: 22px;
  }
  .hero-circles-logo-card {
    width: 72px;
    height: 72px;
    padding: 11px;
  }
  /* Redirect side tooltips upward at small widths — avoids overflow */
  .hero-circle--right .hero-circle-tip,
  .hero-circle--left  .hero-circle-tip {
    top: auto;
    left: 50%;
    right: auto;
    bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(6px);
  }
  .hero-circle--right:hover .hero-circle-tip,
  .hero-circle--right.is-active .hero-circle-tip,
  .hero-circle--left:hover  .hero-circle-tip,
  .hero-circle--left.is-active  .hero-circle-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* Bubble cluster — mobile sizes, all hints hidden */
  .roles-bubble-cluster { gap: var(--space-3); }

  .role-bubble--lg  { --bubble-size: 148px; }
  .role-bubble--ml  { --bubble-size: 148px; }
  .role-bubble--md  { --bubble-size: 148px; }
  .role-bubble--sm  { --bubble-size: 148px; }

  .role-bubble__hint { display: none; }

  /* Process section — mobile: vertical single-column */
  .hp-steps.process-steps {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .hp-step.process-step {
    flex-direction: row;
    text-align: start;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .process-node {
    margin-bottom: 0;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
  }

  .hp-step__number.process-node__circle {
    width: 60px;
    height: 60px;
  }

  .process-node__icon {
    width: 22px;
    height: 22px;
  }

  .hp-step__content.process-card { text-align: start; }

  .hp-step.process-step .hp-step__desc { text-align: start; }

  .hp-products__eco-grid {
    grid-template-columns: 1fr;
  }

  .hp-products__filters {
    gap: var(--space-2);
  }
  .hp-products__filter-btn {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-4);
  }

  /* Modal fits mobile screen */
  .hero-quiz-modal {
    padding: var(--space-4);
    align-items: flex-end;
  }

  .hero-quiz-modal__card {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-width: none;
    padding: var(--space-6) var(--space-6) var(--space-7);
  }
}

/* Mobile — 430px */
@media (max-width: 430px) {
  /* Smallest circles stage */
  .hero-circles-stage {
    --cs-size: 272px;
    --cc-size: 144px;
    --cc-half:  72px;
    --cc-arm:   61px;
  }
  .hero-circle {
    margin-left: calc(-1 * var(--cc-half));
    margin-top:  calc(-1 * var(--cc-half));
  }
  .hero-circle-icon {
    width: 18px;
    height: 18px;
  }
  .hero-circles-logo-card {
    width: 64px;
    height: 64px;
    padding: 10px;
  }
  /* Bubble cluster — tighter at 430px, still flex-wrap circles */
  .roles-bubble-cluster { gap: var(--space-2); }

  .role-bubble--lg  { --bubble-size: 132px; }
  .role-bubble--ml  { --bubble-size: 132px; }
  .role-bubble--md  { --bubble-size: 132px; }
  .role-bubble--sm  { --bubble-size: 132px; }

  .role-bubble { padding: 12px; }

  .hp-hero__headline {
    font-size: clamp(1.875rem, 7.5vw, 2.5rem);
  }

  /* Process steps — smallest node */
  .hp-step__number.process-node__circle {
    width: 52px;
    height: 52px;
  }

  .process-node__icon {
    width: 20px;
    height: 20px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hp-hero::before,
  .hp-hero::after { animation: none !important; }

  .hp-hero__content,
  .hp-hero__visual,
  .hero-circle {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero-circle,
  .hero-circle-tip {
    transition: none;
  }

  /* Product ecosystem cards — appear immediately, no animation */
  .hp-ec-card,
  .hp-ec-card.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }

  .hero-quiz-modal,
  .hero-quiz-modal__card {
    transition: none;
  }

  /* Process section — remove motion */
  .process-node__pulse,
  .process-step[data-step-color="orange"] .process-node__pulse {
    animation: none !important;
  }

  .process-track__fill {
    transition: none;
  }

  .hp-step.process-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }

  .hp-step__number.process-node__circle,
  .hp-step__content.process-card,
  .process-node__icon {
    transition: none;
  }

  /* Role bubbles — remove motion */
  .role-bubble {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: none;
  }

  .role-bubble__icon,
  .role-bubble__title {
    transition: none;
  }

}

/* ── National eLearning Center accreditation (homepage hero) ──────────────
   Static accreditation mark placed beneath the hero content. No container,
   background, border, shadow, glow, animation, hover, or transition.
   Logo keeps its original 704×269 proportions (width/height auto + max-width). */
.hp-hero__accred {
  display: flex;                 /* block-level → its OWN line below the badge, never beside it */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: fit-content;            /* the SVG logo defines the wrapper width */
  gap: 0.15rem;                  /* small balanced gap between the logo and the license label */
  /* badge's own margin-bottom sets the badge→logo gap; this sets the balanced gap to the heading */
  margin: 0 0 clamp(1rem, 2vw, 1.35rem);
}
.hp-hero__accred-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 120px;              /* logo defines the block width (desktop ~115–125px) */
  object-fit: contain;
}
.hp-hero__accred-lic {
  display: flex;
  flex-direction: row;           /* label + number on ONE line */
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;   /* starts at the inline-start of the logo (right in RTL, left in LTR) */
  width: 100%;
  margin: 0;
  margin-inline: auto;
  gap: 0.3rem;                   /* normal spacing after the colon, before the number */
  white-space: nowrap;
  font-size: 0.66rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--navy, #0F2837);
  text-align: start;
  letter-spacing: 0;
}
.hp-hero__accred-lic-num {       /* license number: isolated LTR run — zeros never reverse or shift */
  unicode-bidi: isolate;
  white-space: nowrap;
}
@media (max-width: 768px) { .hp-hero__accred-logo { max-width: 108px; } .hp-hero__accred-lic { font-size: 0.62rem; } }
@media (max-width: 480px) { .hp-hero__accred-logo { max-width: 96px; }  .hp-hero__accred-lic { font-size: 0.6rem; } }

/* The premium OSUS glass for the SCROLLED header is now centralized in the
   shared header layer (assets/css/pages.css → .site-header.theme-light.is-scrolled)
   so every page shares it. No homepage-only override needed here anymore. */