/* ==========================================================================
   PartnerPips.com — Global Forex & CFD Partnership Network
   Visual system built on the brand mark: deep navy, electric blue, emerald,
   and the ascending "pip bars" motif taken from between the two P's.
   --------------------------------------------------------------------------
   01  Tokens
   02  Reset & base
   03  Typography & layout primitives
   04  Brand elements (pip bars, eyebrow, logo)
   05  Buttons & links
   06  Ambient layers (grid, noise, cursor, preloader)
   07  Navigation & mobile menu
   08  Hero + statistics
   09  About
   10  Ecosystem & solutions cards
   11  Network constellation
   12  Process steps
   13  Why PartnerPips
   14  Growth visualisation
   15  Partners logo wall
   16  Testimonials
   17  Closing CTA
   18  Contact form
   19  Footer
   20  Responsive
   21  Reduced motion & print
   ========================================================================== */

/* ==========================================================================
   01  TOKENS
   ========================================================================== */
:root {
  /* Height of the hero's visual band on stacked layouts */
  --hero-visual-h: min(46vh, 460px);

  /* Brand — sampled directly from the PartnerPips logo */
  --c-navy-950: #010B1C;
  --c-navy-900: #02102A;
  --c-navy-850: #011530;   /* logo navy */
  --c-navy-800: #04203F;
  --c-navy-700: #0A2C50;

  --c-blue:     #0057FF;   /* logo electric blue */
  --c-blue-400: #3B82FF;
  --c-blue-300: #7AA9FF;

  --c-emerald:  #00A575;   /* logo emerald */
  --c-emerald-400: #10C98F;
  --c-emerald-300: #5EEAC0;

  /* Ink */
  --c-ink:      #EDF2FB;
  --c-ink-soft: #C3D1E6;
  --c-muted:    #8CA1BE;
  --c-dim:      #5E7391;

  /* Surfaces */
  --s-1: rgba(255,255,255,.022);
  --s-2: rgba(255,255,255,.038);
  --s-3: rgba(255,255,255,.06);
  --line:        rgba(255,255,255,.075);
  --line-strong: rgba(255,255,255,.14);
  --line-faint:  rgba(255,255,255,.04);

  /* Effects */
  --glow-blue:    0 0 0 1px rgba(0,87,255,.28), 0 18px 60px -18px rgba(0,87,255,.55);
  --glow-emerald: 0 0 0 1px rgba(0,165,117,.28), 0 18px 60px -18px rgba(0,165,117,.45);
  --shadow-card:  0 1px 0 0 rgba(255,255,255,.05) inset, 0 30px 70px -35px rgba(0,0,0,.9);
  --shadow-lift:  0 40px 90px -40px rgba(0,20,60,.95), 0 0 0 1px rgba(255,255,255,.09) inset;

  /* Type */
  --f-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(5.5rem, 11vw, 10.5rem);
  --radius: 18px;
  --radius-sm: 12px;

  /* Motion */
  --e-out:   cubic-bezier(.22, 1, .36, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .25s var(--e-out);
  --t-base: .45s var(--e-out);
  --t-slow: .8s var(--e-out);
}

/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-navy-950);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* Base ambience: a deep well of navy with two distant light sources */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% -8%,  rgba(0,87,255,.20)  0%, transparent 58%),
    radial-gradient(90%  70% at 8%  102%, rgba(0,165,117,.13) 0%, transparent 60%),
    radial-gradient(140% 120% at 50% 40%, rgba(1,21,48,.9) 0%, var(--c-navy-950) 72%);
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; margin: 0; padding: 0; }
figure, blockquote, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(0,87,255,.42); color: #fff; }

:focus-visible {
  outline: 2px solid var(--c-blue-400);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 999;
  padding: .8rem 1.4rem;
  background: var(--c-blue);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  border-radius: 0 0 10px 10px;
  transition: transform var(--t-fast);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--c-navy-950); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--c-blue), var(--c-emerald));
  border: 3px solid var(--c-navy-950);
  border-radius: 10px;
}

/* ==========================================================================
   03  TYPOGRAPHY & LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}

.h2 {
  font-size: clamp(2.05rem, 4.6vw, 3.6rem);
  color: var(--c-ink);
}
.h1-alt {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: .98;
}

.lede { font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: var(--c-ink-soft); }

.section-head { max-width: 52rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__lede {
  margin: 1.6rem 0 0;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  color: var(--c-muted);
  max-width: 40rem;
  line-height: 1.75;
}
.section-head--center .section-head__lede { margin-inline: auto; }

/* Split-text reveal primitives (JS adds .line/.word wrappers) */
.split-line {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.split-line > span { display: block; will-change: transform; }
/* Hidden until JS has measured and split it; released again by .reduced-motion
   or by the safety net in <head> if the scripts never run. */
html.js:not(.reduced-motion) [data-split], 
html.js:not(.reduced-motion) [data-reveal-text] { opacity: 0; }
html.js [data-split].is-split,
html.js [data-reveal-text].is-split { opacity: 1; }

/* ==========================================================================
   04  BRAND ELEMENTS
   ========================================================================== */

/* Pip bars — the ascending emerald slabs from the logo mark */
.pip-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
}
.pip-bars i {
  display: block;
  width: 4px;
  height: 40%;
  transform: skewX(-14deg);
  background: linear-gradient(180deg, var(--c-emerald-400), var(--c-emerald));
  border-radius: 1px;
}
.pip-bars i:nth-child(2) { height: 62%; }
.pip-bars i:nth-child(3) { height: 84%; }
.pip-bars i:nth-child(4) { height: 100%; }
.pip-bars--lg { height: 40px; gap: 6px; }
.pip-bars--lg i { width: 9px; }

/* Eyebrow label */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.4rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.eyebrow--center { justify-content: center; }
.eyebrow__bar {
  width: 26px; height: 8px;
  flex: none;
  background:
    linear-gradient(90deg, var(--c-blue) 0 6px, transparent 6px 10px,
                           var(--c-emerald) 10px 16px, transparent 16px 20px,
                           var(--c-emerald-400) 20px 26px);
  transform: skewX(-14deg);
}

