/* ============================================================================
   NDS — VARIANT 2 · COSMIC / DEEP-SPACE (immersive rebuild)
   Single self-contained stylesheet shared by index / startups / vacancies.
   ----------------------------------------------------------------------------
   STRUCTURE (deliberately NOT variant 1):
     - Fixed full-viewport cosmic backdrop: multi-layer starfield + nebula
       + a large PLANET LIMB rising from the bottom with an aurora rim-light,
       plus an optional reduced-motion-safe shooting star.
     - CENTERED immersive hero (no text-left / ring-right split). Headline +
       CTAs centered in the upper-middle; four capability labels scattered
       across the "sky" as constellation points at different depths.
     - Mission-control / star-map section system: ▸ + monospace coordinate
       eyebrows, HUD glass panels with aurora hairlines + corner glow,
       constellation-line connected steps, star-map portfolio with node markers.
   ----------------------------------------------------------------------------
   CONTRACT (do not rename — JS-coupled, see app.js / responsive-nav.js):
     nav:      [data-nav-toggle], .site-nav .nav-links a, body.nav-open
     vacancies (app.js innerHTML): .vacancy-card / __head, .vacancy-badge,
               .vacancy-date, .vacancy-meta, .btn-submit, .vacancy-empty
     filters:  .filter-btn / .filter-btn.active
     modal:    .vacancy-modal(.open), __dialog, __head, __body, __info
     forms:    .apply-form, .form-row, .form-field, .req, .form-success(.show)
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Deep-space canvas — near-black with indigo/violet undertones */
  --space-900: #03040A;   /* outermost void */
  --space-800: #06070F;   /* base body */
  --space-700: #090B1C;   /* section tint */
  --space-600: #0D1130;   /* raised plates */
  --space-500: #141A40;   /* hairline base */

  /* Glass / HUD surfaces */
  --glass:        rgba(17, 23, 56, 0.42);
  --glass-strong: rgba(15, 21, 52, 0.80);
  --glass-soft:   rgba(124, 92, 255, 0.05);
  --glass-line:   rgba(168, 184, 255, 0.16);
  --glass-line-2: rgba(168, 184, 255, 0.08);

  /* Brand — NDS blue → green (logo + primary CTA only) */
  --blue:    #2D6CF0;
  --blue-2:  #3A8BFF;
  --green:   #21C16A;
  --green-2: #33E08A;
  --brand-grad: linear-gradient(118deg, #2D6CF0 0%, #1E9AD6 50%, #21C16A 100%);

  /* Cosmic accents — dominate the atmosphere */
  --violet:  #7C5CFF;
  --cyan:    #3FE0FF;
  --magenta: #FF5CA8;
  --gold:    #FFC861;

  /* Aurora — gradient text, rules, borders, dots (violet→cyan→green→blue) */
  --aurora:      linear-gradient(100deg, #9B7BFF 0%, #3FE0FF 34%, #33E08A 66%, #3A8BFF 100%);
  --aurora-soft: linear-gradient(100deg, rgba(155,123,255,.92), rgba(63,224,255,.88), rgba(51,224,138,.88));

  /* Text */
  --text:       #EEF1FB;
  --text-mid:   #B7C0DE;
  --text-muted: #818CB6;
  --text-faint: #5A648C;

  /* Glows */
  --glow-violet: 0 0 60px rgba(124, 92, 255, 0.45);
  --glow-cyan:   0 0 55px rgba(63, 224, 255, 0.32);
  --glow-brand:  0 16px 44px rgba(45, 108, 240, 0.42), 0 0 0 1px rgba(63,224,255,.12);
  --glow-soft:   0 26px 72px rgba(2, 4, 14, 0.66);

  /* Radii */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-pill: 999px;

  /* Layout rhythm */
  --pad-x: clamp(20px, 5vw, 64px);
  --maxw: 100%;   /* full-bleed: blocks fill the page width, only --pad-x gutters on the sides */

  /* Type */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Grotesk', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 76px;
}

/* ----------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--space-900);
  line-height: 1.62;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; color: inherit; background: none; border: none; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(63, 224, 255, 0.32); color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

/* ----------------------------------------------------------------------------
   3. COSMOS BACKDROP — fixed, full-viewport, behind everything
   DOM (backdropHtml, first body node on every page):
     .cosmos-bg > .cosmos-nebula, .stars--far/--mid/--near,
                  .cosmos-shooting, .cosmos-planet > .cosmos-planet__rim
   -------------------------------------------------------------------------- */

/* Base void + deep nebula wash painted on the body (cannot be scrolled past) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 116%, rgba(124, 92, 255, 0.22) 0%, rgba(124,92,255,0) 52%),
    radial-gradient(90% 60% at 12% -8%, rgba(63, 224, 255, 0.10) 0%, rgba(63,224,255,0) 46%),
    radial-gradient(90% 60% at 92% 4%, rgba(255, 92, 168, 0.09) 0%, rgba(255,92,168,0) 48%),
    linear-gradient(180deg, #06070F 0%, #06070F 46%, #080A1C 72%, #0A0C22 100%);
}

.cosmos-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

/* Drifting nebula clouds layered over the base wash */
.cosmos-nebula {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(38% 30% at 22% 26%, rgba(124, 92, 255, 0.30), transparent 64%),
    radial-gradient(34% 26% at 78% 18%, rgba(63, 224, 255, 0.18), transparent 62%),
    radial-gradient(30% 24% at 64% 50%, rgba(255, 92, 168, 0.14), transparent 66%);
  filter: blur(18px);
  opacity: 0.9;
  animation: nebula-drift 46s ease-in-out infinite alternate;
}

@keyframes nebula-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2.4%, 1.8%, 0) scale(1.07); }
}

