/* ============================================================================
   KYBERS.CA  -  GLOBAL STYLES
   All colors via CSS vars from theme.css. No raw hex anywhere in this file.
   ============================================================================ */

/* ── Box-sizing reset ────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin:  0;
  padding: 0;
}

/* ── Fluid base font ─────────────────────────────────────────────────────── */
html {
  font-size: clamp(14px, 1.1vw, 18px);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  background: var(--bg-primary);
  color:      var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Fixed navbar scroll-margin ─────────────────────────────────────────── */
section[id] {
  scroll-margin-top: 5rem;
}

/* ============================================================================
   ANIMATIONS
   All animations check prefers-reduced-motion at the media query level.
   ============================================================================ */

/* ── Fade-in (hero text, section reveals) ───────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in            { animation: fadeIn 0.6s ease-out both; }
.animate-fade-in-delay-1    { animation: fadeIn 0.6s ease-out 0.15s both; }
.animate-fade-in-delay-2    { animation: fadeIn 0.6s ease-out 0.30s both; }
.animate-fade-in-delay-3    { animation: fadeIn 0.6s ease-out 0.45s both; }

/* Skip on repeat visits (sessionStorage flag set in script.js) */
.hero-revisit .animate-fade-in,
.hero-revisit .animate-fade-in-delay-1,
.hero-revisit .animate-fade-in-delay-2,
.hero-revisit .animate-fade-in-delay-3 {
  animation: none !important;
  opacity: 1 !important;
}

/* (Ring keyframes removed  -  replaced by canvas sphere animation) */

/* ── Section reveal ─────────────────────────────────────────────────────── */
@keyframes sectionReveal {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section-reveal {
  animation: sectionReveal 0.65s ease-out both;
}

/* ── Overline label ─────────────────────────────────────────────────────── */
/* text-decoration: none overrides Tailwind's .overline utility (text-decoration-line: overline) */
.overline {
  font-size:       var(--text-overline);
  font-weight:     500;
  letter-spacing:  2px;
  text-transform:  uppercase;
  color:           var(--primary);
  text-decoration: none;
}

/* ── Section subtitle ───────────────────────────────────────────────────── */
.section-subtitle {
  color:       var(--text-dim);
  font-size:   var(--text-body);
  line-height: 1.7;
}

/* ── Section title ──────────────────────────────────────────────────────── */
.section-title {
  font-size:   var(--text-h2);
  font-weight: 700;
  line-height: 1.2;
  color:       var(--text-primary);
  text-wrap:   balance;
}

/* ── Card base ──────────────────────────────────────────────────────────── */
.card {
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.75rem 1.5rem;
}

/* ── What We Do cards  -  numbered, top accent border ─────────────────────── */
.wwd-card {
  background:     var(--bg-surface);
  border:         1px solid var(--border);
  border-top:     2px solid var(--primary);
  border-radius:  var(--radius-lg);
  padding:        2rem 1.75rem;
  display:        flex;
  flex-direction: column;
}

.wwd-card-number {
  font-family:    var(--font-data);
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  color:          var(--primary);
  margin-bottom:  1.25rem;
}

.wwd-card-title {
  font-size:     1.0625rem;
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 0.875rem;
}

.wwd-card-body {
  font-size:   var(--text-body);
  color:       var(--text-dim);
  line-height: 1.7;
}

/* ── Values cards  -  numbered, left accent border, italic quote ───────────── */
.val-card {
  background:     var(--bg-surface);
  border:         1px solid var(--border);
  border-left:    3px solid var(--primary);
  border-radius:  var(--radius-lg);
  padding:        2rem 1.75rem;
  display:        flex;
  flex-direction: column;
}

.val-card-number {
  font-family:    var(--font-data);
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  color:          var(--text-dim);
  margin-bottom:  1rem;
}

.val-card-title {
  font-size:     1.0625rem;
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 1rem;
}

.val-card-quote {
  font-style:    italic;
  font-size:     0.9375rem;
  color:         var(--primary);
  line-height:   1.6;
  margin-bottom: 1rem;
}

.val-card-body {
  font-size:   var(--text-body);
  color:       var(--text-dim);
  line-height: 1.7;
}

/* Tighter top padding for Team  -  title sits closer to section start */
#team .section-pad { padding-top: clamp(1rem, 2svh, 1.5rem); }


/* Section header  -  replaces max-w-2xl on all section intro blocks.
   56rem gives titles room to breathe at large font sizes; viewport constrains it on small screens. */
.section-header { max-width: 56rem; }

/* Large screens (15"+ / 1440px+)  -  scale up overline + subtitle across all sections */
@media (min-width: 1440px) {
  .overline         { font-size: 13px; letter-spacing: 2.5px; }
  .section-subtitle { font-size: 1.125rem; }
}

/* ── Team cards container ────────────────────────────────────────────────── */
.team-cards-container {
  width:          85%;
  margin:         0 auto;
  margin-top:     1.5rem;
  padding-bottom: clamp(4rem, 8svh, 6rem);
  overflow:       visible;
}

/* ── Team cards  -  pyramid grid ───────────────────────────────────────────── */
/* .team-cards-grid stacks rows vertically.                                   */
/* .team-cards-row   is each row  -  centers its cards horizontally.            */
/* Card width is fixed at 25% (lg) so a row of 3 = 75% centered,             */
/* a row of 2 = 50% centered  -  natural pyramid at any member count.          */
.team-cards-grid {
  display:        flex;
  flex-direction: column;
  gap:            2rem;
}
.team-cards-row {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  align-items:     flex-start; /* prevent flex-stretch from growing sibling cards when one expands */
  gap:             2rem;
}
.team-cards-row .team-card-scene {
  width: 100%;
}

/* Tablet (640–1023px): flatten JS rows → clean 2-col wrap */
@media (min-width: 640px) and (max-width: 1023px) {
  .team-cards-grid {
    flex-direction:  row;
    flex-wrap:       wrap;
    justify-content: center;
  }
  .team-cards-row                 { display: contents; }
  .team-cards-row .team-card-scene { width: calc(50% - 1rem); }
}

/* Desktop (1024px+): pyramid rows take effect                               */
/* max-width clamps cards on large monitors (27"+)  -  floor 220px, cap 340px  */
@media (min-width: 1024px) {
  .team-cards-row .team-card-scene {
    width:     calc(25% - 1.5rem);
    max-width: clamp(220px, 22vw, 340px);
  }
}

/* ── Team cards  -  3-D flip: front = profile | back = bio ────────────────── */
/* min-height is a CSS fallback only  -  team.js measures front content and     */
/* sets height via JS. On desktop, flipping to a tall bio expands the card.   */
/* On mobile (<1024px) the back face scrolls instead of expanding.            */
.team-card-scene {
  position:    relative; /* required for z-index to work (active scene z-index: 10 > backdrop z-index: 3) */
  min-height:  300px;
  overflow:    visible;
  perspective: 900px;
  transition:  transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
               width    0.22s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Card  -  visual shell. Faces are normal flow inside, so card auto-sizes to content. */
.team-card {
  position:       relative;
  width:          100%;
  min-height:     300px;
  background:     var(--bg-surface);
  border:         1px solid var(--border);
  border-radius:  var(--radius-lg);
  cursor:         pointer;
  outline:        none;
  transition:     box-shadow 0.25s ease;
}

.team-card:focus-visible {
  outline:        2px solid var(--primary);
  outline-offset: 4px;
  border-radius:  var(--radius-lg);
}

.team-card.is-expanded {
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.50), 0 6px 20px rgba(61, 110, 245, 0.22);
}

/* ── Card faces  -  normal flow so card auto-sizes to content height ───────── */
.team-card-front {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        2rem 1.5rem;
  gap:            0.75rem;
}

.team-card-back {
  display:        none;
  flex-direction: column;
  align-items:    flex-start;
  text-align:     left;
  padding:        1.5rem;
  gap:            1rem;
}

/* Mobile/tablet: match front face min-height so LinkedIn always pins to bottom */
@media (max-width: 1023px) {
  .team-card.is-flipped .team-card-back {
    min-height: 300px;
  }
}

.team-card.is-flipped .team-card-back  { display: flex; }
.team-card.is-flipped .team-card-front { display: none; }

.team-back-header {
  display:     flex;
  align-items: center;
  gap:         0.875rem;
  width:       100%;
}

.team-avatar-sm {
  width:           84px;
  height:          84px;
  flex-shrink:     0;
  border-radius:   50%;
  overflow:        hidden;
  background:      rgba(61,110,245,0.15);
  border:          2px solid rgba(61,110,245,0.35);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-ui);
  font-size:       1rem;
  font-weight:     700;
  color:           var(--text-primary);
}

.team-avatar-sm img {
  width:                    100%;
  height:                   100%;
  object-fit:               cover;
  display:                  block;
  transform:                translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility:      hidden;
}

.team-back-identity {
  display:        flex;
  flex-direction: column;
}

/* ── Flip keyframes  -  four separate animations prevent double-flip glitch ── */
/* A single rotateY(0→90→-90→0) lets the browser interpolate through the     */
/* front face at the invisible midpoint. Four keyframes + a JS content swap   */
/* at 90deg eliminate this entirely.                                           */
@keyframes kfFlipOut    { from { transform: rotateY(0deg);   } to { transform: rotateY(90deg);   } }
@keyframes kfFlipIn     { from { transform: rotateY(-90deg); } to { transform: rotateY(0deg);    } }
@keyframes kfFlipOutRev { from { transform: rotateY(0deg);   } to { transform: rotateY(-90deg);  } }
@keyframes kfFlipInRev  { from { transform: rotateY(90deg);  } to { transform: rotateY(0deg);    } }

.team-card.phase-out     { animation: kfFlipOut    0.175s ease-in  both; }
.team-card.phase-in      { animation: kfFlipIn     0.175s ease-out both; }
.team-card.phase-out-rev { animation: kfFlipOutRev 0.175s ease-in  both; }
.team-card.phase-in-rev  { animation: kfFlipInRev  0.175s ease-out both; }

.team-avatar {
  width:           150px;
  height:          150px;
  flex-shrink:     0;
  border-radius:   50%;
  overflow:        hidden;
  background:      rgba(61,110,245,0.15);
  border:          2px solid rgba(61,110,245,0.35);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-ui);
  font-size:       1.625rem;
  font-weight:     700;
  color:           var(--text-primary);
}

