/* GStrain — sections & layout */

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
}

/* ─────────────── NAV ─────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  padding: 14px 0;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
  backdrop-filter: blur(24px) saturate(180%);
  background: color-mix(in oklab, var(--bg) 76%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0 20px 0 16px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}
.nav-logo {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: var(--fg);
  text-decoration: none;
}
.nav-logo img { width: 32px; height: 32px; border-radius: 4px; }
.nav-logo .sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  text-transform: uppercase;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid var(--line-strong);
  font-weight: 400;
}
.nav-links {
  display: flex; gap: 32px;
  font-size: 13.5px;
  color: var(--fg-muted);
}
.nav-links a {
  color: inherit; text-decoration: none;
  transition: color 160ms;
  position: relative;
  padding: 6px 0;
}
.nav-links a:hover { color: var(--fg); }
.nav-links a.active { color: var(--fg); }
.nav-links a.active::after {
  content: ''; position: absolute;
  bottom: -2px; left: 0; right: 0; height: 1px;
  background: var(--signal);
}
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-lang {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 0.08em;
}
.nav-lang span { cursor: pointer; padding: 0 4px; }
.nav-lang .active { color: var(--fg); }
@media (max-width: 960px) {
  .nav-links { display: none; }
}

/* ─────────────── HERO ─────────────── */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: radial-gradient(ellipse at 20% 10%, #112a4d 0%, var(--gs-ink-800) 50%, var(--gs-ink-900) 100%);
}

/* ── Hero background variants ── */
.hero .hero-bg-layer { position: absolute; inset: 0; pointer-events: none; }

/* v1: classic grid (default) — already handled by .hero-grid */