/* Logo lock-up */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding-block: .25rem;   /* keeps the tap target at least 24px tall */
  color: var(--c-ink);
}
.brand__mark { width: auto; height: 26px; flex: none; }
.brand__word { width: auto; height: 17px; flex: none; }
.brand--footer .brand__mark { height: 34px; }
.brand--footer .brand__word { height: 22px; }
@media (max-width: 480px) {
  .brand__mark { height: 22px; }
  .brand__word { height: 14px; }
}

/* ==========================================================================
   05  BUTTONS & LINKS
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.5rem;
  border-radius: 100px;
  font-family: var(--f-body);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: transform .35s var(--e-out), box-shadow .35s var(--e-out),
              border-color .35s var(--e-out), color .35s var(--e-out);
  will-change: transform;
}
.btn > span { position: relative; z-index: 2; }
.btn__arrow {
  position: relative;
  z-index: 2;
  width: 15px; height: 15px;
  flex: none;
  transition: transform .4s var(--e-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--sm { padding: .62rem 1.15rem; font-size: .84rem; }
.btn--lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* Primary — electric blue with an emerald wash that sweeps in on hover */
.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--c-blue) 0%, #0043D6 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset,
              0 14px 34px -14px rgba(0,87,255,.85);
}
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, #0069FF 0%, var(--c-emerald) 140%);
  opacity: 0;
  transition: opacity .45s var(--e-out);
}
.btn--primary:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
              0 20px 46px -14px rgba(0,87,255,.95);
}
.btn--primary:hover::before { opacity: 1; }

/* Ghost — hairline glass */
.btn--ghost {
  color: var(--c-ink);
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.028);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 140% at 50% 120%, rgba(0,87,255,.35), transparent 65%);
  opacity: 0;
  transition: opacity .45s var(--e-out);
}
.btn--ghost:hover { border-color: rgba(122,169,255,.5); }
.btn--ghost:hover::before { opacity: 1; }

.btn:active { transform: scale(.98); }

/* JS drives the transform on magnetic elements — exclude it from the
   CSS transition so the two do not fight each other every frame. */
[data-magnetic] { transition-property: box-shadow, border-color, color, background; }
[data-magnetic]:active { transform: none; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* Loading state */
.btn.is-loading .btn__label { opacity: .35; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  z-index: 3;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Animated-underline link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 2.4rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--c-ink);
}
.link-arrow span { position: relative; padding-bottom: 3px; }
.link-arrow span::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-emerald));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--e-out);
}
.link-arrow:hover span::after { transform: scaleX(1); transform-origin: left; }
.link-arrow svg { width: 15px; height: 15px; transition: transform .4s var(--e-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   06  AMBIENT LAYERS
   ========================================================================== */

/* Institutional hairline column grid */
.page-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  justify-content: space-between;
  width: min(var(--container), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.page-grid span {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.038) 20%,
                                       rgba(255,255,255,.038) 80%, transparent);
}
@media (max-width: 767px) { .page-grid span:nth-child(n+4) { display: none; } }

/* Film grain */
.page-noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Custom cursor (fine pointers only, enabled by JS) */
.cursor { display: none; }
@media (pointer: fine) {
  html.has-cursor .cursor {
    display: block;
    position: fixed;
    top: 0; left: 0;
    z-index: 9999;
    pointer-events: none;
    mix-blend-mode: difference;
  }
  html.has-cursor * { cursor: none !important; }
  .cursor__dot,
  .cursor__ring {
    position: absolute;
    top: 0; left: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .cursor__dot { width: 6px; height: 6px; background: #fff; }
  .cursor__ring {
    width: 34px; height: 34px;
    border: 1px solid rgba(255,255,255,.6);
    transition: width .3s var(--e-out), height .3s var(--e-out),
                border-color .3s var(--e-out), opacity .3s var(--e-out);
  }
  .cursor.is-hover .cursor__ring { width: 58px; height: 58px; border-color: #fff; }
  .cursor.is-hover .cursor__dot { opacity: 0; }
  .cursor.is-down .cursor__ring { width: 26px; height: 26px; }
}

/* Preloader */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: var(--c-navy-950);
}
.preloader__inner { display: grid; justify-items: center; gap: 1.4rem; }
.preloader__logo {
  width: min(260px, 62vw);
  height: auto;
}
.preloader__progress { width: min(260px, 62vw); }
.preloader__meta {
  display: flex;
  justify-content: space-between;
  margin: 0 0 .7rem;
  font-family: var(--f-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-dim);
}
.preloader__meta i { font-style: normal; color: var(--c-ink-soft); }
.preloader__track {
  width: 100%; height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
}
/* Width is driven frame-by-frame from JS rather than by a CSS transition, so the
   bar still moves smoothly when transitions are disabled for reduced motion. */
.preloader__track span {
  display: block;
  width: 0%; height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-emerald));
  box-shadow: 0 0 14px rgba(0, 87, 255, .65);
}
.preloader.is-done { pointer-events: none; }
html.is-loading body { overflow: hidden; }

/* ==========================================================================
   07  NAVIGATION
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  transition: background .5s var(--e-out), border-color .5s var(--e-out),
              backdrop-filter .5s var(--e-out), transform .5s var(--e-out);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 1.35rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 2rem;
  transition: padding .5s var(--e-out);
}
.nav.is-scrolled {
  background: rgba(2,12,30,.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav.is-scrolled .nav__inner { padding-block: .85rem; }
.nav.is-hidden { transform: translateY(-100%); }

.nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
}
.nav__link {
  position: relative;
  padding: .5rem .85rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--c-muted);
  border-radius: 100px;
  transition: color var(--t-fast);
  white-space: nowrap;
}
.nav__link:hover { color: var(--c-ink); }
.nav__link.is-active { color: var(--c-ink); }
.nav__indicator {
  position: absolute;
  left: 0; top: 50%;
  height: 32px;
  border-radius: 100px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: transform .5s var(--e-out), width .5s var(--e-out), opacity .3s;
}
.nav__indicator.is-visible { opacity: 1; }

.nav__actions { display: flex; align-items: center; gap: .9rem; }

/* Hamburger */
.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  position: relative;
}
.nav__toggle span {
  position: absolute;
  left: 50%; top: 50%;
  width: 17px; height: 1.5px;
  background: var(--c-ink);
  border-radius: 2px;
  transition: transform .45s var(--e-out), width .45s var(--e-out);
}
.nav__toggle span:nth-child(1) { transform: translate(-50%, -4px); }
.nav__toggle span:nth-child(2) { transform: translate(-50%, 4px); width: 11px; }
.nav__toggle.is-open span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); width: 17px; }

