/* ==========================================================================
   ThreatHalo brochure site — shared stylesheet
   Design tokens per handoff: colors, type (Sora/Manrope, self-hosted),
   spacing, effects. See partials/ for shared nav/footer/modal markup.
   ========================================================================== */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/sora-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/manrope-variable.woff2') format('woff2');
}

/* Covers every animation/transition on the site (ambient glows, nav scroll
   transition, value-line cross-fade, moving CTA gradient, logo marquee,
   etc.) in one place, rather than a per-component override. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

:root {
  /* Backgrounds */
  --bg: #050112;
  --bg-alt: #080614;
  --card-bg: #0D0B1E;
  --card-bg-2: #0A0E1F;
  --offwhite: #F7F5FB;

  /* Text */
  --text-on-dark: #EDEBF7;
  --text-on-dark-strong: #fff;
  --text-on-light: #25005F;
  --body-on-dark: rgba(255,255,255,.78);
  --body-on-dark-muted: rgba(255,255,255,.74);
  --body-on-dark-faint: rgba(255,255,255,.62);
  --body-on-light: rgba(37,0,95,.72);

  /* Accents */
  --purple: #8B5CF6;
  --purple-soft: #8B7CF6;
  --purple-deep: #6600ED;
  --purple-deepest: #25005F;
  --teal: #2FD9B4;
  --teal-light: #6EEBD0;
  --amber: #F5A623;
  --pink: #E85D9B;
  --violet: #A78BFA;

  /* Status */
  --status-critical: #E5484D;
  --status-high: #F5A623;
  --status-resolved: #2FD9B4;
  --status-resolved-light: #6EEBD0;

  /* Borders */
  --border-soft: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);

  /* Gradients */
  --gradient-brand: linear-gradient(120deg,#8B5CF6,#2FD9B4);
  --gradient-hero: linear-gradient(120deg,#25005F 0%,#6600ED 55%,#00EDBF 100%);

  /* Layout */
  --content-max: 1344px;
  --content-narrow: 800px;
  --content-medium: 1100px;
  --section-pad-y: 100px;
  --section-pad-x: 48px;

  --font-heading: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  overflow-x: hidden;
}
a { color: var(--purple-soft); }
a:hover { color: var(--teal); }
img { max-width: 100%; }

h1, h2, h3 { font-family: var(--font-heading); margin: 0; color: var(--text-on-dark-strong); }
h1 { font-weight: 700; letter-spacing: -.02em; font-size: 44px; line-height: 1.15; }
h2 { font-weight: 700; font-size: clamp(32px, 2.9vw, 46px); line-height: 1.2; }
h3 { font-weight: 600; font-size: 17px; }
p { font-size: 16px; line-height: 1.7; color: var(--body-on-dark-muted); margin: 0; }

.eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--purple-soft);
  margin-bottom: 14px;
}

.container { max-width: var(--content-max); margin: 0 auto; }
.container--narrow { max-width: var(--content-narrow); margin: 0 auto; }
.container--medium { max-width: var(--content-medium); margin: 0 auto; }

.section { padding: var(--section-pad-y) var(--section-pad-x); border-top: 1px solid var(--border-soft); }
.section--first { border-top: none; }
.section--alt { background: var(--bg-alt); }
.section--offwhite { background: var(--offwhite); color: var(--text-on-light); }
.section--relative { position: relative; overflow: hidden; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-radius: 8px;
  padding: 15px 28px;
  border: none;
  cursor: pointer;
}
.btn-sm { font-size: 14px; padding: 11px 22px; }
.btn-ghost {
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid var(--border-strong);
}
.btn-disabled {
  background: rgba(255,255,255,.12);
  color: var(--bg);
  cursor: not-allowed;
}
.btn-gradient {
  border-radius: 999px;
  border: 2px solid transparent;
  /* Gradient outline, solid-fill center: the padding-box layer is opaque
     (matching the page background) so it sits on top of and hides the
     border-box gradient everywhere except the border ring — a fully
     transparent top layer would let the gradient show through underneath
     it too, filling the whole button instead of just the outline. */
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--gradient-brand) border-box;
  color: #fff;
  transition: background .25s ease, color .25s ease, transform .2s ease;
}
.btn-gradient:hover {
  background: var(--gradient-brand);
  color: var(--bg);
  transform: translateY(-1px);
}
.btn-on-gradient-panel {
  background: var(--bg);
  color: #fff;
  transition: transform .2s ease;
}
.btn-on-gradient-panel:hover { transform: translateY(-1px); }

/* ==========================================================================
   Nav
   ========================================================================== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5,1,18,.85);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 0 48px;
  border-bottom: 1px solid var(--border-soft);
  width: 100%;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
  transition: width .35s ease, margin .35s ease, border-radius .35s ease,
    background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* Faint, static (non-animated) purple glow: a soft line bleeding down from
   the nav's bottom edge at rest, replaced by a glow all around the pill
   once scrolled (see .is-scrolled below) — not a moving/pulsing effect,
   just two fixed states tied to the existing scroll transition. */
.site-nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.45), transparent);
  box-shadow: 0 10px 28px -6px rgba(139,92,246,.35);
  pointer-events: none;
  transition: opacity .3s ease;
}
/* Floats into a centered, rounded pill once the page has scrolled a bit —
   see nav.js for the scrollY threshold that toggles this class. */
