/* ── Self-hosted Space Grotesk (GDPR — no Google Fonts request) ── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: hsl(220 40% 8%);
  color: hsl(210 20% 95%);
  overflow-x: hidden;
}

/* ── Custom CSS variables ── */
:root {
  --cyan: hsl(185 70% 45%);
  --navy: hsl(220 60% 18%);
  --navy-mid: hsl(220 50% 24%);
}

/* ── Gradient text ── */
.text-gradient {
  background: linear-gradient(135deg, var(--cyan) 0%, hsl(185 80% 70%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero section ── */
.hero-bg {
  background: linear-gradient(135deg, hsl(220 60% 18%) 0%, hsl(220 50% 24%) 55%, hsl(200 45% 28%) 100%);
}
.hero-grid {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ── Glow effects ── */
.glow-cyan { box-shadow: 0 0 50px hsl(185 70% 45% / 0.35); }
.glow-cyan:hover { box-shadow: 0 0 80px hsl(185 70% 45% / 0.5); }
.card-hover {
  transition: border-color .3s, box-shadow .3s, transform .3s;
}

/* ── Spinner animation ── */
.spinner {
  transform-origin: center;
  animation: spinner-rotate 1s linear infinite;
}
@keyframes spinner-rotate {
  100% { transform: rotate(360deg); }
}
.card-hover:hover {
  border-color: hsl(185 70% 45% / 0.45) !important;
  box-shadow: 0 8px 32px hsl(185 70% 45% / 0.12);
  transform: translateY(-2px);
}

/* ── Orb blobs in hero ── */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

/* ── Scroll stagger ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Logo bubbles in hub diagram ── */
.logo-bubble {
  position: absolute;
  width: 68px;
  height: 44px;
  background: white;
  border-radius: 12px;
  border: 1.5px solid hsl(185 70% 45% / 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  box-shadow: 0 4px 16px hsl(185 70% 45% / 0.15);
  transition: transform .2s, box-shadow .2s;
}
.logo-bubble:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px hsl(185 70% 45% / 0.3);
}
.logo-bubble img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.logo-fallback {
  font-size: 10px;
  font-weight: 700;
  color: hsl(220 60% 25%);
  text-align: center;
  align-items: center;
  justify-content: center;
}

/* ── Platform pills ── */
.platform-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid hsl(185 70% 45% / 0.3);
  background: hsl(185 70% 45% / 0.07);
  font-size: .875rem;
  font-weight: 500;
  transition: background .2s, border-color .2s;
}
.platform-pill:hover { background: hsl(185 70% 45% / 0.15); border-color: var(--cyan); }

/* ── CTA section bg ── */
.cta-bg {
  background: linear-gradient(135deg, hsl(220 60% 14%) 0%, hsl(220 50% 20%) 100%);
}

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: hsl(220 60% 5% / 0.75);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.modal-overlay.open {
  opacity: 1; pointer-events: all;
}
.modal-box {
  background: hsl(220 40% 11%);
  border: 1px solid hsl(185 70% 45% / 0.25);
  border-radius: 20px;
  padding: 2.5rem;
  width: 100%;
  max-width: 480px;
  margin: 1rem;
  box-shadow: 0 32px 80px hsl(220 60% 5% / 0.6), 0 0 0 1px hsl(185 70% 45% / 0.1);
  transform: translateY(20px) scale(0.97);
  transition: transform .3s ease;
}
.modal-overlay.open .modal-box {
  transform: translateY(0) scale(1);
}
.modal-input {
  width: 100%;
  background: hsl(220 40% 8%);
  border: 1px solid hsl(220 30% 25%);
  border-radius: 10px;
  padding: .75rem 1rem;
  color: white;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .95rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.modal-input:focus {
  border-color: hsl(185 70% 45%);
  box-shadow: 0 0 0 3px hsl(185 70% 45% / 0.15);
}
.modal-input::placeholder { color: hsl(220 15% 45%); }
.modal-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: hsl(210 20% 65%);
  margin-bottom: .4rem;
}
.modal-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 1rem 0;
}

/* ── Custom scrollbar for legal modals ── */
.modal-scroll::-webkit-scrollbar { width: 5px; }
.modal-scroll::-webkit-scrollbar-track { background: transparent; }
.modal-scroll::-webkit-scrollbar-thumb { background: hsl(185 70% 45% / 0.35); border-radius: 999px; }
.modal-scroll::-webkit-scrollbar-thumb:hover { background: hsl(185 70% 45% / 0.6); }
.modal-scroll { scrollbar-width: thin; scrollbar-color: hsl(185 70% 45% / 0.35) transparent; }

/* ── Human-first image crop ── */
.human-first-img { height: 120%; top: -15%; }

@media (max-width: 767px) {
  .human-first-img { height: 180%; top: -40%; }
}