/* ─────────────────────────────────────────────────────
   OSUS — Header, Navigation & Page-Specific Styles
   ───────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════ */

.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--header-height);
  z-index: var(--z-header);
  transition:
    background       0.28s var(--ease-standard),
    box-shadow       0.28s var(--ease-standard),
    height           0.28s var(--ease-standard),
    border-color     0.28s var(--ease-standard),
    backdrop-filter  0.28s var(--ease-standard);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
}

/* Scrolled state — default (dark backgrounds) */
.site-header.is-scrolled {
  height: var(--header-height-scroll);
  background: rgba(15, 40, 55, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--border-color-light);
  box-shadow: 0 4px 24px rgba(15, 40, 55, 0.20);
}

/* Scrolled state — light background pages: UNIFIED premium OSUS frosted glass.
   Approved on the homepage and now centralized here so every theme-light page
   shares the same scrolled header. Low white base lets the page show through;
   faint OSUS tints (sage · orange · burgundy) read as colour refractions, not
   paint. Dark nav text stays readable. Covers BOTH the homepage transparent→
   scroll header AND the interior always-solid header, so all pages share it. */
.site-header.theme-light.is-scrolled,
body:not(.home) .site-header.theme-light {
  background:
    radial-gradient(130% 190% at 10% -40%, rgba(145, 185, 180, 0.11) 0%, transparent 60%),
    radial-gradient(130% 190% at 90% -40%, rgba(255, 150, 25, 0.085) 0%, transparent 58%),
    radial-gradient(150% 220% at 55% 150%, rgba(110, 25, 70, 0.055)  0%, transparent 56%),
    rgba(250, 250, 248, 0.46);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 4px 20px rgba(15, 40, 55, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(15, 40, 55, 0.03);
}

.site-header.theme-light.is-scrolled .nav-link {
  color: var(--text-secondary);
}

.site-header.theme-light.is-scrolled .nav-link:hover {
  color: var(--navy);
}

/* On light sections — transparent at page-top, glass on scroll */
.site-header.theme-light {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}

/* On dark hero (default) */
.site-header.theme-dark {
  background: transparent;
}

/* ── Interior pages — always-solid header ──────────────────────────────────
   All internal pages use <body> (no .home class).
   This overrides the transparent theme-light base state so the header is
   always visually solid on dark-hero pages without changing the homepage
   transparent-to-glass scroll behaviour (homepage has <body class="home">).
   Specificity: 0-3-1 — wins over .site-header.theme-light (0-2-0)
   and .site-header.theme-light.is-scrolled (0-3-0).
   ─────────────────────────────────────────────────────────────────────── */
/* Interior always-solid header now shares the unified OSUS glass above
   (folded into that selector), so no separate white-glass block is needed. */

body:not(.home) .site-header.theme-light .nav-link {
  color: var(--text-secondary);
}

body:not(.home) .site-header.theme-light .nav-link:hover,
body:not(.home) .site-header.theme-light .nav-item.is-open .nav-link {
  color: #FF9619;
}

body:not(.home) .site-header.theme-light .nav-mobile-trigger {
  color: var(--navy);
  background: var(--navy-10);
}

/* ── Transparent-top header — only on flagged pages (contact + legal) ────────
   At scroll position 0 the header overlays the (light) page hero with no
   background/border/shadow. On scroll, .is-scrolled restores the approved
   glass surface. Height is kept constant between states so there is no jump.
   Specificity 0-4-1 wins over `body:not(.home) .site-header.theme-light` (0-3-1).
   Nav-link / trigger colours are inherited from the interior-page rules above,
   so they stay dark and readable over the light hero at the top.
   ─────────────────────────────────────────────────────────────────────────── */
body.transparent-top .site-header.theme-light:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}
body.transparent-top .site-header.is-scrolled {
  height: var(--header-height);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Logo */
.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.header-logo img,
.header-logo svg {
  height: 36px;
  width: auto;
}

/* Center nav */
.nav-desktop {
  display: flex;
  align-items: center;
  /* Roomier spacing between nav items — clamped so it stays elegant on
     smaller desktops and never overflows. */
  gap: clamp(0.5rem, 1.4vw, 1.6rem);
  flex: 1;
  justify-content: center;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(248, 246, 243, 0.85);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition:
    color 0.28s var(--ease-standard);
  border: none;
  background: none;
  font-family: inherit;
  text-decoration: none;
}

/* Brand underline — slides in on hover */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 3px;
  inset-inline: var(--space-3);
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(to left, #91B9B4, #FF9619, #6E1946);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition:
    opacity  0.28s var(--ease-standard),
    transform 0.30s var(--ease-decelerate, cubic-bezier(0.0, 0.0, 0.2, 1));
  pointer-events: none;
}

.nav-link:hover::after,
.nav-item.is-open .nav-link::after {
  opacity: 1;
  transform: scaleX(1);
}

.site-header.theme-light .nav-link {
  color: var(--text-secondary);
}

/* Dark header hover — keep existing warm white shift */
.nav-link:hover,
.nav-item.is-open .nav-link {
  color: var(--text-on-dark);
}

/* Light header hover — shift text to orange for warm brand identity */
.site-header.theme-light .nav-link:hover,
.site-header.theme-light .nav-item.is-open .nav-link {
  color: #FF9619;
}

.nav-link__chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.nav-item.is-open .nav-link__chevron {
  transform: rotate(180deg);
}

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Mobile trigger */
.nav-mobile-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--text-on-dark);
  background: var(--navy-20);
  border: none;
  cursor: pointer;
  margin-inline-start: auto;
  transition: background var(--duration-fast);
}

