/* =========================================================
   Oltre CSD — Apple-style premium
   ========================================================= */

:root {
  --bg:           #050A14;
  --bg-elev:      #0B1424;
  --bg-alt:       #070D1B;
  --surface:      #0E1828;
  --border:       rgba(255,255,255,.06);
  --border-strong:rgba(255,255,255,.12);
  --text:         #F5F7FA;
  --text-dim:     #9BA8BC;
  --text-mute:    #5E6B82;

  /* Brand teal (from real logo) + glow sibling */
  --brand:        #0a8b9a;
  --brand-bright: #20D4E8;
  --accent-2:     #3B6FE0;
  --accent-soft:  rgba(32,212,232,.10);

  --grad:         linear-gradient(135deg, #20D4E8 0%, #0a8b9a 60%, #3B6FE0 100%);
  --grad-soft:    linear-gradient(135deg, rgba(32,212,232,.18), rgba(59,111,224,.18));

  --radius:       16px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --shadow:       0 30px 80px -30px rgba(0,0,0,.7);
  --maxw:         1200px;
  --ease:         cubic-bezier(.2,.7,.2,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, "SF Pro Text", Segoe UI, Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `overflow-x: clip` (not hidden) prevents body from becoming the
     scroll container — keeps window.scrollY working for GSAP ScrollTrigger. */
  overflow-x: clip;
  letter-spacing: -.005em;
}

img, svg { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .2s var(--ease);
}

h1,h2,h3,h4 {
  font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.12;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 500; }
h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.005em;
}
h4 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-dim);
}

.display {
  font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  letter-spacing: -.005em;
  font-weight: 500;
}

p { margin: 0 0 1rem; color: var(--text-dim); }

ul { padding-left: 1.1rem; margin: 1rem 0; color: var(--text-dim); }
li { margin: .3rem 0; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--brand-bright); color: #001; padding: 10px 14px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

.eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.4rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.lead {
  font-size: 1.15rem;
  color: var(--text-dim);
  max-width: 60ch;
  line-height: 1.55;
}

/* =========================================================
   Ambient backdrop (always-on subtle aurora)
   ========================================================= */

.ambient {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  will-change: transform;
}
.ambient__orb--a {
  width: 600px; height: 600px;
  top: -10%; left: -10%;
  background: radial-gradient(circle, rgba(32,212,232,.25), transparent 60%);
  animation: drift1 22s ease-in-out infinite;
}
.ambient__orb--b {
  width: 800px; height: 800px;
  top: 30%; right: -20%;
  background: radial-gradient(circle, rgba(59,111,224,.22), transparent 60%);
  animation: drift2 28s ease-in-out infinite;
}
.ambient__orb--c {
  width: 500px; height: 500px;
  bottom: -10%; left: 30%;
  background: radial-gradient(circle, rgba(10,139,154,.20), transparent 60%);
  animation: drift3 30s ease-in-out infinite;
}
.ambient__grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,.012) 1px, transparent 1px),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,.01) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .6;
  mix-blend-mode: overlay;
}

@keyframes drift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(80px, 60px) scale(1.15); }
}
@keyframes drift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-100px, -80px) scale(1.1); }
}
@keyframes drift3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(60px, -60px) scale(1.18); }
}

/* =========================================================
   Buttons & links
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: .9rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
  letter-spacing: -.005em;
}

.btn--primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn--primary:hover {
  background: #0c9eaf;
  border-color: #0c9eaf;
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,.18);
  color: var(--text);
}
.btn--ghost:hover {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* Nav CTA: lighter outline variant of primary */
.nav__cta {
  background: transparent;
  border-color: rgba(255,255,255,.22);
  color: var(--text);
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 500;
}
.nav__cta:hover {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.link-arrow {
  display: inline-block;
  color: var(--brand-bright);
  font-weight: 600;
  margin-top: .8rem;
  transition: transform .2s var(--ease);
}
.link-arrow:hover { transform: translateX(4px); }

/* =========================================================
   Nav
   ========================================================= */

.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  background: rgba(5,10,20,.65);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.nav.is-scrolled { border-color: rgba(255,255,255,.04); background: rgba(5,10,20,.82); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.005em;
  color: var(--text);
}
.brand__mark { width: 22px; height: 30px; opacity: .95; }
.brand__accent { color: var(--text); font-weight: 500; }

.nav__links {
  display: flex;
  gap: 26px;
  font-size: .86rem;
}
.nav__links a {
  color: var(--text-dim);
  font-weight: 500;
  padding: 4px 0;
  transition: color .2s var(--ease);
}
.nav__links a:hover { color: var(--text); }

.nav__actions { display: flex; align-items: center; gap: 20px; }

/* Language selector — elegant dropdown */
.lang { position: relative; display: inline-flex; }
.lang__toggle {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  padding: 6px 4px 6px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lang__toggle:hover { color: var(--text); }
.lang__caret {
  width: 9px; height: 6px;
  color: var(--text-mute);
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.lang__toggle[aria-expanded="true"] .lang__caret {
  transform: rotate(180deg);
  color: var(--text);
}
.lang__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: rgba(7, 12, 22, .96);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 6px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 60;
  box-shadow: 0 20px 50px -15px rgba(0,0,0,.6);
}
.lang.is-open .lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang__menu li { margin: 0; padding: 0; }
.lang__menu li button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font: inherit;
  font-size: .88rem;
  font-weight: 500;
  text-align: left;
  width: 100%;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.lang__menu li button:hover {
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.lang__menu li button[aria-current="true"] {
  background: rgba(32,212,232,.08);
  color: var(--text);
}
.lang__code {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--text-mute);
  min-width: 22px;
}
.lang__menu li button[aria-current="true"] .lang__code {
  color: var(--brand-bright);
}
.lang__name { letter-spacing: -.005em; }

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.nav__toggle span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; }

/* =========================================================
   HERO — Apple-style
   ========================================================= */

.hero {
  position: relative;
  text-align: center;
  padding: clamp(40px, 5vw, 70px) 0 clamp(80px, 10vw, 120px);
  isolation: isolate;
  --hp: 0;
  overflow: hidden;
  /* Always fill the viewport so the next (white) section never peeks
     above the fold — it only appears once the user starts scrolling.
     100svh = "small viewport height" → accounts for mobile address bar. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* ===========================================================
   HERO BACKGROUND — clean institutional, no Earth, no video.
   Four CSS layers stacked behind the text content:
     1. .hero__bg          base radial-gradient deep space
     2. .hero__bg-stars    sparse star field (radial-gradient dots)
     3. .hero__bg-aurora   soft teal/cyan glow rising from the bottom
     4. .hero__bg-grid     faint engineering grid (almost invisible)
   The whole composition is pure CSS — 0 bytes of image/video, instant
   load, identical on every device, prefers-reduced-motion friendly.
   =========================================================== */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    /* Subtle vignette so the centre feels deeper than the edges */
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(20,40,80,.18), transparent 70%),
    /* Deep space base — slight blue cast away from pure black */
    linear-gradient(180deg, #03060E 0%, #050B18 55%, #06101F 100%);
}

/* --- Layer 2: starfield (pure CSS, no image, no JS) --------
   Two layered radial-gradients tiled across the hero create a
   convincing sparse star field. The smaller dots are stars, the
   larger faint ones are distant dust. */
.hero__bg-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 28% 72%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 47% 32%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 62% 88%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 78% 22%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1px 1px at 88% 58%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(0.8px 0.8px at 8% 48%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 36% 8%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 55% 55%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(0.8px 0.8px at 71% 12%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 18% 92%, rgba(255,255,255,.7), transparent 60%);
  background-size: 800px 600px;
  background-repeat: repeat;
  opacity: .85;
  animation: heroStarsDrift 90s linear infinite;
}
@keyframes heroStarsDrift {
  from { background-position: 0 0; }
  to   { background-position: -800px -600px; }
}

/* --- Layer 3: aurora glow at the bottom -------------------- */
.hero__bg-aurora {
  position: absolute;
  inset: 0;
  background:
    /* Wide teal glow rising from below the fold */
    radial-gradient(ellipse 110% 55% at 50% 118%, rgba(10,139,154,.42), transparent 60%),
    /* Cooler blue accent, slightly offset */
    radial-gradient(ellipse 70% 35% at 30% 110%, rgba(59,111,224,.22), transparent 65%),
    /* Warm hint on the right to balance — institutional, not flashy */
    radial-gradient(ellipse 55% 30% at 78% 112%, rgba(214,162,75,.10), transparent 70%);
  mix-blend-mode: screen;
}

/* --- Layer 4: faint engineering grid ----------------------- */
.hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(160,200,240,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(160,200,240,.035) 1px, transparent 1px);
  background-size: 88px 88px;
  /* Fade the grid out near the edges so it doesn't fight the layout */
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 55%, #000 35%, transparent 85%);
          mask-image: radial-gradient(ellipse 80% 65% at 50% 55%, #000 35%, transparent 85%);
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg-stars { animation: none; }
}
.hero__inner { position: relative; z-index: 4; }
.hero__inner {
  will-change: transform, opacity;
  transform: translate3d(0, calc(var(--hp, 0) * -30px), 0);
  opacity: calc(1 - var(--hp, 0) * .55);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__logo {
  position: relative;
  width: clamp(120px, 12vw, 170px);
  aspect-ratio: 1;
  margin-bottom: 32px;
  animation: heroIn 1s var(--ease-out) both;
}
.hero__logo img {
  width: 100%; height: 100%;
  position: relative; z-index: 2;
  filter: drop-shadow(0 6px 30px rgba(32,212,232,.15));
}
.hero__logo-glow {
  position: absolute; inset: -20%;
  background: radial-gradient(circle, rgba(32,212,232,.12), transparent 65%);
  filter: blur(36px);
  z-index: 1;
}

@keyframes heroIn {
  0% { opacity: 0; transform: translateY(20px) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes pulseGlow {
  0%,100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.hero__title {
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .2em .6em;
  line-height: 1.1;
  max-width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(.7rem, 1.1vw, .9rem);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero__word {
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(20px);
  animation: wordIn 1s var(--ease-out) both;
  animation-delay: var(--d, 0s);
}
.hero__word:nth-child(2) { color: var(--brand-bright); }
.hero__word:nth-child(3) { color: var(--text); }
@keyframes wordIn {
  0% { opacity: 0; transform: translateY(40px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero__tagline {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 500;
  color: var(--text);
  margin: 0 0 20px;
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) .55s both;
}

/* Motto — modern geometric statement (Space Grotesk for cyber/space/defense feel) */
.hero__motto {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--text);
  margin: 14px auto 36px;
  max-width: 1000px;
  text-align: center;
  display: block;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease-out) .55s both;
}
.hero__motto-a,
.hero__motto-b {
  display: inline;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -.015em;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: initial;
}
.hero__motto-a { color: var(--text-dim); }
.hero__motto-b { color: var(--text); font-weight: 600; }
.hero__motto-a::after { content: ' '; }

.hero__lead {
  font-size: 1.15rem;
  max-width: 640px;
  color: var(--text-dim);
  margin: 0 auto 40px;
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) .7s both;
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 60px;
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) .85s both;
}

.hero__chips {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) 1s both;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  font-size: .86rem;
  color: var(--text-dim);
  backdrop-filter: blur(10px);
}
.chip__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  animation: pulseDot 2s ease-in-out infinite;
}
.chip__dot--cyber   { background: var(--brand-bright); box-shadow: 0 0 12px var(--brand-bright); }
.chip__dot--space   { background: #A8E6F0;             box-shadow: 0 0 12px #A8E6F0; animation-delay: .4s; }
.chip__dot--defense { background: var(--accent-2);     box-shadow: 0 0 12px var(--accent-2); animation-delay: .8s; }
@keyframes pulseDot {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.8); }
}

.hero__scroll {
  margin-top: 70px;
  width: 26px; height: 42px;
  border: 1.5px solid var(--border-strong);
  border-radius: 14px;
  position: relative;
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) 1.2s both;
}
.hero__scroll span {
  position: absolute;
  top: 8px; left: 50%;
  width: 2px; height: 8px;
  background: var(--brand-bright);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot {
  0% { top: 8px; opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { top: 24px; opacity: 0; }
}

/* =========================================================
   TRUST STRIP — infinite marquee
   ========================================================= */

/* Trust strip — one clean white band that holds all client &
   partner logos. Because the source WebPs already carry white
   backgrounds, the band IS the canvas: logos blend in colour-
   accurate without "card-on-card" stacking. */
.trust {
  background: #ffffff;
  padding: 88px 0 96px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.trust .container {
  display: grid;
  gap: 48px;
  max-width: 1440px;
}
.trust__label {
  text-align: center;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.8rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #5a6573;
  margin: 0;
}
.trust__logos {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  gap: clamp(20px, 2.6vw, 48px);
  max-width: 1440px;
  margin: 0 auto;
}
.trust__logos img {
  display: block;
  width: 100%;
  height: clamp(72px, 8.5vw, 140px);
  object-fit: contain;
  filter: saturate(0.95);
  opacity: 0.95;
  transition: filter .25s var(--ease), opacity .25s var(--ease),
              transform .25s var(--ease);
}
.trust__logos img:hover {
  filter: saturate(1);
  opacity: 1;
  transform: translateY(-2px);
}
/* Tablet: still one row */
@media (max-width: 1024px) {
  .trust { padding: 64px 0 70px; }
  .trust__logos { gap: 14px; }
  .trust__logos img { height: clamp(54px, 7.5vw, 96px); }
}
/* Mobile: flex wrap centered, larger logos */
@media (max-width: 640px) {
  .trust { padding: 48px 0 56px; }
  .trust .container { gap: 28px; }
  .trust__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 20px;
    max-width: none;
  }
  .trust__logos img {
    flex: 0 0 auto;
    width: auto;
    height: 68px;
    max-width: 170px;
  }
}

/* =========================================================
   Logo tile (clients & partners grid)
   ========================================================= */

.logo-tile {
  display: grid;
  place-items: center;
  padding: 26px 30px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-elev);
  min-width: 200px;
  min-height: 90px;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease-out), border-color .2s var(--ease), background .3s var(--ease);
}
.logo-tile::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.logo-tile:hover {
  transform: translateY(-4px);
  border-color: transparent;
  background: rgba(255,255,255,.04);
}
.logo-tile:hover::before { opacity: 1; }
.logo-tile img {
  height: 38px;
  width: auto;
  color: var(--text);
  filter: brightness(0) invert(1);
  opacity: .85;
  transition: opacity .2s var(--ease), transform .35s var(--ease-out);
}
.logo-tile:hover img { opacity: 1; transform: scale(1.06); }