.team-avatar img {
  width:                    100%;
  height:                   100%;
  object-fit:               cover;
  display:                  block;
  transform:                translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility:      hidden;
}

.team-founder-badge {
  font-size:      0.6rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--primary);
  padding:        0.2rem 0.75rem;
  border:         1px solid rgba(61,110,245,0.4);
  border-radius:  999px;
  background:     rgba(61,110,245,0.08);
}

.team-dept-badge {
  font-size:      0.625rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-dim);
  padding:        0.25rem 0.875rem;
  border:         1px solid var(--border);
  border-radius:  999px;
}

.team-name {
  font-weight: 700;
  font-size:   1rem;
  color:       var(--text-primary);
  margin:      0;
  line-height: 1.3;
}

.team-role {
  font-size:   0.8125rem;
  color:       var(--text-dim);
  margin:      0.25rem 0 0;
  line-height: 1.4;
}

.team-flip-hint {
  margin-top:  auto;
  font-size:   0.6875rem;
  color:       var(--text-dim);
  opacity:     0.55;
  font-style:  italic;
}

.team-bio {
  font-size:   0.8125rem;
  color:       var(--text-dim);
  line-height: 1.65;
  margin:      0;
}

.team-linkedin-link {
  display:         block;
  margin-top:      auto;
  padding-top:     1rem;
  border-top:      1px solid var(--border);
  width:           100%;
  font-size:       0.8125rem;
  font-weight:     500;
  color:           var(--primary);
  text-decoration: none;
  transition:      color 0.2s;
}