/* Scroll progress hairline */
.nav__progress {
  height: 1.5px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--c-blue), var(--c-emerald));
  opacity: 0;
  transition: opacity .4s;
}
.nav.is-scrolled .nav__progress { opacity: 1; }

/* Mobile overlay menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 490;
  visibility: hidden;
  pointer-events: none;
}
.menu.is-open { visibility: visible; pointer-events: auto; }
.menu__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(0,87,255,.22), transparent 60%),
    radial-gradient(70% 50% at 10% 100%, rgba(0,165,117,.16), transparent 60%),
    #020D22;
  clip-path: circle(0% at calc(100% - 46px) 46px);
  transition: clip-path .8s var(--e-inout);
}
.menu.is-open .menu__bg { clip-path: circle(160% at calc(100% - 46px) 46px); }

.menu__nav {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  padding: 6rem var(--gutter) 3rem;
  overflow-y: auto;
}
.menu__nav ul { display: grid; gap: .35rem; }
.menu__nav li { overflow: hidden; }
.menu__nav ul a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .35rem 0;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 8.5vw, 3rem);
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--c-ink);
  transform: translateY(105%);
  transition: color var(--t-fast);
}
.menu__nav ul a em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--c-blue-400);
}
.menu__nav ul a:hover { color: var(--c-blue-300); }
.menu__foot { display: grid; gap: 1.1rem; justify-items: start; }
.menu__note {
  margin: 0;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-dim);
}

/* ==========================================================================
   08  HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(6.5rem, 12vh, 9rem);
  padding-bottom: 4.5rem;
  overflow: hidden;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
/* Keeps the headline readable over the WebGL globe */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, var(--c-navy-950) 4%, rgba(1,11,28,.88) 26%,
                            rgba(1,11,28,.34) 43%, transparent 55%),
    linear-gradient(0deg, var(--c-navy-950) 2%, transparent 30%);
}
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 3rem;
  flex: 1;
}
.hero__content { max-width: 40rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 2rem;
  padding: .5rem 1rem .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--f-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.badge__pulse {
  position: relative;
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--c-emerald-400);
}
.badge__pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c-emerald-400);
  animation: pulse 2.4s var(--e-out) infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

.hero__title {
  font-size: clamp(2.6rem, 6.6vw, 5.4rem);
  font-weight: 600;
  line-height: .99;
  letter-spacing: -.042em;
  margin: 0 0 1.5rem;
}
/* "Future" picks up the brand gradient — the one place it earns the emphasis */
.hero__title .grad {
  background: linear-gradient(104deg, var(--c-blue-300) 0%, var(--c-blue) 38%, var(--c-emerald-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede {
  margin: 0 0 2.2rem;
  font-size: clamp(1.02rem, 1.45vw, 1.22rem);
  line-height: 1.7;
  color: var(--c-ink-soft);
  max-width: 34rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__tagline {
  margin: 2.1rem 0 0;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-dim);
}
.hero__tagline i { font-style: normal; color: var(--c-blue); padding-inline: .35rem; }

/* --------------------------------------------------------------------------
   Hero visual — the global coverage instrument.

   .globe is an empty square box: the WebGL globe is framed into it from
   three-scenes.js (the canvas itself is full-bleed, so its halo can still
   spill across the hero), and everything below is the dial drawn around it.
   The wireframe stand-in carries the composition on its own if WebGL is
   unavailable, so this column is never empty.
   -------------------------------------------------------------------------- */
.hero__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 2.2vw, 1.9rem);
  height: 100%;
  min-height: 400px;
}
.globe {
  position: relative;
  flex: none;
  width: min(100%, 30rem);
  aspect-ratio: 1;
}
.globe > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Stand-in globe — retired as soon as the WebGL scene paints over it. */
.globe__wire { transition: opacity .6s var(--e-out); }
.globe.has-webgl .globe__wire { opacity: 0; }

.globe__dial-ticks {
  stroke: rgba(122,169,255,.34);
  stroke-width: .9;
  stroke-dasharray: 1 6.54;   /* 80 marks around a 603-unit circumference */
}
.globe__dial-rim   { stroke: rgba(255,255,255,.085); stroke-width: 1; }
.globe__dial-inner { stroke: rgba(255,255,255,.05);  stroke-width: 1; stroke-dasharray: 2 7; }
.globe__dial-scan {
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 64 540;
  transform-origin: 100px 100px;
  animation: globe-scan 14s linear infinite;
}
@keyframes globe-scan { to { transform: rotate(360deg); } }

/* Session pins ride the bezel band between the globe's limb and the rim. */
.globe__sessions { position: absolute; inset: 0; }
.gsession {
  position: absolute;
  inset: 0;
  transform: rotate(var(--a));
}
.gsession__pin {
  position: absolute;
  top: 8%;                 /* → a radius of 42% of the box */
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .28rem .5rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(2,16,42,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--f-mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--c-muted);
  white-space: nowrap;
  /* Undo the parent's rotation so the label stays upright on the ring. */
  transform: translate(-50%, -50%) rotate(calc(var(--a) * -1));
  transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.gsession__pin i {
  width: 5px; height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--c-muted);
  transition: background var(--t-base), box-shadow var(--t-base);
}
/* Open market */
.gsession.is-open .gsession__pin {
  color: var(--c-ink);
  border-color: rgba(16,201,143,.42);
  background: rgba(2,32,26,.78);
}
.gsession.is-open .gsession__pin i {
  background: var(--c-emerald-400);
  box-shadow: 0 0 0 3px rgba(16,201,143,.16), 0 0 12px rgba(16,201,143,.7);
}

/* Readout under the dial */
.globe__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  margin: 0;
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-dim);
  text-align: center;
}
.globe__meta b { font-weight: 500; color: var(--c-ink-soft); }
.globe__meta-live { display: inline-flex; align-items: center; gap: .45rem; }
.globe__meta-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-emerald-400);
  box-shadow: 0 0 10px rgba(16,201,143,.8);
}
/* Outside session hours the readout stops claiming to be live. */
.globe__meta-live[data-closed] .globe__meta-dot {
  background: var(--c-dim);
  box-shadow: none;
}
.globe__meta-sep { color: var(--c-blue); opacity: .55; }