/* =========================================================
   PILLARS — scrollytelling Cyber / Space / Defense
   ========================================================= */

.pillars {
  padding: clamp(100px, 12vw, 160px) 0 0;
  position: relative;
}

.pillars__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 80px;
}

/* Each pillar = a tall stage with a sticky 100vh viewport inside.
   Scroll budget = 200vh so the hero stays pinned for ~100vh of scroll
   while frames scrub through. */
.pillar-stage {
  position: relative;
  min-height: 200vh;
  width: 100%;
}
.pillar-stage__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.pillar-stage[data-stage] { /* preserve gradient backgrounds on outer */ }
/* Each stage has its own visual identity / mood */
.pillar-stage[data-stage="cyber"] {
  background:
    radial-gradient(ellipse at 25% 30%, rgba(32,212,232,.22), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(10,139,154,.18), transparent 55%),
    linear-gradient(180deg, #061018 0%, #050A14 100%);
}
.pillar-stage[data-stage="space"] {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(129,140,248,.22), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(79,70,229,.16), transparent 50%),
    linear-gradient(180deg, #02030a 0%, #050519 100%);
}
.pillar-stage[data-stage="space"]::after {
  /* Subtle starfield texture for the deep-space mood */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(1px 1px at 32% 72%, rgba(255,255,255,.55), transparent 50%),
    radial-gradient(1px 1px at 55% 38%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(1px 1px at 72% 14%, rgba(255,255,255,.5), transparent 50%),
    radial-gradient(1px 1px at 88% 62%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,.6), transparent 50%);
  pointer-events: none;
  z-index: 0;
  opacity: .8;
}
.pillar-stage[data-stage="defense"] {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(251,146,60,.20), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(194,65,12,.20), transparent 55%),
    linear-gradient(180deg, #110a06 0%, #0a0805 100%);
}
.pillar-stage[data-stage="defense"]::before {
  /* Faint tactical grid for the defense mood */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   rgba(251,146,60,.05) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg,  rgba(251,146,60,.05) 0 1px, transparent 1px 60px);
  pointer-events: none;
  z-index: 0;
}

/* The .viz inside pillar-stage now fills the entire stage as background */
.pillar-stage .viz {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 1;
  transform: none;
  transition: none;
}
.pillar-stage .three-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  overflow: hidden;
}

/* Hero image — Apple-style scroll-driven photo
   When the user drops an image at the configured path, JS adds .has-image
   to the parent and the photo replaces the 3D scene. */
.pillar-stage__hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: none;
}
.pillar-stage__hero.has-image,
.pillar-stage__hero.has-video,
.pillar-stage__hero.has-sequence { display: block; z-index: 1; }
.pillar-stage__hero img,
.pillar-stage__hero video,
.pillar-stage__hero canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--hero-scale, 1.15)) translate3d(var(--hero-x, 0), var(--hero-y, 0), 0);
  filter: blur(var(--hero-blur, 0px)) brightness(var(--hero-bri, 1));
  opacity: var(--hero-opacity, 1);
  will-change: transform, filter, opacity;
}
/* Priority order: sequence (canvas) > video > image. The canvas
   shows ONLY when a real frame sequence is loaded — otherwise it
   would render an empty skeleton-shimmer above the video. */
.pillar-stage__hero-canvas {
  display: none;
  background:
    linear-gradient(135deg, rgba(32,212,232,.08), rgba(10,139,154,.04)),
    linear-gradient(180deg, #050A14 0%, #0a1830 100%);
  background-size: 200% 200%;
  animation: skeletonShimmer 2.4s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  0%,100% { background-position: 0% 0%; }
  50%     { background-position: 100% 100%; }
}
.pillar-stage__hero-video  { display: none; }
.pillar-stage__hero.has-sequence .pillar-stage__hero-canvas { display: block; animation: none; }
.pillar-stage__hero.has-sequence .pillar-stage__hero-video,
.pillar-stage__hero.has-sequence .pillar-stage__hero-img    { display: none; }
.pillar-stage__hero.has-video:not(.has-sequence) .pillar-stage__hero-video { display: block; }
.pillar-stage__hero.has-video:not(.has-sequence) .pillar-stage__hero-img   { display: none; }
/* The procedural Three.js scenes are HIDDEN for the pillars — videos
   read better with the institutional defense / EU audience (the 3D
   reads as "tech demo" rather than "we operate in this world"). The
   3D code is kept in script.js as dormant in case we need to revive
   it later. */
.pillar-stage .viz { display: none; }

/* Vignette for text legibility */
.pillar-stage__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(5,10,20,.55) 100%),
    linear-gradient(90deg, rgba(5,10,20,.55) 0%, transparent 50%, rgba(5,10,20,.35) 100%);
}
.pillar-stage[data-stage="space"]   .pillar-stage__vignette { background: radial-gradient(ellipse at center, transparent 30%, rgba(5,10,20,.55) 100%), linear-gradient(270deg, rgba(5,10,20,.6) 0%, transparent 55%); }
.pillar-stage[data-stage="defense"] .pillar-stage__vignette { background: radial-gradient(ellipse at center, transparent 30%, rgba(5,10,20,.55) 100%), linear-gradient(90deg, rgba(5,10,20,.6) 0%, transparent 55%); }

/* Content sits over the 3D, left-aligned by default */
.pillar-stage__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 80px 0;
}
.pillar-stage__content--right .container {
  display: flex;
  justify-content: flex-end;
}

.panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 38px;
  max-width: 520px;
  background: rgba(5, 10, 20, .58);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
          backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 4px;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.04);
  opacity: 1;
  position: relative;
}
.panel::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 100%;
  background: var(--pillar-color, var(--brand-bright));
  opacity: .55;
}
.panel.is-active { opacity: 1; }