/* v2: starfield dots */
[data-hero-bg="stars"] .hero-grid { display: none; }
[data-hero-bg="stars"] .hero-bg-stars {
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(197,240,74,0.8), transparent 50%),
    radial-gradient(1px 1px at 85% 20%, rgba(31,163,224,0.8), transparent 50%),
    radial-gradient(1px 1px at 15% 70%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1.5px 1.5px at 60% 15%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(1px 1px at 50% 55%, rgba(61,184,122,0.7), transparent 50%),
    radial-gradient(1px 1px at 90% 75%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1px 1px at 5% 40%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(2px 2px at 75% 85%, rgba(31,163,224,0.7), transparent 50%),
    radial-gradient(1px 1px at 30% 10%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1px 1px at 95% 45%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1.5px 1.5px at 55% 90%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(1px 1px at 10% 90%, rgba(61,184,122,0.5), transparent 50%),
    radial-gradient(ellipse 600px 300px at 75% 25%, rgba(31,163,224,0.08), transparent 60%),
    radial-gradient(ellipse 400px 200px at 30% 70%, rgba(61,184,122,0.06), transparent 60%);
  background-size: 100% 100%;
  animation: twinkle 6s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

/* v6: nebula — deep space with colored haze + dense starfield */
[data-hero-bg="nebula"] .hero-grid { display: none; }
[data-hero-bg="nebula"] .hero-bg-nebula {
  background:
    radial-gradient(ellipse 700px 500px at 15% 80%, rgba(31,163,224,0.22), transparent 60%),
    radial-gradient(ellipse 800px 600px at 85% 20%, rgba(61,184,122,0.18), transparent 60%),
    radial-gradient(ellipse 500px 400px at 55% 50%, rgba(120,60,200,0.15), transparent 65%),
    radial-gradient(ellipse 300px 300px at 30% 30%, rgba(197,240,74,0.08), transparent 70%);
  animation: nebulaDrift 40s ease-in-out infinite alternate;
}
@keyframes nebulaDrift {
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; transform: scale(1); }
  100% { background-position: 6% -4%, -4% 3%, 2% -2%, -3% 4%; transform: scale(1.04); }
}

/* Dense small-star layer (tiled, slowly drifting) */
[data-hero-bg="nebula"] .hero-bg-nebula::before {
  content: '';
  position: absolute; inset: -10%;
  background-image:
    radial-gradient(0.8px 0.8px at 12% 18%, rgba(255,255,255,0.9), transparent 50%),
    radial-gradient(0.8px 0.8px at 34% 62%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(0.8px 0.8px at 58% 14%, rgba(255,255,255,0.8), transparent 50%),
    radial-gradient(0.8px 0.8px at 78% 48%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(0.8px 0.8px at 22% 88%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(0.8px 0.8px at 88% 78%, rgba(255,255,255,0.8), transparent 50%),
    radial-gradient(0.8px 0.8px at 48% 36%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(0.8px 0.8px at 6% 52%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(0.8px 0.8px at 92% 8%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(0.8px 0.8px at 42% 94%, rgba(255,255,255,0.8), transparent 50%),
    radial-gradient(0.8px 0.8px at 68% 82%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(0.8px 0.8px at 16% 42%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(0.8px 0.8px at 82% 32%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(0.8px 0.8px at 52% 72%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(0.8px 0.8px at 28% 8%, rgba(255,255,255,0.9), transparent 50%),
    radial-gradient(0.8px 0.8px at 74% 68%, rgba(255,255,255,0.5), transparent 50%);
  background-size: 250px 250px;
  background-repeat: repeat;
  opacity: 0.9;
  animation: starDrift 120s linear infinite;
}
@keyframes starDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-250px, -80px); }
}

/* Larger accent stars layer with twinkle */
[data-hero-bg="nebula"] .hero-bg-nebula::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,1), transparent 50%),
    radial-gradient(1.2px 1.2px at 70% 50%, rgba(255,255,255,0.9), transparent 50%),
    radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,1), transparent 50%),
    radial-gradient(1.2px 1.2px at 85% 20%, rgba(255,255,255,0.85), transparent 50%),
    radial-gradient(1.5px 1.5px at 15% 70%, rgba(197,240,74,0.9), transparent 50%),
    radial-gradient(2.5px 2.5px at 60% 15%, rgba(255,255,255,1), transparent 50%),
    radial-gradient(1.5px 1.5px at 50% 55%, rgba(31,163,224,0.9), transparent 50%),
    radial-gradient(1.2px 1.2px at 90% 75%, rgba(255,255,255,0.9), transparent 50%),
    radial-gradient(1.2px 1.2px at 5% 40%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(2px 2px at 75% 85%, rgba(61,184,122,0.9), transparent 50%),
    radial-gradient(1.5px 1.5px at 32% 45%, rgba(255,255,255,0.9), transparent 50%),
    radial-gradient(1.2px 1.2px at 95% 45%, rgba(255,255,255,0.8), transparent 50%),
    radial-gradient(1.8px 1.8px at 10% 15%, rgba(255,255,255,1), transparent 50%),
    radial-gradient(1.2px 1.2px at 65% 92%, rgba(255,255,255,0.8), transparent 50%);
  animation: twinkle 5s ease-in-out infinite;
}

/* Shooting star */
[data-hero-bg="nebula"] .hero-bg-nebula-shoot {
  position: absolute;
  top: 18%; left: -10%;
  width: 180px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), rgba(197,240,74,0.6), transparent);
  transform: rotate(18deg);
  opacity: 0;
  animation: shoot 11s ease-in infinite;
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
}
[data-hero-bg="nebula"] .hero-bg-nebula-shoot-2 {
  position: absolute;
  top: 55%; left: -10%;
  width: 140px; height: 1.2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), rgba(31,163,224,0.55), transparent);
  transform: rotate(14deg);
  opacity: 0;
  animation: shoot 17s ease-in infinite;
  animation-delay: 6s;
  box-shadow: 0 0 8px rgba(255,255,255,0.5);
}
@keyframes shoot {
  0%   { transform: translate(0, 0) rotate(18deg); opacity: 0; }
  5%   { opacity: 1; }
  25%  { transform: translate(130vw, 40vh) rotate(18deg); opacity: 0; }
  100% { transform: translate(130vw, 40vh) rotate(18deg); opacity: 0; }
}
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

body.no-anim [data-hero-bg="nebula"] .hero-bg-nebula,
body.no-anim [data-hero-bg="nebula"] .hero-bg-nebula::before,
body.no-anim [data-hero-bg="nebula"] .hero-bg-nebula::after,
body.no-anim [data-hero-bg="nebula"] .hero-bg-nebula-shoot,
body.no-anim [data-hero-bg="nebula"] .hero-bg-nebula-shoot-2 {
  animation: none !important;
}

/* v7: earth-horizon — curved limb with atmospheric glow from below */
[data-hero-bg="earth"] .hero-grid { opacity: 0.15; }
[data-hero-bg="earth"] .hero-bg-earth {
  overflow: hidden;
}
[data-hero-bg="earth"] .hero-bg-earth::before {
  /* the atmosphere thin arc */
  content: '';
  position: absolute;
  bottom: -80%;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 68%, rgba(31,163,224,0.35) 70%, rgba(61,184,122,0.25) 72%, transparent 75%);
}
[data-hero-bg="earth"] .hero-bg-earth::after {
  /* deep space star field on top */
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1.5px 1.5px at 40% 15%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(1px 1px at 85% 40%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 15% 10%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1.5px 1.5px at 60% 25%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(1px 1px at 50% 8%, rgba(255,255,255,0.4), transparent 50%);
}

/* v8: constellation — thin connecting lines between stars */
[data-hero-bg="constellation"] .hero-grid { display: none; }
[data-hero-bg="constellation"] .hero-bg-constellation {
  background:
    radial-gradient(ellipse 800px 500px at 50% 40%, rgba(31,163,224,0.1), transparent 70%);
}
[data-hero-bg="constellation"] .hero-bg-constellation svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* v3: orbit rings */
[data-hero-bg="orbits"] .hero-grid { opacity: 0.15; }
[data-hero-bg="orbits"] .hero-bg-orbits {
  display: flex; align-items: center; justify-content: center;
}
[data-hero-bg="orbits"] .hero-bg-orbits::before,
[data-hero-bg="orbits"] .hero-bg-orbits::after {
  content: '';
  position: absolute;
  right: -15%; top: 50%;
  width: 1000px; height: 1000px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transform: translateY(-50%);
}
[data-hero-bg="orbits"] .hero-bg-orbits::after {
  width: 700px; height: 700px;
  border-color: rgba(61,184,122,0.28);
}
[data-hero-bg="orbits"] .hero-bg-orbits .orbit-3 {
  position: absolute;
  right: -15%; top: 50%;
  width: 1300px; height: 1300px;
  border: 1px dashed rgba(31,163,224,0.22);
  border-radius: 50%;
  transform: translateY(-50%);
}

/* v4: topographic lines */
[data-hero-bg="topo"] .hero-grid { display: none; }
[data-hero-bg="topo"] .hero-bg-topo {
  background-image:
    radial-gradient(circle at 25% 50%, transparent 0, transparent 60px, rgba(255,255,255,0.04) 60px, rgba(255,255,255,0.04) 61px, transparent 61px, transparent 120px, rgba(255,255,255,0.04) 120px, rgba(255,255,255,0.04) 121px, transparent 121px, transparent 180px, rgba(61,184,122,0.15) 180px, rgba(61,184,122,0.15) 181px, transparent 181px, transparent 240px, rgba(255,255,255,0.04) 240px, rgba(255,255,255,0.04) 241px, transparent 241px);
}

/* v5: scanlines */
[data-hero-bg="scan"] .hero-grid { opacity: 0.2; }
[data-hero-bg="scan"] .hero-bg-scan {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(255,255,255,0.025) 3px 4px
  );
}