/* Hero statistics */
.stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
  border-top: 1px solid var(--line);
  background: var(--line-faint);
}
.stat {
  position: relative;
  padding: 1.7rem 1.5rem 1.4rem 0;
  background: var(--c-navy-950);
  transition: background var(--t-base);
}
.stat + .stat { padding-left: 1.5rem; }
.stat::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-emerald));
  transition: width .6s var(--e-out);
}
.stat:hover::before { width: 100%; }
.stat__label {
  display: block;
  margin-bottom: .7rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-dim);
}
.stat__value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.1vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--c-ink);
}
.stat__value em {
  font-family: var(--f-body);
  font-style: normal;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-muted);
}

/* Scroll cue */
.hero__scroll {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .25rem;
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-dim);
  transition: color var(--t-fast);
}
.hero__scroll:hover { color: var(--c-ink-soft); }
.hero__scroll-line {
  width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-blue));
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-emerald-400);
  animation: sweep 2.6s var(--e-inout) infinite;
}
@keyframes sweep {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@media (max-width: 900px) { .hero__scroll { display: none; } }

/* ==========================================================================
   09  ABOUT
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
}
.about__body { margin-top: 2rem; display: grid; gap: 1.15rem; }
.about__body p { margin: 0; color: var(--c-muted); line-height: 1.8; }
.about__body .lede { color: var(--c-ink-soft); line-height: 1.7; }

.about__points {
  margin-top: 2.4rem;
  display: grid;
  gap: .9rem;
  border-top: 1px solid var(--line-faint);
  padding-top: 1.8rem;
}
.about__points li {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .95rem;
  color: var(--c-ink-soft);
}
.about__point-mark {
  width: 16px; height: 9px;
  flex: none;
  transform: skewX(-14deg);
  background: linear-gradient(90deg, var(--c-blue), var(--c-emerald));
  opacity: .85;
}

.about__visual { position: relative; }
.about__canvas-wrap {
  position: relative;
  aspect-ratio: 1 / 1.06;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 50% 40%, rgba(0,87,255,.1), transparent 65%),
    linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.about__canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Corner brackets */
.about__frame { position: absolute; inset: 14px; pointer-events: none; }
.about__frame i {
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid rgba(255,255,255,.16);
}
.about__frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.about__frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.about__frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.about__frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.about__caption {
  position: absolute;
  left: 26px; bottom: 24px;
  margin: 0;
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-dim);
}

/* ==========================================================================
   10  CARDS (ecosystem + solutions)
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.15rem;
}
.cards--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  position: relative;
  isolation: isolate;
  padding: 2rem 1.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.014)),
    rgba(3,17,40,.5);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: border-color .5s var(--e-out), box-shadow .5s var(--e-out),
              background .5s var(--e-out);
  will-change: transform;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(165deg, rgba(0,87,255,.16), rgba(0,165,117,.07) 55%, transparent 80%);
  opacity: 0;
  transition: opacity .55s var(--e-out);
}
.card:hover {
  border-color: rgba(122,169,255,.32);
  box-shadow: var(--shadow-lift);
}
.card:hover::before { opacity: 1; }

/* Corner ticks */
.card__corners { position: absolute; inset: 12px; pointer-events: none; z-index: 3; }
.card__corners i {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--c-blue-400);
  opacity: 0;
  transition: opacity .45s var(--e-out), transform .45s var(--e-out);
}
.card__corners i:nth-child(1) { top: 0; left: 0;  border-right: 0; border-bottom: 0; transform: translate(6px, 6px); }
.card__corners i:nth-child(2) { top: 0; right: 0; border-left: 0;  border-bottom: 0; transform: translate(-6px, 6px); }
.card__corners i:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; transform: translate(6px, -6px); }
.card__corners i:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; transform: translate(-6px, -6px); }
.card:hover .card__corners i,
.form-card:hover .card__corners i { opacity: .75; transform: translate(0, 0); }

/* Radial glow that follows the pointer (JS sets --mx/--my) */
.card__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
                              rgba(0,87,255,.25), transparent 70%);
  transition: opacity .4s var(--e-out);
}
.card:hover .card__glow { opacity: 1; }

.card__icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  color: var(--c-blue-300);
  transition: color .45s var(--e-out), border-color .45s var(--e-out),
              transform .55s var(--e-out), background .45s var(--e-out);
}
.card__icon svg { width: 26px; height: 26px; }
.card:hover .card__icon {
  color: var(--c-emerald-300);
  border-color: rgba(0,165,117,.4);
  background: rgba(0,165,117,.1);
  transform: translateY(-3px) rotate(-4deg);
}

.card__title {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.025em;
  margin: 0 0 .6rem;
}
.card__text { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--c-muted); }

/* Hover-revealed detail (grid-rows trick keeps the animation smooth) */
.card--eco {
  display: flex;
  flex-direction: column;
  min-height: 21.5rem;
}
/* The card reserves room for the detail up front, so revealing it never
   resizes the card or shifts the grid row. */
.card__reveal {
  margin-top: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s var(--e-out), transform .45s var(--e-out);
}
.card:hover .card__reveal,
.card:focus-within .card__reveal { opacity: 1; transform: none; }

/* No hover to give: show the detail permanently. */
@media (hover: none) {
  .card__reveal { opacity: 1; transform: none; }
}
.card__reveal p {
  margin: 1.4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-faint);
  font-size: .87rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
}
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .9rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-emerald-300);
}
.card__cta svg { width: 13px; height: 13px; }