/* Per-pillar accent colors */
.panel[data-pillar="cyber"]   { --pillar-color: #20D4E8; --pillar-deep: #0a8b9a; }
.panel[data-pillar="space"]   { --pillar-color: #818CF8; --pillar-deep: #4F46E5; }
.panel[data-pillar="defense"] { --pillar-color: #FB923C; --pillar-deep: #C2410C; }
.panel .panel__points li::before {
  background: linear-gradient(135deg, var(--pillar-color, var(--brand-bright)), var(--pillar-deep, var(--accent-2)));
}

.panel__tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--pillar-color, var(--brand-bright));
  margin-bottom: 22px;
  display: inline-block;
}
.panel__title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 18px;
  line-height: 1.15;
  letter-spacing: -.005em;
}
.panel__text {
  font-size: 1.02rem;
  max-width: 50ch;
  line-height: 1.6;
  color: var(--text-dim);
}
.panel__points {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
}
.panel__points li {
  position: relative;
  padding: 10px 0 10px 24px;
  color: var(--text);
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: .005em;
  border-top: 1px solid var(--border);
}
.panel__points li:last-child { border-bottom: 1px solid var(--border); }
.panel__points li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 12px; height: 1px;
  background: var(--pillar-color, var(--brand-bright));
  transform: translateY(-50%);
}