.site-nav.is-scrolled {
  width: 70%;
  margin: 14px auto 0;
  border-radius: 100px;
  border-bottom-color: transparent;
  background: rgba(5,1,18,.92);
  box-shadow: 0 10px 40px rgba(0,0,0,.35), 0 0 32px rgba(139,92,246,.25);
}
.site-nav.is-scrolled::after { opacity: 0; }
.site-nav__logo img { height: 38px; display: block; }
.site-nav__links {
  display: flex;
  gap: 34px;
  font-size: 14px;
  font-weight: 500;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__links a { color: rgba(255,255,255,.82); text-decoration: none; transition: color .2s ease; }
.site-nav__links a:hover { color: var(--teal-light); }
.site-nav__links a.active { color: var(--teal-light); }
.site-nav__toggle { display: none; }
.site-nav__portal-item { display: none; }

.site-nav__actions { display: flex; align-items: center; gap: 24px; }
.site-nav__portal-link { color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; }
.site-nav__portal-link:hover { color: var(--teal-light); }

@media (max-width: 860px) {
  .site-nav.is-scrolled { width: 100%; margin: 0; border-radius: 0; }
  .site-nav__links {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border-soft);
    padding: 8px 24px;
    display: none;
  }
  .site-nav__links.is-open { display: flex; }
  /* `a` is a plain inline child of the flex-item `li`, not itself a flex item,
     so it never gets blockified — without `display: block` its vertical
     padding only paints outward without adding to layout height, and rows
     silently overlap by ~30px instead of stacking, making adjacent links
     overlap each other's tap area. */
  .site-nav__links a { display: block; padding: 16px 4px; border-bottom: 1px solid var(--border-soft); }
  .site-nav__portal-item { display: list-item; }
  /* Desktop-only twin of the mobile drawer's Portal Login item, since both
     live inside the same <ul> that gets repurposed as the mobile drawer. */
  .site-nav__portal-link { display: none; }
  .site-nav__toggle {
    display: block;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: #fff;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    font-size: 16px;
    cursor: pointer;
    order: 2;
  }
  .site-nav__actions { order: 3; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding: 44px 48px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--body-on-dark-faint);
}
.site-footer a { text-decoration: none; }
.site-footer__links { display: flex; gap: 24px; }

/* ==========================================================================
   Cookie consent banner (site/partials/cookie-banner.html, cookie-consent.js)
   ========================================================================== */
.cookie-banner {
  position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 90;
  max-width: 720px; margin: 0 auto;
  background: var(--card-bg); border: 1px solid var(--border-strong);
  border-radius: 16px; padding: 22px 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.cookie-banner__body { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cookie-banner__body p { margin: 0; flex: 1 1 320px; font-size: 14px; color: var(--body-on-dark-muted); }
.cookie-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 20px; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1; text-align: center; }
}

.cookie-table__head th { background: var(--teal); color: var(--bg); font-family: var(--font-heading); font-weight: 600; text-align: left; }

/* ==========================================================================
   Ambient glow effects
   ========================================================================== */
@keyframes floatGlow { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.glow-blob--float { animation: floatGlow 6s ease-in-out infinite; }
.blink-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal-light);
  animation: blink 1.6s infinite;
  display: inline-block;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding: 110px 48px 130px; overflow: hidden; }
.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
  max-width: var(--content-max); margin: 0 auto;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: 13px; font-weight: 600;
  color: var(--teal-light);
  background: rgba(47,217,180,.1);
  border: 1px solid rgba(47,217,180,.28);
  padding: 7px 14px; border-radius: 100px; margin-bottom: 28px;
}
.hero__cta-row { display: flex; gap: 16px; flex-wrap: wrap; }
.hero--centered { text-align: center; }
.hero--centered .hero__grid { display: block; max-width: 820px; }

/* ==========================================================================
   Home hero — "Portal rise": pinned scroll-driven reveal of the product
   portal as the hero text shrinks and fades away above it. See
   hero-portal-rise.js for the scroll choreography — the measured-DOM math
   there is intentionally verbose, ported faithfully from the design spec
   (portal position/scale derive from the actual rendered text height and
   pane size, not fixed percentages, so it never overlaps the CTAs or
   overflows on unusual viewport sizes).

   Falls back to a static, non-pinned stacked layout under 900px (JS drops
   the scroll listener and adds [data-reveal] instead, reusing the
   site-wide scroll-reveal fade already used elsewhere) — the pinned effect
   isn't worth the complexity on small screens.
   ========================================================================== */
.hero-rise { position: relative; height: 230vh; }
.hero-rise__pane { position: sticky; top: 76px; height: calc(100vh - 76px); overflow: hidden; }
.hero-rise__glow {
  position: absolute; top: -260px; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 700px;
  background: radial-gradient(ellipse at center, rgba(139,92,246,.24) 0%, rgba(47,217,180,.07) 50%, transparent 74%);
  filter: blur(30px);
  animation: heroGlowBreathe 9s ease-in-out infinite;
}
@keyframes heroGlowBreathe { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
.hero-rise__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 40px; }
/* padding-top/opacity/transform below match hero-portal-rise.js's own p=0
   (scroll-top) computation, so the pinned choreography's resting state is
   correct on first paint instead of jumping there once the module script
   runs (it only overrides these once the user actually scrolls). */
.hero-rise__text { text-align: center; padding-top: 72px; opacity: 1; transform: scale(1); }
.hero-rise__h1 {
  font-family: var(--font-heading); font-weight: 700; letter-spacing: -.035em;
  color: #fff; font-size: clamp(23px, 2.93vw, 42.5px); line-height: 1.05;
  margin: 0 auto 20px; max-width: 700px; text-wrap: balance;
}
/* Fixed-height reveal box (2 lines' worth, matching the swipe-line's own
   size/line-height) so the CTA row and portal below never shift as the
   rotating phrases change between 1 and 2 lines — shorter phrases just
   sit centered in the same reserved space. */