.team-linkedin-link:hover {
  color: var(--primary-hover);
}

.team-linkedin-link.disabled {
  color:          var(--text-dim);
  opacity:        0.4;
  cursor:         default;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .team-card-scene { transition: none; }
  .team-card.phase-out,
  .team-card.phase-in,
  .team-card.phase-out-rev,
  .team-card.phase-in-rev { animation: none; }
}

/* ── Section vertical rhythm ────────────────────────────────────────────── */
.section-pad {
  padding-top:    clamp(4rem, 8svh, 6rem);
  padding-bottom: 1em;
}

.hero-pad {
  padding-top:    clamp(6rem, 12svh, 9rem);
  padding-bottom: clamp(4rem,  8svh, 7rem);
}

.subscribe-pad {
  padding-top:    clamp(5rem, 16svh, 10rem);
  padding-bottom: clamp(5rem, 21svh, 12rem);
}

/* ── Footer PDF download button ─────────────────────────────────────────── */
.footer-pdf-dl {
  border-color: var(--primary);
  color:        var(--primary);
  letter-spacing: 0.02em;
  background:   transparent;
  transition:   background 0.2s, color 0.2s;
}
.footer-pdf-dl:hover,
.footer-pdf-dl:focus-visible {
  background: var(--primary);
  color:      var(--bg-primary);
}