.pillars__visual {
  position: sticky;
  top: 100px;
  height: 80vh;
  max-height: 700px;
  aspect-ratio: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.viz {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(.94);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
  will-change: opacity, transform;
}
.viz.is-active {
  opacity: 1;
  transform: scale(1);
}
.viz svg { width: 100%; height: 100%; }

/* Scroll-reactive inner layers (no CSS transition — JS variables update each frame) */
.viz--cyber .hex-cells {
  transform-origin: 200px 200px;
  transform: rotate(calc(var(--pp, 0) * 10deg));
  will-change: transform;
}
.viz--cyber .binary-rain {
  transform: translate3d(0, calc(var(--pp, 0) * -16px), 0);
  will-change: transform;
}
.viz--space .stars {
  transform: translate3d(calc(var(--pp, 0) * -14px), calc(var(--pp, 0) * -8px), 0);
  will-change: transform;
}
.viz--space .earth {
  transform-origin: 200px 200px;
  transform: rotate(calc(var(--pp, 0) * 8deg));
  will-change: transform;
}
.viz--defense .europe-outline {
  transform-origin: 200px 200px;
  transform: scale(calc(1 + var(--pp, 0) * .04));
  will-change: transform;
}

/* Scanline cyber additional */
.viz--cyber .scanline-3 {
  animation: scanline 5s ease-in-out 2.5s infinite;
  opacity: .35;
}

/* Network graph in cyber */
.viz--cyber .net-line {
  stroke: rgba(32,212,232,.35);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  fill: none;
  opacity: 0;
  animation: netLine 3s ease-in-out infinite;
}
@keyframes netLine {
  0%,100% { opacity: 0; stroke-dashoffset: 0; }
  50%     { opacity: 1; stroke-dashoffset: 14; }
}
.viz--cyber .net-node {
  fill: #20D4E8;
  stroke: rgba(32,212,232,.4);
  stroke-width: 1;
  filter: drop-shadow(0 0 4px rgba(32,212,232,.6));
  animation: nodePulse 2.4s ease-in-out infinite;
}
@keyframes nodePulse {
  0%,100% { r: 3; opacity: .8; }
  50%     { r: 4.5; opacity: 1; }
}
.viz--cyber .binary-rain text {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 9px;
  fill: rgba(32,212,232,.4);
  animation: rainFall 8s linear infinite;
}
@keyframes rainFall {
  0%   { transform: translateY(-40px); opacity: 0; }
  10%  { opacity: .8; }
  90%  { opacity: .4; }
  100% { transform: translateY(380px); opacity: 0; }
}

/* Space: ground stations + beams + sun glint */
.viz--space .ground-station {
  fill: var(--brand-bright);
  animation: gsPulse 2.5s ease-in-out infinite;
}
@keyframes gsPulse {
  0%,100% { opacity: .6; }
  50%     { opacity: 1; }
}
.viz--space .gs-beam {
  stroke: rgba(168,230,240,.55);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  fill: none;
  opacity: 0;
  animation: gsBeam 3s ease-in-out infinite;
}
@keyframes gsBeam {
  0%,100% { opacity: 0; stroke-dashoffset: 0; }
  50%     { opacity: 1; stroke-dashoffset: 10; }
}
.viz--space .sun-glint {
  mix-blend-mode: screen;
  opacity: .55;
  animation: sunPulse 6s ease-in-out infinite;
}
@keyframes sunPulse {
  0%,100% { opacity: .4; }
  50%     { opacity: .7; }
}
.viz--space .shooting-star {
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0;
  animation: shoot 7s linear infinite;
}
@keyframes shoot {
  0%,92% { opacity: 0; transform: translate(0, 0); }
  93%    { opacity: 1; }
  100%   { opacity: 0; transform: translate(120px, 80px); }
}

/* Defense: aircraft trails + HUD */
.viz--defense .europe-outline {
  fill: none;
  stroke: rgba(32,212,232,.18);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  animation: euPulse 6s ease-in-out infinite;
}
@keyframes euPulse {
  0%,100% { stroke-opacity: .15; }
  50%     { stroke-opacity: .35; }
}
.viz--defense .aircraft {
  fill: var(--brand-bright);
  filter: drop-shadow(0 0 4px rgba(32,212,232,.7));
}
.viz--defense .ac-trail {
  fill: none;
  stroke: rgba(32,212,232,.5);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  animation: trail 4s linear infinite;
}
@keyframes trail {
  to { stroke-dashoffset: -16; }
}
.viz--defense .hud-bracket {
  stroke: rgba(32,212,232,.7);
  stroke-width: 1.4;
  fill: none;
  opacity: .8;
}
.viz--defense .hud-text {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 9px;
  fill: rgba(32,212,232,.7);
  letter-spacing: 1px;
}

/* Lock brackets that appear around active targets */
.viz--defense .lock-bracket {
  stroke: var(--brand-bright);
  stroke-width: 1.5;
  fill: none;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: lockOn 6s linear infinite;
}
.viz--defense .lock-bracket.lb1 { animation-delay: .8s; }
.viz--defense .lock-bracket.lb2 { animation-delay: 2.5s; }
.viz--defense .lock-bracket.lb3 { animation-delay: 4.2s; }
.viz--defense .lock-bracket.lb4 { animation-delay: 5.2s; }
@keyframes lockOn {
  0%,3%    { opacity: 0; transform: scale(1.6) rotate(45deg); }
  6%       { opacity: 1; transform: scale(1) rotate(0deg); }
  16%,20%  { opacity: 1; transform: scale(1) rotate(0deg); }
  25%      { opacity: 0; transform: scale(.7); }
  100%     { opacity: 0; transform: scale(.7); }
}

/* --- CYBER animations --- */

.viz--cyber .ring-pulse { animation: ringPulse 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.viz--cyber .ring-spin  { animation: ringSpin 24s linear infinite; transform-origin: 200px 200px; }
.viz--cyber .scanline   { animation: scanline 3.5s ease-in-out infinite; }
.viz--cyber .hex-cells rect { animation: hexBlink 4s ease-in-out infinite; }

@keyframes ringPulse {
  0%,100% { stroke-opacity: .35; transform: scale(1); }
  50%     { stroke-opacity: 1;   transform: scale(1.04); }
}
@keyframes ringSpin {
  to { transform: rotate(360deg); }
}
@keyframes scanline {
  0%   { transform: translateY(-140px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(140px); opacity: 0; }
}
@keyframes hexBlink {
  0%,90%,100% { opacity: 0; }
  45%,55%     { opacity: 1; }
}

/* --- SPACE animations --- */

.viz--space .orbit-a   { animation: orbit 18s linear infinite; }
.viz--space .orbit-b   { animation: orbit 26s linear infinite reverse; }
.viz--space .orbit-c   { animation: orbit 14s linear infinite; }
.viz--space .earth     { animation: floatY 8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.viz--space .stars circle { animation: twinkle 3s ease-in-out infinite; }
.viz--space .beam-1    { animation: beamPulse 2.5s ease-in-out infinite; }
.viz--space .beam-2    { animation: beamPulse 2.5s ease-in-out .8s infinite; }

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes twinkle {
  0%,100% { opacity: .3; }
  50%     { opacity: 1; }
}
@keyframes beamPulse {
  0%,100% { stroke-dashoffset: 0;  opacity: .15; }
  50%     { stroke-dashoffset: 20; opacity: .8; }
}

/* --- DEFENSE animations --- */

.viz--defense .radar-sweep { animation: radarSweep 6s linear infinite; }
.viz--defense .target      { animation: targetBlink 6s linear infinite; opacity: 0; }
.viz--defense .target-1    { animation-delay: .5s; }
.viz--defense .target-2    { animation-delay: 2.2s; }
.viz--defense .target-3    { animation-delay: 4s; }
.viz--defense .target-4    { animation-delay: 5s; }

@keyframes radarSweep { to { transform: rotate(360deg); } }
@keyframes targetBlink {
  0%,3%   { opacity: 0; transform: scale(.5); }
  6%      { opacity: 1; transform: scale(1.6); }
  10%,30% { opacity: 1; transform: scale(1); }
  60%,100%{ opacity: 0; transform: scale(.5); }
}
.viz--defense .target { transform-origin: center; transform-box: fill-box; }

/* =========================================================
   Generic sections
   ========================================================= */

.section {
  padding: clamp(90px, 11vw, 140px) 0;
  position: relative;
}
.section--alt { background: rgba(255,255,255,.015); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* =========================================================
   Light theme sections (alternating rhythm)
   Variables get redefined so all descendants follow suit
   ========================================================= */

.section--light {
  --bg:           #F5F7FA;
  --bg-elev:      #FFFFFF;
  --bg-alt:       #EEF2F7;
  --surface:      #FFFFFF;
  --border:       rgba(10, 15, 28, .08);
  --border-strong:rgba(10, 15, 28, .16);
  --text:         #0A0F1C;
  --text-dim:     #475569;
  --text-mute:    #64748B;
  --brand-bright: #0a8b9a;
  --accent-soft:  rgba(10, 139, 154, .08);

  background: var(--bg);
  color: var(--text);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section--light .eyebrow {
  color: var(--brand-bright);
  background: var(--accent-soft);
  border-color: rgba(10, 139, 154, .25);
}
.section--light .link-arrow { color: var(--brand-bright); }
.section--light .gradient-text {
  background: linear-gradient(135deg, #0a8b9a 0%, #3B6FE0 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section--light .stats__item strong,
.section--light .steps__num {
  background: linear-gradient(135deg, #0a8b9a 0%, #3B6FE0 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section--light .training-card__pill--price {
  background: linear-gradient(135deg, #0a8b9a 0%, #3B6FE0 100%);
  color: #fff;
}
.section--light .training-card__icon,
.section--light .service-card__icon {
  background: rgba(10, 139, 154, .08);
  border-color: rgba(10, 139, 154, .25);
  color: var(--brand-bright);
}
.section--light .training-card__code {
  color: var(--brand-bright);
  background: rgba(10, 139, 154, .08);
  border-color: rgba(10, 139, 154, .25);
}
/* Logo tiles on light bg: invert the inverted filter back to dark */
.section--light .logo-tile { background: #FFFFFF; }
.section--light .logo-tile img {
  filter: brightness(0);
  opacity: .65;
}
.section--light .logo-tile:hover img { opacity: 1; }
/* Training "tailored" callout adapts */
.section--light .training-card--cta {
  background: linear-gradient(160deg, rgba(10,139,154,.10), rgba(59,111,224,.08));
  border-color: rgba(10,139,154,.3);
}
/* Training section gradient backdrop suppressed on light */
.section--light.training { background: var(--bg); }

/* =========================================================
   Three.js canvas hosts inside pillar visuals
   ========================================================= */

.three-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.three-host canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
/* SVG decoration sits on top of the 3D scene as a subtle luminescent overlay */
.viz svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .25;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Hide elements that the 3D scene now provides natively */
.viz--space .earth,
.viz--space .stars,
.viz--space .orbit-a,
.viz--space .orbit-b,
.viz--space .orbit-c { display: none; }
.viz--cyber .hex-cells,
.viz--cyber .network,
.viz--cyber .binary-rain,
.viz--cyber .data-packets { display: none; }
.viz--defense .radar-sweep,
.viz--defense .targets { display: none; }

.section__head { text-align: center; max-width: 760px; margin: 0 auto 4rem; }
.section__head .lead { margin: 0 auto; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.cards-stack { display: grid; gap: 18px; }

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 30px;
  transition: border-color .2s var(--ease), transform .25s var(--ease-out);
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card h3 { margin-bottom: .4rem; }
.card p { margin: 0; }

/* =========================================================
   Services
   ========================================================= */

.services-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1100px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 460px)  { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease);
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 250px at var(--mx,50%) var(--my,0%), rgba(32,212,232,.10), transparent 60%);
  opacity: 0;
  transition: opacity .25s var(--ease);
  pointer-events: none;
}
.service-card:hover { transform: translateY(-6px); border-color: rgba(32,212,232,.35); }
.service-card:hover::before { opacity: 1; }

.service-card__icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 4px;
  background: var(--accent-soft);
  border: 1px solid rgba(32,212,232,.18);
  color: var(--brand-bright);
  margin-bottom: 14px;
}
.service-card__icon svg { width: 20px; height: 20px; }

.service-card h3 {
  margin: 0 0 .5rem;
  font-size: 1.02rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
}
.service-card p { margin: 0 0 .9rem; font-size: .86rem; line-height: 1.55; }
.service-card ul {
  margin: 0; padding: 0; list-style: none;
}
.service-card ul li {
  padding: 7px 0;
  font-size: .82rem;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  line-height: 1.4;
}
.service-card ul li:last-child { border-bottom: 1px solid var(--border); }

/* =========================================================
   Approach (steps)
   ========================================================= */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  counter-reset: step;
}
.steps li {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  position: relative;
  transition: transform .25s var(--ease-out), border-color .2s var(--ease);
}
.steps li:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.steps__num {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: .6rem;
  letter-spacing: -.03em;
}
.steps li h3 { margin-bottom: .4rem; }
.steps li p { margin: 0; font-size: .93rem; }

/* =========================================================
   Logos (clients & partners)
   ========================================================= */

.logos { display: grid; gap: 40px; }
.logos__group { text-align: center; }
.logos__caption {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 1.1rem;
}
.logos__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 2vw, 28px);
}

/* =========================================================
   Careers
   ========================================================= */

.careers {
  background:
    radial-gradient(700px 350px at 90% 50%, rgba(59,111,224,.16), transparent 60%),
    radial-gradient(500px 250px at 0% 0%, rgba(32,212,232,.10), transparent 60%);
}
.careers__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
/* Left column — deliberate vertical rhythm */
.careers__intro .eyebrow { margin-bottom: 1rem; }
.careers__intro .display { margin-bottom: 1.1rem; }
.careers__intro .lead {
  max-width: 46ch;
  margin-bottom: 1.9rem;
}
.careers__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
/* Compact buttons — the section-level CTA shouldn't dominate */
.careers__actions .btn {
  padding: 9px 17px;
  font-size: 0.82rem;
}
.careers__note {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--text-mute);
  max-width: 44ch;
}
.careers__perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.careers__perks li {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 500;
  color: var(--text);
  transition: transform .25s var(--ease-out), border-color .2s var(--ease);
}
.careers__perks li:hover {
  transform: translateX(4px);
  border-color: var(--border-strong);
}
/* Just the SVG glyph next to the title — no badge, no background. */
.careers__perk-icon {
  display: inline-flex;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--brand-bright);
}
.careers__perk-icon svg { width: 22px; height: 22px; display: block; }

/* =========================================================
   Contact
   ========================================================= */

.contact-info { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1.3rem; }
.contact-info li { color: var(--text-dim); }
.contact-info strong {
  display: block;
  color: var(--text);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.contact-info a { color: var(--brand-bright); }

/* Social icons — branded LinkedIn blue / Instagram gradient.
   Used in contact list and footer brand block. */
.social-row {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.social-row__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              filter .2s var(--ease);
}
.social-row__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  filter: brightness(1.08);
}
.social-row__btn:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 3px;
}
.social-row__btn svg { display: block; }
/* Brand backgrounds */
.social-row__btn--linkedin  { background: #0A66C2; }
.social-row__btn--instagram {
  background:
    radial-gradient(circle at 30% 110%, #FED576 0%, #F47133 25%, #BC3081 50%, #4C63D2 75%, #4C63D2 100%);
}

.form {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: grid;
  gap: 16px;
}
.form label {
  display: grid;
  gap: 6px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-dim);
}
.form input, .form textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 16px;
  font: inherit;
  color: var(--text);
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form input:focus, .form textarea:focus {
  border-color: var(--brand-bright);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.form textarea { resize: vertical; min-height: 110px; }
.form__note { font-size: .8rem; color: var(--text-mute); margin: 0; }
.form__hint { font-size: .82rem; color: var(--text-mute); margin-top: 6px; display: block; }
.form__hint--readout {
  color: var(--brand-bright);
  font-weight: 500;
  margin-top: 4px;
}
/* =========================================================
   Custom calendar (training form date picker)
   ========================================================= */
.datepicker {
  position: relative;
  width: 100%;
  margin-top: 6px;
}
.datepicker__trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text-mute);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.datepicker__trigger:hover { border-color: var(--border-strong); }
.datepicker__trigger:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 2px;
}
.datepicker__display { flex: 1; }
.datepicker__display.has-value { color: var(--text); font-weight: 500; }
.datepicker__icon { width: 18px; height: 18px; color: var(--brand-bright); flex: 0 0 auto; }
.datepicker__chevron { width: 12px; height: 8px; color: var(--text-mute); transition: transform .2s var(--ease); flex: 0 0 auto; }
.datepicker.is-open .datepicker__chevron { transform: rotate(180deg); }
.datepicker.is-open .datepicker__trigger { border-color: var(--brand-bright); }

.datepicker__pop {
  /* Default fallback (non-portaled) — kept just in case */
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #0a1224;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,.7);
}

/* Portaled to body — centered overlay on desktop, bottom sheet on mobile */
.datepicker__pop--portal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  max-width: 420px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  z-index: 10001 !important;
  background: #0a1224;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
  animation: dpPortalIn .2s cubic-bezier(.16,1,.3,1);
}
@keyframes dpPortalIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Backdrop scrim shown on ALL viewport sizes when datepicker is open */
body.datepicker-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(2,6,14,.65);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 10000;
  animation: dpBackdropFade .18s ease-out;
}
@keyframes dpBackdropFade { from { opacity: 0; } to { opacity: 1; } }
body.datepicker-open { overflow: hidden; }

.datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.datepicker__title {
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: capitalize;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
}
.datepicker__nav {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.datepicker__nav:hover:not(:disabled) {
  background: rgba(32,212,232,.08);
  border-color: var(--brand-bright);
  color: var(--brand-bright);
}
.datepicker__nav:disabled { opacity: .3; cursor: not-allowed; }

.datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.datepicker__dow {
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-mute);
  padding: 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.datepicker__cell {
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.datepicker__cell:hover:not(:disabled):not(.datepicker__cell--empty) {
  background: rgba(32,212,232,.10);
}
.datepicker__cell--empty { cursor: default; }
.datepicker__cell.is-disabled,
.datepicker__cell:disabled {
  color: rgba(255,255,255,.18);
  cursor: not-allowed;
}
.datepicker__cell.is-weekend:not(.is-disabled):not(.is-start):not(.is-range) {
  color: rgba(255,255,255,.5);
}
.datepicker__cell.is-preview { background: rgba(32,212,232,.12); }
.datepicker__cell.is-range {
  background: rgba(32,212,232,.20);
  color: var(--brand-bright);
}
.datepicker__cell.is-start {
  background: var(--brand-bright);
  color: #050A14;
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--brand-bright);
}

@media (max-width: 480px) {
  .datepicker__pop { padding: 12px; }
  .datepicker__cell { font-size: 0.8rem; }
}
.form__status {
  font-size: .9rem;
  margin: 6px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  line-height: 1.4;
}
.form__status[data-kind="sending"] {
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.form__status[data-kind="success"] {
  background: rgba(32,212,232,0.10);
  color: var(--brand-bright);
  border: 1px solid rgba(32,212,232,0.4);
}
.form__status[data-kind="error"] {
  background: rgba(244,113,51,0.10);
  color: #f47133;
  border: 1px solid rgba(244,113,51,0.4);
}

/* =========================================================
   Footer
   ========================================================= */

.footer {
  padding: 70px 0 28px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.015);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.footer__brand img { width: 100px; height: auto; opacity: .9; margin-bottom: 16px; }
.footer__brand p { margin-top: .6rem; color: var(--text-mute); max-width: 32ch; }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.footer__cols a {
  display: block;
  color: var(--text-dim);
  font-size: .9rem;
  padding: 4px 0;
}
.footer__cols a:hover { color: var(--brand-bright); }
.footer__cols h4 { margin-bottom: .9rem; color: var(--text); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  color: var(--text-mute);
  font-size: .85rem;
}
.footer__credit {
  font-size: .72rem;
  color: var(--text-mute);
  opacity: .7;
}
.footer__credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.18);
  text-underline-offset: 3px;
}
.footer__credit a:hover { color: var(--text); }

/* =========================================================
   Reveal animation
   ========================================================= */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1024px) {
  .pillars__stage { grid-template-columns: 1fr; gap: 40px; }
  .pillars__visual {
    position: relative;
    top: 0;
    height: 70vw;
    max-height: 480px;
    order: -1;
    margin-bottom: 30px;
  }
  .panel { min-height: auto; padding: 40px 0; opacity: 1; }
}

