/* ==========================================================================
   Cyber Falak v3 — "Orbit" space theme
   Loaded after styles.css. Structure for the new pieces (header and dropdowns, planets,
   marquee, bento, carousel, lifecycle story, finale) is unscoped and uses the
   base colour variables, so High contrast and Dark mode stay readable. The
   space skin itself is scoped to the default look.
   ========================================================================== */

:root {
  --sp-ink: #0b1230;
  --sp-muted: #4a5578;
  --sp-bg: #eef1f7;
  --sp-bg-2: #f7f8fc;
  --sp-card: #ffffff;
  --sp-line: rgba(15, 30, 80, .08);
  --sp-blue: #2f5bea;
  --sp-blue-d: #1d3fb8;
  --sp-peri: #c7d2ff;
  --sp-deep: #040a22;
  --sp-font: "DM Sans", "Inter", system-ui, sans-serif;
  --sp-ease: cubic-bezier(.65, 0, .35, 1);
  --sp-out: cubic-bezier(.2, .7, .1, 1);
  --sp-shadow: 0 1px 2px rgba(10, 20, 60, .04), 0 14px 36px rgba(10, 20, 60, .07);
  --sp-shadow-lg: 0 2px 4px rgba(10, 20, 60, .05), 0 28px 60px rgba(10, 20, 60, .14);
  --sp-planet: radial-gradient(circle at 32% 28%, #e3ebff 0 3%, #8fb0ff 16%, #3d66e0 42%, #13288a 72%, #050b26 100%);
  --sp-stars:
    radial-gradient(1px 1px at 22px 34px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 140px 80px, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 210px 190px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 80px 210px, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 260px 20px, rgba(199,210,255,.9) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 180px 130px, rgba(255,255,255,.7) 50%, transparent 51%);
  --hdr-h: 76px;
}

/* ---------- Smooth scrolling (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

@property --orb { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes sp-orb { to { --orb: 360deg; } }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@keyframes sp-rise { from { opacity: 0; translate: 0 28px; } }
@keyframes sp-planet { from { opacity: 0; scale: .82; } }
@keyframes sp-sheet { from { opacity: 0; translate: 0 -10px; } }

/* ==========================================================================
   Header (every mode): logo · three dropdowns + Academy · alert · call to action.
   It hides while you scroll down and comes back when you scroll up.
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50; height: auto; padding: 0;
  background: var(--surface); border-bottom: 1px solid var(--border); backdrop-filter: none;
  transition: transform .5s var(--sp-ease);
}
.site-header.is-hidden { transform: translateY(calc(-100% - 20px)); }
.header-inner {
  position: relative; display: flex; align-items: center; gap: 1rem;
  height: 64px; max-width: 1240px; margin-inline: auto; padding-inline: 16px;
}
.site-header .brand { display: flex; align-items: center; gap: .625rem; flex: none; color: var(--text); text-decoration: none; }
.site-header .brand img { width: 38px; height: 38px; }
.brand .logo-dark { display: none; }
.a11y-contrast .brand .logo-light, .a11y-dark .brand .logo-light { display: none; }
.a11y-contrast .brand .logo-dark, .a11y-dark .brand .logo-dark { display: block; }
.site-header .brand-name { font-family: var(--sp-font); font-weight: 700; font-size: .9375rem; letter-spacing: .18em; color: var(--text); white-space: nowrap; transition: color .35s; }

/* Nav triggers */
.mega-nav .mega-list { list-style: none; display: flex; align-items: center; gap: .25rem; padding: 0; margin: 0; }
.mega-nav .mega-trigger, .mega-nav .mega-link {
  position: relative; display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; padding: .5rem .875rem;
  border: 0; border-radius: 999px; background: none; color: var(--text-muted); font: 500 .9375rem/1 var(--sp-font);
  text-decoration: none; white-space: nowrap; transition: color .3s, background-color .3s;
}
.mega-nav .mega-trigger:hover, .mega-nav .mega-link:hover, .mega.is-open .mega-trigger { color: var(--text); background: var(--bg-tint); }
.mega:has(a[aria-current]) .mega-trigger, .mega-nav .mega-link[aria-current] { color: var(--text); }
.mega-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .7; transition: transform .35s var(--sp-ease); }
.mega.is-open .mega-chev { transform: rotate(180deg); }

/* Satellite: glides under the item you point at, rests under the section you are reading */
.nav-sat {
  position: absolute; left: var(--x, 0); top: var(--y, 0); width: 34px; height: 8px; margin-left: -17px; pointer-events: none;
  opacity: 0; transition: left .5s var(--sp-ease), top .3s ease, opacity .3s ease;
}
.nav-sat.on { opacity: 1; }
.nav-sat::before { /* the short orbit arc */
  content: ""; position: absolute; inset: 0; border-radius: 50%; border-bottom: 1.5px solid currentColor; color: var(--blue-700); opacity: .55;
}
.nav-sat::after { /* the satellite */
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: #3ccf8e; box-shadow: 0 0 8px #3ccf8e, 0 0 16px rgba(60, 207, 142, .6);
}

/* Orbit line along the bottom of the bar: the green star travels it as you read down the page */
.hdr-orbit { position: absolute; left: 20px; right: 20px; bottom: -1px; height: 1px; pointer-events: none; background: color-mix(in srgb, var(--text) 10%, transparent); }
.hdr-orbit::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, transparent, #7fa2ff 60%, #3ccf8e); }
.hdr-orbit i {
  position: absolute; top: -3px; left: calc(var(--p, 0) * 100%); width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: #3ccf8e; box-shadow: 0 0 10px #3ccf8e;
}
.site-header[data-hero] .hdr-orbit { opacity: 0; }
.hdr-orbit { transition: opacity .4s ease; }