/* light theme tweaks */
[data-theme="light"][data-hero-bg="stars"] .hero-bg-stars {
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(10,22,40,0.4), transparent 50%),
    radial-gradient(1px 1px at 70% 50%, rgba(10,22,40,0.3), transparent 50%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(61,184,122,0.6), transparent 50%),
    radial-gradient(1px 1px at 85% 20%, rgba(31,163,224,0.6), transparent 50%),
    radial-gradient(1px 1px at 15% 70%, rgba(10,22,40,0.25), transparent 50%),
    radial-gradient(1.5px 1.5px at 60% 15%, rgba(10,22,40,0.3), transparent 50%);
}
[data-theme="light"] .hero {
  background: radial-gradient(ellipse at 20% 10%, #E3EEF5 0%, var(--gs-paper) 50%, var(--gs-paper-2) 100%);
}

.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  opacity: 0.5;
}
.hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  flex: 1;
  padding: 100px 0 60px;
  padding-right: 340px;
}
.hero-meta {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-meta .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gs-green);
  box-shadow: 0 0 0 3px rgba(61,184,122,0.2);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(61,184,122,0.2); }
  50% { box-shadow: 0 0 0 6px rgba(61,184,122,0.05); }
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 8vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0 0 32px;
  color: var(--fg);
  max-width: 12ch;
}
.hero h1 .accent-b { color: var(--gs-blue); font-style: italic; font-weight: 400; }
.hero h1 .accent-g { color: var(--gs-green); font-style: italic; font-weight: 400; }