/* ── Navbar scroll glass ────────────────────────────────────────────────── */
#navbar {
  transition: background 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease;
}

#navbar.glass {
  background:      var(--navbar-glass-bg);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-bottom:   1px solid var(--navbar-glass-border);
}

/* ── Nav link underline ─────────────────────────────────────────────────── */
.nav-link {
  position:   relative;
  display:    inline-block;
  padding-bottom: 2px;
}

.nav-link::after {
  content:    "";
  position:   absolute;
  bottom:     0;
  left:       50%;
  height:     1.5px;
  width:      0;
  background: currentColor;
  border-radius: 99px;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1),
              left  0.25s cubic-bezier(0.4,0,0.2,1);
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  width: 100%;
  left:  0;
}

/* ── Logo theme switching  -  static <img> tags ───────────────────────────── */
/* Dark mode (default): show dark logo, hide light */
.ks-logo-dark  { display: block; }
.ks-logo-light { display: none;  }

html.light .ks-logo-dark  { display: none;  }
html.light .ks-logo-light { display: block; }

/* ── Mobile menu overlay ────────────────────────────────────────────────── */
#mobile-overlay {
  position:   fixed;
  inset:      0;
  z-index:    60;
  background: var(--bg-primary);
  display:    flex;
  flex-direction: column;
  padding:    1.5rem;
  transform:  translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

#mobile-overlay.open {
  transform: translateX(0);
}

#mobile-overlay .mobile-nav-link {
  opacity:   0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#mobile-overlay.open .mobile-nav-link {
  opacity:   1;
  transform: translateX(0);
}

/* Staggered link animation */
#mobile-overlay.open .mobile-nav-link:nth-child(1) { transition-delay: 0.05s; }
#mobile-overlay.open .mobile-nav-link:nth-child(2) { transition-delay: 0.10s; }
#mobile-overlay.open .mobile-nav-link:nth-child(3) { transition-delay: 0.15s; }
#mobile-overlay.open .mobile-nav-link:nth-child(4) { transition-delay: 0.20s; }
#mobile-overlay.open .mobile-nav-link:nth-child(5) { transition-delay: 0.25s; }
#mobile-overlay.open .mobile-nav-link:nth-child(6) { transition-delay: 0.30s; }
#mobile-overlay.open .mobile-nav-link:nth-child(7) { transition-delay: 0.35s; }

/* ── GetNotified dot ────────────────────────────────────────────────────── */
/* Dark mode: silver dot + silver pulse ring (matches globe wireframe palette) */
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0   var(--dot-pulse-start); }
  50%       { box-shadow: 0 0 0 6px var(--dot-pulse-end);   }
}

:root {
  --dot-color:       rgba(190,205,225,0.90);   /* silver  -  matches globe nodeFront */
  --dot-pulse-start: rgba(190,205,225,0.50);
  --dot-pulse-end:   rgba(190,205,225,0);
}

html.light {
  --dot-color:       rgba(100,140,240,0.85);   /* lighter blue than --primary */
  --dot-pulse-start: rgba(100,140,240,0.40);
  --dot-pulse-end:   rgba(100,140,240,0);
}