/* Solutions cards read a little quieter */
.card--sol { padding: 1.9rem 1.6rem 2rem; }
.card--sol .card__icon { width: 46px; height: 46px; margin-bottom: 1.3rem; }
.card--sol .card__icon svg { width: 23px; height: 23px; }

/* ==========================================================================
   11  NETWORK CONSTELLATION
   ========================================================================== */
.network { overflow: hidden; }
.network__particles {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: .6;
  pointer-events: none;
}
.network .container { position: relative; z-index: 2; }

.constellation {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  aspect-ratio: 1000 / 620;
  will-change: transform;
}
.constellation__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.constellation__paths path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .72; }
.constellation__paths path.is-drawn { stroke-dashoffset: 0; }
.constellation__paths path.is-lit { opacity: 1; stroke-width: 1.9; }

/* Central hub */
.constellation__hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.hub__core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.4rem 1.9rem;
  border-radius: 16px;
  border: 1px solid rgba(122,169,255,.35);
  background: linear-gradient(160deg, rgba(0,87,255,.24), rgba(1,21,48,.92));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(0,87,255,.2), 0 30px 80px -30px rgba(0,87,255,.85);
}
.hub__mark {
  width: auto;
  height: clamp(30px, 4vw, 40px);
  flex: none;
}
.hub__word {
  width: auto;
  height: clamp(15px, 2.1vw, 20px);
  flex: none;
}
.hub__ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 150px; height: 150px;
  margin: -75px 0 0 -75px;
  border: 1px solid rgba(0,87,255,.35);
  border-radius: 50%;
  animation: ripple 4.5s var(--e-out) infinite;
}
.hub__ripple--2 { animation-delay: 2.25s; }
@keyframes ripple {
  0%   { transform: scale(.65); opacity: .85; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Satellite nodes */
.node {
  position: absolute;
  left: var(--x); top: var(--y);
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .95rem .55rem .7rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(2,14,34,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
  cursor: default;
  z-index: 2;
  transition: border-color var(--t-base), background var(--t-base),
              box-shadow var(--t-base), transform var(--t-base);
}
.node:hover {
  border-color: rgba(94,234,192,.5);
  background: rgba(0,165,117,.14);
  box-shadow: 0 12px 40px -14px rgba(0,165,117,.7);
  transform: scale(1.05);
}
.node__dot {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--c-blue-400);
  box-shadow: 0 0 0 4px rgba(0,87,255,.16);
  transition: background var(--t-base), box-shadow var(--t-base);
}
.node:hover .node__dot {
  background: var(--c-emerald-400);
  box-shadow: 0 0 0 5px rgba(0,165,117,.2);
}
.node__label {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--c-ink-soft);
}

/* ==========================================================================
   12  PROCESS STEPS
   ========================================================================== */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-top: 3.5rem;
}
/* Sits on the dot centres: steps padding + dot offset + half the dot,
   less half the 4px-tall SVG. */
.steps__line {
  position: absolute;
  top: calc(6.05rem + 4.5px);
  left: 0; right: 0;
  width: 100%;
  height: 4px;
  overflow: visible;
}
.steps__line-draw {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}

.step { position: relative; padding-right: 1.2rem; }
.step__num {
  display: block;
  margin-bottom: 3.4rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--c-blue-400);
}
.step__dot {
  position: absolute;
  top: 2.55rem; left: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--c-navy-950);
  border: 2px solid var(--c-blue);
  transform: scale(0);
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out),
              border-color .5s var(--e-out);
}
.step.is-active .step__dot {
  transform: scale(1);
  box-shadow: 0 0 0 6px rgba(0,87,255,.14);
}
.step:last-child.is-active .step__dot {
  border-color: var(--c-emerald);
  box-shadow: 0 0 0 6px rgba(0,165,117,.16);
}
.step__title {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 0 0 .7rem;
}
.step__text { margin: 0; font-size: .93rem; line-height: 1.7; color: var(--c-muted); }

/* ==========================================================================
   13  WHY PARTNERPIPS
   ========================================================================== */
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: start;
}
.why__head { position: sticky; top: 8rem; }
.why__lede {
  margin: 1.8rem 0 0;
  max-width: 28rem;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.75;
  color: var(--c-muted);
}

.why__list { border-top: 1px solid var(--line-faint); }
.why__item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding: 1.5rem .5rem;
  border-bottom: 1px solid var(--line-faint);
  transition: padding-left .5s var(--e-out), background .5s var(--e-out);
}
.why__item::before {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-emerald));
  transition: width .7s var(--e-out);
}
.why__item:hover { padding-left: 1.4rem; background: rgba(255,255,255,.018); }
.why__item:hover::before { width: 100%; }
.why__idx {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--c-dim);
  transition: color .4s var(--e-out);
}
.why__item:hover .why__idx { color: var(--c-emerald-300); }
.why__text {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  font-weight: 500;
  letter-spacing: -.028em;
  color: var(--c-ink);
}

/* ==========================================================================
   14  GROWTH VISUALISATION
   ========================================================================== */
.growth { position: relative; overflow: hidden; }
.growth__chart {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .95;
  pointer-events: none;
}
.growth__chart svg { width: 100%; height: 100%; }
#growthLine { stroke-dasharray: 2400; stroke-dashoffset: 2400; }
#growthArea { opacity: 0; }

.growth__inner { position: relative; z-index: 2; }
.growth .section-head { margin-bottom: clamp(14rem, 30vw, 22rem); }