.hero-sub {
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0 0 40px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-side {
  display: flex; flex-direction: column;
  gap: 20px;
  min-width: 280px;
  padding-left: 32px;
  border-left: 1px solid var(--line);
}
.hero-side-item {
  display: flex; flex-direction: column; gap: 6px;
}
.hero-side-item .n {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.hero-side-item .l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.hero-corner {
  position: absolute;
  top: 80px; right: 48px;
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.hero-corner-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding-top: 4px;
  border-top: 1px solid var(--line-strong);
}
.hero-corner > img,
.hero-corner > .logo-mark-img {
  width: 220px; height: 220px;
  filter: drop-shadow(0 8px 30px rgba(61,184,122,0.3));
  display: block;
}

/* Affiliation items under the corner logo */
.hero-corner-affil {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding-top: 4px;
  border-top: 1px solid var(--line-strong);
}
.hero-corner-affil-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.corner-affil-logo {
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 200ms;
}
.corner-affil-logo:hover { opacity: 1; }
.corner-affil-logo--tv {
  height: 28px;
  width: auto;
  max-width: 120px;
  filter: brightness(0) invert(1) opacity(0.88);
}
[data-theme="light"] .corner-affil-logo--tv { filter: none; }
.corner-affil-logo--esa {
  height: 36px;
  width: 36px;
  filter: opacity(0.88);
}
[data-theme="light"] .corner-affil-logo--esa { filter: invert(1) opacity(0.85); }
.corner-affil-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.corner-affil-tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
}
.corner-affil-name {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--fg-muted);
  line-height: 1.35;
}

/* Readout strip — full-width band below hero */
.hero-strip {
  position: relative;
  display: flex;
  background: var(--gs-ink-900);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
[data-theme="light"] .hero-strip {
  background: var(--gs-paper-2);
}
.hero-strip > div {
  padding: 20px 32px;
  border-right: 1px solid var(--line);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: background 200ms;
}
.hero-strip > div::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 18px;
  width: 3px;
  height: 14px;
  background: var(--accent-2);
}
.hero-strip > div:last-child { border-right: none; }

/* ── Affiliation bar — between hero content and data strip ── */
.hero-affiliation {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
  padding: 24px 0;
}
[data-theme="light"] .hero-affiliation {
  background: rgba(0,0,0,0.025);
}
.hero-affil-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.hero-affil-item {
  display: flex;
  align-items: center;
  gap: 18px;
}
.affil-logo {
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.82;
  transition: opacity 200ms;
}
.affil-logo:hover { opacity: 1; }
.affil-logo--tv {
  height: 44px;
  width: auto;
  max-width: 180px;
  filter: brightness(0) invert(1) opacity(0.88);
}
[data-theme="light"] .affil-logo--tv {
  filter: none;
}
.affil-logo--esa {
  height: 56px;
  width: 56px;
  filter: opacity(0.88);
}
[data-theme="light"] .affil-logo--esa {
  filter: invert(1) opacity(0.85);
}
.affil-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.affil-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
}
.affil-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  line-height: 1.4;
}
.hero-affil-divider {
  width: 1px;
  height: 52px;
  background: var(--line-strong);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .hero-affil-inner { gap: 24px; }
  .hero-affil-divider { display: none; }
}
.hero-strip .lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-left: 18px;
}
.hero-strip .val {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  padding-left: 18px;
  line-height: 1.2;
}
.hero-strip > div:hover { background: rgba(255,255,255,0.03); }
[data-theme="light"] .hero-strip > div:hover { background: rgba(0,0,0,0.03); }

@media (max-width: 720px) {
  .hero-strip { flex-wrap: wrap; }
  .hero-strip > div { flex-basis: 50%; }
  .hero-strip > div:nth-child(2) { border-right: none; }
}

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-side { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
  .hero-corner { display: none; }
}

/* ─────────────── SECTION HEADER ─────────────── */
.section {
  padding: 120px 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.sec-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  margin-bottom: 80px;
  align-items: end;
}
.sec-head .l { display: flex; flex-direction: column; gap: 12px; }
.sec-head .l .num {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  width: fit-content;
}
[data-theme="light"] .sec-head .l .num {
  background: rgba(0,0,0,0.04);
}
.sec-head .l h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0;
  color: var(--fg);
}
.sec-head .l h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gs-green);
}
.sec-head .r {
  font-size: 17px;
  color: var(--fg-muted);
  line-height: 1.55;
  max-width: 58ch;
}
@media (max-width: 960px) {
  .sec-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
}

/* ─────────────── MISSION PILLARS ─────────────── */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pillar {
  padding: 48px 32px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  transition: background 200ms;
}
.pillar:last-child { border-right: none; }
.pillar:hover { background: rgba(255,255,255,0.02); }
[data-theme="light"] .pillar:hover { background: rgba(0,0,0,0.02); }