.hero-rise__swipe {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(2 * 1.3 * clamp(18.5px, 2.47vw, 36px));
  margin-bottom: 34px;
}
.hero-rise__swipe-line {
  clip-path: inset(-20% 100% -20% 0%);
  transition: clip-path 1.5s cubic-bezier(.62,0,.38,1);
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(18.5px, 2.47vw, 36px); line-height: 1.3; letter-spacing: -.02em;
  color: var(--teal-light); max-width: 760px; text-wrap: balance;
}
.hero-rise__swipe-line.is-shown { clip-path: inset(-20% 0% -20% 0%); }
.hero-rise__swipe-line.is-static { clip-path: none; transition: none; }
.hero-rise__body {
  color: var(--body-on-dark-muted); font-size: 16px; line-height: 1.65;
  max-width: 640px; margin: 0 auto 30px;
}
.hero-rise__cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-pill { border-radius: 100px; }

.hero-rise__portal { position: absolute; left: 50%; bottom: 0; width: 1040px; height: 520px; transform-origin: bottom center; transform: translateX(-50%); }
.hero-rise__portal-frame {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column;
  background: #0A0518; border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 -30px 80px rgba(139,92,246,.28);
}

/* Continuous rotating gradient glow around the portal card border — runs
   constantly, not a hover effect. Two oversized, oppositely-rotating conic
   gradients clipped by overflow:hidden give the ring depth; the sitewide
   prefers-reduced-motion rule (top of this file) freezes both automatically. */
.portal-glow-wrap { position: relative; border-radius: 14px; }
.portal-glow-layer {
  position: absolute; inset: 0; border-radius: inherit;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.portal-glow-layer::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 600px; height: 600px;
  transform: translate(-50%, -50%) rotate(0deg);
  will-change: transform;
  background: conic-gradient(from 0deg,
    transparent 0%, var(--teal) 8%, transparent 22%,
    transparent 50%, var(--purple) 58%, transparent 72%, transparent 100%);
}
.portal-glow-layer--outer { inset: -8px; filter: blur(16px); opacity: .85; }
.portal-glow-layer--outer::before { animation: portal-glow-spin 10s linear infinite; }
.portal-glow-layer--inner { inset: -1px; filter: blur(2px); }
.portal-glow-layer--inner::before { animation: portal-glow-spin 10s linear infinite reverse; }
@keyframes portal-glow-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 900px) {
  .hero-rise { height: auto; }
  .hero-rise__pane { position: static; height: auto; overflow: visible; }
  .hero-rise__glow { top: -160px; width: 700px; height: 500px; }
  .hero-rise__content { position: static; height: auto; padding: 90px 24px 56px; }
  .hero-rise__text { padding-top: 0 !important; opacity: 1 !important; transform: none !important; }
  .hero-rise__h1-break { display: none; }
  .hero-rise__portal {
    position: static; left: auto; bottom: auto;
    width: 100%; max-width: 640px; height: auto; aspect-ratio: 1040 / 520;
    margin: 40px auto 0; transform: none !important;
  }
}

/* Same static fallback as the mobile breakpoint above, but triggered by JS
   for prefers-reduced-motion regardless of viewport width. */
.hero-rise.is-static { height: auto; }
.hero-rise.is-static .hero-rise__pane { position: static; height: auto; overflow: visible; }
.hero-rise.is-static .hero-rise__content { position: static; height: auto; padding: 90px 40px 56px; }
.hero-rise.is-static .hero-rise__text { padding-top: 0 !important; opacity: 1 !important; transform: none !important; }
.hero-rise.is-static .hero-rise__portal {
  position: static; left: auto; bottom: auto;
  width: 100%; max-width: 640px; height: auto; aspect-ratio: 1040 / 520;
  margin: 40px auto 0; transform: none !important;
}

.live-badge { display: flex; align-items: center; gap: 6px; color: var(--teal-light); font-size: 11px; font-weight: 600; font-family: var(--font-heading); }
.live-badge .blink-dot { width: 6px; height: 6px; }

/* ThreatHalo logo badge (platform hero) — same rotating gradient glow-ring
   used around the home hero's portal and the stats bars. */