.growth__tags { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.growth__tag {
  position: absolute;
  left: var(--gx); top: var(--gy);
  translate: -50% -50%;
  padding: .45rem .9rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(2,14,34,.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  white-space: nowrap;
  will-change: transform;
}
.growth__tag::before {
  content: '';
  position: absolute;
  left: -4px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--c-emerald-400);
  box-shadow: 0 0 12px rgba(16,201,143,.9);
}
.growth__disclaimer {
  position: relative;
  z-index: 2;
  margin: 3rem 0 0;
  max-width: 34rem;
  font-size: .76rem;
  line-height: 1.6;
  color: var(--c-dim);
}

/* ==========================================================================
   15  PARTNERS LOGO WALL
   ========================================================================== */
.logo-wall {
  position: relative;
  overflow: hidden;
  padding-block: 1.4rem;
  border-block: 1px solid var(--line-faint);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logo-wall + .logo-wall { border-top: 0; }
.logo-wall__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  width: max-content;
  will-change: transform;
}
.logo-wall__item { flex: none; }
.logo-wall__text {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(237,242,251,.3);
  white-space: nowrap;
  transition: color var(--t-base), text-shadow var(--t-base);
}
.logo-wall__item:hover .logo-wall__text {
  color: var(--c-ink);
  text-shadow: 0 0 30px rgba(0,87,255,.55);
}
/* Real logos drop in here */
.logo-wall__img { height: 30px; width: auto; opacity: .35; filter: grayscale(1) brightness(2); transition: opacity var(--t-base); }
.logo-wall__item:hover .logo-wall__img { opacity: 1; }

.partners__note {
  margin: 2.6rem 0 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-dim);
}

/* ==========================================================================
   16  TESTIMONIALS
   ========================================================================== */
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; border-radius: var(--radius); }
.carousel__track {
  display: flex;
  transition: transform .8s var(--e-inout);
  will-change: transform;
}
.slide { flex: 0 0 100%; min-width: 0; padding-right: 0; }

.quote {
  position: relative;
  padding: clamp(2.2rem, 5vw, 3.6rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  box-shadow: var(--shadow-card);
}
.quote__mark {
  position: absolute;
  top: 1rem; right: 2.2rem;
  font-family: var(--f-display);
  font-size: 7rem;
  line-height: 1;
  color: rgba(0,87,255,.16);
}
.quote p {
  position: relative;
  margin: 0 0 2.4rem;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.7vw, 2.05rem);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -.03em;
  color: var(--c-ink);
  max-width: 40rem;
  text-wrap: pretty;
}
.quote__by {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line-faint);
}
.quote__avatar {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: linear-gradient(150deg, rgba(0,87,255,.28), rgba(0,165,117,.18));
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--c-ink);
}
.quote__name { display: block; font-size: .95rem; font-weight: 600; }
.quote__role,
.quote__company { font-size: .82rem; color: var(--c-muted); }
.quote__role::after { content: ' · '; color: var(--c-dim); }

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
}
.carousel__dots { display: flex; gap: .5rem; }
/* The visible bar is 3px; the button keeps a 24px-tall hit area around it. */
.carousel__dot {
  display: flex;
  align-items: center;
  width: 30px;
  height: 24px;
  padding: 0;
  transition: width var(--t-base);
}
.carousel__dot::before {
  content: '';
  display: block;
  width: 100%; height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.14);
  transition: background var(--t-base);
}
.carousel__dot.is-active { width: 52px; }
.carousel__dot.is-active::before {
  background: linear-gradient(90deg, var(--c-blue), var(--c-emerald));
}
.carousel__arrows { display: flex; gap: .6rem; }
.carousel__btn {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--c-ink);
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.carousel__btn svg { width: 16px; height: 16px; }
.carousel__btn:hover {
  background: rgba(0,87,255,.16);
  border-color: rgba(122,169,255,.5);
}

/* ==========================================================================
   17  CLOSING CTA
   ========================================================================== */
.cta {
  position: relative;
  padding-block: clamp(7rem, 15vw, 12rem);
  overflow: hidden;
  border-block: 1px solid var(--line-faint);
}
.cta__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.cta__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(65% 60% at 50% 50%, rgba(1,11,28,.9) 0%, rgba(1,11,28,.5) 55%, transparent 85%);
}
.cta__inner { position: relative; z-index: 2; text-align: center; }
.cta__title {
  font-size: clamp(2.4rem, 6.4vw, 5.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.042em;
  margin: 0 0 1.6rem;
}
.cta__lede {
  margin: 0 auto 2.8rem;
  max-width: 36rem;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.7;
  color: var(--c-ink-soft);
}
.cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ==========================================================================
   18  CONTACT
   ========================================================================== */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: start;
}
.contact__lede {
  margin: 1.7rem 0 0;
  max-width: 28rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--c-muted);
}
.contact__meta {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.8rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line-faint);
}
.contact__meta dt {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-dim);
  margin-bottom: .35rem;
}
.contact__meta dd { font-size: .98rem; color: var(--c-ink-soft); }
.contact__meta a {
  display: inline-block;
  padding-block: .2rem;
  transition: color var(--t-fast);
}
.contact__meta a:hover { color: var(--c-blue-300); }
.contact__disclaimer {
  margin: 2.6rem 0 0;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--c-dim);
  max-width: 30rem;
}