.pillar-ico {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--accent-2);
  transition: border-color 220ms, box-shadow 220ms;
}
.pillar:hover .pillar-ico {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(61,184,122,0.1);
}
.pillar-media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 4px;
}
.pillar-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out);
}
.pillar:hover .pillar-media img { transform: scale(1.03); }
.pillar-media-tint {
  position: absolute; inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.pillar-media-tag {
  position: absolute;
  bottom: 10px; left: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  background: rgba(0,0,0,0.5);
  padding: 3px 8px;
  border-radius: 2px;
}
.pillar h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0;
}
.pillar p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0;
}
.pillar-stat {
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px dashed var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.pillar-stat .n {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.pillar-stat .l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: right;
}
@media (max-width: 960px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: none; border-bottom: 1px solid var(--line); }
  .pillar:last-child { border-bottom: none; }
}

/* ─────────────── TECHNOLOGY ROWS ─────────────── */
.tech-list { display: flex; flex-direction: column; }
.tech-row {
  display: grid;
  grid-template-columns: 80px 1fr 1.1fr;
  gap: 48px;
  padding: 48px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.tech-row:last-child { border-bottom: 1px solid var(--line); }
.tech-row .idx {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.12em;
  padding-top: 8px;
}
.tech-row h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 12px;
}
.tech-row .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 16px;
  display: block;
}
.tech-row p {
  color: var(--fg-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 50ch;
}
.tech-row ul {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.tech-row ul li {
  font-size: 14px;
  color: var(--fg-muted);
  display: flex;
  gap: 10px;
  align-items: start;
}
.tech-row ul li::before {
  content: '→';
  color: var(--accent-2);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.tech-figure {
  aspect-ratio: 4 / 3;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
}
.tech-specs {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
}
.tech-specs > div {
  padding: 16px;
  border-right: 1px solid var(--line);
}
.tech-specs > div:last-child { border-right: none; }

/* ─────────────── FUNDING BLOCK ─────────────── */
.funding {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: rgba(255,255,255,0.02);
}
[data-theme="light"] .funding { background: rgba(0,0,0,0.02); }
.funding-logos {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.funding-logos img {
  height: 44px;
  width: auto;
  flex-shrink: 0;
}
[data-theme="dark"] .funding-logos img[data-theme-target="light"] { display: none; }
[data-theme="light"] .funding-logos img[data-theme-target="dark"] { display: none; }
[data-theme="light"] .funding-logos img[data-theme-target="light"] { filter: none; }
.funding-sep {
  width: 1px;
  height: 44px;
  background: var(--line-strong);
  flex-shrink: 0;
}
.funding-eu {
  display: flex;
  align-items: center;
  gap: 8px;
}
.eu-stars svg { display: block; }
.eu-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.eu-text span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: block;
}
.funding-statement {
  font-size: 11.5px;
  color: var(--fg-dim);
  line-height: 1.55;
  margin: 0 0 8px;
}
.funding-cup {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.tech-specs .n {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1.1;
}
.tech-specs .l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 6px;
}
@media (max-width: 960px) {
  .tech-row { grid-template-columns: 1fr; gap: 24px; }
  .tech-row ul { grid-template-columns: 1fr; }
}

/* ─────────────── SERVICES GRID ─────────────── */
.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
/* outer shell (double-bezel) */
.service {
  padding: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 32px rgba(0,0,0,0.14);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: box-shadow 260ms cubic-bezier(0.32,0.72,0,1), border-color 260ms;
}
.service:hover {
  border-color: rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 16px 48px rgba(0,0,0,0.22);
}
[data-theme="light"] .service {
  background: rgba(0,0,0,0.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 20px rgba(0,0,0,0.06);
}
/* inner core */
.service-inner {
  flex: 1;
  padding: 40px 38px;
  border-radius: 8px;
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 320px;
}
.service::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: 999px 999px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.32,0.72,0,1);
  z-index: 1;
}
.service:hover::before { transform: scaleX(1); }
.service .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.14em;
}
.service h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0;
}
.service p {
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.service-tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 24px;
  border-top: 1px dashed var(--line);
}
.service-tags span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-muted);
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  letter-spacing: 0.04em;
  border-radius: 2px;
  background: rgba(255,255,255,0.02);
}
[data-theme="light"] .service-tags span { background: rgba(0,0,0,0.02); }
@media (max-width: 720px) {
  .services { grid-template-columns: 1fr; }
}

/* ─────────────── TEAM ─────────────── */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.member-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1;
}
.member-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.member-initials {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--gs-ink-600), var(--gs-ink-500));
  color: var(--accent-2);
}
.member-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.member-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.member-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.member-bio {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin-top: 6px;
  margin-bottom: 0;
  max-width: 32ch;
}
.member-link {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color 160ms;
}
.member-link:hover { color: var(--accent); }
.member-link svg { flex-shrink: 0; }
@media (max-width: 720px) {
  .team { grid-template-columns: 1fr; }
  .member { text-align: left; align-items: flex-start; flex-direction: row; gap: 20px; }
  .member-meta { align-items: flex-start; }
  .member-bio { max-width: 50ch; }
}