/* Multi-layer parallax starfield (box-shadow constellations) */
.stars {
  position: absolute;
  top: -20%; left: 0; right: 0;
  height: 140%;
  background-repeat: repeat;
}
.stars::before,
.stars::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.stars--far {
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 28% 62%, rgba(199,214,255,.7), transparent),
    radial-gradient(1px 1px at 47% 34%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 63% 76%, rgba(190,230,255,.7), transparent),
    radial-gradient(1px 1px at 81% 22%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 92% 58%, rgba(214,206,255,.65), transparent),
    radial-gradient(1px 1px at 7% 88%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 55% 12%, rgba(255,255,255,.55), transparent);
  background-size: 100% 100%;
  opacity: .7;
  animation: star-twinkle 6.5s ease-in-out infinite alternate;
}

.stars--mid {
  background-image:
    radial-gradient(1.6px 1.6px at 18% 44%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.6px 1.6px at 38% 78%, rgba(180,228,255,.85), transparent),
    radial-gradient(1.6px 1.6px at 58% 28%, rgba(210,196,255,.9), transparent),
    radial-gradient(1.6px 1.6px at 73% 64%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.6px 1.6px at 88% 38%, rgba(160,235,255,.8), transparent),
    radial-gradient(1.6px 1.6px at 4% 30%, rgba(255,255,255,.8), transparent);
  background-size: 100% 100%;
  opacity: .85;
  animation: star-drift-mid 90s linear infinite, star-twinkle 4.8s ease-in-out infinite alternate;
}

.stars--near {
  background-image:
    radial-gradient(2.4px 2.4px at 26% 22%, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 66% 52%, rgba(63,224,255,.95), transparent),
    radial-gradient(2.2px 2.2px at 84% 80%, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 44% 70%, rgba(155,123,255,.9), transparent),
    radial-gradient(2.2px 2.2px at 14% 60%, rgba(255,255,255,.95), transparent);
  background-size: 100% 100%;
  opacity: .95;
  filter: drop-shadow(0 0 4px rgba(63,224,255,.5));
  animation: star-drift-near 60s linear infinite, star-twinkle 3.6s ease-in-out infinite alternate;
}

@keyframes star-twinkle {
  0%   { opacity: .45; }
  100% { opacity: 1; }
}
@keyframes star-drift-mid {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-3%, 2%, 0); }
}
@keyframes star-drift-near {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(2.5%, -2%, 0); }
}

/* Occasional pure-CSS shooting star */
.cosmos-shooting {
  position: absolute;
  top: 16%;
  left: 8%;
  width: 160px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 60%, #fff 100%);
  border-radius: 2px;
  filter: drop-shadow(0 0 6px rgba(63,224,255,.9));
  opacity: 0;
  transform: rotate(28deg);
  animation: shoot 11s ease-in infinite;
}
.cosmos-shooting::after {
  content: "";
  position: absolute;
  right: -3px; top: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(63,224,255,.9);
}
@keyframes shoot {
  0%       { opacity: 0; transform: translate3d(0, 0, 0) rotate(28deg); }
  4%       { opacity: 1; }
  16%      { opacity: 1; }
  22%      { opacity: 0; transform: translate3d(62vw, 33vw, 0) rotate(28deg); }
  100%     { opacity: 0; transform: translate3d(62vw, 33vw, 0) rotate(28deg); }
}

/* ---- The PLANET LIMB rising from the bottom of the viewport ---- */
.cosmos-planet {
  position: absolute;
  left: 50%;
  bottom: -82vw;
  width: 168vw;
  height: 168vw;
  max-width: 2300px;
  max-height: 2300px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(75% 60% at 50% 30%, rgba(124, 92, 255, 0.30), transparent 60%),
    radial-gradient(120% 100% at 50% 8%, #1a1f4e 0%, #0c1030 40%, #07091e 78%);
  box-shadow:
    inset 0 8px 60px rgba(63, 224, 255, 0.10),
    0 -30px 120px rgba(124, 92, 255, 0.28);
  animation: planet-shimmer 14s ease-in-out infinite alternate;
}
/* faint surface band detail */
.cosmos-planet::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(60% 22% at 38% 24%, rgba(63,224,255,.10), transparent 60%),
    radial-gradient(50% 18% at 66% 34%, rgba(255,92,168,.08), transparent 60%);
  opacity: .8;
  mix-blend-mode: screen;
}