.form-card {
  position: relative;
  padding: clamp(1.7rem, 3.4vw, 2.6rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.form { display: grid; gap: 1.25rem; }
.form[hidden] { display: none; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.field { display: grid; gap: .5rem; min-width: 0; }
.field label {
  font-family: var(--f-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.field label span { color: var(--c-blue-400); }

.field input,
.field textarea,
.select select {
  width: 100%;
  padding: .9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.028);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: .95rem;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: #4E6584; }

.field input:focus,
.field textarea:focus,
.select select:focus {
  outline: none;
  border-color: rgba(0,87,255,.7);
  background: rgba(0,87,255,.06);
  box-shadow: 0 0 0 4px rgba(0,87,255,.12);
}

.select { position: relative; }
.select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  cursor: pointer;
}
.select select option { background: var(--c-navy-850); color: var(--c-ink); }
.select__chev {
  position: absolute;
  right: 1rem; top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  pointer-events: none;
  color: var(--c-muted);
}

.field.has-error input,
.field.has-error textarea,
.field.has-error select {
  border-color: rgba(255,99,99,.65);
  background: rgba(255,99,99,.05);
}
.field__error {
  margin: 0;
  min-height: 0;
  font-size: .76rem;
  color: #FF8B8B;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s, transform .3s;
}
.field.has-error .field__error { opacity: 1; transform: translateY(0); }

.form__note {
  margin: .2rem 0 0;
  font-size: .74rem;
  color: var(--c-dim);
  text-align: center;
}

/* Success state */
.form-success {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: .9rem;
  padding: 2rem 0 1rem;
}
.form-success__check { width: 68px; height: 68px; color: var(--c-emerald-400); }
.fs-ring { stroke-dasharray: 176; stroke-dashoffset: 176; }
.fs-tick { stroke-dasharray: 46; stroke-dashoffset: 46; }
.form-success h3 { font-size: 1.5rem; letter-spacing: -.03em; }
.form-success p { margin: 0; max-width: 30rem; color: var(--c-muted); line-height: 1.7; }
.form-success .btn { margin-top: .8rem; }
.form-success[hidden] { display: none; }

/* ==========================================================================
   18b  COOKIE CONSENT
   ========================================================================== */
.cookie {
  position: fixed;
  left: 50%;
  bottom: clamp(.75rem, 2vw, 1.5rem);
  z-index: 600;
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  transform: translate(-50%, calc(100% + 3rem));
  opacity: 0;
  transition: transform .7s var(--e-out), opacity .5s var(--e-out);
}
.cookie.is-visible { transform: translate(-50%, 0); opacity: 1; }
.cookie[hidden] { display: none; }

.cookie__inner {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.25rem, 2.6vw, 1.9rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(3, 18, 42, .92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .95),
              0 1px 0 rgba(255, 255, 255, .06) inset;
}
.cookie__copy { min-width: 0; }
.cookie__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .45rem;
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.cookie__mark {
  width: auto;
  height: 22px;
  flex: none;
}
.cookie__text {
  margin: 0;
  max-width: 62ch;
  font-size: .84rem;
  line-height: 1.65;
  color: var(--c-muted);
}
.cookie__text a { color: var(--c-blue-300); text-decoration: underline; text-underline-offset: 2px; }
.cookie__text a:hover { color: var(--c-emerald-300); }
.cookie__actions {
  display: flex;
  gap: .6rem;
  flex: none;
  margin-left: auto;
}

@media (max-width: 767px) {
  .cookie__inner { flex-direction: column; align-items: stretch; gap: 1.1rem; }
  .cookie__actions { margin-left: 0; }
  .cookie__actions .btn { flex: 1; }
}

/* ==========================================================================
   19  FOOTER
   ========================================================================== */
.footer {
  position: relative;
  padding-top: clamp(4rem, 8vw, 6rem);
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--line-faint);
  background: linear-gradient(180deg, transparent, rgba(1,21,48,.55));
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--line-faint);
}
.footer__desc {
  margin: 1.2rem 0 0;
  max-width: 22rem;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--c-muted);
}
.socials { display: flex; gap: .6rem; margin-top: 2rem; }
.socials a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--c-muted);
  transition: color var(--t-fast), border-color var(--t-fast),
              background var(--t-fast), transform var(--t-fast);
}
.socials svg { width: 17px; height: 17px; }
.socials a:hover {
  color: var(--c-ink);
  border-color: rgba(122,169,255,.45);
  background: rgba(0,87,255,.14);
  transform: translateY(-2px);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.footer__col h3 {
  margin: 0 0 1.2rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-dim);
}
.footer__col ul { display: grid; gap: .75rem; }
.footer__col a {
  position: relative;
  font-size: .93rem;
  color: var(--c-ink-soft);
  transition: color var(--t-fast);
}
.footer__col a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--e-out);
}
.footer__col a:hover { color: var(--c-blue-300); }
.footer__col a:hover::after { transform: scaleX(1); transform-origin: left; }

.footer__legal {
  padding-block: 2rem;
  border-bottom: 1px solid var(--line-faint);
}
.footer__legal p {
  margin: 0;
  max-width: 62rem;
  font-size: .76rem;
  line-height: 1.7;
  color: var(--c-dim);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.8rem;
}
.footer__bottom p { margin: 0; font-size: .8rem; color: var(--c-dim); }
.footer__tag {
  font-family: var(--f-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .68rem !important;
}
.footer__tag i { font-style: normal; color: var(--c-blue); }

/* ==========================================================================
   20  RESPONSIVE
   ========================================================================== */

/* Laptop */
@media (max-width: 1200px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .nav__link { padding-inline: .65rem; font-size: .83rem; }
}

/* The nav link row stops fitting alongside the CTA before the layout itself
   needs to stack, so it collapses on its own breakpoint. */
@media (max-width: 1149px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }

  .hero { min-height: auto; padding-bottom: 4rem; }
  .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero__content { max-width: 38rem; }
  /* The dial gets its own band above the copy and is capped by that height,
     so the square never outgrows the space it was given. */
  .hero__visual { min-height: 0; order: -1; gap: 1rem; }
  .globe { width: min(100%, var(--hero-visual-h)); }
  /* Stacked, the copy sits below the globe — the scrim becomes a plain bottom
     fade rather than a side wash. */
  .hero__veil { background: linear-gradient(0deg, var(--c-navy-950) 1%, transparent 24%); }
}
@media (max-width: 599px) {
  .nav__actions .btn--primary { display: none; }

  /* The readout wraps here; a separator stranded at a line end reads as a typo,
     so the gap does the separating instead. */
  .globe__meta { gap: .3rem .9rem; }
  .globe__meta-sep { display: none; }
}