.platform-hero-badge { position: relative; height: 340px; display: flex; align-items: center; justify-content: center; }
.platform-hero-badge .portal-glow-wrap { width: 320px; height: 320px; border-radius: 20px; }
.platform-hero-badge__box {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #0A0518; border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.platform-hero-badge__box img { width: 170px; height: auto; }

/* ==========================================================================
   Trusted-by logo marquee — continuous auto-scroll. The track holds the
   logo set twice back-to-back (second copy is aria-hidden, decorative);
   translating exactly -50% of the track's width scrolls the first copy
   fully off while the second (identical) copy lands in its place, so the
   loop point is invisible. Each .logo-marquee__group carries its own
   trailing margin equal to its internal gap, so both groups are pixel-
   identical widths and the -50% translate lines up exactly on the seam.
   ========================================================================== */
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.logo-marquee__track { display: flex; width: max-content; animation: logo-marquee-scroll 28s linear infinite; }
.logo-marquee__group { display: flex; align-items: center; gap: 48px; margin-right: 48px; flex-shrink: 0; }
@keyframes logo-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-row__img { height: 32px; width: auto; opacity: .85; filter: brightness(0) invert(1); }

/* ==========================================================================
   Cards (feature/benefit grids)
   ========================================================================== */

/* ==========================================================================
   "Why MSPs choose ThreatHalo" — radial halo panel (design handoff:
   TH Radial Panel). Mobile-first: base rules are a plain stacked list with
   each benefit's copy always visible; the radial/orbit presentation (disc,
   rings, spokes, absolutely-positioned nodes) only switches on at the
   1240px breakpoint the design calls for, matching the README's collapse
   instruction. See why-radial.js for the active-node cycling.
   ========================================================================== */
.why-radial {
  position: relative;
  padding: 56px 28px;
  overflow: hidden;
}
.why-radial__glow-bg {
  position: absolute; top: 60px; left: 50%; width: 1100px; height: 1100px;
  margin-left: -550px;
  background: radial-gradient(circle, rgba(139,92,246,.16) 0%, rgba(47,217,180,.05) 42%, transparent 66%);
  filter: blur(14px);
  pointer-events: none;
}
.why-radial__head { position: relative; text-align: center; max-width: 820px; margin: 0 auto 48px; }
.why-radial__head p { color: rgba(255,255,255,.62); font-size: 17px; line-height: 1.55; margin: 0; text-wrap: pretty; }

.why-radial__stage { position: relative; }
.why-radial__spokes, .why-radial__ring, .why-radial__glow, .why-radial__disc { display: none; }

.why-radial__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.why-radial__item { position: relative; }
.why-radial__node {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(180deg,#0B0518,#090415);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  cursor: pointer;
  transition: background .5s cubic-bezier(.2,.8,.2,1), border-color .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
}
.why-radial__icon { flex: none; color: rgba(255,255,255,.62); transition: color .4s ease; }
.why-radial__node-label {
  font-family: var(--font-heading); font-weight: 600; font-size: 17px;
  letter-spacing: -.015em; color: rgba(255,255,255,.62);
  transition: color .4s ease;
}
.why-radial__node-body { margin: 10px 0 0; padding: 0 4px; font-size: 14.5px; color: rgba(255,255,255,.6); }

@media (min-width: 1240px) {
  .why-radial__node.is-active .why-radial__icon,
  .why-radial__node.is-active .why-radial__node-label { color: #2FD9B4; }
  .why-radial__node.is-active {
    background: linear-gradient(180deg,#150C2E,#0C0620);
    border-color: rgba(47,217,180,.42);
    box-shadow: 0 0 40px rgba(47,217,180,.28), 0 0 90px rgba(139,92,246,.3);
    transform: scale(1.05);
  }
}
@media (max-width: 1239px) {
  .why-radial__node.is-active .why-radial__icon,
  .why-radial__node.is-active .why-radial__node-label { color: #2FD9B4; }
  .why-radial__node.is-active { border-color: rgba(47,217,180,.32); }
}

@media (min-width: 1240px) {
  .why-radial { padding: 72px 56px 64px; }
  .why-radial__head { margin-bottom: 40px; }
  .why-radial__head p { font-size: 19px; }
  /* Tightened from the handoff's own 1180x960/420px-orbit geometry so all
     six nodes fit in view without scrolling — same proportions (chip size,
     disc padding, ring/glow ratios relative to the orbit radius), just a
     smaller stage. Orbit radius is 310px rather than a more aggressive
     260px: at 260 the diagonal chips' bounding boxes actually overlapped
     the halo disc's circle (verified via getBoundingClientRect distance
     checks) — 310 keeps a clean ~26px clearance everywhere. */
  .why-radial__stage { width: 860px; height: 740px; margin: 0 auto; }
  .why-radial__spokes { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .why-radial__spoke-active {
    stroke: #2FD9B4; stroke-width: 1.6; opacity: .85;
    filter: drop-shadow(0 0 8px rgba(47,217,180,.9));
    transition: all .7s cubic-bezier(.2,.8,.2,1);
  }
  .why-radial__ring {
    display: block; position: absolute; left: 50%; top: 370px; border-radius: 50%;
  }
  .why-radial__ring--dashed {
    width: 620px; height: 620px; margin: -310px 0 0 -310px;
    border: 1px dashed rgba(139,92,246,.28);
    animation: why-ring-spin 90s linear infinite;
  }
  .why-radial__ring--solid {
    width: 458px; height: 458px; margin: -229px 0 0 -229px;
    border: 1px solid rgba(47,217,180,.12);
    animation: why-ring-spin-rev 70s linear infinite;
  }
  .why-radial__glow {
    display: block; position: absolute; left: 50%; top: 370px;
    width: 356px; height: 356px; margin: -178px 0 0 -178px; border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.32) 0%, rgba(47,217,180,.1) 46%, transparent 70%);
    animation: why-halo-breathe 9s ease-in-out infinite;
    pointer-events: none;
  }
  .why-radial__disc {
    display: flex; position: absolute; left: 50%; top: 370px;
    width: 280px; height: 280px; box-sizing: border-box; margin: -140px 0 0 -140px;
    border-radius: 50%; background: linear-gradient(180deg,#0C0620,#08031A);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 0 70px rgba(139,92,246,.3), inset 0 1px 0 rgba(255,255,255,.06);
    align-items: center; justify-content: center; padding: 32px; text-align: center; overflow: hidden;
  }
  .why-radial__disc-copy { transition: opacity .28s ease; }
  .why-radial__disc-copy.is-swapping { opacity: 0; }
  .why-radial__disc-copy h3 {
    font-family: var(--font-heading); font-weight: 600; font-size: 22px;
    letter-spacing: -.02em; color: #fff; margin: 0 0 10px;
  }
  .why-radial__disc-copy p { color: rgba(255,255,255,.66); font-size: 14.5px; line-height: 1.45; margin: 0; text-wrap: pretty; }

  .why-radial__list { display: block; }
  .why-radial__item {
    position: absolute; left: var(--node-x); top: var(--node-y);
    width: 290px; box-sizing: border-box; margin: -44px 0 0 -145px;
  }
  .why-radial__node { padding: 18px 22px; }
  .why-radial__node-body { display: none; }
}

@keyframes why-ring-spin { to { transform: rotate(360deg); } }
@keyframes why-ring-spin-rev { to { transform: rotate(-360deg); } }
@keyframes why-halo-breathe { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.045); } }

.stats-bar { margin-top: 40px; }
.stats-bar .portal-glow-wrap { border-radius: 18px; }
.stats-bar .stats-grid {
  position: relative;
  z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center;
  background: linear-gradient(180deg,#0C0620,#0A0518);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  overflow: hidden;
}
.stats-bar .stats-grid::before {
  content: ''; position: absolute; top: -2px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, #2FD9B4, transparent);
  box-shadow: 0 0 30px 8px rgba(47,217,180,.45);
}
.stats-bar .stats-grid > div {
  flex: 1 1 200px; padding: 36px 24px; text-align: center;
  border-right: 1px solid rgba(255,255,255,.07);
}
.stats-bar .stats-grid > div:last-child { border-right: none; }

.stat-3col { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border-soft); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.stat-3col > div { background: var(--card-bg-2); padding: 20px; text-align: center; }
.stat-3col__num { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: #fff; }
.stat-3col__label { font-size: 11.5px; color: var(--body-on-dark-faint); margin-top: 4px; }

.bar-chart { background: var(--card-bg-2); border-radius: 12px; padding: 18px 20px; }
.bar-chart__label { font-size: 11.5px; color: var(--body-on-dark-faint); margin-bottom: 12px; }
.bar-chart__bars { display: flex; align-items: flex-end; gap: 5px; height: 64px; }
.bar-chart__bar { flex: 1; background: linear-gradient(180deg, var(--purple), var(--teal)); border-radius: 3px; }
.bar-chart--monthly .bar-chart__bars { gap: 12px; height: 72px; }
.bar-chart--monthly .bar-chart__bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; background: none; }
.bar-chart__bar-fill { width: 100%; background: rgba(139,92,246,.5); border-radius: 3px; }
.bar-chart__bar-label { font-size: 10.5px; color: rgba(255,255,255,.58); }

.review-row { display: flex; justify-content: space-between; background: var(--card-bg-2); border-radius: 12px; padding: 16px 20px; }

/* ==========================================================================
   Stats count-up grid
   ========================================================================== */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; background: transparent; border-radius: 0; overflow: visible; width: 100%; }
.stats-grid > div { background: transparent; padding: 0; text-align: center; }
.stats-grid__value {
  font-family: var(--font-heading); font-size: 40px; font-weight: 700;
  color: var(--teal-light);
}
.stats-grid__label { font-size: 16px; color: var(--body-on-dark-faint); margin-top: 6px; }

/* ==========================================================================
   Feature-merge chip animation (Platform only)
   ========================================================================== */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 44px; }
.chip {
  background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 100px;
  padding: 9px 18px; font-size: 13px; font-family: var(--font-heading); font-weight: 500;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), filter .5s, opacity 1.2s ease, color .5s;
  transform: translateY(10px) scale(.7); opacity: 0; color: rgba(255,255,255,.8);
}
.chip.is-popped { transform: translateY(0) scale(1); opacity: 1; }
.chip.is-greyed { filter: grayscale(1); opacity: .52; color: rgba(255,255,255,.46); transform: translateY(0) scale(.96); }

.service-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 640px; margin: 0 auto; }
.service-card {
  border-radius: 16px; padding: 32px; transition: opacity .6s, transform .6s, box-shadow .6s;
  opacity: 0; transform: translateY(14px) scale(.85);
}
.service-card.is-revealed { opacity: 1; transform: translateY(0) scale(1.04); }
.service-card--mdr { background: linear-gradient(150deg, rgba(139,92,246,.22), rgba(139,92,246,.04)); border: 2px solid var(--purple); }
.service-card--mdr.is-revealed { box-shadow: 0 0 40px rgba(139,92,246,.45); }
.service-card--mxdr { background: linear-gradient(150deg, rgba(47,217,180,.22), rgba(47,217,180,.04)); border: 2px solid var(--teal); }
.service-card--mxdr.is-revealed { box-shadow: 0 0 40px rgba(47,217,180,.45); }
.service-card__title { font-family: var(--font-heading); font-weight: 800; font-size: 26px; margin-bottom: 8px; }
.service-card--mdr .service-card__title { color: var(--purple); }
.service-card--mxdr .service-card__title { color: var(--teal); }
.service-card__sub { font-size: 13.5px; color: rgba(255,255,255,.68); }