/* ─────────────── NEWS ─────────────── */
.news {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.news-item {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 220ms, box-shadow 220ms;
  padding: 0;
}
.news-item:hover {
  border-color: var(--line-strong);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.news-item:hover h4 { color: var(--accent-2); }
.news-item:hover .read { gap: 14px; }
.news-media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--surface);
}
.news-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out);
}
.news-item:hover .news-media img { transform: scale(1.03); }
.news-media-tint {
  position: absolute; inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.news-media-tag {
  position: absolute;
  top: 10px; left: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  background: rgba(0,0,0,0.55);
  padding: 3px 8px;
  border-radius: 2px;
}
.news-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.news-date {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.news-item .date {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: flex;
  justify-content: space-between;
}
.news-item .date .tag { color: var(--accent-2); }
.news-item h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  transition: color 180ms;
}
.news-item p {
  color: var(--fg-muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}
.news-item .read {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  transition: gap 180ms var(--ease-out);
}
@media (max-width: 960px) {
  .news { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .news { grid-template-columns: 1fr; }
}

/* ─────────────── CTA BAND ─────────────── */
.cta-band {
  padding: 120px 0;
  background: linear-gradient(135deg, var(--gs-ink-900), var(--gs-ink-700) 60%, var(--gs-green-3));
  border-top: 1px solid var(--line);
  color: #fff;
  position: relative;
  overflow: hidden;
}
[data-theme="light"] .cta-band { color: #fff; }
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 80% 40%, rgba(197,240,74,0.14), transparent 50%);
}
.cta-band::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.4;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.cta-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: end;
}
.cta-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0;
  color: #fff;
  max-width: 14ch;
}
.cta-inner h2 em { font-style: italic; font-weight: 400; color: var(--gs-lime); }
.cta-side { display: flex; flex-direction: column; gap: 20px; }
.cta-side p {
  font-size: 16px;
  color: rgba(255,255,255,0.72);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 960px) {
  .cta-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ─────────────── CONTACT ─────────────── */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.field input, .field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg);
  outline: none;
  transition: border-color 200ms;
}
.field input:focus, .field textarea:focus {
  border-color: var(--accent-2);
}
.field textarea { resize: vertical; min-height: 80px; }
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.contact-block h5 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 8px;
  font-weight: 500;
}
.contact-block p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg);
}
.contact-block a { color: var(--accent); text-decoration: none; }
.contact-block a:hover { text-decoration: underline; }
.contact-sent {
  display: flex; flex-direction: column; gap: 12px;
  justify-content: center; padding: 48px 0;
}
.contact-sent-icon {
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--accent-2);
  width: 52px; height: 52px;
  border: 1px solid var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.contact-sent h3 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500;
  letter-spacing: -0.025em; margin: 0;
}
.contact-sent p { color: var(--fg-muted); font-size: 15px; margin: 0; }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--accent-2);
}
@media (max-width: 960px) {
  .contact { grid-template-columns: 1fr; }
}