/* Tablet */
@media (max-width: 1023px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat, .stat + .stat { padding: 1.4rem 1.2rem; }

  .about__grid,
  .why__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .about__visual { max-width: 480px; }
  .why__head { position: static; }

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

  .steps { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .steps__line { display: none; }

  .footer__top { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 767px) {
  :root { --radius: 16px; }

  .cards,
  .cards--3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding: 1.2rem 0; }
  .stat { border-bottom: 1px solid var(--line-faint); }

  .steps { grid-template-columns: 1fr; padding-top: 1rem; gap: 0; }
  .step {
    padding: 0 0 2.5rem 2rem;
    border-left: 1px solid var(--line-faint);
  }
  .step:last-child { padding-bottom: 0; border-left-color: transparent; }
  .step__num { margin-bottom: .6rem; }
  .step__dot { top: .3rem; left: -7px; }

  /* The constellation becomes a stacked list on small screens */
  .constellation { aspect-ratio: auto; display: grid; gap: 1rem; justify-items: center; }
  .constellation__lines { display: none; }
  .constellation__hub { position: static; transform: none; }
  .constellation__nodes {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin-top: .6rem;
  }
  .node {
    position: static;
    translate: none;
    transform: none;
    padding: .5rem .85rem .5rem .65rem;
  }
  .node:hover { transform: none; }
  .node__label { font-size: .78rem; }

  /* Absolutely-positioned labels collide with the copy on a narrow column,
     so they flow as a chip row instead and the chart drops back. */
  .growth .section-head { margin-bottom: 2.25rem; }
  .growth__chart { opacity: .5; }
  .growth__tags {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .growth__tag {
    position: static;
    translate: none;
    font-size: .62rem;
    padding: .4rem .8rem .4rem 1.35rem;
  }
  .growth__tag::before { left: .6rem; }
  .growth__disclaimer { margin-top: 2.25rem; }

  .form__row { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .quote__mark { font-size: 4.5rem; right: 1.2rem; }
  .carousel__controls { flex-direction: column-reverse; align-items: stretch; gap: 1.2rem; }
  .carousel__arrows { justify-content: flex-end; }
  .carousel__dots { justify-content: center; }
}

@media (max-width: 420px) {
  .footer__cols { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
}

/* ==========================================================================
   21  REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hub__ripple { display: none; }
  .badge__pulse::after { display: none; }
  .hero__scroll-line::after { display: none; }
  .globe__dial-scan { display: none; }   /* a frozen sweep is just a stray arc */

  /* Everything that JS would have animated in must simply be visible */
  [data-reveal], [data-hero-el], [data-split], [data-reveal-text],
  .split-line > span { opacity: 1 !important; transform: none !important; }
  /* Show card detail outright — a hover that snaps in reads as a glitch. */
  .card__reveal { opacity: 1 !important; transform: none !important; }
  .cookie { transition: none; }
  .constellation__paths path { stroke-dashoffset: 0 !important; }
  #growthLine { stroke-dashoffset: 0 !important; }
  #growthArea { opacity: 1 !important; }
  .steps__line-draw { stroke-dashoffset: 0 !important; }
  .step__dot { transform: scale(1) !important; }
  .fs-ring, .fs-tick { stroke-dashoffset: 0 !important; }
}

/* Pre-animation states — only applied when JS is running and motion is allowed */
html.js:not(.reduced-motion) [data-reveal] { opacity: 0; transform: translateY(26px); }
html.js:not(.reduced-motion) [data-hero-el] { opacity: 0; transform: translateY(22px); }
html.js:not(.reduced-motion) [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); }
html.js:not(.reduced-motion) .cards[data-reveal-stagger] > * { opacity: 0; transform: translateY(30px); }
html.js:not(.reduced-motion) [data-why] { opacity: 0; transform: translateY(18px); }
html.js:not(.reduced-motion) [data-step] { opacity: 0; transform: translateY(24px); }

/* ==========================================================================
   22  LEGAL PAGES (privacy / terms / cookies)
   ========================================================================== */
.legal-hero {
  padding-top: clamp(9rem, 18vh, 13rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line-faint);
}
.legal-hero h1 {
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  letter-spacing: -.04em;
  margin: 0 0 1.2rem;
}
.legal-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  margin: 0;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-dim);
}
.legal-hero__lede {
  margin: 1.6rem 0 0;
  max-width: 46rem;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.75;
  color: var(--c-ink-soft);
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  align-items: start;
}
.legal-toc { position: sticky; top: 7.5rem; }
.legal-toc h2 {
  margin: 0 0 1.1rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-dim);
}
.legal-toc ol { display: grid; gap: .6rem; counter-reset: toc; }
.legal-toc a {
  display: flex;
  gap: .7rem;
  font-size: .87rem;
  line-height: 1.45;
  color: var(--c-muted);
  transition: color var(--t-fast);
}
.legal-toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: .68rem;
  color: var(--c-dim);
  padding-top: .15rem;
}
.legal-toc a:hover { color: var(--c-blue-300); }
.legal-toc a.is-current { color: var(--c-ink); }
.legal-toc a.is-current::before { color: var(--c-emerald-300); }

.legal-body { max-width: 46rem; min-width: 0; }
.legal-body section { scroll-margin-top: 7rem; }
.legal-body section + section {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line-faint);
}
.legal-body h2 {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  letter-spacing: -.03em;
  margin: 0 0 1.2rem;
}
.legal-body h2 .n {
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--c-blue-400);
}
.legal-body h3 {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 1.9rem 0 .7rem;
  color: var(--c-ink);
}
.legal-body p { margin: 0 0 1.05rem; line-height: 1.8; color: var(--c-muted); }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body strong { color: var(--c-ink-soft); font-weight: 600; }
.legal-body a { color: var(--c-blue-300); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--c-emerald-300); }

.legal-body ul { display: grid; gap: .7rem; margin: 0 0 1.05rem; }
.legal-body li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.75;
  color: var(--c-muted);
}
.legal-body li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 11px; height: 6px;
  transform: skewX(-14deg);
  background: linear-gradient(90deg, var(--c-blue), var(--c-emerald));
  opacity: .8;
}

.legal-callout {
  margin: 0 0 1.4rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--c-emerald);
  border-radius: var(--radius-sm);
  background: rgba(0, 165, 117, .06);
}
.legal-callout p { color: var(--c-ink-soft); margin-bottom: 0; }
.legal-callout--warn { border-left-color: var(--c-blue); background: rgba(0, 87, 255, .07); }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-toc ol {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .9rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--line-faint);
  }
}

@media print {
  .preloader, .cursor, .page-grid, .page-noise, .nav, .menu,
  canvas, .hero__scroll, .growth__chart { display: none !important; }
  body { background: #fff; color: #000; }
}