/* Actions */
.site-header .header-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; flex: none; }
.hdr-alert {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .5rem .9rem; border-radius: 999px;
  border: 1px solid rgba(214, 50, 43, .35); background: rgba(214, 50, 43, .07); color: #b3221c;
  font: 600 .875rem/1 var(--sp-font); cursor: pointer; transition: background-color .3s, border-color .3s, color .3s;
}
.hdr-alert:hover { background: rgba(214, 50, 43, .14); border-color: rgba(214, 50, 43, .6); }
.hdr-alert .pulse { background: #d6322b; }
.hdr-alert .pulse::after { border-color: #d6322b; }
.hdr-cta {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .5rem 1.1rem; border-radius: 999px;
  background: var(--text); color: var(--surface); font: 600 .875rem/1 var(--sp-font); text-decoration: none; white-space: nowrap;
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.hdr-cta:hover { box-shadow: 0 8px 22px rgba(47, 91, 234, .35); }
.cta-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--sp-out); }
:is(.hdr-cta, .nav-sheet-cta):hover .cta-arrow { transform: translateX(3px); }
.site-header .menu-toggle {
  display: none; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); align-items: center; justify-content: center;
}
.site-header .menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-toggle path { transform-box: view-box; transform-origin: 12px 12px; transition: transform .35s var(--sp-ease); }
.menu-toggle[aria-expanded="true"] .l1 { transform: rotate(45deg) translateY(3px); }
.menu-toggle[aria-expanded="true"] .l2 { transform: rotate(-45deg) translateY(-3px); }
.main-nav.mega-nav .nav-sheet-cta { display: none; }
.a11y-dark .hdr-alert { color: #ffc2bd; border-color: rgba(255, 120, 110, .5); background: rgba(214, 50, 43, .18); }
.a11y-contrast .hdr-alert { background: #000; color: #fff; border: 2px solid #fff; }
.a11y-contrast .hdr-alert .pulse { background: #fff; }
.a11y-contrast .hdr-cta, .a11y-contrast .nav-sheet-cta { background: #ffeb3b; color: #000; }

/* Dropdowns: one shared panel backdrop that resizes, content that slides between menus */
.mega-backdrop {
  position: absolute; left: 0; right: 0; top: 100%; height: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: var(--surface); border: 1px solid var(--border); border-top-color: transparent; border-radius: 0 0 20px 20px;
  box-shadow: 0 30px 60px -20px rgba(4, 10, 34, .3); transition: height .34s var(--sp-ease), opacity .25s ease;
}
[data-menu-open] .mega-backdrop { opacity: 1; }
.mega-pop {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 2; padding: 8px 16px 16px;
  opacity: 0; visibility: hidden; transform: translate3d(calc(var(--dx, 0) * 56px), var(--dy, -8px), 0);
  transition: opacity .3s ease, transform .34s var(--sp-ease), visibility 0s linear .34s;
}
.mega.is-open .mega-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega-panel { position: relative; display: grid; grid-template-columns: 1fr 280px; gap: 12px; }
.mega-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mega-lines polyline {
  fill: none; stroke: color-mix(in srgb, var(--blue-700) 30%, transparent); stroke-width: 1; stroke-linejoin: round;
  stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000);
}
.mega.is-open .mega-lines polyline { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--sp-out) .12s; }
.mega-nav .mega-grid { position: relative; }
.mega-nav .mega-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0; margin: 0; }
.mega-nav .mega-grid a {
  display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: 14px; color: var(--text); text-decoration: none; background: none;
  transition: background-color .2s;
}
.mega-nav .mega-grid a:hover, .mega-nav .mega-grid a:focus-visible { background: var(--bg-tint); }
.mega-ic { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--blue-100); stroke: var(--blue-700); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--sp-out); }
.mega-nav .mega-grid a:hover .mega-ic { transform: rotate(-8deg) scale(1.06); }
.mega-title { display: block; font: 600 .9375rem/1.3 var(--sp-font); }
.mega-desc { display: block; font-size: .8125rem; line-height: 1.4; color: var(--text-muted); margin-top: 2px; }
.mega-nav .mega-feature {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 150px; padding: 1rem 2.75rem 1rem 1.125rem; border-radius: 16px; color: #fff; text-decoration: none;
  background: linear-gradient(160deg, #0a1d5c, #2f5bea);
}
.mega-feature .mega-desc { color: #d5ddff; }
.mega-feature-art i { position: absolute; inset: -22%; border-radius: 50%; border: 1px solid rgba(199, 210, 255, .45); transform: rotate(-18deg) scaleY(.32); }
.mega-feature-art {
  position: absolute; z-index: -1; width: 150px; aspect-ratio: 1; right: -36px; top: -54px; border-radius: 50%;
  background: var(--sp-planet); box-shadow: inset -16px -20px 36px rgba(0,0,0,.45), 0 0 60px rgba(140, 180, 255, .5);
  transition: transform .8s var(--sp-out);
}
.mega-feature:hover .mega-feature-art i { position: absolute; inset: -22%; border-radius: 50%; border: 1px solid rgba(199, 210, 255, .45); transform: rotate(-18deg) scaleY(.32); }
.mega-feature-art { transform: translate(-10px, 10px) scale(1.06); }
.mega-feature-go { position: absolute; right: 1.125rem; bottom: 1rem; font-size: 1.125rem; transition: transform .3s var(--sp-out); }
.mega-feature:hover .mega-feature-go { transform: translateX(4px); }
.a11y-contrast .mega-nav .mega-feature { background: #000; border: 2px solid #fff; }
.a11y-contrast .mega-feature-art i { position: absolute; inset: -22%; border-radius: 50%; border: 1px solid rgba(199, 210, 255, .45); transform: rotate(-18deg) scaleY(.32); }
.mega-feature-art { display: none; }

@media (min-width: 1080px) {
  .main-nav.mega-nav { position: static; display: block; margin-inline: auto; background: none; border: 0; box-shadow: none; }
  .site-header .header-actions { margin-inline-start: 0; }
}
@media (min-width: 1080px) and (max-width: 1239px) {
  .mega-nav .mega-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1079px) {
  .nav-sat, .mega-lines { display: none; }
  .site-header .menu-toggle { display: inline-flex; }
  .site-header .hdr-cta { display: none; }
  .main-nav.mega-nav {
    display: none; position: absolute; left: 8px; right: 8px; top: calc(100% + 8px); margin: 0; padding: .5rem; z-index: 3;
    background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 30px 60px -20px rgba(4, 10, 34, .35);
    max-height: calc(100svh - 100px); overflow: auto; overscroll-behavior: contain;
  }
  .main-nav.mega-nav.open { display: block; animation: sp-sheet .32s var(--sp-out); }
  .mega-nav .mega-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .mega-nav .mega-trigger, .mega-nav .mega-link { width: 100%; justify-content: space-between; padding: 1rem; font-size: 1.0625rem; border-radius: 14px; color: var(--text); }
  .mega-pop { position: static; display: none; opacity: 1; visibility: visible; transform: none; padding: 0 0 .5rem; transition: none; }
  .mega.is-open .mega-pop { display: block; animation: sp-sheet .3s var(--sp-out); }
  .mega-panel, .mega-nav .mega-grid { grid-template-columns: 1fr; }
  .mega-nav .mega-feature { min-height: 110px; }
  .mega-backdrop { display: none; }
  .main-nav.mega-nav .nav-sheet-cta {
    display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; margin: .5rem; border-radius: 14px;
    background: var(--text); color: var(--surface); font: 600 1rem/1 var(--sp-font); text-decoration: none;
  }
}
@media (max-width: 520px) {
  .hdr-alert { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .hdr-alert-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-header .brand-name { font-size: .8125rem; letter-spacing: .14em; }
}

/* ==========================================================================
   Hero sky (decorative)
   ========================================================================== */
.hero-space .starfield { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-space .planet { position: absolute; border-radius: 50%; will-change: transform; }
.planet-main {
  width: clamp(240px, 27vw, 400px); aspect-ratio: 1; right: 11%; top: 16%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.95) 0 2%, rgba(214,226,255,.85) 6%, transparent 22%),
    radial-gradient(circle at 36% 34%, #9dbbff 0%, #4f7cf5 24%, #2346c8 48%, #0d1f6e 72%, #050b26 100%);
  box-shadow: inset -34px -44px 90px rgba(2, 6, 25, .7), inset 18px 22px 50px rgba(255, 255, 255, .22), 0 0 120px rgba(80, 130, 255, .45), 0 0 300px rgba(80, 130, 255, .18);
}
.planet-main::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; opacity: .55;
  background:
    radial-gradient(ellipse 60% 18% at 50% 58%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(ellipse 50% 12% at 40% 72%, rgba(199,210,255,.6), transparent 70%),
    radial-gradient(ellipse 40% 10% at 62% 44%, rgba(255,255,255,.35), transparent 70%);
  filter: blur(6px); animation: sp-spin 90s linear infinite;
}
.planet-ring {
  position: absolute; left: -32%; top: 37%; width: 164%; height: 26%; border-radius: 50%;
  border: 1.5px solid rgba(199, 210, 255, .55); transform: rotate(-16deg); box-shadow: 0 0 24px rgba(120, 160, 255, .35);
}
.planet-ring::after {
  content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; right: 6%; top: 18%;
  background: #3ccf8e; box-shadow: 0 0 14px #3ccf8e, 0 0 30px rgba(60, 207, 142, .6);
}
.planet-small {
  width: 58px; aspect-ratio: 1; left: 50%; top: 14%;
  background: radial-gradient(circle at 32% 28%, #e7eeff 0 6%, #6d95ff 30%, #1f3fb2 70%, #0a1550 100%);
  box-shadow: inset -8px -10px 18px rgba(0,0,0,.5), 0 0 40px rgba(110, 150, 255, .5);
}
.planet-moon {
  width: 150px; aspect-ratio: 1; right: -40px; bottom: 6%;
  background: radial-gradient(circle at 30% 28%, #f2f5ff 0 4%, #a9bcff 20%, #4d6fe0 52%, #16288a 80%, #070f3d 100%);
  box-shadow: inset -18px -22px 40px rgba(0,0,0,.55), 0 0 60px rgba(120, 160, 255, .4);
}
.planet-edge {
  width: 1200px; aspect-ratio: 1; left: -560px; bottom: -1130px;
  background: radial-gradient(circle at 50% 4%, #c8d8ff 0%, #6e94ff 9%, #2c56d6 22%, #12308f 40%, #071547 62%);
  box-shadow: 0 -6px 60px rgba(140, 180, 255, .6), 0 -40px 140px rgba(80, 130, 255, .35);
}
.planet-edge::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23dfe8ff' stroke-opacity='.45'%3E%3Crect x='12' y='12' width='24' height='24'/%3E%3Crect x='12' y='12' width='24' height='24' transform='rotate(45 24 24)'/%3E%3Cpath d='M24 0v7M24 41v7M0 24h7M41 24h7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, rgba(0,0,0,.6) 18%, transparent 34%);
          mask-image: radial-gradient(circle at 50% 0%, #000 0%, rgba(0,0,0,.6) 18%, transparent 34%);
}
.comet {
  position: absolute; top: var(--y); left: -10%; width: 140px; height: 1.5px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9)); transform: rotate(14deg); animation: sp-comet 14s var(--d) ease-in infinite;
}
@keyframes sp-comet { 0% { opacity: 0; transform: translateX(0) rotate(14deg); } 4% { opacity: 1; } 12% { opacity: 0; transform: translateX(70vw) rotate(14deg); } 100% { opacity: 0; transform: translateX(70vw) rotate(14deg); } }
@media (max-width: 959px) {
  .planet-main { right: -18%; top: 6%; opacity: .55; }
  .planet-small, .planet-moon { display: none; }
}
.a11y-contrast .hero-space .hero-bg, .a11y-noimages .hero-space .hero-bg { display: none; }

/* Entrance: header flies in, hero copy rises, planets settle (individual properties so parallax still works) */
@media (prefers-reduced-motion: no-preference) {
  html.sp-js:not(.a11y-still) .hero-copy > * { animation: sp-rise 1s var(--sp-out) backwards; }
  html.sp-js:not(.a11y-still) .hero-copy > :nth-child(2) { animation-delay: .1s; }
  html.sp-js:not(.a11y-still) .hero-copy > :nth-child(3) { animation-delay: .2s; }
  html.sp-js:not(.a11y-still) .hero-copy > :nth-child(4) { animation-delay: .28s; }
  html.sp-js:not(.a11y-still) .hero-copy > :nth-child(n+5) { animation-delay: .36s; }
  html.sp-js:not(.a11y-still) .telemetry { animation: sp-rise 1.2s .45s var(--sp-out) backwards; }
  html.sp-js:not(.a11y-still) .planet-main { animation: sp-planet 1.8s .1s var(--sp-out) backwards; }
  html.sp-js:not(.a11y-still) .planet-edge { animation: sp-rise 1.6s var(--sp-out) backwards; }
}

/* ==========================================================================
   Partner marquee
   ========================================================================== */
.marquee-band { padding-block: 2rem 3rem; background: var(--bg); overflow: hidden; }
.marquee-band .marquee-title { text-align: center; font-family: var(--font-body); font-size: .9375rem; font-weight: 600; letter-spacing: .02em; color: var(--text-muted); margin: 0 1rem 1.5rem; }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { list-style: none; display: flex; flex: none; gap: 3.5rem; padding-inline-end: 3.5rem; animation: sp-marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track li { white-space: nowrap; font-family: var(--sp-font); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 600; color: var(--text-muted); letter-spacing: -.01em; }
@keyframes sp-marquee { to { transform: translateX(-100%); } }
.a11y-contrast .marquee, .a11y-still .marquee { -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; }
.a11y-contrast .marquee-track, .a11y-still .marquee-track { flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; padding-inline: 1rem; }
.a11y-contrast .marquee-track[aria-hidden], .a11y-still .marquee-track[aria-hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; }
  .marquee-track { flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; padding-inline: 1rem; }
  .marquee-track[aria-hidden] { display: none; }
}

/* ==========================================================================
   Stats bento
   ========================================================================== */
.stats-grid.bento > .bento-intro { grid-column: 1 / -1; }
.bento-kicker { display: flex; align-items: center; gap: .625rem; font-size: .8125rem; font-weight: 600; color: var(--text-muted); margin: 0 0 1rem; }
.bento-kicker img { width: 40px; }
.bento-title { font-family: var(--sp-font); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .75rem; color: var(--text); }
.bento-text { color: var(--text-muted); margin: 0; max-width: 34rem; }
@media (min-width: 900px) {
  .stats-grid.bento { grid-template-columns: repeat(4, 1fr); }
  .stats-grid.bento > .bento-intro { grid-column: 1 / 3; grid-row: 1; }
  .stats-grid.bento > li:nth-child(4) { grid-column: 3 / 5; grid-row: 1; }
}

/* ==========================================================================
   Service family carousel
   ========================================================================== */
.carousel { position: relative; margin-bottom: 1rem; }
.fam-track.family-grid {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  list-style: none; padding: 4px 4px 12px; margin: -4px; scrollbar-width: none;
}
.fam-track::-webkit-scrollbar { display: none; }
.fam-track:focus-visible { outline-offset: 6px; }
.family-grid .fam-card { flex: 0 0 min(400px, 84%); scroll-snap-align: start; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.fam-body { padding: 1.25rem 1.5rem 1.5rem; }
.fam-art { position: relative; height: 230px; overflow: hidden; background: linear-gradient(165deg, #e4e9f8, #c6d0f1); }
.fam-art > span { position: absolute; left: 50%; top: 50%; transition: transform .9s var(--sp-out); }
.fam-card:hover .fam-art > span { transform: translate(-50%, -54%) scale(1.06); }
.fam-sphere > span, .fam-rings > span, .fam-waves > span { width: 150px; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.fam-sphere > span {
  background: radial-gradient(circle at 34% 28%, #fff 0 4%, #e6ebff 14%, #aab8ee 40%, #6c7fcb 70%, #38479a 100%);
  box-shadow: inset -20px -26px 44px rgba(30, 40, 100, .45), 0 34px 60px rgba(40, 60, 140, .35);
}
.fam-rings > span { width: 64px; background: var(--sp-planet); box-shadow: 0 0 40px rgba(47, 91, 234, .5); }
.fam-rings > span::before, .fam-rings > span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 260px; height: 90px; border-radius: 50%;
  border: 1.5px solid rgba(29, 63, 184, .45); transform: translate(-50%, -50%) rotate(-18deg);
}
.fam-rings > span::after { width: 200px; height: 200px; border-style: dashed; transform: translate(-50%, -50%); animation: sp-spin 40s linear infinite; }
.fam-column > span {
  width: 110px; height: 170px; transform: translate(-50%, -46%); border-radius: 55px / 22px;
  background: linear-gradient(90deg, #2c3a8a, #6d80d6 30%, #b9c6f6 48%, #6d80d6 70%, #2c3a8a);
  box-shadow: 0 30px 50px rgba(40, 60, 140, .35);
}
.fam-column > span::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; border-radius: 50%; background: linear-gradient(180deg, #e7ecff, #a9b8ef); }
.fam-card:hover .fam-column > span { transform: translate(-50%, -50%) scale(1.04); }
.fam-waves > span {
  width: 230px; background: repeating-radial-gradient(circle, transparent 0 16px, rgba(29, 63, 184, .35) 17px 18px);
  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 70%); mask-image: radial-gradient(circle, #000 40%, transparent 70%);
}
.fam-waves > span::after { content: ""; position: absolute; inset: 42%; border-radius: 50%; background: var(--sp-planet); box-shadow: 0 0 30px rgba(47, 91, 234, .6); }
.a11y-contrast .fam-art { display: none; }
.carousel-nav { display: flex; gap: .5rem; margin-top: 1rem; }
.carousel-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: grid; place-items: center; transition: background-color .2s, opacity .2s; }
.carousel-btn:hover:not(:disabled) { background: var(--blue-100); }
.carousel-btn:disabled { opacity: .35; cursor: default; }
.carousel-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ==========================================================================
   Lifecycle story: pinned while scrolling (data-pinned is set by space.js)
   ========================================================================== */
.story { position: relative; background: #050b26; color: #fff; }
.story-stage { position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 6.5rem); }
.story-sky, .story-sky .sky { position: absolute; inset: 0; pointer-events: none; }
.story-sky .sky { opacity: 0; transition: opacity 1.1s ease; }
.story-sky::after { content: ""; position: absolute; inset: 0; background-image: var(--sp-stars); background-size: 280px 240px; opacity: .6; }
.sky-0 { opacity: 1 !important; background: radial-gradient(900px 600px at 80% 15%, rgba(70, 120, 255, .55), transparent 60%), linear-gradient(180deg, #050b26, #0b2066 70%, #1a3a9c); }
.sky-1 { background: radial-gradient(900px 600px at 15% 95%, rgba(255, 140, 190, .42), transparent 60%), linear-gradient(180deg, #0a1440, #262c86 60%, #5a3f9c); }
.sky-2 { background: radial-gradient(900px 600px at 75% 85%, rgba(60, 207, 142, .32), transparent 60%), linear-gradient(180deg, #04162b, #0a3563 60%, #155f86); }
.sky-3 { background: radial-gradient(900px 500px at 50% 110%, rgba(255, 200, 220, .38), transparent 60%), linear-gradient(180deg, #0c1a4f, #2b4aa8 70%, #5a72c4); }
.story[data-step="1"] .sky-1, .story[data-step="2"] .sky-2, .story[data-step="3"] .sky-3 { opacity: 1; }
.story-inner { position: relative; display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .story-inner { grid-template-columns: 1fr 1fr; } }
.story h2 { color: #fff; }
.story .eyebrow { color: #dfe6ff; }
.story-steps { list-style: none; display: grid; gap: 1rem; padding: 0; margin-top: 1.5rem; }
.story-step { padding: 1.25rem 1.5rem; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.story-step .step-num { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; color: #9db6ff; -webkit-text-stroke: 0; }
.story-step h3 { color: #fff; font-family: var(--sp-font); font-weight: 500; font-size: 1.625rem; letter-spacing: -.02em; margin: .25rem 0; }
.story-step p { color: #c9d4f5; margin: 0; font-size: 1.0625rem; }
.story-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin-top: 1rem; }
.story-chips li { padding: .45rem .9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); font-size: .875rem; backdrop-filter: blur(8px); }
.story-dots { display: none; }
.story-art { position: relative; width: min(100%, 500px); aspect-ratio: 1; margin-inline: auto; --rot: 0deg; }
.sa-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(199, 210, 255, .28); }
.sa-r1 { inset: 6%; border-style: dashed; animation: sp-spin 120s linear infinite; }
.sa-r2 { inset: 20%; overflow: hidden; }
.sa-r2::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(157, 182, 255, .28), transparent 28%); animation: sp-spin 7s linear infinite; }
.sa-r3 { inset: 33%; border-color: rgba(199, 210, 255, .4); }
.sa-spin { position: absolute; inset: 6%; transform: rotate(var(--rot)); transition: transform 1.1s var(--sp-ease); }
.sa-node { position: absolute; inset: 0; transform: rotate(var(--a)); }
.sa-node i { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #9db6ff; box-shadow: 0 0 0 6px rgba(157, 182, 255, .14); transition: background-color .5s, box-shadow .5s, scale .5s; }
.sa-node b {
  position: absolute; left: 50%; top: 0; padding: .3rem .75rem; border-radius: 999px; white-space: nowrap; font-size: .875rem; font-weight: 600;
  background: rgba(5, 11, 38, .6); border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .6); backdrop-filter: blur(6px);
  transform: translate(-50%, -50%) translateY(-36px) rotate(calc(-1 * (var(--a) + var(--rot)))); transition: transform 1.1s var(--sp-ease), color .5s, border-color .5s;
}
.story[data-step="0"] .sa-node:nth-child(1), .story[data-step="1"] .sa-node:nth-child(2),
.story[data-step="2"] .sa-node:nth-child(3), .story[data-step="3"] .sa-node:nth-child(4) {
  & i { background: #3ccf8e; box-shadow: 0 0 0 8px rgba(60, 207, 142, .18), 0 0 26px #3ccf8e; scale: 1.25; }
  & b { color: #fff; border-color: rgba(60, 207, 142, .6); }
}
.sa-core {
  position: absolute; inset: 37%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, #2a4fd0 0%, #0f2272 55%, #050b26 100%); border: 1px solid rgba(199, 210, 255, .35);
  box-shadow: inset -16px -20px 36px rgba(0, 0, 0, .5), 0 0 80px rgba(80, 130, 255, .55);
}
.sa-core img { width: 86%; }

.story[data-pinned] { height: 440vh; }
.story[data-pinned] .story-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center;
  padding-block: calc(var(--hdr-h) + 8px) 2rem;
}
.story[data-pinned] .story-steps { grid-template-areas: "s"; gap: 0; margin-top: 1.5rem; }
.story[data-pinned] .story-step { grid-area: s; padding: 0; background: none; border: 0; opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .7s var(--sp-out); }
.story[data-pinned] .story-step.is-active { opacity: 1; transform: none; }
.story[data-pinned] .story-step h3 { font-size: clamp(2rem, 3.6vw, 3rem); }
.story[data-pinned] .story-dots { display: flex; gap: .5rem; margin-top: 2.25rem; }
.story-dot { width: 48px; height: 28px; padding: 0; border: 0; background: none; display: grid; align-items: center; }
.story-dot span { position: relative; display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.story-dot span::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(var(--fill, 0)); transform-origin: left; }
@media (max-width: 959px) { .story[data-pinned] .story-art { width: min(64vw, 300px); } .story[data-pinned] .story-inner { gap: 1rem; } }
.a11y-contrast .story, .a11y-contrast .story-stage { background: #000; }
.a11y-contrast .story-sky, .a11y-contrast .story-art { display: none; }

/* ==========================================================================
   Finale: zoom through the portal
   ========================================================================== */
.finale { position: relative; background: var(--sp-deep); color: #fff; }
.finale-stage { position: relative; overflow: hidden; min-height: 80vh; display: grid; place-items: center; padding: 6rem 16px; isolation: isolate; }
.finale-stage::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--sp-stars); background-size: 280px 240px; opacity: .7; }
.finale-window {
  position: absolute; z-index: -1; left: 50%; top: 50%; width: 64vmin; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--win, 1));
  background: radial-gradient(circle at 50% 115%, #c8d8ff 0%, #6e94ff 16%, #2c56d6 34%, #0f2678 56%, #050b26 78%);
  box-shadow: 0 0 0 1px rgba(199, 210, 255, .35), 0 0 120px rgba(80, 130, 255, .45);
}
.finale-planet {
  position: absolute; left: 50%; top: calc(72% + var(--rise, 0%)); width: 150%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 4%, #dfe8ff 0%, #7fa2ff 8%, #2c56d6 22%, #102a86 40%, #050b26 62%);
  box-shadow: 0 -10px 60px rgba(160, 190, 255, .7);
}
.finale-content { position: relative; text-align: center; max-width: 960px; opacity: var(--show, 1); transform: translateY(var(--lift, 0px)); filter: blur(var(--blur, 0px)); }
.finale-content:focus-within { opacity: 1; filter: none; }
.finale .eyebrow { color: #dfe6ff; justify-content: center; }
.finale-title { color: #fff; text-shadow: 0 2px 30px rgba(4, 10, 34, .55); font-family: var(--sp-font); font-weight: 500; font-size: clamp(2.4rem, 6.4vw, 5.25rem); line-height: 1.04; letter-spacing: -.04em; margin: 0 0 2rem; }
.finale .finale-btn { background: #fff; color: #0b1230; }
.finale .finale-btn:hover { box-shadow: 0 12px 40px rgba(157, 182, 255, .55); }
.finale[data-pinned] { height: 250vh; }
.finale[data-pinned] .finale-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
.finale-mini[data-pinned] { height: 200vh; }
/* Banner colour moods: dusk (violet-rose) and aurora (green-teal) */
.finale-dusk .finale-window { background: radial-gradient(circle at 50% 115%, #ffd6e6 0%, #c993dc 14%, #6f5bd6 32%, #2a2a86 56%, #070b2e 78%); box-shadow: 0 0 0 1px rgba(230, 190, 240, .35), 0 0 120px rgba(170, 120, 230, .45); }
.finale-dusk .finale-planet { background: radial-gradient(circle at 50% 4%, #ffe6f0 0%, #d9a6e8 8%, #7d63de 22%, #2c2a8a 40%, #070b2e 62%); box-shadow: 0 -10px 60px rgba(230, 170, 230, .6); }
.finale-aurora .finale-window { background: radial-gradient(circle at 50% 115%, #d6fff1 0%, #74e2bc 14%, #2f9e9a 32%, #0f3d6e 56%, #04122e 78%); box-shadow: 0 0 0 1px rgba(160, 240, 210, .35), 0 0 120px rgba(60, 207, 142, .4); }
.finale-aurora .finale-planet { background: radial-gradient(circle at 50% 4%, #e6fff6 0%, #84e8c4 8%, #2aa39a 22%, #0f4a7a 40%, #04122e 62%); box-shadow: 0 -10px 60px rgba(120, 230, 190, .6); }
.a11y-contrast .finale, .a11y-contrast .finale-stage { background: #000; }
.a11y-contrast .finale-window, .a11y-contrast .finale-stage::before { display: none; }
.a11y-contrast .finale .finale-btn { background: #ffeb3b; color: #000; }

/* ==========================================================================
   Card system (structure, every mode): item counts, partner chips,
   sector icons, percentage gauges
   ========================================================================== */
.domain-grid > li, .partner-map > li { position: relative; }
.partner-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .875rem 0 0; }
.partner-chips li { padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-tint); color: var(--text); font: 600 .875rem/1.2 var(--sp-font); }
.sector-grid li:has(.sector-ic)::before { display: none; }
.sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .sector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sector-grid li { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .sector-grid li:has(.sector-ic) { flex-direction: column; align-items: flex-start; } }
.sector-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-100); transition: background .45s ease, box-shadow .45s ease; }
.sector-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--blue-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s ease; }

/* ==========================================================================
   Footprint regions, cyber explorer, AI engine, drag carousel (every mode)
   ========================================================================== */
/* Regions: orbits around Doha; the farther the region, the wider its orbit */
.region-grid { list-style: none; display: grid; gap: 14px; grid-template-columns: 1fr; padding: 0; margin: 0; }
@media (min-width: 720px) { .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .region-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.region {
  position: relative; display: flex; flex-direction: column; padding: 12px 12px 20px; border-radius: 24px;
  border: 1px solid var(--border); background: var(--bg-tint); color: var(--text); transition: transform .45s var(--sp-out), border-color .35s ease;
}
.region:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--blue-700) 55%, transparent); }
.region > :not(.region-art) { margin-inline: 8px; }
.region-art {
  position: relative; height: 150px; margin-bottom: 1.1rem; border-radius: 18px; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(79, 124, 245, .3), transparent 70%), linear-gradient(160deg, #0b1a52, #071038);
}
.ra-o { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgba(157, 182, 255, .3); transform: translate(-50%, -50%); }
.ra-o.o1 { width: 70px; height: 70px; }
.ra-o.o2 { width: 130px; height: 130px; }
.ra-o.o3 { width: 200px; height: 200px; }
.ra-core { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: var(--sp-planet); box-shadow: 0 0 18px rgba(80, 130, 255, .7); }
.ra-dot {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #3ccf8e; box-shadow: 0 0 12px #3ccf8e;
  transform: rotate(var(--start, -40deg)) translateX(var(--r, 0px)); animation: ra-orbit 24s linear infinite;
}
.region:nth-child(2) { --r: 35px; --start: 200deg; }
.region:nth-child(3) { --r: 65px; --start: -30deg; }
.region:nth-child(4) { --r: 100px; --start: 150deg; }
.region-hq .ra-dot { width: 22px; height: 22px; margin: -11px; background: transparent; box-shadow: none; border: 2px solid #3ccf8e; animation: ra-pulse 2.6s ease-out infinite; }
.region:hover .ra-o { border-color: rgba(157, 182, 255, .5); }
.region:nth-child(2) .ra-o.o1, .region:nth-child(3) .ra-o.o2, .region:nth-child(4) .ra-o.o3 { border-style: solid; border-color: rgba(60, 207, 142, .55); }
@keyframes ra-orbit { from { transform: rotate(var(--start, 0deg)) translateX(var(--r, 0px)); } to { transform: rotate(calc(var(--start, 0deg) + 360deg)) translateX(var(--r, 0px)); } }
@keyframes ra-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.region-tag { margin: 0 0 .35rem; font: 600 .6875rem/1 var(--sp-font); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); }
.region h3 { margin: 0 0 .5rem; font-size: 1.125rem; }
.region-count { margin: 0 0 .9rem; color: var(--text-muted); font-size: .875rem; }
.region-count b { font: 500 1.75rem/1 var(--sp-font); color: var(--text); margin-right: .3rem; letter-spacing: -.02em; }
.region-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.region-chips li { padding: .35rem .65rem; border-radius: 999px; background: var(--blue-100); color: var(--text); font: 500 .8125rem/1.2 var(--sp-font); }
.a11y-contrast .region-art { display: none; }

/* Cyber division: one clean numbers bar, counts on the tabs, cards that open their own lists */
#cyber .mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; margin-bottom: 1.75rem; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; background: var(--bg-tint); }
#cyber .mini-stats li { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: 1.25rem 1.5rem; margin: 0; border: 0; border-right: 1px solid var(--border); border-radius: 0; background: none; color: var(--text-muted); font-weight: 500; }
#cyber .mini-stats li:last-child { border-right: 0; }
#cyber .mini-stats strong { font: 500 clamp(2rem, 3.4vw, 2.75rem)/1 var(--sp-font); letter-spacing: -.03em; color: var(--text); }
@media (max-width: 719px) {
  #cyber .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #cyber .mini-stats li:nth-child(2) { border-right: 0; }
  #cyber .mini-stats li:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
}
.tab-count { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.5rem; margin-left: .5rem; padding: 0 .45rem; border-radius: 999px; background: var(--blue-100); color: var(--blue-700); font: 600 .75rem/1 var(--sp-font); }
[aria-selected="true"] > .tab-count { background: rgba(11, 18, 48, .12); color: inherit; }
#cyber .domain-grid { align-items: start; }
@media (min-width: 1024px) {
  #cyber .domain-grid:not(.domain-grid-wide) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #cyber .domain-grid:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.dom-card { cursor: pointer; }
.dom-card .ticks { margin-top: 1rem; cursor: auto; }
.dom-card .ticks[hidden] { display: none; }
.dom-card .ticks:not([hidden]) { animation: sp-rise .45s var(--sp-out); }
.dom-card.is-open { border-color: color-mix(in srgb, var(--blue-700) 45%, transparent); }
.dom-toggle {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; min-height: 36px; padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text); font: 600 .8125rem/1 var(--sp-font); cursor: pointer;
}
.dom-toggle:hover { background: var(--bg-tint); }
.dom-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .35s var(--sp-ease); }
.dom-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media print { .dom-card .ticks[hidden] { display: grid !important; } .dom-toggle { display: none; } }

/* AI-powered defence: service tiles and the engine in orbit */
.ai-tiles { list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); padding: 0; margin: 1.75rem 0 0; }
.ai-tiles li { display: flex; align-items: center; gap: .75rem; padding: .8rem .95rem; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-tint); color: var(--text); font: 600 .9375rem/1.3 var(--sp-font); transition: border-color .3s ease, transform .4s var(--sp-out); }
.ai-tiles li:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--blue-700) 55%, transparent); }
.ai-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blue-100); }
.ai-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--blue-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.engine-orbit { padding: 1.5rem; }
.engine-orbit h3 { margin-bottom: .75rem; text-align: center; }
.eo-stage { position: relative; width: min(100%, 470px); aspect-ratio: 1; margin: 0 auto; }
.eo-rings span { position: absolute; border-radius: 50%; border: 1px dashed rgba(157, 182, 255, .3); }
.eo-rings span:nth-child(1) { inset: 14%; animation: sp-spin 80s linear infinite; }
.eo-rings span:nth-child(2) { inset: 30%; border-style: solid; border-color: rgba(157, 182, 255, .18); }
.eo-rings span:nth-child(3) { inset: 2%; border-color: rgba(157, 182, 255, .1); }
.eo-core {
  position: absolute; inset: 38%; display: grid; place-content: center; text-align: center; border-radius: 50%; color: #fff;
  background: var(--sp-planet); box-shadow: inset -12px -14px 26px rgba(0, 0, 0, .45), 0 0 60px rgba(80, 130, 255, .55);
}
.eo-core b { font: 600 1.6rem/1 var(--sp-font); }
.eo-core small { margin-top: .2rem; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.eo-nodes { list-style: none; padding: 0; margin: 0; }
.eo-nodes li {
  padding: .55rem .7rem; border-radius: 14px; border: 1px solid rgba(157, 182, 255, .25); background: rgba(7, 14, 44, .88);
  color: var(--text); font: 600 .8125rem/1.3 var(--sp-font); text-align: center;
  animation: eo-glow 6s ease-in-out infinite; animation-delay: calc(var(--k) * 1s);
}
@keyframes eo-glow { 0%, 70%, 100% { border-color: rgba(157, 182, 255, .25); box-shadow: none; } 82% { border-color: #3ccf8e; box-shadow: 0 0 18px rgba(60, 207, 142, .4); } }
@supports (left: calc(cos(0deg) * 1%)) {
  @media (min-width: 560px) {
    .eo-nodes li {
      --a: calc(var(--k) * (360deg / var(--n)) - 90deg);
      position: absolute; left: calc(50% + cos(var(--a)) * 36%); top: calc(50% + sin(var(--a)) * 36%); width: 33%; transform: translate(-50%, -50%);
    }
  }
}
@media (max-width: 559px) {
  .eo-stage { aspect-ratio: auto; width: 100%; }
  .eo-rings, .eo-core { display: none; }
  .eo-nodes { display: grid; gap: 8px; }
  .eo-nodes li { text-align: left; }
}
@supports not (left: calc(cos(0deg) * 1%)) {
  .eo-stage { aspect-ratio: auto; } .eo-rings, .eo-core { display: none; } .eo-nodes { display: grid; gap: 8px; }
}
.a11y-contrast .eo-stage { aspect-ratio: auto; }
.a11y-contrast :is(.eo-rings, .eo-core) { display: none; }
.a11y-contrast .eo-nodes { display: grid; gap: 8px; }
.a11y-contrast .eo-nodes li { position: static; transform: none; width: auto; background: #000; text-align: left; }

/* Carousel: drag with the mouse; a small "Drag" pill follows the pointer */
.fam-track { cursor: grab; }
.fam-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.fam-track.is-dragging * { user-select: none; pointer-events: none; }
.drag-pill {
  position: absolute; left: 0; top: 0; z-index: 5; display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .95rem; border-radius: 999px;
  background: #2f5bea; color: #fff; font: 600 .875rem/1 var(--sp-font); pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6);
  box-shadow: 0 10px 26px rgba(47, 91, 234, .5); transition: opacity .2s ease, transform .25s var(--sp-out);
}
.drag-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carousel.show-pill .drag-pill { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.a11y-contrast .drag-pill { display: none; }

/* ==========================================================================
   Engineering stack, telecom, cloud & FinTech, compliance, glossary (every mode)
   ========================================================================== */
/* Card previews: the first few items as soft chips while a card is closed */
.card-preview { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: .9rem 0 0; }
.card-preview li { padding: .35rem .65rem; border-radius: 999px; background: var(--blue-100); color: var(--text); font: 500 .8125rem/1.2 var(--sp-font); }
.card-preview li.more { background: transparent; border: 1px dashed var(--border); color: var(--text-muted); }
.dom-card.is-open .card-preview { display: none; }
.service.dom-card .dom-toggle { margin-top: 1rem; }

/* Engineering: the full stack drawn as layers, from the cloud down to the control room */
.eng-stack { margin-top: 3rem; gap: 2.5rem; align-items: center; }
.eng-stack .ot-figure { position: relative; margin: 0; }
.eng-stack .ot-figure img { border-radius: 24px; border: 1px solid var(--border); }
.eng-stack .why-list.why-compact { counter-reset: layer; list-style: none; display: grid; gap: 8px; padding: 0; margin: 1.5rem 0 0; grid-template-columns: 1fr; position: relative; }
.eng-stack .why-list.why-compact::before {
  content: ""; position: absolute; left: 22px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #9db6ff, #3ccf8e);
}
.eng-stack .why-list.why-compact > li {
  counter-increment: layer; position: relative; display: flex; align-items: center; gap: 1rem; min-height: 0;
  padding: .85rem 1.1rem .85rem 3.6rem; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-tint); transform: none;
}
.eng-stack .why-list.why-compact > li::before {
  content: counter(layer); position: absolute; left: 10px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); border: 2px solid #7fa2ff; color: var(--text); font: 700 .75rem/1 var(--sp-font);
}
.eng-stack .why-list.why-compact > li:last-child::before { border-color: #3ccf8e; }
.eng-stack .why-list.why-compact h3 { margin: 0 0 .15rem; font-size: 1rem; }
.eng-stack .why-list.why-compact p { margin: 0; font-size: .875rem; color: var(--text-muted); }
.eng-stack .why-list.why-compact > li:hover { border-color: color-mix(in srgb, var(--blue-700) 55%, transparent); transform: translateX(4px); }

/* Telecom: the GSM-to-5G track and the uptime figure, then threats vs defences */
.tel-top { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 14px; }
@media (min-width: 900px) { .tel-top { grid-template-columns: 2fr 1fr; } }
.tel-cover, .tel-stat, .tel-col { border-radius: 24px; border: 1px solid var(--border); background: var(--bg-tint); padding: 1.5rem; }
.tel-cover h3, .tel-col h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem; font-size: 1.125rem; }
.tel-track { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; margin: 0 0 1rem; }
.tel-track::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 21px; height: 2px; background: linear-gradient(90deg, #6d8dff, #3ccf8e); }
.tel-track li { position: relative; display: grid; justify-items: center; gap: .6rem; text-align: center; font: 600 .9375rem/1.2 var(--sp-font); color: var(--text); }
.tel-track li::before {
  content: ""; width: 44px; height: 44px; border-radius: 50%; background: var(--sp-planet); box-shadow: 0 0 0 5px rgba(157, 182, 255, .12), 0 8px 20px -6px rgba(47, 91, 234, .7);
}
.tel-track li:last-child::before { background: radial-gradient(circle at 32% 28%, #e6fff6 0 6%, #74e2bc 30%, #1f8a73 70%, #0b3a45 100%); box-shadow: 0 0 0 5px rgba(60, 207, 142, .16), 0 0 24px rgba(60, 207, 142, .5); }
.tel-note { margin: 0; color: var(--text-muted); font-size: .9375rem; }
.tel-stat { display: flex; flex-direction: column; justify-content: center; gap: .4rem; }
.tel-stat b { font: 500 clamp(2.6rem, 5vw, 3.75rem)/1 var(--sp-font); letter-spacing: -.04em; color: var(--text); }
.tel-stat span { color: var(--text-muted); }
.tel-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tel-grid { grid-template-columns: 1fr 1fr; } }
.tel-n { display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.5rem; padding: 0 .45rem; border-radius: 999px; background: var(--blue-100); color: var(--blue-700); font: 600 .75rem/1 var(--sp-font); }
.tel-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.tel-chips li { display: inline-block; padding: .45rem .8rem .45rem 1.8rem; border-radius: 999px; position: relative; background: var(--surface); border: 1px solid var(--border); color: var(--text); font: 500 .875rem/1.2 var(--sp-font); }
.tel-chips li::first-letter { text-transform: uppercase; }
.tel-chips li::before { content: ""; position: absolute; left: .75rem; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; }
.tel-threats .tel-chips li::before { background: #ff7a6b; box-shadow: 0 0 8px rgba(255, 122, 107, .7); }
.tel-defence .tel-chips li::before { background: #3ccf8e; box-shadow: 0 0 8px rgba(60, 207, 142, .7); }
.tel-threats { border-color: rgba(255, 122, 107, .25); }
.tel-defence { border-color: rgba(60, 207, 142, .25); }
.a11y-contrast .tel-track li::before { background: #000; border: 3px solid #fff; box-shadow: none; }

/* Cloud & FinTech: stat inside the card stands out; frameworks as a badge strip */
#cloud-fintech .grid-3 { align-items: start; }
#cloud-fintech .big-stat { margin: 1.1rem 0 .25rem; padding: .9rem 1rem; border-radius: 16px; background: var(--blue-100); color: var(--text-muted); font-size: .875rem; }
#cloud-fintech .big-stat strong { display: block; font: 500 2rem/1 var(--sp-font); color: var(--text); margin-bottom: .3rem; }
#cloud-fintech .frameworks { margin-top: 14px; }
#cloud-fintech .frameworks h3 { margin-bottom: 1rem; }
#cloud-fintech .frameworks .chips { display: flex; flex-wrap: wrap; gap: 8px; }
#cloud-fintech .frameworks .chips li { padding: .55rem .95rem; border-radius: 12px; }

/* Compliance: one card per rule, with the services that cover it */
.rule-list { list-style: none; display: grid; gap: 12px; grid-template-columns: 1fr; padding: 0; margin: 0; }
@media (min-width: 720px) { .rule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rule-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rule-list > li { display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem 1.375rem; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-tint); color: var(--text); }
.rule-list > li:first-child { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--blue-700) 45%, transparent); }
.rule-list h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.rule-list p { margin: 0 0 .5rem; color: var(--text-muted); font-size: .875rem; }
.rule-codes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: auto 0 0; }
.rule-codes li { padding: .3rem .6rem; border-radius: 8px; background: var(--blue-100); color: var(--blue-700); font: 600 .75rem/1 ui-monospace, Menlo, Consolas, monospace; }

/* Glossary: popular terms to try */
.gloss-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 1rem; }
.gloss-popular-label { color: var(--text-muted); font-size: .875rem; margin-right: .25rem; }
.gloss-popular button { min-height: 36px; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-tint); color: var(--text); font: 600 .8125rem/1 var(--sp-font); cursor: pointer; }
.gloss-popular button:hover { border-color: var(--blue-700); }

/* ==========================================================================
   Multi-page: topic page heroes, breadcrumbs, quick jumps, home "Explore" cards
   ========================================================================== */
.page-hero-inner { position: relative; z-index: 1; width: 100%; }
.page-hero h1 { margin: .5rem 0 1rem; color: #fff; }
.page-hero .lead { max-width: 40rem; }
.crumbs { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; font-size: .875rem; color: var(--dark-muted, #b4c3df); }
.crumbs a { color: #c7d2ff; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: #fff; }
.page-jump { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 1.75rem 0 0; }
.page-jump a {
  display: inline-flex; align-items: center; min-height: 40px; padding: .45rem 1rem; border-radius: 999px; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; font: 600 .875rem/1 var(--sp-font);
  transition: background-color .3s ease, border-color .3s ease;
}
.page-jump a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); }
.mega-nav [data-current-page] { color: var(--text); }
/* On the glossary page the page title already says it; keep the section heading for screen readers only */
body[data-page="glossary"] #glossary-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a11y-contrast .page-jump a { background: #000; border: 2px solid #fff; }

.explore-grid { list-style: none; display: grid; gap: 14px; grid-template-columns: 1fr; padding: 0; margin: 0; }
@media (min-width: 720px) { .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .explore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.explore-grid a {
  display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 12px 12px 1.4rem; border-radius: 26px; text-decoration: none;
  border: 1px solid var(--border); background: var(--bg-tint); color: var(--text); transition: transform .45s var(--sp-out), border-color .35s ease, background-color .35s ease;
}
.explore-grid a:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--blue-700) 55%, transparent); }
.explore-grid a > :not(.ex-art) { margin-inline: 10px; }
.ex-kicker { font: 600 .6875rem/1 var(--sp-font); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); }
.ex-title { font: 500 1.375rem/1.2 var(--sp-font); letter-spacing: -.02em; color: var(--text); }
.ex-desc { color: var(--text-muted); font-size: .9375rem; }
.ex-go { margin-top: auto; padding-top: .75rem; color: var(--blue-700); font: 600 .9375rem/1 var(--sp-font); }
.ex-go span { display: inline-block; transition: transform .35s var(--sp-out); }
.explore-grid a:hover .ex-go span { transform: translateX(4px); }
.ex-art { position: relative; display: block; height: 170px; margin-bottom: .9rem; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 120%, rgba(79, 124, 245, .45), transparent 60%), linear-gradient(165deg, #0d1c5c, #081340); }
.ex-art i, .ex-art i::before, .ex-art i::after { position: absolute; display: block; content: ""; }
.ex-art i { left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px; border-radius: 50%; background: var(--sp-planet); box-shadow: inset -10px -12px 22px rgba(0, 0, 0, .45), 0 0 40px rgba(80, 130, 255, .5); transition: transform .8s var(--sp-out); }
.explore-grid a:hover .ex-art i { transform: scale(1.08); }
.ex-cyber i::before { left: -60px; right: -60px; top: 26px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(199, 210, 255, .55); transform: rotate(-16deg); }
.ex-cyber i::after { width: 10px; height: 10px; right: -48px; top: 18px; border-radius: 50%; background: #3ccf8e; box-shadow: 0 0 12px #3ccf8e; }
.ex-eng i { width: 70px; height: 104px; margin: -48px -35px; border-radius: 35px / 14px; background: linear-gradient(90deg, #2c3a8a, #6d80d6 30%, #b9c6f6 48%, #6d80d6 70%, #2c3a8a); box-shadow: 0 20px 40px rgba(40, 60, 140, .5); }
.ex-eng i::before { left: 0; right: 0; top: 0; height: 28px; border-radius: 50%; background: linear-gradient(180deg, #e7ecff, #a9b8ef); }
.ex-academy i { width: 56px; height: 56px; margin: -28px; }
.ex-academy i::before { inset: -34px; border-radius: 50%; border: 1.5px dashed rgba(199, 210, 255, .4); }
.ex-academy i::after { width: 16px; height: 16px; left: 82px; top: -18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e6fff6, #3ccf8e 60%, #0b6b55); }
.ex-company i { width: 26px; height: 26px; margin: -13px; }
.ex-company i::before { inset: -36px; border-radius: 50%; border: 1px dashed rgba(157, 182, 255, .45); }
.ex-company i::after { inset: -66px; border-radius: 50%; border: 1px solid rgba(60, 207, 142, .45); }
.ex-invest i { width: 22px; height: 22px; margin: 18px 0 0 -70px; box-shadow: 0 0 20px rgba(80, 130, 255, .6); }
.ex-invest i::before { width: 34px; height: 34px; left: 48px; top: -26px; border-radius: 50%; background: var(--sp-planet); }
.ex-invest i::after { width: 50px; height: 50px; left: 106px; top: -64px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e6fff6, #3ccf8e 60%, #0b6b55); box-shadow: 0 0 30px rgba(60, 207, 142, .5); }
.ex-gloss i { width: 64px; height: 64px; margin: -32px; border-radius: 0; background: linear-gradient(135deg, #e3ebff, #6d8dff); box-shadow: 0 0 40px rgba(120, 160, 255, .6);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.a11y-contrast .ex-art { display: none; }

/* ==========================================================================
   Home hero, simplified: one headline, one line, two buttons, a big planet
   ========================================================================== */
.hero-grid.hero-simple { grid-template-columns: 1fr; }
.hero-simple .hero-copy { max-width: 720px; }
.hero-simple .lead { max-width: 34rem; }
.hero-simple .cta-row { margin-block: 2rem 1.5rem; }
.hero-simple .hero-listen { padding: .35rem .9rem .35rem .35rem; border: 0; background: none; color: var(--dark-muted, #b4c3df); }
.hero-simple .hero-listen:hover { background: rgba(255, 255, 255, .06); }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; z-index: 2; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .45); }
.scroll-cue:hover { border-color: #fff; }
.scroll-cue i { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(-2px); } 30% { opacity: 1; } 80% { opacity: 0; transform: translateY(12px); } 100% { opacity: 0; } }
@media (max-width: 959px) { .scroll-cue { display: none; } }

/* ==========================================================================
   Dropdown panel, floating: list of pages on the left, a big visual on the right
   ========================================================================== */
@media (min-width: 1080px) {
  .mega-backdrop {
    top: calc(100% + 14px); border: 1px solid var(--border); border-radius: 22px; background: var(--surface);
    box-shadow: 0 40px 80px -24px rgba(2, 6, 25, .55);
  }
  .mega-backdrop::before { content: none; }
  .mega-pop { top: calc(100% + 14px); padding: 36px; }
  .mega-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* bridge over the gap */
  .mega-panel {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "list visual" "feat visual";
    grid-template-rows: auto 1fr; gap: 14px 28px; align-items: start;
  }
  .mega-lines { display: none; }
  .mega-nav .mega-grid { grid-area: list; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .mega-nav .mega-grid a { align-items: flex-start; gap: 1rem; padding: 1.15rem 1.1rem; border-radius: 14px; }
  .mega-nav .mega-grid .mega-title { font-size: 1.0625rem; }
  .mega-nav .mega-grid .mega-desc { font-size: .875rem; margin-top: .3rem; }
  .mega-nav .mega-feature { grid-area: feat; align-self: end; flex-direction: row; align-items: center; justify-content: flex-start; gap: .9rem; min-height: 0; padding: .9rem 3rem .9rem 1rem; border-radius: 14px; }
  .mega-nav .mega-feature .mega-feature-art { display: none; }
  .mega-nav .mega-feature .mega-feature-art i { display: none; }
  .mega-nav .mega-feature .mega-desc { margin: 0; }
  .mega-nav .mega-feature .mega-title { white-space: nowrap; }
  .mega-feature-go { top: 50%; bottom: auto; margin-top: -.6em; }
  .mega-visual { grid-area: visual; position: relative; align-self: stretch; min-height: 340px; border-radius: 18px; overflow: hidden;
    background: radial-gradient(circle at 50% 115%, rgba(255, 255, 255, .45), transparent 55%), linear-gradient(160deg, #6f80cf 0%, #98a6e6 55%, #c3cbf2 100%); }
}
.mega-visual { display: none; }
@media (min-width: 1080px) { .mega-visual { display: block; } }
.mv-art { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); transition: opacity .35s ease; }
.mv-art.swap { animation: mv-in .6s cubic-bezier(.2, .7, .1, 1); }
@keyframes mv-in { from { opacity: 0; transform: translate(-50%, -44%) scale(.9); } }
.mv-caption { position: absolute; left: 18px; bottom: 16px; right: 18px; color: #fff; font: 600 .9375rem/1.3 var(--sp-font); text-shadow: 0 2px 12px rgba(20, 30, 90, .4); }
.mv-caption small { display: block; font-weight: 500; opacity: .85; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .2rem; }
/* The six soft 3-D objects (one per menu item) */
.mv-art[data-art="sphere"] { width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0 4%, #e8ecff 16%, #aab6ee 44%, #6c7fcb 72%, #3d4c9a 100%); box-shadow: inset -22px -28px 50px rgba(30, 40, 100, .45), 0 40px 60px -20px rgba(30, 40, 110, .55); }
.mv-art[data-art="cube"] { width: 160px; height: 160px; border-radius: 34px; background: linear-gradient(150deg, #e9ecff 0%, #a9b5ec 38%, #6a79c4 100%); box-shadow: inset 10px 12px 24px rgba(255, 255, 255, .55), inset -18px -24px 40px rgba(30, 40, 100, .45), 0 40px 60px -20px rgba(30, 40, 110, .55); transform: translate(-50%, -50%) rotate(-12deg); }
.mv-art[data-art="cube"].swap { animation: mv-in-rot .6s cubic-bezier(.2, .7, .1, 1); }
@keyframes mv-in-rot { from { opacity: 0; transform: translate(-50%, -44%) rotate(-24deg) scale(.9); } }
.mv-art[data-art="ring"] { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0 4%, #c9d3ff 18%, #6d85e0 52%, #2c3f9e 100%); box-shadow: inset -16px -20px 36px rgba(20, 30, 90, .45); }
.mv-art[data-art="ring"]::before { content: ""; position: absolute; left: -70px; right: -70px; top: 44px; height: 34px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); transform: rotate(-14deg); }
.mv-art[data-art="column"] { width: 120px; height: 180px; border-radius: 60px / 24px; background: linear-gradient(90deg, #4a5aa8, #a3b0ea 45%, #dfe4ff 55%, #8e9ce0 75%, #4a5aa8); box-shadow: 0 40px 60px -20px rgba(30, 40, 110, .55); }
.mv-art[data-art="column"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 48px; border-radius: 50%; background: linear-gradient(180deg, #f3f5ff, #b9c3f2); }
.mv-art[data-art="orbit"] { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0 5%, #b9c6ff 25%, #5a6fd0 70%, #2c3a8a 100%); }
.mv-art[data-art="orbit"]::before, .mv-art[data-art="orbit"]::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .75); transform: translate(-50%, -50%); }
.mv-art[data-art="orbit"]::before { width: 160px; height: 160px; }
.mv-art[data-art="orbit"]::after { width: 250px; height: 250px; border-style: solid; border-color: rgba(255, 255, 255, .45); }
.mv-art[data-art="waves"] { width: 230px; height: 230px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 15px, rgba(255, 255, 255, .55) 16px 17px); -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); mask: radial-gradient(circle, #000 35%, transparent 70%); }
.mv-art[data-art="waves"]::after { content: ""; position: absolute; inset: 41%; border-radius: 50%; background: #fff; box-shadow: 0 0 30px #fff; }
@media (prefers-reduced-motion: reduce) { .mv-art.swap { animation: none; } }
.a11y-still .mv-art.swap { animation: none; }
.a11y-contrast .mega-visual { display: none !important; }
@media (min-width: 1080px) { .a11y-contrast .mega-panel { grid-template-columns: 1fr; grid-template-areas: "list" "feat"; } }

/* ==========================================================================
   Brief sections: the essentials first, "Show details" reveals the rest (set up by space.js)
   ========================================================================== */
[data-brief]:not(.is-open) .brief-hide { display: none; }
[data-brief]:not(.is-open) .brief-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.more-region { margin-top: 2rem; }
.more-region:not([hidden]) { animation: sp-rise .6s var(--sp-out); }
.more-btn {
  display: flex; align-items: center; gap: .5rem; margin: 2rem auto 0; min-height: 46px; padding: .7rem 1.4rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 600 .9375rem/1 var(--sp-font); cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}
.more-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--sp-ease); }
.more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
@media print { .brief-hide, .more-region[hidden] { display: revert !important; } .more-btn { display: none; } }

/* ==========================================================================
   Scroll reveal (space.js adds .js-reveal only when motion is allowed)
   ========================================================================== */
.js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--sp-out), transform .9s var(--sp-out); transition-delay: var(--rd, 0s); }
.js-reveal .reveal.in { opacity: 1; transform: none; }
.js-reveal .split-h .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.js-reveal .split-h .w > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--sp-out); transition-delay: calc(var(--wi) * 45ms); }
.js-reveal .split-h.in .w > span { transform: none; }
@media print {
  .reveal, .split-h .w > span { opacity: 1 !important; transform: none !important; }
  .marquee-band, .finale, .story-art, .story-dots, .carousel-nav { display: none !important; }
  .story[data-pinned], .finale[data-pinned] { height: auto; }
  .story-step { opacity: 1 !important; }
}

/* ==========================================================================
   The space skin (default look only)
   ========================================================================== */
html:not(.a11y-contrast):not(.a11y-dark) {
  /* The whole site lives in the night sky */
  --bg: #050b26;
  --bg-tint: rgba(255, 255, 255, .04);
  --surface: #0d1846;
  --text: #eef2ff;
  --text-muted: #aab6da;
  --border: rgba(157, 182, 255, .16);
  --blue-700: #9db6ff;
  --blue-600: #9db6ff;
  --blue-100: rgba(157, 182, 255, .12);
  --green-700: #5fdca4;
  --green-100: rgba(60, 207, 142, .14);
  --link: #9db6ff;
  --radius: 24px;
  --shadow: none;
  --shadow-lg: 0 30px 60px -20px rgba(2, 6, 25, .6);
  scroll-padding-top: 90px;
  color-scheme: dark;

  & body { background: #050b26; }
  & body::before { /* nebula glow that stays put while the page scrolls */
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(1200px 800px at 88% -10%, rgba(46, 86, 214, .32), transparent 60%),
      radial-gradient(900px 700px at -10% 110%, rgba(90, 63, 156, .26), transparent 60%),
      #050b26;
  }
  & body::after { /* distant stars */
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image: var(--sp-stars); background-size: 280px 240px;
  }
  & main :is(h1, h2, .h2-like) { font-family: var(--sp-font); font-weight: 500; letter-spacing: -.035em; }
  & h1 { font-size: clamp(2.6rem, 6vw, 4.75rem); line-height: 1.04; }
  & main h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.08; }
  & h3 { font-family: var(--sp-font); font-weight: 600; letter-spacing: -.01em; }

  /* ---- Header: night glass. Over the hero it dissolves into the sky; further down it floats as a dark glass bar ---- */
  & .site-header { padding: 12px 16px 0; margin-bottom: calc(-1 * var(--hdr-h)); background: transparent; border: 0; pointer-events: none; }
  & .site-header > * { pointer-events: auto; }
  & .header-inner {
    height: 60px; max-width: 1180px; padding-inline: 16px 8px;
    background: rgba(7, 14, 44, .78); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
    border: 1px solid rgba(157, 182, 255, .16); border-radius: 16px;
    box-shadow: 0 18px 40px -18px rgba(2, 6, 25, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: max-width .55s var(--sp-ease), height .55s var(--sp-ease), padding .55s var(--sp-ease),
                background-color .35s ease, border-color .35s ease, box-shadow .35s ease, border-radius .3s ease;
  }
  & .site-header .brand .logo-light { display: none; }
  & .site-header .brand .logo-dark { display: block; }
  & .site-header .brand-name { color: #fff; }
  & .mega-nav .mega-trigger, & .mega-nav .mega-link { color: rgba(226, 233, 255, .72); }
  & .mega-nav .mega-trigger:hover, & .mega-nav .mega-link:hover, & .mega.is-open .mega-trigger,
  & .mega:has(a[aria-current]) .mega-trigger, & .mega-nav .mega-link[aria-current], & .mega-nav [data-current-page] { color: #fff; background: rgba(255, 255, 255, .06); }
  & .nav-sat::before { color: #9db6ff; }
  & .hdr-orbit { background: rgba(157, 182, 255, .14); }
  & .hdr-alert { color: #ffc9c4; border-color: rgba(255, 120, 110, .42); background: rgba(214, 50, 43, .16); }
  & .hdr-alert:hover { background: rgba(214, 50, 43, .28); }
  & .hdr-alert .pulse { background: #ff6b61; }
  & .hdr-alert .pulse::after { border-color: #ff6b61; }
  & .hdr-cta { background: #fff; color: var(--sp-ink); }
  & .hdr-cta:hover { box-shadow: 0 0 0 4px rgba(157, 182, 255, .18), 0 10px 26px rgba(80, 130, 255, .45); }
  & .site-header .menu-toggle { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); color: #fff; }
  &.sp-js .site-header[data-hero]:not(:has(.main-nav.open)) .header-inner {
    max-width: 1320px; height: 72px; padding-inline: 8px; background: transparent; border-color: transparent;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }

  /* ---- Dropdowns: a floating white panel. A clean list on the left, a large space visual on the right ---- */
  & .mega-backdrop { background: #fff; border-color: rgba(15, 30, 80, .06); backdrop-filter: none; }
  & .mega-nav .mega-grid a { color: var(--sp-ink); }
  & .mega-nav .mega-grid a:hover, & .mega-nav .mega-grid a:focus-visible, & .mega-nav .mega-grid a.is-active { background: #f1f3fb; }
  & .mega-panel .mega-title { color: var(--sp-ink); }
  & .mega-panel .mega-desc { color: #5a6585; }
  & .mega-ic { width: 28px; height: 28px; padding: 2px; border-radius: 0; background: none; stroke: var(--sp-ink); stroke-width: 1.6; }
  & .mega-nav .mega-feature { background: #f1f3fb; border: 0; color: var(--sp-ink); }
  & .mega-nav .mega-feature .mega-title { color: var(--sp-ink); }
  & .mega-nav .mega-feature .mega-desc { color: #5a6585; }
  @media (max-width: 1079px) {
    & .main-nav.mega-nav { background: rgba(7, 14, 44, .97); border-color: rgba(157, 182, 255, .16); }
    & .mega-nav .mega-trigger, & .mega-nav .mega-link { color: #fff; }
    & .main-nav.mega-nav .nav-sheet-cta { background: #fff; color: var(--sp-ink); }
  }

  /* ---- Hero: deep space ---- */
  & .hero {
    min-height: min(100svh, 1000px); display: flex; align-items: center;
    padding-block: calc(var(--hdr-h) + 4rem) 6rem;
    background:
      radial-gradient(1100px 650px at 72% -8%, rgba(46, 86, 214, .75), transparent 62%),
      radial-gradient(800px 500px at -5% 105%, rgba(70, 120, 255, .45), transparent 60%),
      linear-gradient(180deg, #040a22 0%, #081650 55%, #10288a 100%);
  }
  & .hero::after { display: none; }
  & .hero-simple { align-items: center; }
  & .hero-simple h1 { font-size: clamp(2.8rem, 5.2vw, 4.75rem); line-height: 1.02; margin-bottom: 1.5rem; }
  & .hero-simple h1 .grad { white-space: nowrap; }
  & .hero:not(.page-hero) .planet-main { width: clamp(320px, 40vw, 600px); right: 3%; top: 50%; translate: 0 -50%; }
  & .hero:not(.page-hero) .planet-small { left: 46%; top: 16%; }
  & .hero:not(.page-hero) .planet-moon { width: 110px; right: 4%; bottom: 10%; }
  & .hero.page-hero { min-height: min(64vh, 640px); align-items: flex-end; padding-block: calc(var(--hdr-h) + 4rem) 4.5rem; }
  & .page-hero .planet-main { width: clamp(200px, 22vw, 330px); right: 9%; top: 20%; }
  & .hero-grid { width: 100%; }
  & .grad { background: linear-gradient(92deg, #dfe6ff 0%, #9db6ff 45%, #3ccf8e 100%); -webkit-background-clip: text; background-clip: text; }
  & .hero .lead { color: #c9d4f5; }
  & .hero-tagline::before { background: linear-gradient(90deg, #9db6ff, #3ccf8e); }
  & .hero .btn-green { background: #fff; color: var(--sp-ink); }
  & .hero .btn-green:hover { background: #e8edff; box-shadow: 0 10px 30px rgba(157, 182, 255, .45); }
  & .hero .btn-ghost { border-color: rgba(255,255,255,.28); backdrop-filter: blur(8px); background: rgba(255,255,255,.04); }
  & .hero-listen { border-radius: 999px; background: rgba(255,255,255,.06); backdrop-filter: blur(10px); }
  @media (min-width: 960px) {
    & .hero-grid { align-items: end; }
    & .telemetry { margin-top: 15rem; }
  }
  & .telemetry {
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); border-radius: 26px;
    backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 30px 80px rgba(2, 6, 25, .45), inset 0 1px 0 rgba(255,255,255,.18);
  }
  & .telemetry-list { background: rgba(255, 255, 255, .1); border-radius: 18px; }
  & .telemetry-list div { background: rgba(6, 14, 50, .55); }
  & .telemetry-list dd { font-family: var(--sp-font); font-weight: 500; }
  & .telemetry-bars span { background: linear-gradient(180deg, #9db6ff, rgba(157,182,255,.15)); border-radius: 4px; }

  /* ---- Numbers: soft tiles; one blue highlight and one planet tile ---- */
  & .stats { background: transparent; border: 0; padding-block: 4.5rem 1rem; }
  & .stats-grid { gap: 14px; grid-template-columns: repeat(2, 1fr); }
  & .stats-grid li, & .stats-grid li:nth-child(odd) {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 180px;
    padding: 1.75rem; border: 1px solid rgba(157, 182, 255, .12); border-radius: 24px; background: rgba(255, 255, 255, .045); box-shadow: none;
  }
  & .stats-grid strong { font: 500 clamp(2.4rem, 4.2vw, 3.75rem)/1 var(--sp-font); letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums; }
  & .stats-grid span { color: var(--text-muted); }
  & .stats-grid .bento-intro { justify-content: space-between; }
  & .bento-title { color: #fff; }
  & .stats-grid li:nth-child(2) { background: linear-gradient(140deg, rgba(157, 182, 255, .24), rgba(157, 182, 255, .08)); }
  & .stats-grid li:nth-child(4) { background: linear-gradient(150deg, #0b1d66 0%, #1f44c4 75%, #4f7cf5 100%); border-color: transparent; isolation: isolate; }
  & .stats-grid li:nth-child(4) span { color: #d5ddff; }
  & .stats-grid li:nth-child(4)::before {
    content: ""; position: absolute; z-index: -1; width: 260px; aspect-ratio: 1; right: -60px; top: -80px; border-radius: 50%;
    background: var(--sp-planet); box-shadow: inset -24px -30px 60px rgba(0,0,0,.5), 0 0 90px rgba(140, 180, 255, .5);
  }
  & .stats-note { padding-inline: .25rem; color: var(--text-muted); }
  & .marquee-band { background: transparent; }
  & .marquee-band .marquee-title { font-family: var(--font-body); font-size: .9375rem; font-weight: 600; letter-spacing: .02em; line-height: 1.4; color: var(--text-muted); }
  & .marquee-track li { color: rgba(238, 242, 255, .38); }

  /* ---- Sections float on the night sky ---- */
  & .section { background: transparent; }
  & .section-tint { background: linear-gradient(180deg, transparent, rgba(157, 182, 255, .035) 18%, rgba(157, 182, 255, .035) 82%, transparent); }
  & main :is(h2, h3, h4, .h2-like) { color: #fff; }
  & .body-lg, & .muted-h { color: var(--text-muted); }
  & .eyebrow { padding: 0; background: none; border: 0; color: #9db6ff; font-size: .75rem; letter-spacing: .16em; gap: .6rem; }
  & .eyebrow::before {
    width: 11px; height: 11px; border-radius: 0; box-shadow: none; background: linear-gradient(135deg, #3ccf8e, #6d8dff);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  }
  & .eyebrow::after { content: ""; width: 44px; height: 1px; background: linear-gradient(90deg, currentColor, transparent); opacity: .45; }
  & .hero-coords .coords { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 500; letter-spacing: .04em; color: #9db6ff; }
  & .listen, & .listen-dark { border-radius: 999px; background: rgba(255, 255, 255, .05); border-color: rgba(157, 182, 255, .2); color: #c7d2ff; }
  & .listen:hover { border-color: #fff; color: #fff; }
  & .btn-primary { background: #fff; color: var(--sp-ink); }
  & .btn-primary:hover { background: #e6ebff; box-shadow: 0 10px 26px rgba(80, 130, 255, .35); }
  & p.easy-read, & p.easy-read-dark { background: rgba(157, 182, 255, .1); border-color: #9db6ff; color: var(--text); border-radius: 16px; }
  & .quote blockquote p { font-family: var(--sp-font); font-weight: 500; letter-spacing: -.02em; color: #fff; }

  /* ---- Soft cards: one quiet style everywhere ---- */
  & :is(.card, .values-grid li, .why-list li, .coverage-grid li, .solution-grid li, .domain-grid > li, .sector-grid li, .team-stats li,
        .mini-stats li, .invest-grid > li, .tier-grid > li, .wave-grid > li, .service, .steps li, .fusion-grid li, .engine, .org-box, .glossary-list div) {
    background: rgba(255, 255, 255, .045); border: 1px solid rgba(157, 182, 255, .12); border-radius: 24px; box-shadow: none; color: var(--text);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: transform .45s var(--sp-out), background-color .35s ease, border-color .35s ease;
  }
  & :is(.card, .values-grid li, .why-list li, .coverage-grid li, .solution-grid li, .domain-grid > li, .sector-grid li, .service, .steps li, .invest-grid > li, .fusion-grid li):hover {
    transform: translateY(-3px); background: rgba(255, 255, 255, .07); border-color: rgba(157, 182, 255, .26); box-shadow: none;
  }
  & :is(.card, .values-grid, .why-list, .coverage-grid, .domain-grid, .service-grid, .steps, .fusion-grid, .invest-grid, .tier-grid, .wave-grid) :is(p, .ticks) { color: var(--text-muted); }
  & .ticks li::before { top: .5em; width: .55rem; height: .55rem; border-radius: 0; background: #7fa2ff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
  & .card h3, & .values-grid h3, & .service h3, & .domain-grid h3 { color: #fff; }

  /* Small, calm labels instead of heavy badges */
  & :is(.value-num, .cov-num, .step-num, .family-div, .fusion-kicker, .infra-num) { color: #9db6ff; -webkit-text-stroke: 0; }
  & .values-grid li { display: flex; flex-direction: column; gap: .25rem; min-height: 150px; padding: 1.5rem 1.375rem; }
  & .values-grid .value-num { font: 600 .8125rem/1 var(--sp-font); letter-spacing: .08em; margin-bottom: .75rem; }
  & .values-grid h3 { font-size: 1.125rem; margin: 0; }
  & .service { padding: 1.75rem 1.5rem; }
  & .service::before { display: none; }
  & .service-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(157, 182, 255, .12); color: #c7d2ff; box-shadow: none; }
  & .service-icon svg { width: 22px; height: 22px; }
  & .domain-grid > li { padding: 1.5rem; }
  & .domain-grid b { display: inline-block; padding: .3rem .65rem; margin-bottom: .875rem; border-radius: 999px; background: rgba(157, 182, 255, .12); color: #c7d2ff; font: 600 .75rem/1 var(--sp-font); letter-spacing: .06em; box-shadow: none; }
  & .solution-grid li { min-height: 0; padding: 1.25rem 1.375rem; border-radius: 22px; }
  & .solution-grid b { display: block; margin-bottom: .5rem; font: 600 .75rem/1 var(--sp-font); letter-spacing: .08em; color: #9db6ff; }
  & .solution-grid span { font: 600 1rem/1.35 var(--sp-font); color: #fff; }
  @media (min-width: 1200px) { & #managed .solution-grid { grid-template-columns: repeat(5, 1fr); } }
  & .badge { border-radius: 50%; background: rgba(157, 182, 255, .12); color: #c7d2ff; }
  & .sector-grid { gap: 12px; }
  @media (min-width: 1000px) { & .sector-grid { grid-template-columns: repeat(6, 1fr); } }
  & .sector-grid li { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1.5rem; min-height: 140px; padding: 1.125rem; border-radius: 20px; }
  & .sector-ic { width: 44px; height: 44px; background: rgba(157, 182, 255, .12); box-shadow: none; }
  & .sector-ic svg { stroke: #c7d2ff; }
  & .sector-name { font: 600 1rem/1.3 var(--sp-font); color: #fff; }
  & .partner-map .card { padding: 1.25rem 1.25rem 1.375rem; }
  & .partner-map h3 { padding-right: 0; color: #9db6ff; font-size: .75rem; letter-spacing: .12em; }
  & .partner-chips li { background: rgba(255, 255, 255, .06); border-color: transparent; color: #fff; }
  & .team-stats { gap: 12px; background: none; border: 0; overflow: visible; }
  & .team-stats li { padding: 1.5rem 1.375rem; }
  & .team-stats strong { font: 500 2.75rem/1 var(--sp-font); letter-spacing: -.04em; color: #fff; }
  & .team-stats span { font-family: var(--sp-font); margin-top: .5rem; color: #fff; }
  & .team-stats small { color: var(--text-muted); }
  & .mini-stats strong, & .value-grid strong { color: #fff; }
  @media (max-width: 719px) { & .mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
  & .ai-cards li:nth-child(1), & .ai-cards li:nth-child(4), & .vm-grid .card:nth-child(2) { background: linear-gradient(150deg, rgba(79, 124, 245, .32), rgba(79, 124, 245, .08)); border-color: rgba(157, 182, 255, .2); }
  & .tab-list { background: rgba(255, 255, 255, .05); border-color: rgba(157, 182, 255, .14); box-shadow: none; }
  & .tab-list [role="tab"] { color: #c7d2ff; transition: background-color .35s var(--sp-out), color .35s; }
  & .tab-list [role="tab"][aria-selected="true"] { background: #fff; color: var(--sp-ink); box-shadow: none; }
  & .tab-panel:not([hidden]) { animation: sp-rise .6s var(--sp-out); }
  & .chips li, & .chip-grid li { border-radius: 999px; background: rgba(255, 255, 255, .05); border-color: rgba(157, 182, 255, .14); color: var(--text); }
  & .table-wrap { border-radius: 20px; overflow: auto; background: rgba(255, 255, 255, .03); border: 1px solid rgba(157, 182, 255, .12); }
  & .data-table :is(th, td) { background: transparent; border-color: rgba(157, 182, 255, .12); color: var(--text); }
  & .data-table thead th { color: #9db6ff; }
  & .bar { background: rgba(255, 255, 255, .08); }
  & .bar span { background: linear-gradient(90deg, #6d8dff, #9db6ff); }
  & .fam-art { background: radial-gradient(circle at 50% 120%, rgba(79, 124, 245, .5), transparent 60%), linear-gradient(165deg, #0d1c5c, #081340); }
  & .fam-card .family-div { color: #9db6ff; }
  & .carousel-btn { background: rgba(255, 255, 255, .06); border-color: rgba(157, 182, 255, .2); color: #fff; }
  & .org-top { background: linear-gradient(150deg, #1f44c4, #0b1d66); }
  & .glossary-search input { background: rgba(255, 255, 255, .05); border-color: rgba(157, 182, 255, .2); color: #fff; }
  & .glossary-list mark { background: rgba(60, 207, 142, .35); color: #fff; }

  /* ---- Services carousel: runs out to the right edge of the screen, cards like framed pictures ---- */
  & #services { overflow-x: clip; }
  & .carousel { margin-right: calc(50% - 50vw); }
  & .fam-track.family-grid { gap: 20px; padding-right: 24px; }
  & .family-grid .fam-card { flex: 0 0 min(560px, 86vw); padding: 10px; border-radius: 28px; }
  & .fam-art { height: clamp(220px, 24vw, 320px); border-radius: 20px; }
  & .fam-body { padding: 1.25rem .9rem .8rem; }
  & .fam-card h3 { margin: .25rem 0 .4rem; font: 500 clamp(1.375rem, 2vw, 1.75rem)/1.2 var(--sp-font); letter-spacing: -.02em; }
  & .fam-card .fam-body p:last-child { font-size: 1rem; }

  /* ---- "Show details" button ---- */
  & .more-btn { border-color: rgba(157, 182, 255, .25); background: rgba(255, 255, 255, .05); color: #fff; }
  & .more-btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(157, 182, 255, .45); }

  /* ---- Feature sections keep a brighter nebula and open out from a rounded card as they arrive ---- */
  & :is(.section-dark, .contact) {
    position: relative; isolation: isolate; overflow: hidden;
    clip-path: inset(0 var(--open-i, 0px) round var(--open-r, 0px));
    background:
      radial-gradient(1000px 520px at 85% 115%, rgba(255, 170, 205, .2), transparent 60%),
      radial-gradient(900px 600px at 5% -10%, rgba(70, 120, 255, .38), transparent 60%),
      linear-gradient(180deg, #071038 0%, #0b2066 62%, #18379a 100%);
  }
  & .story-stage, & .finale-stage { clip-path: inset(0 var(--open-i, 0px) round var(--open-r, 0px)); }
  & :is(.section-dark, .contact)::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
    background-image: var(--sp-stars); background-size: 280px 240px;
  }
  & .section-dark::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none; width: 380px; aspect-ratio: 1; border-radius: 50%;
    right: -150px; top: -150px; opacity: .55; background: var(--sp-planet); box-shadow: 0 0 120px rgba(80, 130, 255, .35);
  }
  & .section-dark:nth-of-type(even)::after { right: auto; left: -170px; top: auto; bottom: -190px; width: 420px; }
  & :is(.section-dark, .contact, .story, .finale, .hero) .eyebrow { color: #c7d2ff; }
  & .contact-form { border-radius: 26px; background: #0d1846; border: 1px solid rgba(157, 182, 255, .16); box-shadow: 0 30px 80px rgba(2, 6, 25, .45); }
  & .field :is(input, select, textarea) { border-radius: 14px; background: rgba(255, 255, 255, .05); border-color: rgba(157, 182, 255, .2); color: #fff; }

  & .site-footer { background: rgba(3, 7, 26, .85); position: relative; isolation: isolate; border-top: 1px solid rgba(157, 182, 255, .1); }
}