@media (max-width: 900px) {
  .nav__links {
    display: none;
    position: absolute;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    background: rgba(5,10,20,.96);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 18px 28px;
    gap: 4px;
  }
  .nav__links a { padding: 12px 0; }
  .nav__links.is-open { display: flex; }
  .nav__toggle { display: flex; }
  .nav__cta { display: none; }

  .grid-2 { grid-template-columns: 1fr; }
  .careers__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .training-grid { grid-template-columns: 1fr; gap: 16px; }
  .stats__grid { gap: 18px; }
  .stats__item strong { font-size: clamp(2rem, 8vw, 2.6rem); }
  .nav__inner { height: 64px; }
  .container { padding: 0 22px; }
  .section { padding: 70px 0; }
  .pillars__visual { max-height: 360px; }

  /* === PILLARS MOBILE REDESIGN ===
     On desktop each pillar is a 200vh "scrollytelling" stage with sticky
     video + overlaid blur panel. On mobile that pattern hides the video
     under the panel and forces awkward scrolling. We collapse to a
     vertical card: video as a top header (16:9), text panel below in
     plain layout — readable, fast, and the video is properly visible. */
  .pillar-stage {
    min-height: auto;
    margin: 0 0 26px;
    overflow: visible;
  }
  .pillar-stage__sticky {
    position: relative;
    height: auto;
    display: block;
  }
  .pillar-stage__hero {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto !important;
    overflow: hidden;
    z-index: 1;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .pillar-stage__hero video,
  .pillar-stage__hero img,
  .pillar-stage__hero canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  /* Soft bottom fade so the video blends into the text below */
  .pillar-stage__hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
      transparent 50%,
      rgba(5,10,20,.55) 88%,
      var(--bg) 100%);
  }
  .pillar-stage__vignette { display: none; }
  .pillar-stage__content {
    position: relative;
    padding: 28px 0 12px;
    z-index: 2;
  }
  .pillar-stage__content--right .container { justify-content: flex-start; }
  /* Plain panel — no blur backdrop, no dark card. Sits on the page bg. */
  .panel {
    max-width: 100%;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .panel::before { display: none; }
  .panel__tag {
    font-size: .7rem;
    letter-spacing: .26em;
    margin-bottom: 14px;
  }
  .panel__title {
    font-size: clamp(1.6rem, 6.5vw, 2rem);
    margin-bottom: 14px;
  }
  .panel__text {
    font-size: .98rem;
    max-width: none;
  }
  .panel__points {
    margin-top: 22px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .panel__points li {
    padding: 14px 0 14px 22px;
    font-size: .92rem;
  }
}

@media (max-width: 540px) {
  body { font-size: 16px; }
  .lang button { padding: 5px 8px; font-size: .72rem; }
  .footer__cols { grid-template-columns: 1fr; }
  .hero__chips { gap: 8px; }
  .chip { font-size: .78rem; padding: 7px 12px; }
  .hero { padding: 60px 0 70px; }
  .hero__logo { width: 110px; margin-bottom: 28px; }
  .hero__title { gap: .1em .25em; }
  .hero__motto { font-size: clamp(1.2rem, 5vw, 1.6rem); margin: 0 0 22px; }
  .hero__lead { font-size: 1rem; margin-bottom: 28px; }
  .hero__cta { gap: 10px; margin-bottom: 32px; }
  .btn { padding: 11px 18px; font-size: .9rem; }
  .stats { padding: 50px 0; }
  .training-card { padding: 22px 22px 26px; }
  .training-card__icon { width: 42px; height: 42px; }
  .training-card__icon svg { width: 22px; height: 22px; }
  .service-card { padding: 24px 22px; }
  .form { padding: 22px; }
  .logo-tile { min-width: 150px; padding: 18px 22px; }
  .logo-tile img { height: 28px; }
  .footer { padding: 50px 0 22px; }
  .footer__bottom { font-size: .78rem; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
  .container { padding: 0 18px; }
  .hero__title { font-size: clamp(2rem, 11vw, 2.6rem); }
  .stats__grid { grid-template-columns: 1fr; }
  .pillars__visual { max-height: 300px; }
}

/* =========================================================
   Slim contact section (form lives in modal)
   ========================================================= */

.contact-slim__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.contact-slim .btn { margin-top: 8px; }

@media (max-width: 900px) {
  .contact-slim__inner { grid-template-columns: 1fr; }
}

/* =========================================================
   Modal popup (contact + training request)
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 24px;
  overflow-y: auto;
}
.modal.is-open { display: flex; }

.modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 14, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn .25s var(--ease-out);
  cursor: pointer;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal__panel {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 40px 36px 32px;
  max-width: 600px;
  width: 100%;
  margin: auto 0;
  z-index: 1;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.6);
  animation: modalIn .35s var(--ease-out);
}
@keyframes modalIn {
  0%   { opacity: 0; transform: translateY(20px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Success popup — shown after a successful form submission */
.modal__panel--success {
  max-width: 460px;
  text-align: center;
  padding: 56px 36px 40px;
}
.modal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.modal__success-icon {
  width: 72px;
  height: 72px;
  color: var(--brand-bright);
  filter: drop-shadow(0 0 24px rgba(32,212,232,.35));
  animation: successPop .55s var(--ease-out);
}
@keyframes successPop {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.modal__success h3 { margin: 0; }
.modal__success p {
  margin: 0;
  max-width: 36ch;
  color: var(--text-dim);
}
.modal__success .btn { margin-top: 10px; }

.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.modal__close svg { width: 16px; height: 16px; }
.modal__close:hover {
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-color: var(--border-strong);
}

.modal__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.025em;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  margin: 6px 0 10px;
}
.modal__lead {
  color: var(--text-dim);
  font-size: 1rem;
  margin: 0 0 22px;
}

.modal__facts {
  list-style: none;
  padding: 16px 18px;
  margin: 0 0 22px;
  background: rgba(32,212,232,.05);
  border: 1px solid rgba(32,212,232,.15);
  border-radius: 12px;
  display: grid;
  gap: 8px;
}
.modal__facts li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  font-size: .9rem;
  color: var(--text-dim);
  align-items: baseline;
}
.modal__facts strong {
  color: var(--brand-bright);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}

.modal .form {
  background: transparent;
  border: 0;
  padding: 0;
  gap: 14px;
}

body.modal-open { overflow: hidden; }

@media (max-width: 540px) {
  .modal { padding: 0; }
  .modal__panel {
    border-radius: 0;
    min-height: 100vh;
    max-width: 100%;
    padding: 60px 22px 32px;
    box-shadow: none;
  }
  .modal__facts li { grid-template-columns: 1fr; gap: 2px; }
}

/* =========================================================
   Language trigger (nav) + language picker modal
   ========================================================= */
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: var(--text-bright, #e9eef5);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.lang-trigger:hover {
  background: rgba(32,212,232,.10);
  border-color: rgba(32,212,232,.45);
  color: #fff;
}
.lang-trigger__globe { width: 16px; height: 16px; opacity: .9; }
.lang-trigger__code { font-variant-numeric: tabular-nums; }
.lang-trigger__chevron { width: 9px; height: 6px; opacity: .7; }

/* Tesla-inspired regional language picker */
.lang-modal__panel {
  max-width: 920px;
  padding: 40px 44px 36px;
}
.lang-modal__panel .modal__title {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}
.lang-modal__hint {
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  margin: 0 0 26px;
}
.lang-modal__groups {
  max-height: 66vh;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.lang-modal__groups::-webkit-scrollbar { width: 6px; }
.lang-modal__groups::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16);
  border-radius: 999px;
}
.lang-modal__regions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 40px;
  align-items: start;
}
.lang-modal__region {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lang-modal__region-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text-bright, #e9eef5);
  margin: 0;
  padding: 0;
}
.lang-modal__country-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lang-modal__country {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lang-modal__country-name {
  font-size: .95rem;
  font-weight: 500;
  color: var(--text-bright, #e9eef5);
  line-height: 1.25;
}
.lang-modal__country-langs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  line-height: 1.3;
}
.lang-modal__country-lang {
  background: none;
  border: 0;
  padding: 2px 0;
  margin: 0;
  font: inherit;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: color .15s ease;
}
.lang-modal__country-lang:hover {
  color: var(--text-bright, #fff);
}
.lang-modal__country-lang.is-active {
  color: var(--brand-bright, #20D4E8);
  font-weight: 500;
}
.lang-modal__country-lang:focus-visible {
  outline: 2px solid rgba(32,212,232,.5);
  outline-offset: 3px;
  border-radius: 2px;
}
.lang-modal__country-sep {
  color: rgba(255,255,255,.18);
  font-size: .8rem;
  pointer-events: none;
  user-select: none;
}

/* Tablet: 2 cols */
@media (max-width: 920px) {
  .lang-modal__panel { padding: 36px 28px 28px; max-width: 700px; }
  .lang-modal__regions { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
}

/* Phone: 1 column with clear regional separation + touch-friendly links */
@media (max-width: 540px) {
  .lang-modal__panel {
    padding: 56px 22px 28px !important;
    max-width: 100% !important;
  }
  .lang-modal__panel .modal__title {
    font-size: 1.25rem;
    margin-bottom: 4px;
  }
  .lang-modal__hint {
    font-size: .78rem;
    margin: 0 0 22px;
    line-height: 1.4;
  }
  .lang-modal__groups {
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
    padding-right: 4px;
  }
  .lang-modal__regions {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Subtle bottom rule between regions for visual hierarchy */
  .lang-modal__region {
    padding: 18px 0 22px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    gap: 14px;
  }
  .lang-modal__region:first-child { padding-top: 4px; }
  .lang-modal__region:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
  }
  .lang-modal__region-title {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin: 0 0 4px;
  }
  .lang-modal__country-list { gap: 18px; }
  .lang-modal__country {
    gap: 4px;
  }
  .lang-modal__country-name {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
  }
  .lang-modal__country-langs {
    gap: 6px 12px;
  }
  .lang-modal__country-lang {
    font-size: .92rem;
    padding: 6px 0;
    min-height: 32px;  /* easier touch target */
  }
  .lang-modal__country-sep {
    color: rgba(255,255,255,.22);
  }
}

/* RTL */
html[dir="rtl"] .lang-modal__country { text-align: right; }
html[dir="rtl"] .lang-modal__country-langs { justify-content: flex-end; }


/* =========================================================
   Dedicated /languages.html page — Tesla-style full-width
   country picker. Uses ALL desktop width by laying regions
   side-by-side; Europe gets a multi-column sub-grid because
   it has the most countries.
   ========================================================= */
.languages-page-body {
  background: var(--bg, #050A14);
  color: var(--text-bright, #e9eef5);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.languages-page__nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 10, 20, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.languages-page__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-bright, #e9eef5);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  text-decoration: none;
}
.languages-page__close svg { width: 18px; height: 18px; }
.languages-page__close:hover {
  background: rgba(32,212,232,.10);
  border-color: rgba(32,212,232,.45);
  color: var(--brand-bright, #20D4E8);
}

.languages-page__main {
  flex: 1;
  padding: clamp(48px, 6vw, 80px) 0 60px;
}
.languages-page__container { max-width: 1400px; }
.languages-page__header {
  text-align: left;
  margin-bottom: clamp(40px, 5vw, 60px);
  max-width: 720px;
}
.languages-page__header .eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-bright, #20D4E8);
  margin-bottom: 14px;
}
.languages-page__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.02em;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 14px;
}
.languages-page__lead {
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  color: rgba(255,255,255,.6);
  margin: 0;
  line-height: 1.5;
}

/* Grid — uses full width.
   Mobile: 1 column.
   Tablet (≥720px): Europe gets full width on top, then ME + NA in row below.
   Desktop (≥1100px): three regions side by side (Europe 2fr, ME 1fr, NA 1fr).
*/
.languages-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: start;
}
@media (min-width: 720px) {
  .languages-page__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 60px;
  }
  /* Europe is wide — spans both columns at tablet */
  .languages-page__region[data-region="Europe"] {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1100px) {
  .languages-page__grid {
    grid-template-columns: 2.4fr 1fr 1fr;
    gap: 56px;
  }
  .languages-page__region[data-region="Europe"] {
    grid-column: auto;  /* take its own column */
  }
}

.languages-page__region {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.languages-page__region-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Countries grid — single column inside the region container.
   Europe's region uses sub-columns to spread its 18 countries out. */
.languages-page__countries {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 36px;
}
[data-region="Europe"] .languages-page__countries {
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  [data-region="Europe"] .languages-page__countries {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  [data-region="Europe"] .languages-page__countries {
    grid-template-columns: repeat(3, 1fr);
  }
}

.languages-page__country {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.languages-page__country-name {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--text-bright, #e9eef5);
  line-height: 1.25;
}
.languages-page__country-langs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  line-height: 1.4;
}
.languages-page__lang {
  background: none;
  border: 0;
  padding: 4px 0;
  margin: 0;
  font: inherit;
  font-size: .88rem;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: color .15s ease;
  text-align: left;
}
.languages-page__lang:hover {
  color: var(--text-bright, #fff);
}
.languages-page__lang.is-active {
  color: var(--brand-bright, #20D4E8);
  font-weight: 500;
}
.languages-page__lang:focus-visible {
  outline: 2px solid rgba(32,212,232,.5);
  outline-offset: 3px;
  border-radius: 2px;
}
.languages-page__sep {
  color: rgba(255,255,255,.18);
  font-size: .8rem;
  pointer-events: none;
  user-select: none;
}

.languages-page__footer {
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.45);
  font-size: .8rem;
}

/* Mobile fine-tune */
@media (max-width: 540px) {
  .languages-page__main { padding: 28px 0 40px; }
  .languages-page__header { margin-bottom: 30px; }
  .languages-page__title { font-size: 1.7rem; }
  .languages-page__lead { font-size: .9rem; }
  .languages-page__grid { gap: 0; }
  .languages-page__region {
    padding: 20px 0 24px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    gap: 16px;
  }
  .languages-page__region:first-child { padding-top: 0; }
  .languages-page__region:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .languages-page__region-title {
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: 4px;
  }
  .languages-page__country-name { font-size: 1rem; }
  .languages-page__lang { font-size: .92rem; padding: 6px 0; }
}

/* RTL */
html[dir="rtl"] .languages-page__header,
html[dir="rtl"] .languages-page__country { text-align: right; }
html[dir="rtl"] .languages-page__country-langs { justify-content: flex-end; }

/* =========================================================
   Advanced — cursor glow, 3D tilt, magnetic, letter split
   ========================================================= */

/* Cursor follower removed by request */

/* Service card 3D tilt */
.service-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform .35s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.service-card.tilt {
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
}
.service-card.tilt:hover {
  box-shadow: 0 30px 80px -30px rgba(32,212,232,.25);
}

/* Magnetic button removed by request */

/* Letter reveal (used on .display headings) */
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.4em);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 18ms);
}
.split-word { display: inline-block; }
.is-revealed .split-char { opacity: 1; transform: translateY(0); }

/* Pillar visual: extra signal pulses */
.viz--cyber .scanline-2 {
  animation: scanline2 4.5s ease-in-out 1.5s infinite;
}
@keyframes scanline2 {
  0%   { transform: translateY(140px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-140px); opacity: 0; }
}
.viz--cyber .data-pkt {
  animation: dataPkt 3s linear infinite;
  opacity: 0;
}
@keyframes dataPkt {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 80px), var(--dy, -80px)); }
}

/* Space: pulse from satellites */
.viz--space .ping {
  fill: none;
  stroke: rgba(168,230,240,.6);
  stroke-width: 1.5;
  transform-origin: center;
  transform-box: fill-box;
  animation: ping 2.2s ease-out infinite;
  opacity: 0;
}
@keyframes ping {
  0%   { transform: scale(.1); opacity: .9; stroke-width: 2; }
  100% { transform: scale(2); opacity: 0; stroke-width: .3; }
}

/* Defense: target ping rings */
.viz--defense .target-ping {
  fill: none;
  stroke: rgba(32,212,232,.7);
  stroke-width: 1.5;
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  animation: targetPing 6s linear infinite;
}
.viz--defense .target-ping.t1 { animation-delay: .6s; }
.viz--defense .target-ping.t2 { animation-delay: 2.3s; }
.viz--defense .target-ping.t3 { animation-delay: 4.1s; }
.viz--defense .target-ping.t4 { animation-delay: 5.1s; }
@keyframes targetPing {
  0%,3%   { transform: scale(.3); opacity: 0; }
  6%      { transform: scale(.5); opacity: 1; }
  18%     { transform: scale(3.5); opacity: 0; }
  100%    { transform: scale(3.5); opacity: 0; }
}

/* Section enter — subtle scale + fade for big section heads */
.section__head.is-visible .display { animation: pop 1s var(--ease-out) both; }
@keyframes pop {
  0% { transform: scale(.97); filter: blur(6px); opacity: 0; }
  100% { transform: scale(1); filter: blur(0); opacity: 1; }
}

/* Rotating tech rings removed for a more institutional look */

/* Mouse parallax removed by request */

/* Glitch scramble on hero words */
.hero__word.is-glitching {
  position: relative;
  text-shadow:
    1px 0 var(--brand-bright),
    -1px 0 var(--accent-2);
  animation: glitchShake .3s steps(2, end) 3;
}
@keyframes glitchShake {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-1px, 1px); }
  40%  { transform: translate(1px, -1px); }
  60%  { transform: translate(-1px, -1px); }
  80%  { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}

/* Conic rotating border removed by request */

/* Pillar SVG path draw on activation */
.viz svg circle[stroke], .viz svg ellipse[stroke], .viz svg path[stroke] {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}
.viz.is-active svg circle[stroke], .viz.is-active svg ellipse[stroke], .viz.is-active svg path[stroke] {
  animation: drawIn 1.6s var(--ease-out) forwards;
}
.viz.is-active svg circle[stroke]:nth-of-type(2) { animation-delay: .1s; }
.viz.is-active svg circle[stroke]:nth-of-type(3) { animation-delay: .2s; }
.viz.is-active svg circle[stroke]:nth-of-type(4) { animation-delay: .3s; }
.viz.is-active svg ellipse[stroke]:nth-of-type(2) { animation-delay: .15s; }
.viz.is-active svg ellipse[stroke]:nth-of-type(3) { animation-delay: .25s; }
@keyframes drawIn {
  to { stroke-dashoffset: 0; }
}