.site-header.theme-light .nav-mobile-trigger {
  color: var(--navy);
  background: var(--navy-10);
}

.nav-mobile-trigger:hover { background: var(--navy-40); }

/* ═══════════════════════════════════════════════════
   MEGA MENU
   ═══════════════════════════════════════════════════ */

.mega-menu {
  position: fixed;
  top: var(--header-height);
  left: 50%;
  width: min(1100px, 96vw);
  background: #fff;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--border-color);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition:
    opacity   var(--duration-normal) var(--ease-standard),
    transform var(--duration-normal) var(--ease-decelerate);
  overflow: hidden;
}

.nav-item.is-open .mega-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Adjust mega menu top when header shrinks on scroll */
.site-header.is-scrolled .mega-menu {
  top: var(--header-height-scroll);
}

/* Simple dropdown (non-mega) */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-color);
  padding: var(--space-3);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity   var(--duration-normal) var(--ease-standard),
    transform var(--duration-normal) var(--ease-decelerate);
}

.nav-item.is-open .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.mega-menu__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 280px;
  gap: 0;
}

/* Column */
.mega-col {
  padding: var(--space-6);
  border-inline-end: 1px solid var(--border-color);
}

.mega-col:last-child { border-inline-end: none; }

.mega-col__heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-color);
}

.mega-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-standard),
    color      var(--duration-fast) var(--ease-standard);
  margin-bottom: var(--space-1);
}

.mega-link:hover {
  background: var(--navy-05);
  color: var(--navy);
}

.mega-link__icon {
  width: 28px;
  height: 28px;
  background: var(--navy-05);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  flex-shrink: 0;
  font-size: 14px;
}

/* Featured panel */
.mega-featured {
  padding: var(--space-6);
  background: var(--navy);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mega-featured__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--sage);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mega-featured__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-on-dark);
  line-height: var(--leading-snug);
}

.mega-featured__desc {
  font-size: var(--text-sm);
  color: var(--sage-80);
  line-height: var(--leading-normal);
}

.mega-featured__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mega-featured__stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.mega-featured__stat-label {
  font-size: var(--text-xs);
  color: var(--sage-80);
}

/* Divider in mega menu */
.mega-menu__stats {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--navy-05);
  border-top: 1px solid var(--border-color);
  grid-column: 1 / -1;
}

/* ═══════════════════════════════════════════════════
   MOBILE DRAWER
   ═══════════════════════════════════════════════════ */

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  pointer-events: none;
}

.mobile-drawer.is-open {
  pointer-events: all;
}

.mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--navy-80);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-standard);
}

.mobile-drawer.is-open .mobile-drawer__backdrop {
  opacity: 1;
}

.mobile-drawer__panel {
  position: relative;
  width: min(360px, 90vw);
  height: 100%;
  background: var(--navy);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  margin-inline-start: auto;
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-decelerate);
}