/* Bright atmospheric RIM-LIGHT / aurora arc along the planet's top edge */
.cosmos-planet__rim {
  position: absolute;
  top: -3px; left: 0; right: 0;
  height: 46%;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    inset 0 4px 4px rgba(255, 255, 255, 0.95),
    inset 0 10px 22px rgba(63, 224, 255, 0.85),
    inset 0 28px 70px rgba(124, 92, 255, 0.55),
    inset 0 60px 130px rgba(51, 224, 138, 0.18);
  filter: blur(.4px);
  animation: rim-shimmer 9s ease-in-out infinite alternate;
}

@keyframes planet-shimmer {
  0%   { box-shadow: inset 0 8px 60px rgba(63,224,255,.08),  0 -30px 120px rgba(124,92,255,.24); }
  100% { box-shadow: inset 0 8px 80px rgba(63,224,255,.16),  0 -30px 150px rgba(124,92,255,.34); }
}
@keyframes rim-shimmer {
  0% {
    box-shadow:
      inset 0 4px 4px rgba(255,255,255,.85),
      inset 0 10px 22px rgba(63,224,255,.75),
      inset 0 28px 70px rgba(124,92,255,.5),
      inset 0 60px 130px rgba(51,224,138,.15);
  }
  100% {
    box-shadow:
      inset 0 4px 5px rgba(255,255,255,1),
      inset 0 12px 26px rgba(63,224,255,.95),
      inset 0 30px 78px rgba(124,92,255,.62),
      inset 0 64px 140px rgba(51,224,138,.24);
  }
}

/* ----------------------------------------------------------------------------
   4. UTILITIES
   -------------------------------------------------------------------------- */
.section-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }

section { position: relative; z-index: 2; padding: clamp(72px, 11vw, 132px) 0; }
#portfolio:empty { padding: 0; }   /* collapse the empty portfolio shell so it adds no gap */

/* Mission-control eyebrow: ▸ glyph + monospace coordinate label */
.eyebrow,
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cyan);
}
.eyebrow::before,
.hero-eyebrow::before {
  content: "▸";
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: .6rem;
  color: var(--space-900);
  background: var(--aurora);
  box-shadow: 0 0 14px rgba(63,224,255,.6);
}
.eyebrow::after,
.hero-eyebrow::after {
  display: none;   /* removed the "// <coordinate>" slash labels */
}

.section-title {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  color: var(--text);
  margin-top: 18px;
  max-width: 18ch;
}
.section-title em {
  font-style: normal;
  background: var(--aurora);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: aurora-flow 9s ease-in-out infinite;
}
@keyframes aurora-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.title-rule {
  width: 84px;
  height: 3px;
  margin-top: 22px;
  border-radius: 3px;
  background: var(--aurora);
  box-shadow: 0 0 18px rgba(124,92,255,.6);
}

.section-copy { color: var(--text-mid); margin-top: 20px; max-width: 60ch; }

p { color: var(--text-mid); }

/* ----------------------------------------------------------------------------
   5. STICKY HEADER + NAV
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--nav-h);
  padding: 0 var(--pad-x);
  background: rgba(6, 7, 15, 0.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--glass-line-2);
}
.site-nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63,224,255,.5), rgba(124,92,255,.4), transparent);
  opacity: .7;
}

.nav-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.nav-brand img { height: 34px; width: auto; filter: drop-shadow(0 0 10px rgba(63,224,255,.35)); }
.nav-brand__divider {
  width: 1px; height: 26px;
  background: linear-gradient(180deg, transparent, var(--glass-line), transparent);
}
.nav-brand__copy { display: flex; flex-direction: column; line-height: 1.12; }
.nav-brand__copy strong {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: .01em;
  /* brand blue→green gradient, matching the NDS logo */
  background: var(--brand-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.nav-brand__copy span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  /* subtler green tail of the same brand gradient */
  background: linear-gradient(100deg, #2D8BD6, #21C16A);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0.92;
}

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  position: relative;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-mid);
  transition: color .25s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -7px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--aurora);
  transition: width .3s var(--ease);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { width: 100%; }
.nav-mobile-cta { display: none; }

.nav-cta {
  flex-shrink: 0;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand-grad);
  box-shadow: var(--glow-brand);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba(45,108,240,.55); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 9px;
  border-radius: 12px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--text);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}