/* Stats band */
.stats {
  padding: 70px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* Inline variant — when stats sit inside another section (About) we
   don't want the heavy borders or full vertical padding. */
.stats--inline {
  padding: 56px 0 0;
  margin-top: 56px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 0;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.stats__item strong {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.04em;
  margin-bottom: 6px;
  line-height: 1;
}
.stats__item span {
  display: block;
  font-size: .9rem;
  color: var(--text-dim);
  letter-spacing: .04em;
}

@media (max-width: 760px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Animated gradient stroke on service-card icons on hover */
.service-card:hover .service-card__icon {
  border-color: rgba(32,212,232,.55);
  background: rgba(32,212,232,.18);
}
.service-card__icon {
  transition: border-color .3s var(--ease), background .3s var(--ease);
}

/* =========================================================
   Training catalogue
   ========================================================= */

.training {
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(32,212,232,.08), transparent 60%),
    radial-gradient(800px 400px at 100% 100%, rgba(59,111,224,.10), transparent 65%);
}

.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.training-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .35s var(--ease-out), border-color .3s var(--ease);
}
.training-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(32,212,232,.03) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(32,212,232,.03) 0 1px, transparent 1px 80px);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.training-card:hover {
  transform: translateY(-6px);
  border-color: rgba(32,212,232,.4);
}
.training-card:hover::after { opacity: 1; }

.training-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.training-card__code {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--brand-bright);
  padding: 6px 10px;
  border: 1px solid rgba(32,212,232,.3);
  border-radius: 999px;
  background: rgba(32,212,232,.06);
}
.training-card__icon {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(32,212,232,.08);
  border: 1px solid var(--border);
  color: var(--brand-bright);
}
.training-card__icon svg { width: 26px; height: 26px; }
.training-card h3 { margin: 0; font-size: 1.25rem; }
.training-card p { margin: 0; color: var(--text-dim); font-size: .95rem; flex: 1; }
.training-card__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.training-card__pill {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-dim);
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
}
.training-card .link-arrow { margin-top: 6px; }

/* Custom callout card */
.training-card--cta {
  background: linear-gradient(160deg, rgba(32,212,232,.10), rgba(59,111,224,.10));
  border-color: rgba(32,212,232,.3);
  justify-content: center;
  text-align: left;
}
.training-card--cta h3 { font-size: 1.5rem; }
.training-card--cta .training-card__code {
  font-size: 1.6rem;
  width: 44px; height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #001;
  border: 0;
  border-radius: 12px;
  font-weight: 700;
}
.training-card--cta .btn { align-self: flex-start; margin-top: 8px; }

/* Price pill — gradient highlight */
.training-card__pill--price {
  background: var(--grad);
  color: #001a25;
  border-color: transparent;
  font-weight: 700;
  letter-spacing: 0;
}

/* =========================================================
   Training request form
   ========================================================= */

.training-request {
  background:
    radial-gradient(700px 350px at 100% 0%, rgba(32,212,232,.10), transparent 60%),
    radial-gradient(600px 300px at 0% 100%, rgba(59,111,224,.10), transparent 65%);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 16px;
  font: inherit;
  color: var(--text);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form select:focus {
  border-color: var(--brand-bright);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Segmented control — iOS style, essential */
.form__segmented {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.form__segmented legend {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-dim);
  padding: 0;
}
.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
  position: relative;
}
.seg label {
  display: grid;
  place-items: center;
  padding: 10px 8px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 8px;
  user-select: none;
  transition: color .2s var(--ease), background .25s var(--ease-out);
  position: relative;
  text-align: center;
}
.seg label input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.seg label:hover { color: var(--text); }
.seg label:has(input:checked) {
  background: rgba(255,255,255,.07);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
}

@media (max-width: 540px) {
  .form__row { grid-template-columns: 1fr; gap: 12px; }
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .viz { opacity: 1; }
  .viz--cyber, .viz--space, .viz--defense { display: none; }
  .viz.is-active { display: block; }
  .cursor { display: none; }
  .split-char { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* Hide cursor on touch */
@media (hover: none) {
  .cursor { display: none; }
}

/* =========================================================
   LEGAL PAGES — Privacy, Cookies
   Standalone pages with a calm reading layout. Same brand
   typography, more generous line-height, narrower measure.
   ========================================================= */
.legal-body {
  background: var(--bg);
}
.nav__legal-back a {
  color: var(--text-soft);
  font-family: 'Space Grotesk', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color .2s var(--ease);
}
.nav__legal-back a:hover { color: var(--text); }
/* Right-side cluster on legal pages: language switcher + back link */
.nav__legal-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.legal {
  padding: 8rem 0 5rem;
  min-height: calc(100vh - 12rem);
}
.legal__container {
  max-width: 760px;
}
.legal__header {
  margin-bottom: 3.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(160, 200, 240, 0.10);
}
.legal__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: .6rem 0 1.5rem;
  color: var(--text);
  line-height: 1.05;
}
.legal__lead {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 60ch;
  margin-bottom: 1.2rem;
}
.legal__meta {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(160, 200, 240, 0.55);
}
.legal__body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-soft);
}
.legal__body h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 3rem 0 1rem;
  color: var(--text);
}
.legal__body h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 2rem 0 .6rem;
  color: var(--text);
}
.legal__body p { margin: 0 0 1.1rem; }
.legal__body ul {
  margin: 0 0 1.4rem;
  padding-left: 1.4rem;
}
.legal__body li {
  margin: 0 0 .55rem;
  padding-left: .15rem;
}
.legal__body li::marker {
  color: rgba(32, 212, 232, 0.6);
}
.legal__body a {
  color: var(--accent);
  border-bottom: 1px solid rgba(32, 212, 232, 0.3);
  transition: border-color .2s var(--ease);
}
.legal__body a:hover {
  border-bottom-color: var(--accent);
}
.legal__body code {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.86em;
  background: rgba(160, 200, 240, 0.07);
  padding: 0.12em 0.4em;
  border-radius: 3px;
  color: var(--accent);
}
.legal__body strong { color: var(--text); }

.legal__card {
  background: rgba(160, 200, 240, 0.04);
  border-left: 2px solid rgba(32, 212, 232, 0.45);
  padding: 1.2rem 1.5rem;
  margin: 1.6rem 0;
  border-radius: 0 8px 8px 0;
  line-height: 1.7;
  font-size: 0.96rem;
}
.legal__card--highlight {
  background: rgba(32, 212, 232, 0.06);
  border-left-color: var(--accent);
}
.legal__card p:last-child { margin-bottom: 0; }

.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0;
  font-size: 0.92rem;
}
.legal__table th,
.legal__table td {
  text-align: left;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid rgba(160, 200, 240, 0.08);
  vertical-align: top;
}
.legal__table th {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(160, 200, 240, 0.7);
  border-bottom: 1px solid rgba(160, 200, 240, 0.18);
  white-space: nowrap;
}
.legal__table td code { font-size: 0.82em; }

.legal__hr {
  border: 0;
  border-top: 1px solid rgba(160, 200, 240, 0.10);
  margin: 3rem 0 1.6rem;
}
.legal__footnote {
  font-size: 0.85rem;
  color: rgba(160, 200, 240, 0.55);
  line-height: 1.65;
  font-style: italic;
}

@media (max-width: 720px) {
  .legal { padding: 6rem 0 3rem; }
  .legal__header { margin-bottom: 2.5rem; padding-bottom: 1.8rem; }
  .legal__body h2 { font-size: 1.4rem; margin: 2.4rem 0 .8rem; }
  .legal__table { font-size: 0.85rem; }
  .legal__table th,
  .legal__table td { padding: 0.6rem 0.5rem; }
  /* On narrow screens, stack table cells */
  .legal__table thead { display: none; }
  .legal__table tr {
    display: block;
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(160, 200, 240, 0.10);
  }
  .legal__table td {
    display: block;
    border: 0;
    padding: 0.25rem 0;
  }
  .legal__table td:first-child {
    font-weight: 600;
    color: var(--text);
    padding-top: 0;
  }
}

/* =============================================================
   MOBILE DESIGN PASS — pillars, forms, datepicker
   Targeted at phones (≤720px) and tighter phones (≤540px).
   ============================================================= */