[dir="rtl"] .mobile-drawer__panel {
  margin-inline-start: unset;
  margin-inline-end: auto;
  transform: translateX(100%);
}

.mobile-drawer.is-open .mobile-drawer__panel {
  transform: translateX(0);
}

.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-color-light);
}

.mobile-drawer__close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-40);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-dark);
  cursor: pointer;
  border: none;
  flex-shrink: 0;
}

.mobile-drawer__quick {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-color-light);
}

.mobile-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  color: rgba(248, 246, 243, 0.8);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: right;
  cursor: pointer;
  font-family: inherit;
  transition:
    background var(--duration-fast) var(--ease-standard),
    color      var(--duration-fast) var(--ease-standard);
}

.mobile-nav-link:hover {
  background: var(--navy-40);
  color: var(--text-on-dark);
}

.mobile-nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-normal) var(--ease-decelerate);
}

.mobile-nav-link.is-open + .mobile-nav-submenu {
  max-height: 400px;
}

.mobile-submenu-link {
  display: block;
  padding: var(--space-3) var(--space-8);
  color: var(--sage-80);
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--duration-fast);
}

.mobile-submenu-link:hover { color: var(--text-on-dark); }

/* ═══════════════════════════════════════════════════
   HERO SECTION — Cinematic Gateway
   ═══════════════════════════════════════════════════ */

/* ── Section shell ─────────────────────────────────── */
.hero-section {
  position: relative;
  min-height: 100svh;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  overflow: clip;
  padding-top: var(--header-height);
}

/* ── Atmospheric background layers ─────────────────── */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Subtle film grain via SVG noise filter */
.hero-bg__noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Dot grid — perspective-y compressed */
.hero-bg__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(145,185,180,0.18) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 80% 65% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 50%, black 30%, transparent 100%);
}

/* Orange radiance — right-side energy source (RTL: content column) */
.hero-bg__glow-a {
  position: absolute;
  top: -15%;
  right: -8%;
  width: 55%;
  height: 75%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,150,25,0.14) 0%, transparent 68%);
  filter: blur(40px);
  animation: hero-pulse-a 8s ease-in-out infinite alternate;
}

/* Sage radiance — left-side depth (RTL: portal column) */
.hero-bg__glow-b {
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: 50%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(145,185,180,0.1) 0%, transparent 65%);
  filter: blur(48px);
  animation: hero-pulse-b 10s ease-in-out infinite alternate;
}

/* Edge vignette */
.hero-bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 90% at 50% 50%, transparent 40%, rgba(15,40,55,0.55) 100%);
}

@keyframes hero-pulse-a {
  from { opacity: 0.7; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.12); }
}
@keyframes hero-pulse-b {
  from { opacity: 0.6; transform: scale(1); }
  to   { opacity: 0.9; transform: scale(1.08); }
}

/* ── Two-column layout shell ───────────────────────── */
.hero-shell {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  /* RTL: column 1 = text (right side), column 2 = portal (left side) */
  grid-template-columns: minmax(380px, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  width: 100%;
  max-width: var(--osus-container-max);
  margin-inline: auto;
  padding-inline: var(--osus-page-x);
  padding-block: clamp(var(--space-12), 5vh, var(--space-20));
  min-height: calc(100svh - var(--header-height));
}

/* ── Content column (RTL: right column) ───────────── */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(28px);
  animation: hero-content-enter 0.9s 0.3s var(--ease-decelerate) forwards;
}

@keyframes hero-content-enter {
  to { opacity: 1; transform: translateY(0); }
}

/* Eyebrow badge */
.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.08);
  border: 1px solid rgba(145, 185, 180, 0.28);
  color: var(--sage);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-6);
  backdrop-filter: blur(8px);
}

.hero-eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  flex-shrink: 0;
  animation: hero-eyebrow-pulse 2.5s ease-in-out infinite;
}

@keyframes hero-eyebrow-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(145,185,180,0.5); }
  50%       { opacity: 0.7; box-shadow: 0 0 0 5px rgba(145,185,180,0); }
}

/* Main headline */
.hero-headline {
  font-size: clamp(2.25rem, 4.8vw, 4rem);
  font-weight: var(--weight-black);
  color: var(--text-on-dark);
  line-height: 1.12;
  margin-bottom: var(--space-6);
  text-wrap: balance;
}