/* ─────────────── FOOTER ─────────────── */
.footer {
  padding: 60px 0 32px;
  border-top: 1px solid var(--line);
  background: var(--gs-ink-900);
}
[data-theme="light"] .footer { background: var(--gs-paper-2); }
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.footer-brand .lg {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 12px 0 8px;
}
.footer-brand p {
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  max-width: 40ch;
}
.footer-col h6 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 16px;
  font-weight: 500;
}
.footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.footer-col a, .footer-col li {
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 160ms;
}
.footer-col a:hover { color: var(--fg); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.08em;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 960px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ─────────────── TWEAKS PANEL ─────────────── */
.tw-panel {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 20px;
  width: 280px;
  backdrop-filter: blur(20px);
  font-family: var(--font-body);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.tw-panel h6 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--fg);
  display: flex; align-items: center; justify-content: space-between;
}
.tw-panel h6 .close {
  cursor: pointer;
  color: var(--fg-dim);
  font-size: 16px;
}
.tw-group {
  margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.tw-group label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.tw-options {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
}
.tw-options button {
  flex: 1;
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  border-right: 1px solid var(--line-strong);
  transition: all 150ms;
}
.tw-options button:last-child { border-right: none; }
.tw-options button.active {
  background: var(--signal);
  color: var(--gs-ink-900);
  font-weight: 500;
}
.tw-options button:hover:not(.active) {
  background: rgba(255,255,255,0.04);
  color: var(--fg);
}

/* ─────────────── ANIMATIONS ─────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 700ms var(--ease-out) both; }
.fade-up-1 { animation-delay: 80ms; }
.fade-up-2 { animation-delay: 160ms; }
.fade-up-3 { animation-delay: 240ms; }
.fade-up-4 { animation-delay: 320ms; }

/* ─────── WOW #1: H1 Line Mask Reveal ──────── */
@keyframes lineUp {
  from { transform: translateY(112%); }
  to   { transform: translateY(0); }
}
.h1-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.05em; /* prevent descender clipping */
  line-height: 1.0;
}
.h1-line > span {
  display: block;
  animation: lineUp 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.h1-line:nth-child(1) > span { animation-delay: 120ms; }
.h1-line:nth-child(2) > span { animation-delay: 260ms; }
.h1-line:nth-child(3) > span { animation-delay: 400ms; }
body.no-anim .h1-line > span { animation: none; transform: none; }

/* ─────── WOW #2: Hero Stats Bloom ─────────── */
@keyframes statBloom {
  from { opacity: 0; transform: translateY(28px) scale(0.82); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0) scale(1);     filter: blur(0); }
}
.hero-side-item .n {
  animation: statBloom 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-side-item:nth-child(1) .n { animation-delay: 700ms; }
.hero-side-item:nth-child(2) .n { animation-delay: 860ms; }
.hero-side-item:nth-child(3) .n { animation-delay: 1020ms; }
body.no-anim .hero-side-item .n { animation: none; }

/* ─────── WOW #3: Kinetic Marquee ──────────── */
.marquee-band {
  overflow: hidden;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.012);
  cursor: default;
  user-select: none;
}
[data-theme="light"] .marquee-band { background: rgba(0,0,0,0.02); }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeRoll 50s linear infinite;
}
.marquee-set {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.mq-item {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 0 18px;
  white-space: nowrap;
  transition: color 200ms;
}
.mq-item:hover { color: var(--accent-2); }
.mq-dot {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--line-strong);
  flex-shrink: 0;
}
.marquee-band:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeRoll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
body.no-anim .marquee-track { animation: none; }

body.no-anim * { animation: none !important; transition: none !important; }

/* ─────────────── SCROLL REVEAL ─────────────── */
/* Section-level fade (used when no staggerable children) */
.reveal-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}
.reveal-section.in-view { opacity: 1; transform: none; }
body.no-anim .reveal-section { opacity: 1; transform: none; transition: none; }

/* Sec-head gentle fade */
.sec-head {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.sec-head--in { opacity: 1; transform: none; }
body.no-anim .sec-head { opacity: 1; transform: none; transition: none; }

/* Staggered grid children — blur+translate entry (soft-skill) */
.stagger-child {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(5px);
  transition: opacity 680ms cubic-bezier(0.32,0.72,0,1),
              transform 680ms cubic-bezier(0.32,0.72,0,1),
              filter 680ms cubic-bezier(0.32,0.72,0,1);
}
.stagger-child.stagger-in { opacity: 1; transform: none; filter: blur(0); }
body.no-anim .stagger-child { opacity: 1; transform: none; filter: none; transition: none; }

/* ─────────────── SKIP LINK (a11y) ─────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 200;
  background: var(--signal);
  color: var(--gs-ink-900);
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 2px 2px;
  transition: top 200ms var(--ease-out);
  font-weight: 500;
}
.skip-link:focus { top: 0; }

/* ─────────────── SERVICE CARD SPOTLIGHT ─────────────── */
.service {
  --mx: -600px;
  --my: -600px;
}
.service-inner::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 8px;
  background: radial-gradient(
    300px circle at var(--mx, -600px) var(--my, -600px),
    rgba(61, 184, 122, 0.07),
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.32,0.72,0,1);
}
.service:hover .service-inner::after { opacity: 1; }
.service-inner { position: relative; }

/* ─────────────── DIRECTIONAL BUTTON FILL ─────────────── */
/* taste-skill: Directional Hover Aware Button */
.btn-ghost {
  overflow: hidden;
}
.btn-ghost::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.06);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
.btn-ghost[data-edge="left"]::after  { transform-origin: left; }
.btn-ghost[data-edge="right"]::after { transform-origin: right; }
.btn-ghost[data-edge="top"]::after   { transform: scaleY(0); transform-origin: top; }
.btn-ghost[data-edge="bottom"]::after{ transform: scaleY(0); transform-origin: bottom; }
.btn-ghost:hover::after {
  transform: scaleX(1);
}
.btn-ghost[data-edge="top"]:hover::after,
.btn-ghost[data-edge="bottom"]:hover::after {
  transform: scaleY(1);
}