/* ----------------------------------------------------------------------------
   6. HERO — centered, immersive, full-viewport with constellation sky
   DOM (heroHtml): #hero > .hero-sky (chips) + .hero-content (eyebrow,
   h1.hero-title, p.hero-sub, .hero-actions) + .hero-scroll
   -------------------------------------------------------------------------- */
#hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: clamp(48px, 9vh, 104px) var(--pad-x) clamp(120px, 22vh, 220px);
  overflow: hidden;
}

/* The constellation "sky" layer holding the four capability points */
.hero-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
/* faint connector lines drawn between constellation points */
.hero-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(115deg, transparent 49.7%, rgba(124,92,255,.16) 49.8%, rgba(124,92,255,.16) 50%, transparent 50.1%),
    linear-gradient(62deg, transparent 49.8%, rgba(63,224,255,.12) 49.9%, rgba(63,224,255,.12) 50%, transparent 50.1%);
  -webkit-mask: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 70%);
          mask: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 70%);
  opacity: .55;
}

.constellation {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
  font-family: var(--font-mono);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #eaf2ff;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(63, 224, 255, 0.5), 0 2px 14px rgba(2, 4, 12, 0.72);
  will-change: transform;
  /* each chip drifts along its own slow orbit (duration/direction set per-chip) */
  animation: sat-orbit 16s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
/* the marker is a little satellite: a solar-panel array (.dot) with a glowing
   central body (.dot::after) and a blinking nav light (.dot::before). The
   satellite gently wobbles (sat-tilt) while the whole chip orbits. */
.constellation .dot {
  position: relative;
  width: 32px; height: 7px;
  border-radius: 1.5px;
  background: repeating-linear-gradient(90deg,
    rgba(150, 214, 255, 0.95) 0 3px,
    rgba(16, 32, 66, 0.6) 3px 4.6px);
  box-shadow: 0 0 10px rgba(63, 224, 255, 0.5);
  filter: drop-shadow(0 0 4px rgba(124, 92, 255, 0.4));
  animation: sat-tilt 6.5s ease-in-out infinite;
}
.constellation .dot::after {            /* satellite body / bus */
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 13px;
  border-radius: 2.5px;
  background: var(--aurora);
  box-shadow: 0 0 0 1.5px rgba(6, 9, 26, 0.85), 0 0 14px rgba(63, 224, 255, 0.9);
}
.constellation .dot::before {           /* blinking navigation light */
  content: "";
  position: absolute;
  top: -5px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #ccffe8;
  box-shadow: 0 0 8px 1px rgba(130, 255, 205, 0.95);
  animation: nav-blink 1.9s ease-in-out infinite;
}
.constellation:hover { color: #fff; }
.constellation:hover .dot { box-shadow: 0 0 18px rgba(63, 224, 255, 1); }
.constellation:hover .dot::after { box-shadow: 0 0 0 1.5px rgba(6, 9, 26, 0.85), 0 0 24px rgba(63, 224, 255, 1); }

/* scatter the four satellites at different depths + give each its own orbit */
.constellation--ai      { top: 17%;  left: 13%;  --d: 0s;  animation-duration: 15s; }
.constellation--web     { top: 12%;  right: 16%; --d: -3s; opacity: .96; animation-duration: 19s; animation-direction: reverse; }
.constellation--mobile  { top: 34%;  left: 7%;   --d: -5s; opacity: .9;  animation-duration: 13s; }
.constellation--design  { top: 40%;  right: 9%;  --d: -7s; opacity: .92; animation-duration: 17s; animation-direction: reverse; }

@keyframes float-point {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes ping {
  0%   { transform: scale(.7); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}
/* satellites: a clearly-visible slow orbital drift around their anchor point */
@keyframes sat-orbit {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(26px, -18px); }
  50%  { transform: translate(40px, 6px); }
  75%  { transform: translate(16px, 22px); }
  100% { transform: translate(0, 0); }
}
@keyframes sat-tilt {
  0%, 100% { transform: rotate(-17deg); }
  50%      { transform: rotate(-3deg); }
}
@keyframes nav-blink {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* The small luminous NDS "sun" marker above the planet limb */
.hero-sun {
  position: absolute;
  left: 50%;
  bottom: clamp(54px, 13vh, 132px);
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.92), rgba(63,224,255,.5) 46%, rgba(124,92,255,0) 72%);
  animation: sun-pulse 5.5s ease-in-out infinite;
}
.hero-sun img {
  height: 38px; width: auto;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.8));
}
@keyframes sun-pulse {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(63,224,255,.6)); transform: translateX(-50%) scale(1); }
  50%      { filter: drop-shadow(0 0 40px rgba(124,92,255,.85)); transform: translateX(-50%) scale(1.06); }
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 880px;
  margin-top: clamp(8px, 4vh, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-eyebrow {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  backdrop-filter: blur(8px);
}

.hero-title {
  margin-top: 26px;
  font-size: clamp(2.5rem, 6.6vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}
.hero-title em {
  font-style: normal;
  position: relative;
  background: var(--aurora);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: aurora-flow 8s ease-in-out infinite;
}
.hero-title em::after {
  content: "";
  position: absolute;
  left: 2%; right: 2%; bottom: -.08em;
  height: 3px;
  border-radius: 3px;
  background: var(--aurora);
  opacity: .55;
  filter: blur(1px);
}

.hero-sub {
  margin-top: 24px;
  max-width: 60ch;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--text-mid);
  line-height: 1.7;
}

.hero-actions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 36px);
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-scroll::after {
  content: "";
  width: 1px; height: 30px;
  background: linear-gradient(180deg, var(--cyan), transparent);
  animation: scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(.5); opacity: .4; transform-origin: top; }
  50%      { transform: scaleY(1);  opacity: 1;  transform-origin: top; }
}