.get-notified-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--dot-color);
  animation:     dotPulse 2s ease-in-out infinite;
}

/* Tooltip */
.get-notified-tooltip {
  position:        absolute;
  top:             calc(100% + 10px);
  left:            50%;
  width:           max-content;
  background:      var(--navbar-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:          1px solid var(--border);
  border-radius:   var(--radius-md);
  padding:         0.75rem 1.25rem;
  font-size:       0.8125rem;
  color:           var(--text-primary);
  text-align:      center;
  white-space:     nowrap;
  pointer-events:  none;
  opacity:         0;
  transform:       translateX(-50%) translateY(8px);
  transition:      opacity 150ms ease-out, transform 150ms ease-out;
  z-index:         60;
}

.get-notified-btn:hover .get-notified-tooltip,
.get-notified-btn:focus-visible .get-notified-tooltip {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* ── Hero section ───────────────────────────────────────────────────────── */
#hero {
  position:       relative;
  overflow:       hidden;
  background:     var(--hero-gradient);
  min-height:     100svh;
}

/* ── Subscribe + Footer wrapper ──────────────────────────────────────── */
.last-page {
  display:        flex;
  flex-direction: column;
}

#footer {
  border-top: 1px solid var(--border);
}

/* ── Non-hero sections  -  full viewport height, content centred ────────────
   min-height lets the section expand naturally when content is taller than
   the viewport (e.g. large type scale or many cards on small screens).
   Dot grid is layered via background-image; orb via ::before pseudo-element.*/
#whatWeDo,
#values,
#team {
  position:        relative;
  isolation:       isolate; /* own stacking context  -  backdrop + active card z-indexes are self-contained */
  min-height:      100svh;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  /* Subtle dot grid  -  sits behind orb + content */
  background-image:    radial-gradient(circle, var(--section-dot) 1px, transparent 1px);
  background-size:     36px 36px;
}

/* Subscribe: content-height only  -  padding drives the spacing, no forced viewport height */
#subscribe {
  position:        relative;
  overflow:        hidden;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  background-image:    radial-gradient(circle, var(--section-dot) 1px, transparent 1px);
  background-size:     36px 36px;
}

/* Content wrapper sits above background layers.
   :not(.team-network-bg) ensures the injected SVG div keeps position:absolute */
#whatWeDo > div:not(.team-network-bg),
#values   > div:not(.team-network-bg),
#team     > div:not(.team-network-bg) {
  position: relative;
  /* no z-index  -  avoids nested stacking contexts that would trap the active card below the backdrop */
}

#subscribe > div {
  position: relative;
  z-index:  1;
}

/* ── Orb drift animations ─────────────────────────────────────────────────
   Three timing variants so adjacent sections feel independent.             */
@keyframes orbDriftA {
  0%, 100% { transform: translate(0,    0)   scale(1);    }
  35%       { transform: translate(-3%, 5%)  scale(1.07); }
  70%       { transform: translate(4%, -3%)  scale(0.96); }
}
@keyframes orbDriftB {
  0%, 100% { transform: translate(0,   0)    scale(1);    }
  30%       { transform: translate(5%, -4%)  scale(1.05); }
  65%       { transform: translate(-3%, 4%)  scale(0.97); }
}
@keyframes orbDriftC {
  0%, 100% { transform: translate(0,    0)   scale(1);    }
  50%       { transform: translate(-4%, -3%) scale(1.06); }
}

/* ── Per-section orbs ────────────────────────────────────────────────────
   Large blurry radial gradients  -  ambient light, not shapes.
   Each section: different anchor point + animation variant.               */

/* whatWeDo + values need overflow:clip to contain their orb ::before decorations.
   #team intentionally omitted  -  its expanded cards must overflow the section bounds. */
#whatWeDo,
#values { overflow: clip; }

/* whatWeDo  -  glow top-right */
#whatWeDo::before {
  content:       '';
  position:      absolute;
  top:           -20%;
  right:         -10%;
  width:         min(55vw, 80vh);
  height:        min(55vw, 80vh);
  background:    radial-gradient(circle, var(--section-orb) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index:       0;
  animation:     orbDriftA 20s ease-in-out infinite;
}