.hero-headline__line {
  display: block;
  overflow: hidden;
}

.hero-headline__mask {
  display: block;
  animation: hero-mask-reveal 0.85s var(--ease-decelerate) both;
}

.hero-headline__line:nth-child(2) .hero-headline__mask {
  animation-delay: 0.15s;
}

@keyframes hero-mask-reveal {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

.hero-headline em {
  font-style: normal;
  color: var(--orange);
}

/* Description */
.hero-description {
  font-size: clamp(var(--text-base), 1.8vw, var(--text-lg));
  color: rgba(145, 185, 180, 0.82);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-10);
  max-width: 42ch;
}

/* CTA row */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

/* Primary CTA */
.hero-btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.875rem 1.75rem;
  background: var(--orange);
  color: var(--navy);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  border-radius: var(--radius-pill);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease-standard);
  box-shadow: 0 4px 24px rgba(255, 150, 25, 0.35);
}

.hero-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 36px rgba(255, 150, 25, 0.52);
}

.hero-btn-primary:active { transform: scale(0.98); }

.hero-btn-primary__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-spring);
}

.hero-btn-primary:hover .hero-btn-primary__icon {
  transform: translateX(-4px);
}

/* Shimmer effect on button */
.hero-btn-primary__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.28) 50%, transparent 60%);
  transform: translateX(100%);
  transition: transform 0s;
}

.hero-btn-primary:hover .hero-btn-primary__shine {
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-standard);
}

/* Secondary CTA — ghost with play icon */
.hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--sage);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color 0.2s var(--ease-standard), gap 0.25s var(--ease-spring);
}

.hero-btn-secondary:hover {
  color: var(--text-on-dark);
  gap: var(--space-4);
}

.hero-btn-secondary__play {
  display: flex;
  align-items: center;
  color: var(--sage);
  transition: color 0.2s var(--ease-standard), transform 0.25s var(--ease-spring);
}

.hero-btn-secondary:hover .hero-btn-secondary__play {
  color: var(--orange);
  transform: scale(1.08);
}

/* ── Gateway / Portal column (RTL: left column) ────── */
.hero-gateway {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: hero-gateway-enter 1.1s 0.55s var(--ease-decelerate) forwards;
}

@keyframes hero-gateway-enter {
  to { opacity: 1; }
}

/* Portal orbit — the interactive container */
.portal-orbit {
  position: relative;
  width: min(540px, 90%);
  aspect-ratio: 560 / 630;
}

/* The SVG portal ring */
.portal-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Ring draw animation */
.portal-ring-draw {
  animation: portal-ring-draw 1.6s 0.9s var(--ease-decelerate) forwards;
}

@keyframes portal-ring-draw {
  from { stroke-dashoffset: 1370; }
  to   { stroke-dashoffset: 0; }
}

/* Glow ring fades in after ring is drawn */
.portal-glow-ring {
  animation: portal-fade-in 0.6s 2.3s var(--ease-standard) forwards;
}

/* Inner ring fades in */
.portal-inner-ring {
  animation: portal-fade-in 0.5s 2.5s var(--ease-standard) forwards;
}

/* City lines fade in */
.portal-city-lines {
  animation: portal-fade-in 1s 2.8s var(--ease-decelerate) forwards;
}

/* Journey arc fades in */
.portal-journey-arc {
  animation: portal-fade-in 0.7s 3s var(--ease-standard) forwards;
}

@keyframes portal-fade-in {
  to { opacity: 1; }
}

/* Traveling light dot — orbits the ring continuously */
.portal-light-dot {
  fill-opacity: 0;
  animation:
    portal-fade-in      0.4s 2.4s var(--ease-standard) forwards,
    portal-orbit-rotate 7s  2.4s  linear infinite;
  transform-origin: 280px 265px; /* ring center */
}