@media (max-width: 720px) {
  /* ---------- Pillar hero on phones ---------- */
  .pillar-stage__hero.is-ambient .pillar-stage__hero-video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .pillar-stage__hero.is-ambient .pillar-stage__hero-img,
  .pillar-stage__hero.is-ambient .pillar-stage__hero-canvas { display: none; }

  .pillar-stage__hero.is-static .pillar-stage__hero-img {
    animation: pillarKenBurns 14s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes pillarKenBurns {
    0%   { transform: scale(1)    translateY(0); }
    100% { transform: scale(1.06) translateY(-2%); }
  }
  .pillar-stage__hero .pillar-stage__hero-canvas { display: none !important; }

  /* ==========================================================
     MOBILE FORM REDESIGN — large touch targets, sticky submit,
     iOS-friendly inputs. Applies to both contact + training. */

  /* Modal panel becomes a true full-screen sheet on mobile.
     The close button stays pinned, the form scrolls inside. */
  .modal__panel {
    padding: 0;
    border-radius: 0;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .modal__close {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 30;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(8,14,28,.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  /* Wrap modal content inside a scroll container that leaves room
     for the sticky submit bar. We achieve this by adding generous
     bottom padding to the form itself. */
  .modal__panel .eyebrow,
  .modal__panel .modal__title,
  .modal__panel .modal__lead,
  .modal__panel .modal__facts {
    padding-left: 20px;
    padding-right: 20px;
  }
  .modal__panel .eyebrow { margin-top: 26px; }
  .modal__panel .modal__title {
    font-size: 1.4rem;
    line-height: 1.18;
    margin: 8px 0 10px;
  }
  .modal__panel .modal__lead {
    font-size: .94rem;
    line-height: 1.45;
    margin: 0 0 18px;
  }
  .modal__facts {
    padding: 14px 16px;
    gap: 10px;
    margin: 0 16px 18px;
    border-radius: 12px;
  }
  .modal__facts li {
    grid-template-columns: 1fr !important;
    gap: 2px;
    font-size: .88rem;
  }
  .modal__facts strong { font-size: .66rem; }

  /* The form fills remaining space inside the panel.
     padding-bottom leaves room for the sticky submit bar. */
  .modal__panel .form {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 4px 18px 110px;
    gap: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal__panel .form > label,
  .modal__panel .form > .form__row > label,
  .modal__panel .form > fieldset > legend {
    display: grid;
    gap: 8px;
    font-size: .85rem;
    font-weight: 500;
    color: rgba(255,255,255,.72);
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
    padding: 0;
  }
  .modal__panel .form > label > span:first-child,
  .modal__panel .form > .form__row > label > span:first-child {
    font-size: .82rem;
    color: rgba(255,255,255,.6);
    font-weight: 500;
  }
  /* font-size:16px prevents iOS auto-zoom on focus */
  .modal__panel .form input[type="text"],
  .modal__panel .form input[type="email"],
  .modal__panel .form input[type="tel"],
  .modal__panel .form textarea,
  .modal__panel .form select {
    font-size: 16px !important;
    padding: 14px 16px;
    border-radius: 12px;
    min-height: 50px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--text-bright, #fff);
    appearance: none;
    -webkit-appearance: none;
  }
  .modal__panel .form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2320D4E8' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
  }
  .modal__panel .form textarea { min-height: 110px; resize: none; }
  .form__row,
  .form__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .form__hint { font-size: .78rem; }
  .form__note,
  .form__note--small {
    font-size: .76rem;
    color: rgba(255,255,255,.45);
    line-height: 1.4;
    margin: 6px 0 0;
  }

  /* Radio buttons (delivery format) — pill row.
     Targets the existing `.seg > label > input + span` markup. */
  .form__segmented legend {
    font-size: .8rem;
    font-weight: 500;
    color: rgba(255,255,255,.55);
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .form__segmented .seg {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .form__segmented .seg label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 6px !important;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 11px;
    cursor: pointer;
    font-size: .82rem;
    color: rgba(255,255,255,.7);
    min-height: 48px;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    position: relative;
  }
  .form__segmented .seg label input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .form__segmented .seg label:has(input[type="radio"]:checked) {
    background: rgba(32,212,232,.14);
    border-color: rgba(32,212,232,.55);
    color: #fff;
  }
  .form__segmented .seg label span {
    text-transform: none;
    letter-spacing: 0;
    font-size: .85rem;
  }

  /* STICKY submit bar at the bottom of the screen */
  .modal__panel .form > button[type="submit"],
  .modal__panel .form > .btn[type="submit"] {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: auto;
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    min-height: 54px;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(32,212,232,.30);
    z-index: 20;
  }
  /* Status / note appear above the sticky submit */
  .modal__panel .form > .form__status,
  .modal__panel .form > .form__note {
    margin-bottom: 12px;
  }

  /* ==========================================================
     MOBILE DATEPICKER — portaled bottom sheet. Overrides the
     desktop centered overlay for the portaled pop. */
  .datepicker { position: static; }
  .datepicker__trigger {
    padding: 14px 16px;
    font-size: 16px;
    min-height: 50px;
    border-radius: 12px;
  }
  .datepicker__pop--portal {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 82vh;
    overflow-y: auto;
    padding: 14px 18px 32px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -20px 60px rgba(0,0,0,.7);
    border-bottom: 0;
    animation: dpSlideUp .25s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes dpSlideUp {
    from { transform: translateY(100%); opacity: .6; }
    to   { transform: translateY(0); opacity: 1; }
  }
  /* Grip handle */
  .datepicker__pop--portal::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255,255,255,.22);
    margin: 0 auto 12px;
  }
  .datepicker__head {
    margin-bottom: 16px;
    padding: 0 4px;
  }
  .datepicker__title { font-size: 1.05rem; }
  .datepicker__nav { width: 40px; height: 40px; font-size: 22px; }
  .datepicker__dow {
    font-size: .65rem;
    padding: 6px 0;
    color: rgba(255,255,255,.45);
  }
  .datepicker__grid { gap: 4px; }
  .datepicker__cell {
    font-size: .98rem;
    min-height: 44px;
    border-radius: 10px;
  }
}

/* Even tighter on small phones */
@media (max-width: 380px) {
  .modal__panel .form { padding: 4px 14px 110px; }
  .modal__panel .eyebrow,
  .modal__panel .modal__title,
  .modal__panel .modal__lead { padding-left: 16px; padding-right: 16px; }
  .modal__facts { margin-left: 12px; margin-right: 12px; }
  .form__radio-group { grid-template-columns: 1fr; }
  .datepicker__cell { font-size: .88rem; min-height: 40px; }
}

/* =============================================================
   RTL refactor — Arabic (and any future RTL language)
   All overrides are scoped to html[dir="rtl"]; loaded only when
   the lang switcher activates an RTL locale. None of these touch
   LTR rendering.
   ============================================================= */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .container { direction: rtl; }

/* ---- Navigation -------------------------------------------- */
html[dir="rtl"] .nav__inner { flex-direction: row-reverse; }
html[dir="rtl"] .nav__menu  { flex-direction: row-reverse; }
html[dir="rtl"] .brand      { flex-direction: row-reverse; }
html[dir="rtl"] .brand__mark { margin-right: 0; margin-left: 10px; }

/* Language trigger: chevron on the opposite side */
html[dir="rtl"] .lang-trigger { flex-direction: row-reverse; }

/* ---- Hero ---------------------------------------------------- */
html[dir="rtl"] .hero__title { text-align: center; }
html[dir="rtl"] .hero__tagline,
html[dir="rtl"] .hero__lead,
html[dir="rtl"] .hero__credentials { text-align: center; }

/* ---- Section heads ------------------------------------------ */
html[dir="rtl"] .section__head .eyebrow { display: inline-block; }
html[dir="rtl"] .section__head { text-align: right; }

/* ---- Cards, lists ------------------------------------------- */
html[dir="rtl"] .card,
html[dir="rtl"] .service-card,
html[dir="rtl"] .training-card,
html[dir="rtl"] .panel { text-align: right; }

html[dir="rtl"] .card ul,
html[dir="rtl"] .panel__points,
html[dir="rtl"] ul { padding-left: 0; padding-right: 1.1rem; }

/* Bullet markers: stay correct in RTL automatically with default list-style */

/* ---- Steps (approach) --------------------------------------- */
html[dir="rtl"] .steps li {
  padding-left: 0;
  padding-right: 64px;
}
html[dir="rtl"] .steps__num {
  left: auto;
  right: 0;
}

/* ---- Pillar stages ----------------------------------------- */
html[dir="rtl"] .pillar-stage__content { text-align: right; }
html[dir="rtl"] .pillar-stage__content--right { text-align: right; }
html[dir="rtl"] .panel__points li { padding-right: 0; }
html[dir="rtl"] .panel__points { padding-right: 1.1rem; }

/* ---- Careers ----------------------------------------------- */
html[dir="rtl"] .careers__intro { text-align: right; }
html[dir="rtl"] .careers__inner { direction: rtl; }
html[dir="rtl"] .careers__perks li { flex-direction: row-reverse; }

/* ---- Contact / Forms --------------------------------------- */
html[dir="rtl"] .contact-info li { text-align: right; }
html[dir="rtl"] .form label > span { text-align: right; }
html[dir="rtl"] .form input,
html[dir="rtl"] .form select,
html[dir="rtl"] .form textarea { text-align: right; direction: rtl; }
/* Keep emails/URLs LTR-rendered inside RTL */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"] { direction: ltr; text-align: right; }

/* Form rows: mirror left/right column ordering */
html[dir="rtl"] .form__row { direction: rtl; }

/* Segmented control (Remote / On site / Hybrid) */
html[dir="rtl"] .seg { flex-direction: row-reverse; }

/* ---- Modal ------------------------------------------------- */
html[dir="rtl"] .modal__panel { direction: rtl; text-align: right; }
html[dir="rtl"] .modal__close {
  right: auto;
  left: 16px;
}
html[dir="rtl"] .modal__lead { text-align: right; }
html[dir="rtl"] .modal__facts li { text-align: right; }

/* ---- Datepicker -------------------------------------------- */
html[dir="rtl"] .datepicker { direction: rtl; }
html[dir="rtl"] .datepicker__trigger { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .datepicker__head { direction: rtl; }
html[dir="rtl"] .datepicker__nav[data-prev] { transform: rotate(180deg); }
html[dir="rtl"] .datepicker__nav[data-next] { transform: rotate(180deg); }
/* Calendar grid: weekdays start with Monday (column 1) in our markup;
   in RTL we want column 1 on the right.  CSS grid auto-flips with the
   parent direction, so no further work needed. */

/* ---- Footer ------------------------------------------------ */
html[dir="rtl"] .footer__cols { direction: rtl; }
html[dir="rtl"] .footer__bottom { direction: rtl; }
html[dir="rtl"] .footer__brand  { text-align: right; }
html[dir="rtl"] .social-row     { flex-direction: row-reverse; }

/* ---- Notes / hints / status -------------------------------- */
html[dir="rtl"] .form__note,
html[dir="rtl"] .form__hint,
html[dir="rtl"] .form__status { text-align: right; }

/* ---- Lang picker modal ------------------------------------- */
html[dir="rtl"] .lang-modal__panel { direction: rtl; }
html[dir="rtl"] .lang-modal__tile  { text-align: right; align-items: flex-end; }
html[dir="rtl"] .lang-modal__group-title { text-align: right; }
/* Keep search input LTR-friendly since users may search by EN code */
html[dir="rtl"] .lang-modal__search { text-align: right; direction: rtl; }

/* ---- Numbers / dates inside RTL — keep them LTR ------------ */
html[dir="rtl"] code,
html[dir="rtl"] .legal__meta,
html[dir="rtl"] [data-date-readout],
html[dir="rtl"] .modal__facts li span:not([data-i18n]) {
  unicode-bidi: plaintext;
}

/* ---- Buttons / link-arrow ---------------------------------- */
html[dir="rtl"] .link-arrow { direction: rtl; }
/* Arrows in CTAs: the i18n strings already use ← for AR; if any LTR
   arrow leaks in, mirror it via CSS transform */
html[dir="rtl"] .btn .arrow { transform: scaleX(-1); }