/* values  -  glow bottom-left */
#values::before {
  content:       '';
  position:      absolute;
  bottom:        -20%;
  left:          -10%;
  width:         min(55vw, 80vh);
  height:        min(55vw, 80vh);
  background:    radial-gradient(circle, var(--section-orb) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index:       0;
  animation:     orbDriftB 24s ease-in-out infinite;
}

/* team  -  node network (SVG injected by team.js) */
.team-network-bg {
  position:       absolute;
  inset:          0;
  z-index:        0;
  pointer-events: none;
  overflow:       hidden;
  /* silver in dark, blue in light  -  matches globe + dot palettes */
  color:          rgba(200,212,228,1);
}
html.light .team-network-bg {
  color:          rgba(61,110,245,1);
}
.team-network-bg svg {
  width:   100%;
  height:  100%;
  opacity: 0.32;
}
html.light .team-network-bg svg {
  opacity: 0.18;
}

@keyframes nodePulse {
  0%, 100% { opacity: 0.15; }
  50%       { opacity: 1;    }
}
.team-network-bg circle.node-glow {
  animation: nodePulse var(--pulse-dur, 5s) ease-in-out var(--pulse-delay, 0s) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .team-network-bg circle.node-glow { animation: none; }
}

/* subscribe  -  centred glow, true circle on all screen sizes */
#subscribe::before {
  content:       '';
  position:      absolute;
  width:         min(70vw, 70vh);
  height:        min(70vw, 70vh);
  top:           50%;
  left:          50%;
  margin-top:    calc(min(70vw, 70vh) / -2);
  margin-left:   calc(min(70vw, 70vh) / -2);
  background:    radial-gradient(circle at center, var(--section-orb) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index:       0;
  animation:     orbDriftC 26s ease-in-out infinite;
}

/* ── Orbital ring animations ──────────────────────────────────────────────
   Slow-rotating ellipse outlines on whatWeDo + values.
   Each section gets a different size, anchor, and speed so they feel
   independent. Margin-based centering keeps transform free for rotation.   */
@keyframes orbitalSpin {
  from { transform: rotate(0deg);    }
  to   { transform: rotate(360deg);  }
}
@keyframes orbitalSpinReverse {
  from { transform: rotate(0deg);    }
  to   { transform: rotate(-360deg); }
}

/* whatWeDo  -  oval centred on bottom-left corner, arc curves in top-right */
#whatWeDo::after {
  content:        '';
  position:       absolute;
  width:          min(125vw, 920px);
  height:         min(70vw,  520px);
  top:            100%;
  left:           0;
  margin-top:     calc(min(70vw, 520px) / -2);
  margin-left:    calc(min(125vw, 920px) / -2);
  border:         1px solid rgba(180,195,215,0.60);
  border-radius:  50%;
  pointer-events: none;
  z-index:        0;
  animation:      orbitalSpin 38s linear infinite;
}
html.light #whatWeDo::after { border-color: rgba(61,110,245,0.55); }

/* values  -  oval centred on top-right corner, arc curves in bottom-left */
#values::after {
  content:        '';
  position:       absolute;
  width:          min(130vw, 960px);
  height:         min(75vw,  560px);
  top:            0;
  left:           100%;
  margin-top:     calc(min(75vw, 560px) / -2);
  margin-left:    calc(min(130vw, 960px) / -2);
  border:         1px solid rgba(180,195,215,0.60);
  border-radius:  50%;
  pointer-events: none;
  z-index:        0;
  animation:      orbitalSpinReverse 46s linear infinite;
}
html.light #values::after { border-color: rgba(61,110,245,0.55); }

/* prefers-reduced-motion: freeze orbs + rings, keep dot grid + network */
@media (prefers-reduced-motion: reduce) {
  #whatWeDo::before,
  #whatWeDo::after,
  #values::before,
  #values::after,
  #subscribe::before {
    animation: none !important;
  }
}