@keyframes portal-orbit-rotate {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* ── Journey stage nodes ─────────────────────────────
   CSS sin/cos positioning using --angle custom property
   Ring center: (280, 265) in SVG coords = (50%, 42.06%) in %
   Node radius from center: 258px on 560px wide SVG = 46.07% (x), 40.95% (y on 630px)
   left = 50% + 46.07% * sin(angle)
   top  = 42.06% - 40.95% * cos(angle)
   ─────────────────────────────────────────────────── */
.portal-journey-nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.portal-node {
  position: absolute;
  pointer-events: all;
  /* sin/cos using CSS trig (Chrome 111+, Firefox 108+, Safari 15.4+) */
  left: calc(50% + 46.07% * sin(calc(var(--angle) * 1deg)));
  top:  calc(42.06% - 40.95% * cos(calc(var(--angle) * 1deg)));
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  animation: portal-fade-in 0.5s calc(3.1s + var(--index, 0) * 0.1s) var(--ease-decelerate) forwards;
}

.portal-node:nth-child(1) { --index: 0; }
.portal-node:nth-child(2) { --index: 1; }
.portal-node:nth-child(3) { --index: 2; }
.portal-node:nth-child(4) { --index: 3; }
.portal-node:nth-child(5) { --index: 4; }
.portal-node:nth-child(6) { --index: 5; }

.portal-node__ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 40, 55, 0.72);
  border: 1.5px solid rgba(145, 185, 180, 0.35);
  color: var(--sage);
  backdrop-filter: blur(10px);
  transition:
    background   0.25s var(--ease-standard),
    border-color 0.25s var(--ease-standard),
    color        0.25s var(--ease-standard),
    transform    0.3s  var(--ease-spring),
    box-shadow   0.25s var(--ease-standard);
}

.portal-node:hover .portal-node__ring,
.portal-node.is-active .portal-node__ring {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--navy);
  transform: scale(1.15);
  box-shadow: 0 0 24px rgba(255, 150, 25, 0.55);
}

.portal-node__label {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--sage-80);
  white-space: nowrap;
  background: rgba(15, 40, 55, 0.65);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
  transition: color 0.2s var(--ease-standard);
}

.portal-node:hover .portal-node__label,
.portal-node.is-active .portal-node__label {
  color: var(--text-on-dark);
}

/* Ambient float animation for portal (very subtle) */
.portal-orbit {
  animation: portal-float 6s ease-in-out infinite;
}

@keyframes portal-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ── Scroll cue ────────────────────────────────────── */
.hero-scroll-cue {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(145, 185, 180, 0.5);
  font-size: var(--text-xs);
  z-index: 2;
  animation: hero-scroll-bob 2.5s ease-in-out infinite;
}

.hero-scroll-cue__line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(145,185,180,0.5), transparent);
  animation: hero-scroll-line 2.5s ease-in-out infinite;
}

@keyframes hero-scroll-bob {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); }
  50%       { opacity: 0.9; transform: translateX(-50%) translateY(6px); }
}

@keyframes hero-scroll-line {
  0%, 100% { transform: scaleY(1); transform-origin: top; }
  50%       { transform: scaleY(0.6); transform-origin: top; }
}

/* ── Reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-content,
  .hero-gateway,
  .portal-node,
  .hero-headline__mask,
  .portal-ring-draw,
  .portal-glow-ring,
  .portal-inner-ring,
  .portal-city-lines,
  .portal-journey-arc,
  .portal-light-dot {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .portal-ring-draw { stroke-dashoffset: 0; }
  .portal-orbit { animation: none; }
  .hero-bg__glow-a,
  .hero-bg__glow-b { animation: none; }
  .hero-eyebrow__dot { animation: none; }
  .hero-scroll-cue,
  .hero-scroll-cue__line { animation: none; }
}

/* ═══════════════════════════════════════════════════
   DECISION ENGINE (Section 02)
   ═══════════════════════════════════════════════════ */

.decision-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-12);
  align-items: start;
}

.decision-persona-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.decision-panel {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  background: var(--navy);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  color: var(--text-on-dark);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  border: 1px solid rgba(145, 185, 180, 0.15);
  transition:
    opacity     var(--duration-normal) var(--ease-standard),
    transform   var(--duration-normal) var(--ease-spring);
}

.decision-panel__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--sage-20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.decision-panel__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-on-dark);
}

.decision-panel__desc {
  font-size: var(--text-base);
  color: var(--sage-80);
  line-height: var(--leading-loose);
}

.decision-panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
}

.decision-panel__list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--sage-80);
}

.decision-panel__list-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   OSUS MAP (Section 04)
   ═══════════════════════════════════════════════════ */