/* ----------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.btn-light,
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: .005em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}

/* Brand-gradient primary (keeps NDS identity) */
.btn-primary,
.btn-submit {
  color: #fff;
  background: var(--brand-grad);
  box-shadow: var(--glow-brand);
}
.btn-primary:hover,
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 54px rgba(45,108,240,.55); }

.btn-secondary,
.btn-light {
  color: var(--text);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(8px);
}
.btn-secondary:hover,
.btn-light:hover {
  transform: translateY(-2px);
  border-color: rgba(63,224,255,.5);
  box-shadow: var(--glow-cyan);
}

/* ----------------------------------------------------------------------------
   8. SUBPAGE HERO (startups / vacancies)
   -------------------------------------------------------------------------- */
.subpage-hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vh, 96px) var(--pad-x) clamp(40px, 7vh, 80px);
  text-align: center;
}
.subpage-hero__content { max-width: 760px; margin: 0 auto; }
.subpage-hero .hero-eyebrow {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  background: var(--glass);
}
.subpage-hero h1 {
  margin-top: 22px;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.05;
  color: var(--text);
}
.subpage-hero h1 em {
  font-style: normal;
  background: var(--aurora);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: aurora-flow 9s ease-in-out infinite;
}
.subpage-hero p { margin: 20px auto 0; max-width: 58ch; color: var(--text-mid); }
.subpage-actions { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color .25s var(--ease);
}
.back-link:hover { color: var(--cyan); }

/* ----------------------------------------------------------------------------
   9. HUD GLASS CARDS — shared panel language
   -------------------------------------------------------------------------- */
.feature-card,
.process-step,
.portfolio-card,
.route-card,
.talent-card,
.vacancy-card {
  position: relative;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    var(--glass);
  border: 1px solid var(--glass-line-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* aurora hairline along the top edge */
.feature-card::before,
.process-step::before,
.portfolio-card::before,
.route-card::before,
.talent-card::before,
.vacancy-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,92,255,.7), rgba(63,224,255,.7), transparent);
  opacity: .7;
}
/* faint corner glow */
.feature-card::after,
.process-step::after,
.portfolio-card::after,
.talent-card::after,
.vacancy-card::after {
  content: "";
  position: absolute;
  top: -40%; right: -30%;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,92,255,.20), transparent 68%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.feature-card:hover,
.process-step:hover,
.portfolio-card:hover,
.talent-card:hover,
.vacancy-card:hover {
  transform: translateY(-6px);
  border-color: rgba(63,224,255,.34);
  box-shadow: var(--glow-soft);
}
.feature-card:hover::after,
.process-step:hover::after,
.portfolio-card:hover::after,
.talent-card:hover::after,
.vacancy-card:hover::after { opacity: 1; }

/* ----------------------------------------------------------------------------
   10. ABOUT + FEATURES
   -------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.about-body p { margin-top: 18px; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.feature-card { padding: 26px 24px; }
.feature-icon {
  width: 36px; height: 36px;
  color: var(--cyan);
  margin-bottom: 16px;
  filter: drop-shadow(0 0 8px rgba(63,224,255,.45));
}
.feature-card h4 { font-size: 1.06rem; color: var(--text); margin-bottom: 8px; }
.feature-card p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.55; }

/* ----------------------------------------------------------------------------
   11. PROCESS / SOLUTIONS — steps connected by a constellation line
   -------------------------------------------------------------------------- */
.process-grid {
  position: relative;
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* thin constellation connector running across the steps */
.process-grid::before {
  content: "";
  position: absolute;
  top: 40px; left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,92,255,.5), rgba(63,224,255,.5), rgba(51,224,138,.5), transparent);
  z-index: 0;
}
.process-step { padding: 30px 24px; z-index: 1; }
.step-num {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text);
  background: var(--space-600);
  border: 1px solid rgba(63,224,255,.4);
  box-shadow: 0 0 0 5px rgba(6,7,15,.9), 0 0 18px rgba(63,224,255,.4);
}
.process-step h3 { font-size: 1.04rem; color: var(--text); margin-bottom: 10px; line-height: 1.25; }
.process-step p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; }