/* Radial glow ellipse  -  top-right, behind rings */
#hero::before {
  content:  '';
  position: absolute;
  top:      -15%;
  right:    -8%;
  width:    55vw;
  height:   55vw;
  max-width: 780px;
  max-height: 780px;
  background: radial-gradient(ellipse at center, var(--hero-glow-color) 0%, transparent 68%);
  pointer-events: none;
  z-index:  0;
}

/* ── Hero canvas (sphere wireframe, desktop only) ───────────────────────── */
.hero-canvas {
  position:       absolute;
  top:            50%;
  left:           55%;
  transform:      translateY(-50%);
  pointer-events: none;
  z-index:        0;
  display:        none; /* hidden on mobile */
}

/* Show on tablet landscape and desktop */
@media (min-width: 768px) and (orientation: landscape) {
  .hero-canvas {
    display: block;
  }
}

/* Always show on desktop (1024px+) regardless of orientation */
@media (min-width: 1024px) {
  .hero-canvas {
    display: block;
  }
}

/* Mobile + tablet portrait: globe centered below hero text  -  JS positions dynamically.
   top/left/transform here are neutral fallbacks only; positionGlobe() overrides on every paint.
   Canvas z-index 0 keeps it behind hero text (z-10)  -  decorative only. */
@media (max-width: 639px) {
  .hero-canvas {
    display:   block;
    position:  absolute;
    top:       50%;
    left:      50%;
    transform: translate(-50%, -50%);
    opacity:   0.75;
  }
}

/* Tablet portrait: globe in bottom-right corner, fully inside hero.
   JS (positionGlobe) overrides immediately; this is just the pre-JS fallback. */
@media (min-width: 640px) and (max-width: 1400px) and (orientation: portrait) {
  .hero-canvas {
    display:   block;
    position:  absolute;
    top:       auto;
    bottom:    2rem;
    left:      auto;
    right:     2rem;
    transform: none;
    opacity:   0.85;
  }
}

/* ── Hero stats counter ─────────────────────────────────────────────────── */
.stat-value {
  font-family: var(--font-data);
  font-size:   var(--text-stat);
  font-weight: 700;
  color:       var(--text-primary);
  display:     flex;
  align-items: baseline;
  gap:         0.1em;
}

.stat-prefix {
  font-family: var(--font-data);
  font-size:   var(--text-stat);
  font-weight: 700;
  color:       var(--text-dim);
}

.stat-label {
  font-size: var(--text-stat-label);
  color:     var(--text-dim);
}

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

/* Keyframes animate opacity on ::before  -  GPU composited, no per-frame repaint */
@keyframes btnGlowBreathe {
  0%, 100% { opacity: 0.28; }
  50%       { opacity: 0.85; }
}
@keyframes btnGlowBreathePop {
  0%, 100% { opacity: 0.42; }
  50%       { opacity: 1; }
}

.btn-primary {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0.75rem 1.5rem;
  border-radius:   var(--radius-md);
  background:      var(--primary);
  color:           var(--text-on-primary);
  font-size:       0.875rem;
  font-weight:     600;
  border:          none;
  cursor:          pointer;
  transition:      background 0.2s, transform 0.2s, box-shadow 0.2s;
}

/* Glow layer  -  static box-shadow, only opacity animates (compositor only) */
.btn-primary::before {
  content:        '';
  position:       absolute;
  inset:          0;
  border-radius:  inherit;
  box-shadow:     var(--glow-btn-active-glow);
  opacity:        0.28;
  animation:      btnGlowBreathe 3s ease-in-out infinite;
  pointer-events: none;
}

/* ── Inactive state ── */
.btn-primary.btn-inactive {
  background: var(--primary-inactive);
  cursor:     not-allowed;
}
.btn-primary.btn-inactive::before {
  box-shadow: var(--glow-btn-inactive-peak);
  animation:  btnGlowBreathePop 3s ease-in-out infinite;
}

/* Hover inactive  -  stop glow, no color change, no transform */
.btn-primary.btn-inactive:hover,
.btn-primary.btn-inactive:focus-visible {
  background: var(--primary-inactive);
  box-shadow: none;
  transform:  none;
}
.btn-primary.btn-inactive:hover::before,
.btn-primary.btn-inactive:focus-visible::before {
  animation: none;
  opacity:   0;
}