.osus-map-container {
  position: relative;
  background: var(--navy-05);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.osus-map-stages {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
  overflow-x: auto;
  padding-bottom: var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--warm-300) transparent;
}

.map-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  width: 110px;
  cursor: pointer;
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  transition:
    background var(--duration-normal) var(--ease-standard),
    transform  var(--duration-normal) var(--ease-spring);
}

.map-stage:hover,
.map-stage.is-active {
  background: var(--orange-10);
  transform: translateY(-4px);
}

.map-stage__node {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--border-color);
  color: var(--navy);
  font-size: 20px;
  transition:
    background    var(--duration-normal) var(--ease-standard),
    border-color  var(--duration-normal) var(--ease-standard),
    box-shadow    var(--duration-normal) var(--ease-standard);
}

.map-stage:hover .map-stage__node,
.map-stage.is-active .map-stage__node {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: var(--shadow-orange);
}

.map-stage__assessment .map-stage__node {
  background: var(--burgundy-10);
  border-color: var(--burgundy-20);
  color: var(--burgundy);
  width: 36px;
  height: 36px;
  font-size: 14px;
}

.map-stage.map-stage__assessment {
  width: 70px;
  opacity: 0.7;
}

.map-stage__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
}

.map-stage.is-active .map-stage__label { color: var(--orange); }

.map-connector {
  flex-shrink: 0;
  width: 24px;
  height: 2px;
  background: var(--warm-200);
  align-self: center;
  position: relative;
  top: -20px;
}

.map-stage-popup {
  position: absolute;
  bottom: 100%;
  right: 50%;
  transform: translateX(50%);
  width: 280px;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-color);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transform: translateX(50%) translateY(8px);
  transition:
    opacity   var(--duration-normal) var(--ease-standard),
    transform var(--duration-normal) var(--ease-spring);
}

.map-stage.is-active .map-stage-popup {
  opacity: 1;
  pointer-events: all;
  transform: translateX(50%) translateY(0);
}

/* ═══════════════════════════════════════════════════
   PROGRAMS HUB (Section 06)
   ═══════════════════════════════════════════════════ */

.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  transition: opacity var(--duration-normal) var(--ease-standard);
}

.programs-grid.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   COMMUNITY HUB (Section 07)
   ═══════════════════════════════════════════════════ */

.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* ═══════════════════════════════════════════════════
   STATS (Section 05)
   ═══════════════════════════════════════════════════ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-px);
  background: var(--warm-200);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.stats-cell {
  background: var(--navy);
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stats-cell__number {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: var(--weight-black);
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.stats-cell__label {
  font-size: var(--text-base);
  color: var(--sage-80);
  font-weight: var(--weight-medium);
}

.stats-cell__placeholder {
  font-size: var(--text-sm);
  color: var(--navy-60);
  margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════
   AI CENTER (Section 11)
   ═══════════════════════════════════════════════════ */

.ai-flow-grid {
  display: grid;
  grid-template-columns: 1fr 280px 1fr;
  gap: var(--space-6);
  align-items: center;
}

.ai-capability-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.ai-capability-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--sage-10);
  border: 1px solid var(--sage-20);
  transition:
    background    var(--duration-fast),
    border-color  var(--duration-fast);
}

.ai-capability-item.is-active {
  background: var(--sage-20);
  border-color: var(--sage);
}

.ai-capability-item__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--navy);
  color: var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

/* ═══════════════════════════════════════════════════
   SUCCESS ENGINE (Section 08)
   ═══════════════════════════════════════════════════ */

.success-journey-map {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding-bottom: var(--space-4);
}

.success-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  flex-shrink: 0;
  padding: var(--space-4);
}

.success-node__circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--navy-10);
  border: 2px solid var(--warm-200);
}

.success-connector {
  width: 32px;
  height: 2px;
  background: linear-gradient(to right, var(--sage-40), var(--orange-20));
  flex-shrink: 0;
  align-self: center;
  position: relative;
  top: -12px;
}

[dir="rtl"] .success-connector {
  background: linear-gradient(to left, var(--sage-40), var(--orange-20));
}

/* ═══════════════════════════════════════════════════
   FINAL CTA (Section 13)
   ═══════════════════════════════════════════════════ */

.final-cta-section {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(5rem, 10vw, 9rem);
}