/* ----------------------------------------------------------------------------
   12. PORTFOLIO — star-map grid with glowing node markers
   -------------------------------------------------------------------------- */
.portfolio-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.portfolio-next {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: .08em;
  color: var(--cyan);
  border-bottom: 1px solid rgba(63,224,255,.4);
  padding-bottom: 3px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.portfolio-next:hover { color: var(--text); border-color: var(--text); }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.portfolio-card { padding: 30px 28px; }
/* glowing node marker (star-map point) at top-right */
.portfolio-card .portfolio-meta {
  position: absolute;
  top: 26px; right: 26px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--aurora);
  box-shadow: 0 0 0 4px rgba(124,92,255,.12), 0 0 16px rgba(63,224,255,.8);
}
.portfolio-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--cyan);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(63,224,255,.3);
  background: rgba(63,224,255,.06);
}
.portfolio-card h3 { font-size: 1.5rem; color: var(--text); margin: 18px 0 10px; }
.portfolio-card .desc { color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; }

/* ----------------------------------------------------------------------------
   13. ROUTE CARDS
   -------------------------------------------------------------------------- */
.route-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.route-card { padding: 38px 34px; display: flex; flex-direction: column; gap: 12px; }
.route-card small {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.route-card h3 { font-size: 1.7rem; color: var(--text); }
.route-card p { color: var(--text-mid); font-size: 0.96rem; }
.route-card strong {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--aurora);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.route-card--startup:hover { border-color: rgba(124,92,255,.5); }
.route-card--vacancy:hover { border-color: rgba(51,224,138,.5); }

/* ----------------------------------------------------------------------------
   14. FORMS
   -------------------------------------------------------------------------- */
.talent-card { padding: clamp(26px, 3vw, 40px); }
.talent-card > h3 { font-size: 1.4rem; color: var(--text); margin-bottom: 8px; }
.talent-card > p { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 22px; }

.talent-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.apply-form, .talent-card form { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 16px; display: flex; flex-direction: column; }
.form-field label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-mid);
  margin-bottom: 7px;
}
.req { color: var(--magenta); margin-left: 3px; }

.form-field input,
.form-field select,
.form-field textarea,
.vacancy-search {
  width: 100%;
  padding: 12px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-line-2);
  background: rgba(6, 8, 20, 0.6);
  color: var(--text);
  font-size: 0.94rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.form-field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.form-field input::placeholder,
.form-field textarea::placeholder,
.vacancy-search::placeholder { color: var(--text-faint); }
.form-field select { appearance: none; cursor: pointer; }
.form-field select option { background: var(--space-700); color: var(--text); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.vacancy-search:focus {
  outline: none;
  border-color: rgba(63,224,255,.6);
  box-shadow: 0 0 0 3px rgba(63,224,255,.14);
  background: rgba(8, 11, 28, 0.85);
}

.form-submit { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }
.btn-submit { width: 100%; margin-top: 6px; }
.form-note { font-size: 0.78rem; color: var(--text-faint); line-height: 1.5; }

.terms-list { margin-top: 22px; display: flex; flex-direction: column; gap: 11px; }
.terms-list li {
  position: relative;
  padding-left: 26px;
  color: var(--text-mid);
  font-size: 0.95rem;
}
.terms-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--aurora);
  box-shadow: 0 0 10px rgba(63,224,255,.7);
}

/* success message */
.form-success {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  padding: 0 16px;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--green-2);
  background: rgba(51, 224, 138, 0.1);
  border: 1px solid transparent;
  transform: translateY(8px);
  transition: opacity .4s var(--ease), max-height .4s var(--ease), transform .4s var(--ease), margin-top .4s var(--ease), padding .4s var(--ease);
}
.form-success.show {
  max-height: 80px;
  opacity: 1;
  margin-top: 16px;
  padding: 13px 16px;
  border-color: rgba(51,224,138,.4);
  transform: translateY(0);
  box-shadow: 0 0 24px rgba(51,224,138,.18);
}

/* ----------------------------------------------------------------------------
   15. VACANCIES — toolbar, filters, search, cards, modal
   -------------------------------------------------------------------------- */
.vacancies-head { margin-bottom: 32px; }
.vacancy-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.vacancy-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-btn {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-mid);
  background: var(--glass);
  border: 1px solid var(--glass-line-2);
  transition: all .25s var(--ease);
}
.filter-btn:hover { color: var(--text); border-color: rgba(63,224,255,.4); }
.filter-btn.active {
  color: #fff;
  background: var(--aurora);
  border-color: transparent;
  box-shadow: 0 0 20px rgba(124,92,255,.45);
}
.vacancy-search { max-width: 320px; }