/* ── Active hover ── */
.btn-primary:not(.btn-inactive):hover,
.btn-primary:not(.btn-inactive):focus-visible {
  background: var(--primary-hover);
  box-shadow: var(--glow-btn-hover);
  transform:  scale(1.02);
}
.btn-primary:not(.btn-inactive):hover::before,
.btn-primary:not(.btn-inactive):focus-visible::before {
  animation: none;
  opacity:   0;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary::before,
  .btn-primary.btn-inactive::before { animation: none; }
}

.btn-ghost {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0.75rem 1.5rem;
  border-radius:   var(--radius-md);
  background:      transparent;
  color:           var(--text-primary);
  font-size:       0.875rem;
  font-weight:     600;
  border:          1px solid rgba(61,110,245,0.30);
  cursor:          pointer;
  transition:      background 0.2s, border-color 0.2s, transform 0.2s;
}

.btn-ghost:hover {
  background:    var(--overlay);
  border-color:  var(--primary);
}

/* Spring press (applied via JS to .btn-spring elements) */
.btn-spring { touch-action: manipulation; }

/* ── Cookie banner ──────────────────────────────────────────────────────── */
#cookie-banner {
  position:   fixed;
  bottom:     1rem;
  left:       1rem;
  right:      1rem;
  z-index:    1000;
  background: var(--bg-surface);
  border:     1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:    1rem 1.25rem;
  box-shadow: var(--shadow-xl);
  transform:  translateY(120%);
  transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1);
}

#cookie-banner.visible {
  transform: translateY(0);
}

/* ── Subscribe form ─────────────────────────────────────────────────────── */

/* Name + Email side-by-side row */
.sub-fields-row {
  display: flex;
  gap:     0.75rem;
}

.sub-field {
  flex:      1;
  min-width: 0; /* prevent flex overflow */
}

/* Stack on mobile */
@media (max-width: 639px) {
  .sub-fields-row {
    flex-direction: column;
    gap:            0;
  }

  .sub-field {
    margin-bottom: 1rem;
  }

  .sub-field:last-child {
    margin-bottom: 0;
  }
}

.form-input {
  width:         100%;
  padding:       0.65rem 0.875rem;
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  background:    var(--bg-primary);
  color:         var(--text-primary);
  font-size:     0.9rem;
  font-family:   var(--font-ui);
  outline:       none;
  transition:    border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(61,110,245,0.18);
}

.form-input.error {
  border-color: var(--error);
  box-shadow:   0 0 0 3px rgba(239,68,68,0.15);
}

.form-error-msg {
  font-size: 0.78rem;
  color:     var(--error);
  margin-top: 0.3rem;
}

/* ── Section alternating backgrounds ───────────────────────────────────── */
/* Odd sections (hero, values, subscribe) → bg-primary (default body bg)     */
/* Even sections (whatWeDo, team) → slightly elevated surface bg             */
#whatWeDo,
#team {
  background: var(--bg-surface);
}

/* ── Tablet portrait  -  must be LAST so it overrides min-height: 100svh above */
@media (min-width: 768px) and (max-width: 1080px) {
  #hero,
  #whatWeDo,
  #values,
  #team {
    min-height: auto;
  }

  .hero-pad {
    padding-top:    20svh;
    padding-bottom: 2rem;
  }
  .section-pad {
    padding-top:    5rem;
    padding-bottom: 4rem;
  }
  .subscribe-pad {
    padding-top:    3.5rem;
    padding-bottom: 3rem;
  }
}

/* ── Spinner ────────────────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width:  18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--text-on-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* ============================================================================
   REDUCED MOTION  -  all animations off
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-fade-in-delay-1,
  .animate-fade-in-delay-2,
  .animate-fade-in-delay-3,
  .section-reveal {
    animation: none !important;
    opacity:   1 !important;
    transform: none !important;
  }

  .get-notified-dot {
    animation: none !important;
  }

  #cookie-banner {
    transition: none !important;
  }

  #mobile-overlay,
  #mobile-overlay .mobile-nav-link {
    transition: none !important;
  }
}

.tmp {
  color:red;
  width: 32px;
  height: 25px;
}