/* ─────────────── HERO STATUS DOT ENHANCEMENT ─────────────── */
/* taste-skill: Perpetual Micro-Interactions — status breathing */
.hero-meta .dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(61,184,122,0.15);
  animation: dotRing 2.4s ease-out infinite;
}
.hero-meta .dot {
  position: relative;
}
@keyframes dotRing {
  0%   { transform: scale(0.6); opacity: 0.8; }
  60%  { transform: scale(2);   opacity: 0; }
  100% { transform: scale(2);   opacity: 0; }
}
body.no-anim .hero-meta .dot::after { animation: none; }

/* ─────────────── NAV INCUB BADGE ─────────────── */
.nav-incub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
}
[data-theme="light"] .nav-incub { background: rgba(0,0,0,0.03); }
.nav-incub-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}
.nav-incub-logo {
  height: 18px;
  width: auto;
  opacity: 0.85;
}
[data-theme="dark"] .nav-incub-logo[data-theme-target="light"] { display: none; }
[data-theme="light"] .nav-incub-logo[data-theme-target="dark"] { display: none; }

/* ─────────────── HERO STRIP HIDDEN ─────────────── */
.hero-strip { display: none !important; }

/* ─────────────── HERO LOGO MARK ─────────────── */
.hero-logo-mark {
  position: absolute;
  top: 80px; right: 48px;
  z-index: 2;
  filter: drop-shadow(0 8px 30px rgba(61,184,122,0.3));
}
@media (max-width: 960px) {
  .hero-logo-mark { display: none; }
}

/* ─────────────── HERO PARTNERS BLOCK ─────────────── */
.hero-partners {
  position: absolute;
  top: 310px; right: 48px;
  width: 380px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hp-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.hp-row {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(6,12,24,0.72);
  backdrop-filter: blur(20px);
  overflow: hidden;
}
[data-theme="light"] .hp-row {
  background: rgba(244,242,236,0.82);
}
.hp-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}
.hp-card-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.hp-sep {
  height: 1px;
  background: var(--line);
  margin: 0 16px;
}
.hp-tv-logo {
  width: 80%;
  height: auto;
  display: block;
}
.hp-esa-logo {
  width: 100%;
  height: auto;
  display: block;
}
.hp-pre {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.hp-name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  line-height: 1.3;
}
@media (max-width: 1100px) {
  .hero-partners { width: 320px; }
}
@media (max-width: 960px) {
  .hero-logo-mark { display: none; }
  .hero-partners {
    display: flex;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 20px 20px;
    gap: 8px;
  }
  .hero-partners .hp-label { display: none; }
  .hero-partners .hp-row {
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  .hero-partners .hp-sep {
    width: 1px;
    height: auto;
    margin: 8px 0;
  }
  .hero-partners .hp-card {
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }
  .hero-partners .hp-card-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .hero-partners .hp-pre { display: none; }
  .hero-partners .hp-tv-logo { width: auto; height: 22px; }
  .hero-partners .hp-esa-logo { width: auto; height: 32px; }
  .hero-partners .hp-name { font-size: 10px; line-height: 1.2; }
  .hero-inner { padding-right: 20px; padding-bottom: 120px; }
}

/* ── UI/UX Pro Max — Quality layer ─────────────────────────────────── */

/* cursor-pointer on all interactive cards */
.pillar,
.service,
.news-item,
.member,
.tech-row { cursor: default; }

.service,
.news-item { cursor: pointer; }

/* Stronger hover feedback on pillar */
.pillar { transition: background 0.2s, border-color 0.2s; }
.pillar:hover { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.12); }
[data-theme="light"] .pillar:hover { background: rgba(0,0,0,0.04) !important; }

/* Service card — subtle accent border on hover */
.service { transition: border-color 0.2s, background 0.2s; }
.service:hover { border-color: var(--accent) !important; }

/* Member photo ring glow on hover */
.member { transition: transform 0.25s ease; }
.member:hover { transform: translateY(-4px); }
.member:hover .member-photo { box-shadow: 0 0 0 2px var(--accent), 0 8px 24px rgba(0,0,0,0.3); }

/* Nav links — smooth transition */
.nav-links a { transition: color 0.15s; }

/* Btn transitions */
.btn { transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s; }

/* prefers-reduced-motion — disable all decorative animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; }
  .hero-bg-nebula-shoot,
  .hero-bg-nebula-shoot-2 { animation: none !important; }
}