.vacancy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.vacancy-card { padding: 28px 26px; display: flex; flex-direction: column; }
.vacancy-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.vacancy-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(63,224,255,.3);
  background: rgba(63,224,255,.06);
}
.vacancy-date {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-faint);
}
.vacancy-card h3 { font-size: 1.28rem; color: var(--text); margin-bottom: 10px; }
.vacancy-card > p { color: var(--text-mid); font-size: 0.93rem; line-height: 1.55; margin-bottom: 18px; }
.vacancy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 22px;
}
.vacancy-meta span {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: .01em;
}
.vacancy-card .btn-submit { margin-top: auto; }

.vacancy-empty {
  grid-column: 1 / -1;
  padding: 56px 28px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--glass-line);
  border-radius: var(--r-lg);
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: .02em;
}

/* ---- modal ---- */
.vacancy-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 4, 10, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.vacancy-modal.open { opacity: 1; visibility: visible; }
.vacancy-modal__dialog {
  width: min(640px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, rgba(20,26,60,.6), rgba(10,13,32,.92));
  border: 1px solid var(--glass-line);
  box-shadow: 0 40px 120px rgba(2,4,14,.8), var(--glow-violet);
  transform: translateY(24px) scale(.97);
  opacity: 0;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.vacancy-modal.open .vacancy-modal__dialog { transform: translateY(0) scale(1); opacity: 1; }
.vacancy-modal__dialog::-webkit-scrollbar { width: 8px; }
.vacancy-modal__dialog::-webkit-scrollbar-thumb { background: rgba(124,92,255,.4); border-radius: 8px; }

.vacancy-modal__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px clamp(24px, 4vw, 36px);
  background: rgba(8, 11, 28, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-line-2);
}
.vacancy-modal__head h3 { font-size: 1.4rem; color: var(--text); }
.vacancy-modal__head button {
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 1.3rem;
  color: var(--text-mid);
  border: 1px solid var(--glass-line-2);
  background: var(--glass);
  transition: all .25s var(--ease);
  line-height: 1;
}
.vacancy-modal__head button:hover { color: #fff; border-color: var(--magenta); transform: rotate(90deg); }

.vacancy-modal__body { padding: clamp(24px, 4vw, 36px); }
.vacancy-modal__info { margin-bottom: 28px; }
.vacancy-modal__info .vacancy-badge { display: inline-block; margin-bottom: 14px; }
.vacancy-modal__info .vacancy-meta { margin: 14px 0 18px; }
.vacancy-modal__info p { color: var(--text-mid); line-height: 1.65; }
.vacancy-modal__info h4 {
  font-size: 1rem;
  color: var(--text);
  margin: 22px 0 12px;
}
.vacancy-modal__info ul { display: flex; flex-direction: column; gap: 9px; }
.vacancy-modal__info li {
  position: relative;
  padding-left: 24px;
  color: var(--text-mid);
  font-size: 0.93rem;
}
.vacancy-modal__info li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--aurora);
  box-shadow: 0 0 9px rgba(63,224,255,.7);
}
.modal-form-title { font-size: 1.15rem; color: var(--text); margin-bottom: 18px; }
.apply-form { padding-top: 22px; border-top: 1px solid var(--glass-line-2); }

/* ----------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
footer {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 7vw, 76px) 0 44px;
  border-top: 1px solid var(--glass-line-2);
  background: linear-gradient(180deg, transparent, rgba(8, 10, 26, 0.7));
}
footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63,224,255,.5), rgba(124,92,255,.4), transparent);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer-logo { color: var(--text); font-family: var(--font-display); font-weight: 600; }
.footer-logo img { filter: drop-shadow(0 0 8px rgba(63,224,255,.35)); }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color .25s var(--ease);
}
.footer-links a:hover { color: var(--cyan); }
.footer-copy {
  width: 100%;
  padding-top: 24px;
  margin-top: 8px;
  border-top: 1px solid var(--glass-line-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: .04em;
  color: var(--text-faint);
}

/* ----------------------------------------------------------------------------
   17. RESPONSIVE + MOBILE NAV DRAWER (body.nav-open)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 80px 24px;
    background: rgba(5, 6, 14, 0.94);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s var(--ease);
    z-index: 90;
  }
  .nav-links a { font-size: 1.3rem; }
  .nav-links a::after { left: 50%; transform: translateX(-50%); }
  .nav-mobile-cta { display: block; margin-top: 12px; }
  .nav-mobile-cta a {
    padding: 14px 30px;
    border-radius: var(--r-pill);
    color: #fff;
    background: var(--brand-grad);
    box-shadow: var(--glow-brand);
  }
  .nav-mobile-cta a::after { display: none; }

  body.nav-open .nav-links { opacity: 1; visibility: visible; transform: translateY(0); }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  body.nav-open { overflow: hidden; }

  .about-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid::before { display: none; }
}

@media (max-width: 820px) {
  .features-grid { grid-template-columns: 1fr; }
  .portfolio-grid,
  .route-grid,
  .talent-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* constellation chips re-spread tighter on mobile */
  .constellation--ai     { top: 8%;  left: 8%; }
  .constellation--web    { top: 8%;  right: 8%; }
  .constellation--mobile { top: 22%; left: 6%; }
  .constellation--design { top: 22%; right: 6%; }
  .constellation { font-size: 0.62rem !important; gap: 7px; }

  .cosmos-planet { bottom: -100vw; width: 220vw; height: 220vw; }
}