/* ==========================================================================
   Comparison table
   ========================================================================== */
.comparison { background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: 16px; overflow: hidden; }
.comparison__head, .comparison__row { display: grid; grid-template-columns: 1fr 90px 90px; align-items: center; }
.comparison__head { padding: 18px 24px; border-bottom: 1px solid var(--border-soft); background: var(--bg-alt); }
.comparison__head-label { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .05em; }
.comparison__head-mdr { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--purple); text-align: center; }
.comparison__head-mxdr { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--teal); text-align: center; }
.comparison__row { padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,.05); }
/* Author CSS's own `display: grid` above beats the browser's built-in
   `[hidden] { display: none }` (author rules win over user-agent rules
   regardless of specificity), so extra rows marked `hidden` were rendering
   anyway — the whole table showed with "Read more" doing nothing visible. */
.comparison__row[hidden] { display: none; }

/* Grouped sub-feature rows with a single merged, vertically-centred label
   spanning the group (e.g. "Microsoft Security suite coverage" covering
   several Defender/Azure rows) — a real CSS Grid row-span rather than a
   repeated indented label per row. Each row's grid-row is set inline since
   the group's row count varies. */
.comparison__group { display: grid; grid-template-columns: 150px 1fr 90px 90px; padding: 0 24px; }
.comparison__group[hidden] { display: none; }
.comparison__group-label {
  grid-column: 1;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; font-family: var(--font-heading); font-weight: 600; font-size: 13.5px;
  line-height: 1.35; color: rgba(255,255,255,.75);
  border-right: 1px solid rgba(255,255,255,.05);
}
.comparison__group .comparison__label { grid-column: 2; padding: 14px 16px 14px 24px; border-bottom: 1px solid rgba(255,255,255,.05); }
.comparison__group .comparison__mdr { grid-column: 3; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.comparison__group .comparison__mxdr { grid-column: 4; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.comparison__group .comparison__label:last-of-type,
.comparison__group .comparison__mdr:last-of-type,
.comparison__group .comparison__mxdr:last-of-type { border-bottom: none; }
.comparison__label { font-size: 13.5px; color: rgba(255,255,255,.82); }
.comparison__mdr { text-align: center; color: var(--purple); font-size: 16px; }
.comparison__mxdr { text-align: center; color: var(--teal); font-size: 16px; }
.comparison__toggle-row { padding: 18px 24px; text-align: center; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: 14px; padding: 22px 26px; cursor: pointer; transition: border-color .2s; }
.faq-item.is-open { border-color: rgba(139,92,246,.5); }
.faq-item__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: transparent; border: none; width: 100%; text-align: left; cursor: pointer; padding: 0; color: inherit; font: inherit; }
.faq-item__head h3 { font-size: 16px; }
.faq-item__chevron { color: var(--purple-soft); font-size: 18px; line-height: 1; flex-shrink: 0; }
.faq-item__answer { font-size: 14.5px; color: var(--body-on-dark-muted); line-height: 1.65; margin-top: 14px; }

/* ==========================================================================
   "Become a Partner" halo panel (design handoff: TH Partner panel, option
   2b). Same dark-panel/glow-blur chrome as the "Why" radial panel; text
   sizes intentionally kept at the site's existing values rather than the
   handoff's own (larger) type scale.
   ========================================================================== */
.partner-panel {
  position: relative;
  padding: 56px 28px;
  overflow: hidden;
}
.partner-panel__glow-bg {
  position: absolute; top: -160px; left: 50%; width: 1100px; height: 820px;
  margin-left: -550px;
  background: radial-gradient(ellipse at center, rgba(139,92,246,.2) 0%, rgba(47,217,180,.06) 50%, transparent 72%);
  filter: blur(16px);
  pointer-events: none;
}
.partner-panel__head { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
.partner-panel__head p { margin: 20px auto 30px; max-width: 640px; }

.partner-panel__cards {
  position: relative; max-width: 1290px; margin: 64px auto 0;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 30px;
}
.partner-panel__ring {
  position: absolute; left: 50%; top: -110px; width: 900px; height: 900px;
  margin-left: -450px; border-radius: 50%;
  border: 1px dashed rgba(139,92,246,.16);
  animation: why-ring-spin 120s linear infinite;
  pointer-events: none;
}
.partner-card {
  position: relative;
  background: linear-gradient(160deg,rgba(139,92,246,.28) 0%,rgba(76,29,149,.22) 50%,rgba(20,10,45,.96) 100%);
  border: 1px solid rgba(167,139,250,.32);
  border-radius: 16px;
  padding: 40px 36px 34px;
  box-shadow: 0 0 40px -10px rgba(139,92,246,.4), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .35s ease, box-shadow .35s ease;
}
.partner-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 56px -8px rgba(139,92,246,.55), inset 0 1px 0 rgba(255,255,255,.1);
}
@media (prefers-reduced-motion: reduce) {
  .partner-card:hover { transform: none; }
}
.partner-card__quote { font-family: var(--font-heading); font-weight: 500; font-size: 21px; line-height: 1.42; letter-spacing: -.01em; color: #F5F1FF; margin: 0 0 26px; }
.partner-card__author { display: flex; align-items: center; gap: 14px; }
.partner-card__name { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: #fff; }
.partner-card__role { font-size: 14px; color: rgba(255,255,255,.55); margin-top: 3px; }

@media (max-width: 900px) {
  .partner-panel__cards { grid-template-columns: 1fr; }
  .partner-panel__ring { display: none; }
}

/* ==========================================================================
   "What are the benefits to you?" grid panel (Partner page only — design
   handoff: TH Boxes panel). Simplified per request: no hover-expand/reveal,
   no cursor-tracked glow, fixed-height cards so every paragraph shows in
   full always; hover only brightens colour/edge-glow, nothing resizes or
   moves. Pure CSS — no JS needed.
   ========================================================================== */
.benefits-grid { position: relative; padding: 40px 0 8px; overflow: hidden; }
.benefits-grid__glow-bg {
  position: absolute; top: 0; left: 50%; width: 1200px; height: 700px;
  margin-left: -600px;
  background: radial-gradient(ellipse at center, rgba(139,92,246,.2) 0%, rgba(47,217,180,.06) 52%, transparent 74%);
  filter: blur(18px);
  pointer-events: none;
}
.benefits-grid__head { position: relative; text-align: center; max-width: 820px; margin: 0 auto 48px; }

.benefits-grid__cards {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
}
.benefits-card {
  position: relative;
  background: linear-gradient(180deg,#0C0620 0%,#0A0518 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 36px 32px 32px;
  min-height: 400px;
  box-sizing: border-box;
  transition: border-color .35s ease;
}
.benefits-card__top-glow {
  position: absolute; top: -2px; left: 14%; right: 14%; height: 2px;
  background: linear-gradient(90deg,transparent,#2FD9B4,transparent);
  box-shadow: 0 0 26px 6px rgba(47,217,180,.55);
  opacity: .3; transition: opacity .35s ease;
}
.benefits-card__bottom-glow {
  position: absolute; bottom: -2px; left: 24%; right: 24%; height: 2px;
  background: linear-gradient(90deg,transparent,#8B5CF6,transparent);
  box-shadow: 0 0 30px 8px rgba(139,92,246,.5);
  opacity: 0; transition: opacity .4s ease;
}
.benefits-card:hover { border-color: rgba(47,217,180,.34); }
.benefits-card:hover .benefits-card__top-glow { opacity: 1; }
.benefits-card:hover .benefits-card__bottom-glow { opacity: .9; }
.benefits-card:hover h3 { color: #2FD9B4; }
.benefits-card__icon { display: block; margin-bottom: 20px; color: #2FD9B4; opacity: .9; }
.benefits-card h3 { font-family: var(--font-heading); font-weight: 600; font-size: 23px; letter-spacing: -.02em; color: #fff; margin: 0 0 12px; transition: color .3s ease; }
.benefits-card p { color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.55; margin: 0; }

@media (max-width: 1240px) { .benefits-grid__cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px) { .benefits-grid__cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   CTA / demo band + NFR panel
   ========================================================================== */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  width: 75%; margin: 0 auto 80px; border-radius: 32px;
  padding: 88px 60px;
  background: linear-gradient(120deg, #25005F, #6600ED, #00EDBF, #6600ED, #25005F);
  background-size: 300% 300%;
  animation: cta-gradient-shift 14s ease infinite;
}
@keyframes cta-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.cta-band__glow-a { position: absolute; top: -40%; left: -10%; width: 60%; height: 180%; background: radial-gradient(circle, rgba(248,245,255,.3), transparent 65%); }
.cta-band__glow-b { position: absolute; bottom: -50%; right: -10%; width: 60%; height: 180%; background: radial-gradient(circle, rgba(0,237,191,.45), transparent 65%); }
.cta-band h2 { position: relative; z-index: 2; font-size: 38px; margin-bottom: 30px; text-shadow: 0 2px 24px rgba(0,0,0,.2); }
.cta-band .btn { position: relative; z-index: 2; }

@media (max-width: 960px) {
  .cta-band { width: 92%; padding: 60px 32px; }
}

.nfr-panel {
  position: relative; border-radius: 28px; padding: 2px;
  background: linear-gradient(150deg, rgba(47,217,180,.55), rgba(139,92,246,.4) 42%, rgba(255,255,255,.06) 72%, rgba(47,217,180,.28));
  box-shadow: 0 0 90px -20px rgba(139,92,246,.45);
}
.nfr-panel__inner {
  position: relative; border-radius: 26px; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, #0D0724 0%, #080418 100%);
  padding: 96px 84px 92px;
}
.nfr-panel__glow {
  position: absolute; bottom: -420px; left: 50%; transform: translateX(-50%); pointer-events: none;
  width: 93%; aspect-ratio: 1360 / 700; border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, rgba(47,217,180,.32) 0%, rgba(139,92,246,.18) 42%, transparent 68%);
  filter: blur(10px);
}
.nfr-panel__arc {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); pointer-events: none;
  width: 72%; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%;
  border-top: 1px solid rgba(47,217,180,.5);
  box-shadow: 0 -14px 60px -22px rgba(47,217,180,.55);
}
.nfr-panel__content { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; }
.nfr-panel h2 { color: #fff; font-size: 58px; line-height: 1.04; letter-spacing: -.04em; margin: 0 0 26px; text-wrap: balance; }
.nfr-panel p { color: rgba(255,255,255,.66); font-size: 19px; line-height: 1.65; margin: 0 auto 44px; max-width: 760px; }

@media (max-width: 900px) {
  .nfr-panel__inner { padding: 64px 32px 60px; }
  .nfr-panel h2 { font-size: clamp(34px, 7vw, 44px); }
}

/* ==========================================================================
   Modal
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(2,1,10,.72); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay.is-open { display: flex; }
.modal {
  position: relative; width: 100%; max-width: 480px;
  background: var(--card-bg); border: 1px solid var(--border-strong);
  border-radius: 18px; padding: 40px; box-shadow: 0 40px 80px rgba(0,0,0,.5);
}
.modal__close {
  position: absolute; top: 18px; right: 18px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border-strong); color: #fff;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px;
}
.modal h2 { font-size: 22px; margin-bottom: 24px; }
.modal__thanks { text-align: center; padding: 20px 0; }
.modal__thanks-title { font-family: var(--font-heading); font-size: 19px; color: var(--teal-light); font-weight: 700; margin-bottom: 8px; }
.modal__thanks-body { color: rgba(255,255,255,.7); font-size: 14px; }

/* ==========================================================================
   Forms (modal + inline contact)
   ========================================================================== */
.form { display: flex; flex-direction: column; gap: 14px; }
.form input, .form textarea {
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 14px 16px; color: #fff; font-size: 14px; font-family: var(--font-body); width: 100%;
}
.form input::placeholder, .form textarea::placeholder { color: rgba(255,255,255,.5); }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--purple); }
.form textarea { resize: vertical; }
.form button[type="submit"] { margin-top: 4px; }
.form button[type="submit"]:disabled { background: rgba(255,255,255,.12); color: var(--bg); cursor: not-allowed; }

/* Anti-spam honeypot. Off-canvas rather than display:none or a hidden input:
   bots that skip type="hidden" and invisible fields will still fill a plain
   text input that is technically in the layout. Real users never see it, and
   aria-hidden + tabindex="-1" on the markup keep it out of the a11y tree and
   the tab order. A filled value means the submission is dropped server-side. */
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inline submit failure (network error, ACS down, rate limit). Sits above the
   button so it can't be missed. --status-critical clears AA on both the modal
   and contact-card backgrounds. */
.form__error {
  margin: 0;
  color: var(--status-critical);
  font-size: 13px;
  line-height: 1.45;
}
.form input.is-invalid, .form textarea.is-invalid { border-color: var(--status-critical); }

.contact-card { background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 18px; padding: 40px; box-shadow: 0 40px 80px rgba(0,0,0,.35); }

.contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-card { padding: 28px; }
}

/* ==========================================================================
   About: team strip, elite-partners off-white section, quote panel
   ========================================================================== */
.about-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.about-intro__visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; }

.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.team-grid img { width: 100%; height: 260px; object-fit: cover; border-radius: 16px; display: block; }

.about-card {
  position: relative; z-index: 2; background: var(--card-bg); border: 1px solid var(--border-strong);
  border-radius: 18px; padding: 40px 48px; box-shadow: 0 0 60px rgba(139,92,246,.35);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.about-card img.logo-primary { height: 34px; }
.about-card__label { font-size: 11px; color: rgba(255,255,255,.5); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.about-card img.logo-secondary { height: 38px; }

.misa-card-wrap { position: relative; display: inline-flex; }
.misa-card-wrap__glow {
  position: absolute; inset: -15px;
  background: radial-gradient(circle, rgba(102,0,237,.4) 0%, rgba(102,0,237,.2) 40%, rgba(102,0,237,.06) 70%, transparent 90%);
  filter: blur(14px);
}
.misa-card { position: relative; z-index: 2; background: #fff; border-radius: 18px; padding: 48px; box-shadow: 0 20px 60px rgba(102,0,237,.25); display: flex; align-items: center; justify-content: center; }
.misa-card img { width: 100%; max-width: 360px; display: block; }

.badge-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 40px; padding-top: 40px; position: relative; z-index: 2; }
.badge-row img { object-fit: contain; }

.elite-partners-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.elite-partners-panel__visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; }

@media (max-width: 900px) {
  .elite-partners-panel { grid-template-columns: 1fr; }
  .elite-partners-panel__visual { padding: 8px 0 0; }
  .elite-partners-panel .misa-card { padding: 28px; }
  .elite-partners-panel .misa-card img { max-width: 220px; }
}

.quote-panel { padding: 100px 48px; position: relative; overflow: hidden; }
.quote-panel__text { font-family: var(--font-heading); font-weight: 500; font-size: 23px; line-height: 1.55; color: #fff; margin: 0 0 28px; }
.quote-panel__attr { font-size: 14px; color: var(--body-on-dark-faint); }

.white-glow-card {
  position: relative; z-index: 2; background: #fff; border-radius: 18px; padding: 48px;
  box-shadow: 0 0 60px rgba(47,217,180,.35); display: flex; align-items: center; justify-content: center;
}

.about-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-teaser__visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; }

@media (max-width: 900px) {
  .about-teaser { grid-template-columns: 1fr; }
  .about-teaser__visual { padding: 8px 0 0; }
  .about-teaser .white-glow-card { padding: 28px; }
  .about-teaser .white-glow-card img { max-width: 220px; }
}

/* ==========================================================================
   Utility
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.text-max-540 { max-width: 540px; }
.text-max-520 { max-width: 520px; }
.text-max-680 { max-width: 680px; }

/* Light scroll-triggered "pop up" for page sections — see scroll-reveal.js.
   Elements are only ever hidden by .is-pending, which JS adds itself, so
   content stays visible by default if JS fails to load or run. */
[data-reveal] { transition: opacity .5s ease-out, transform .5s ease-out; }
[data-reveal].is-pending { opacity: 0; transform: translateY(20px); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 960px) {
  .hero__grid, .about-card ~ .hero__grid { grid-template-columns: 1fr; }
  .stats-grid, .stat-3col { grid-template-columns: repeat(2,1fr); }
  .about-intro { grid-template-columns: 1fr; }
  .about-intro__visual { padding: 8px 0 0; }
  /* A 2-up grid at a fixed 260px height crops each photo to a tall, narrow
     sliver on phone widths. A horizontal scroll-snap carousel shows one full
     photo at a time instead — pure CSS, no JS needed for native swipe. */
  .team-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 12px; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .team-grid::-webkit-scrollbar { display: none; }
  .team-grid img { flex: 0 0 100%; scroll-snap-align: center; height: auto; aspect-ratio: 4 / 3; }
  .platform-hero-badge { display: none; }
}
@media (max-width: 640px) {
  .section, .hero { padding-left: 24px; padding-right: 24px; }
  .site-nav { padding: 0 20px; }
  .stats-grid, .stat-3col { grid-template-columns: 1fr; }
  .service-cards { grid-template-columns: 1fr; }
  h1 { font-size: 32px; }
}

/* ==========================================================================
   Portal walkthrough video (site/assets/video/portal-walkthrough.mp4) —
   autoplay/loop product demo, replacing the old static portal-ui mock.
   Same dark-card/glow-ring frame treatment as before.
   ========================================================================== */
.hero-rise__portal-video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Static-flow frame for the video outside the hero's absolute-positioned
   context (e.g. Platform page) — same dark card + glow-ring treatment as the
   hero portal, without the hero's position/height assumptions. aspect-ratio
   matches the video's native 1920x872 so the frame sizes itself without JS. */
.portal-ui-frame {
  position: relative; z-index: 1;
  background: #0A0518; border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(139,92,246,.25);
  aspect-ratio: 1920 / 872;
}
.portal-ui-frame__video { width: 100%; height: 100%; object-fit: contain; display: block; }