.final-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, var(--sage-10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 20%, var(--burgundy-10) 0%, transparent 60%);
  pointer-events: none;
}

.final-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-10);
}

/* ═══════════════════════════════════════════════════
   FOOTER — Premium Dark Ending
   Background is significantly darker than navy so the
   OSUS logo is clearly visible (logo has navy elements
   that disappeared against var(--navy) background).
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   FOOTER — Compact four-column with brand block
   ═══════════════════════════════════════════════════ */

.site-footer {
  background: linear-gradient(180deg, #040d16 0%, #060f1a 55%, #040c15 100%);
  color: var(--text-on-dark);
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: var(--space-8);
  position: relative;
  overflow: hidden;
}

/* Subtle ambient depth */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 15% 50%, rgba(145, 185, 180, 0.04) 0%, transparent 65%),
    radial-gradient(ellipse 60% 60% at 85% 50%, rgba(110,  25, 70, 0.03) 0%, transparent 65%);
  pointer-events: none;
}

/* Brand identity top rule */
.site-footer::after {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(
    to left,
    transparent 0%,
    rgba(110, 25, 70, 0.28) 18%,
    rgba(145, 185, 180, 0.42) 50%,
    rgba(255, 150, 25, 0.28) 82%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── Main grid: brand column + 4 link columns ───── */

.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 220px repeat(4, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(145, 185, 180, 0.08);
}

/* ── Brand column ───────────────────────────────── */

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-inline-end: var(--space-6);
  border-inline-end: 1px solid rgba(145, 185, 180, 0.07);
}

.footer-brand > a {
  display: inline-block;
  filter: drop-shadow(0 2px 14px rgba(145, 185, 180, 0.15)) brightness(1.07);
  transition: filter 0.28s var(--ease-standard);
}

.footer-brand > a:hover {
  filter: drop-shadow(0 4px 22px rgba(145, 185, 180, 0.28)) brightness(1.13);
}

.footer-brand__tagline {
  font-size: var(--text-sm);
  color: rgba(145, 185, 180, 0.60);
  line-height: 1.65;
  max-width: 24ch;
}

/* ── Column headings ────────────────────────────── */

.footer-col__heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: rgba(145, 185, 180, 0.80);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

/* ── Nav links ──────────────────────────────────── */

.footer-link {
  display: block;
  width: fit-content;
  position: relative;
  font-size: var(--text-sm);
  color: rgba(240, 236, 232, 0.48);
  padding-block: var(--space-1);
  text-decoration: none;
  transition: color 0.22s var(--ease-standard);
}

/* Sage → orange sliding underline */
.footer-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(to left, #91B9B4, #FF9619);
  border-radius: 1px;
  transition: width 0.28s var(--ease-decelerate);
}

.footer-link:hover       { color: #FF9619; }
.footer-link:hover::after { width: 100%; }

.footer-link:focus-visible {
  outline: 2px solid rgba(145, 185, 180, 0.60);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Legal bottom row ───────────────────────────── */

.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: rgba(240, 236, 232, 0.30);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-bottom__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
}

/* Bottom legal links — inline, smaller, no block padding */
.footer-bottom__legal .footer-link {
  display: inline-block;
  padding-block: 0;
  font-size: var(--text-xs);
  color: rgba(240, 236, 232, 0.40);
}

/* ── Tablet: brand spans full width, 2×2 columns ─ */

@media (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-8);
  }

  .footer-brand {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-start;
    padding-inline-end: 0;
    border-inline-end: none;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(145, 185, 180, 0.07);
    gap: var(--space-5);
  }

  .footer-brand__tagline { max-width: 44ch; }
}

/* ── Mobile: 2-column link grid, stacked brand ─── */

@media (max-width: 599px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-4);
  }

  .footer-brand {
    flex-direction: column;
    gap: var(--space-3);
  }

  .footer-brand__tagline { max-width: 32ch; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* ═══════════════════════════════════════════════════
   INNER PAGE HERO
   ═══════════════════════════════════════════════════ */

.page-hero {
  padding-top: calc(var(--header-height) + 3rem);
  padding-bottom: var(--space-20);
  background: var(--navy);
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 70% 50%, var(--sage-10) 0%, transparent 70%);
  pointer-events: none;
}