@media (max-width: 560px) {
  .process-grid { grid-template-columns: 1fr; }   /* one card per row → no more tall, narrow cards */
  .vacancy-grid { grid-template-columns: 1fr; }
  .vacancy-search { max-width: 100%; width: 100%; }
  .vacancy-toolbar { flex-direction: column; align-items: stretch; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .hero-title { font-size: clamp(2.1rem, 9vw, 3rem); }
  .constellation--mobile,
  .constellation--design { display: none; }
}

/* ----------------------------------------------------------------------------
   18. PREFERS-REDUCED-MOTION — disable all non-essential animation
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .cosmos-nebula,
  .stars--far,
  .stars--mid,
  .stars--near,
  .cosmos-planet,
  .cosmos-planet__rim,
  .hero-sun,
  .constellation,
  .section-title em,
  .hero-title em,
  .subpage-hero h1 em,
  .route-card strong { animation: none !important; }
  .cosmos-shooting { display: none !important; }
  .hero-scroll::after { animation: none !important; }
}

/* ----------------------------------------------------------------------------
   19. CONTINUOUS 3D EARTH / SPACE BACKGROUND (Three.js)
   ONE fixed, full-viewport scene behind EVERY section — not per-section. The
   page content (z-index:2) scrolls above it; the Earth rotates on scroll and
   shifts camera/light per scroll-depth, so it reads as one environment.
   Progressive enhancement: invisible until earth-hero.js gets a WebGL context
   and sets `body.earth-active`; otherwise the CSS .cosmos-planet is the fallback.
   -------------------------------------------------------------------------- */
#earth-hero {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;            /* above fixed .cosmos-bg (-2); below content sections (2) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
}
#earth-hero canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
body.earth-active #earth-hero { opacity: 1; }
/* The photoreal Earth stands in for the generic planet and the decorative logo-sun. */
body.earth-active .cosmos-planet,
body.earth-active .hero-sun { display: none; }

/* Content layers scroll ABOVE the fixed Earth (sections get z-index:2 from the
   `section` rule). These dark scrims keep text readable while the gradient's
   transparent top/bottom edges let the Earth show through BETWEEN blocks, so the
   background stays visually continuous rather than boxed per section. */
/* First content block fades in from the hero's Earth → smooth hero→content
   transition (no hard line), then holds the flat dark scrim. */
body.earth-active #about {
  background: linear-gradient(180deg,
    rgba(6, 8, 16, 0)    0%,
    rgba(6, 8, 16, 0.82) 32%,
    rgba(6, 8, 16, 0.82) 100%);
}
/* The rest are a flat scrim with NO transparent edges, so adjacent sections
   tile into one continuous dark backdrop — no bright Earth "stripe" at seams. */
body.earth-active #how,
body.earth-active #portfolio,
body.earth-active .route-section {
  background: rgba(6, 8, 16, 0.82);
}
body.earth-active footer {
  background: rgba(6, 8, 16, 0.88);
}

/* --- Subpages (startups = Mars · vacancies = Jupiter) over the fixed planet --- */
/* content sections get the same flat dark scrim as the main page */
body.earth-active #startups,
body.earth-active #talent {
  background: rgba(6, 8, 16, 0.82);
}
/* the first section under the subpage hero fades in from the planet (smooth) */
body.earth-active .subpage-hero + section {
  background: linear-gradient(180deg,
    rgba(6, 8, 16, 0)    0%,
    rgba(6, 8, 16, 0.82) 32%,
    rgba(6, 8, 16, 0.82) 100%) !important;
}
/* keep the subpage hero text legible over the bright planet */
body.earth-active .subpage-hero h1,
body.earth-active .subpage-hero p,
body.earth-active .subpage-hero .hero-eyebrow,
body.earth-active .subpage-hero .eyebrow { text-shadow: 0 2px 20px rgba(2, 4, 12, 0.72); }
/* Hero text stays legible over the bright planet without hiding it. */
body.earth-active .hero-title,
body.earth-active .hero-sub { text-shadow: 0 2px 26px rgba(2, 4, 12, 0.65); }

@media (prefers-reduced-motion: reduce) {
  #earth-hero { transition: none; }
}