.page-hero__content { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════
   ASSESSMENT PAGE (/discover)
   ═══════════════════════════════════════════════════ */

.assessment-wrapper {
  min-height: 100svh;
  background: var(--warm-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-height) + 2rem) var(--container-padding) 2rem;
}

.assessment-card {
  background: #fff;
  border-radius: var(--radius-2xl);
  padding: clamp(2rem, 5vw, 3.5rem);
  max-width: 680px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-color);
}

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

.assessment-step {
  display: none;
}

.assessment-step.is-active {
  display: block;
  animation: assessment-step-in var(--duration-normal) var(--ease-decelerate);
}

@keyframes assessment-step-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .assessment-step.is-active { animation: none; }
}

.assessment-question {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--navy);
  margin-bottom: var(--space-6);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.assessment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.assessment-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--border-color);
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-secondary);
  text-align: right;
  transition:
    border-color var(--duration-fast),
    background   var(--duration-fast),
    color        var(--duration-fast),
    box-shadow   var(--duration-fast);
}

.assessment-option:hover {
  border-color: var(--navy-40);
  color: var(--navy);
}

.assessment-option.is-selected {
  border-color: var(--orange);
  background: var(--orange-10);
  color: var(--navy);
  box-shadow: 0 0 0 3px var(--orange-20);
}

.assessment-option__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--warm-300);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast);
}

.assessment-option.is-selected .assessment-option__check {
  background: var(--orange);
  border-color: var(--orange);
}

.assessment-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.assessment-result {
  text-align: center;
  padding: var(--space-8);
}

.assessment-result__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--orange-10);
  color: var(--orange);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

/* ═══════════════════════════════════════════════════
   PARTNERS (Section 12)
   ═══════════════════════════════════════════════════ */

.partners-categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.partners-category {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.partners-category__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.partners-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.partner-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--navy-05);
  border: 1px dashed var(--warm-300);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  min-width: 120px;
  text-align: center;
  line-height: var(--leading-snug);
}

/* ═══════════════════════════════════════════════════
   INVESTMENT GATEWAY (Section 10)
   ═══════════════════════════════════════════════════ */

.investment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* ═══════════════════════════════════════════════════
   SUPPORT & IMPACT (Section 09)
   ═══════════════════════════════════════════════════ */

.support-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-12);
  align-items: center;
}

.support-audience-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.support-audience-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--navy-05);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition:
    background    var(--duration-fast),
    border-color  var(--duration-fast);
}

.support-audience-item:hover,
.support-audience-item.is-active {
  background: var(--orange-10);
  border-color: var(--orange-20);
}

.support-audience-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--navy);
  color: var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

/* ═══════════════════════════════════════════════════
   AUTH PAGES
   ═══════════════════════════════════════════════════ */

.auth-page {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--warm-white);
}

.auth-brand {
  background: var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem);
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}

.auth-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 30% 60%, var(--sage-10) 0%, transparent 70%);
}

.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem);
}

.auth-form {
  max-width: 440px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.auth-account-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.auth-type-btn {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-color);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  transition:
    border-color var(--duration-fast),
    background   var(--duration-fast),
    color        var(--duration-fast);
}

.auth-type-btn.is-selected {
  border-color: var(--navy);
  background: var(--navy-05);
  color: var(--navy);
  font-weight: var(--weight-semibold);
}

@media (max-width: 767px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-form-panel { padding: 2rem 1.25rem; }
}

/* ═══════════════════════════════════════════════════
   LANDING PAGES
   ═══════════════════════════════════════════════════ */

.landing-hero {
  min-height: 70svh;
  display: flex;
  align-items: center;
  background: var(--navy);
  padding-top: var(--header-height);
  padding-bottom: var(--space-20);
  position: relative;
  overflow: hidden;
}

.landing-challenges-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.challenge-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--warm-white-2);
  border: 1px solid var(--border-color);
}

.challenge-item__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--burgundy-10);
  color: var(--burgundy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: #fff;
  border: 1px solid var(--border-color);
  transition: box-shadow var(--duration-normal);
}

.feature-item:hover { box-shadow: var(--shadow-md); }

.feature-item__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--orange-10);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}

@media (max-width: 767px) {
  .landing-challenges-list { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: 1fr; }
}