/* ═══════════════════════════════════════════════════════════════════════════
   CVR · v5.0 · Vector-sharp scale + saturated metal + soft section fades
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --c-void:        #000000;
  --c-ink:         #050403;
  --c-white:       #f6f4ee;
  --c-white-text:  #1c1612;
  --c-white-mute:  #4a443c;
  --c-gold:        #C9A24E;
  --c-gold-hot:    #E8BE5C;
  --c-gold-warm:   #B88936;
  --c-gold-deep:   #8b6520;
  --c-gold-light:  #FFE9A8;
  --c-gold-15:     rgba(201, 162, 78, 0.15);
  --c-gold-50:     rgba(201, 162, 78, 0.50);
  --c-glass-tint:  rgba(20, 16, 8, 0.55);
  --c-glass-edge:  rgba(201, 162, 78, 0.22);
  --c-text:        #EFE6CF;
  --c-text-mute:   rgba(239, 230, 207, 0.62);
  --f-display:     "Archivo Black", system-ui, sans-serif;
  --f-body:        "Inter", system-ui, -apple-system, sans-serif;
  --f-mono:        "JetBrains Mono", "Courier New", monospace;
  --gutter:        max(20px, 4vw);
  --max:           1480px;
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; }
html, body {
  background: var(--c-void);
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }
body.no-context,
body.no-context * { -webkit-user-select: none; user-select: none; }

a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--c-gold); color: var(--c-void); }

/* Scroll wrapper — plain container, no ScrollSmoother virtualization */
#smooth-wrapper {
  width: 100%;
}
#smooth-content {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIQUID METAL TEXT — saturated gold gradient with cream highlight (no white)
   - Always sharp, fully opaque (no -webkit-text-fill-color of "transparent" tricks
     that look washed: we use background-clip:text but with strong fill).
   - Strong drop-shadow gives definition over any background.
   ═══════════════════════════════════════════════════════════════════════════ */

.metal {
  color: #f5a730;
  text-shadow:
    0 -1px 0 #ffd87a,
    0  1px 0 #c2761a,
    0  2px 0 #8a5210,
    0  0  18px rgba(255, 170, 60, 0.65),
    0  0  40px rgba(232, 145, 50, 0.45);
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOADER
   ═══════════════════════════════════════════════════════════════════════════ */

.loader {
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--c-void);
  display: grid; place-items: center;
  transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease);
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner {
  display: flex; flex-direction: column;
  gap: 22px; align-items: center;
  width: min(420px, 92vw);
  padding: var(--gutter);
}
.loader-logo {
  width: clamp(100px, 18vw, 200px);
  filter: drop-shadow(0 8px 40px rgba(201,162,78,0.5));
  opacity: 0;
  animation: loaderFade 0.9s var(--ease) 0.2s forwards;
}
@keyframes loaderFade { to { opacity: 1; } }
.loader-track {
  width: 100%; height: 1px;
  background: var(--c-gold-15);
  position: relative; overflow: hidden;
}
.loader-fill {
  position: absolute; inset: 0 100% 0 0;
  background: linear-gradient(90deg, transparent, var(--c-gold), var(--c-gold-hot));
  transition: right 0.3s linear;
}
.loader-pct {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--c-gold-hot);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════════════════ */

.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  pointer-events: none;
  transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
}
.nav > * { pointer-events: auto; }
.nav.is-scrolled {
  background: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.nav.is-light {
  background: linear-gradient(to bottom, rgba(246,244,238,0.85), transparent);
}
.nav.is-light .nav-links { color: rgba(28,22,18,0.55); }
.nav.is-light .nav-links a:hover { color: var(--c-gold-warm); }
.nav.is-light .nav-cta {
  color: var(--c-gold-warm);
  border-color: var(--c-gold-warm);
  background: rgba(184,137,54,0.06);
}
.nav-logo img {
  height: 26px; width: auto;
  filter: drop-shadow(0 2px 8px rgba(201,162,78,0.4));
}
.nav-links {
  display: flex; gap: 26px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}
.nav-links a { transition: color 0.3s; position: relative; padding: 4px 0; }
.nav-links a:hover { color: var(--c-gold-hot); }
.nav-links a::after {
  content: ""; position: absolute;
  left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--c-gold);
  transition: width 0.4s var(--ease);
}
.nav-links a:hover::after { width: 100%; }
@media (max-width: 920px) { .nav-links { display: none; } }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--c-gold);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--c-gold-hot);
  background: rgba(201,162,78,0.06);
  transition: background 0.3s, color 0.3s;
}
.nav-cta:hover { background: var(--c-gold-hot); color: var(--c-void); }

/* ═══════════════════════════════════════════════════════════════════════════
   COMMON · TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

.section-badge {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}
.section-badge-num { color: var(--c-gold-hot); font-weight: 500; font-size: 12px; }
.section-badge-line { width: 60px; height: 1px; background: linear-gradient(90deg, var(--c-gold), transparent); }

.section-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(40px, 6.5vw, 110px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--c-text);
  text-shadow: 0 0 40px rgba(0,0,0,0.9);
  text-transform: uppercase;
}
.section-sub {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--c-text-mute);
  max-width: 50ch;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
.section-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px;
  border: 1px solid var(--c-glass-edge);
  border-radius: 999px;
  background: rgba(20, 16, 8, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text);
  position: relative; overflow: hidden;
  transition: color 0.4s, border-color 0.4s, transform 0.4s;
}
.btn:hover { transform: translateY(-2px); border-color: var(--c-gold); }
.btn--gold {
  background: linear-gradient(135deg, var(--c-gold-warm), var(--c-gold-hot));
  color: var(--c-void);
  border-color: var(--c-gold-hot);
  box-shadow: 0 8px 32px -8px var(--c-gold-50);
  font-weight: 500;
}
.btn--gold:hover { box-shadow: 0 16px 48px -8px var(--c-gold-50); }
.btn--large { padding: 16px 28px; font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PINNED SECTIONS — height: 100vh; pinSpacing handles the scroll length.
   ═══════════════════════════════════════════════════════════════════════════ */

.cover3d-section,
.hero-section,
.zoom-section,
.signal-section {
  position: relative;
  width: 100%;
  /* NO height: 100vh — GSAP pin spacer must be able to grow the section */
  /* NO overflow: hidden — it would clip the spacer to 100vh */
  background: var(--c-void);
}
.cover3d-pin,
.hero-pin,
.zoom-pin,
.signal-pin {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COVER 3D · sentinel robot — Three.js scene with gold-circuit backlight
   ═══════════════════════════════════════════════════════════════════════════ */

.cover3d-bg {
  position: absolute; inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.cover3d-bg-glow {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 65% 55% at 50% 55%, rgba(232, 175, 60, 0.55) 0%, rgba(180, 120, 30, 0.20) 35%, rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(140, 80, 20, 0.35) 0%, rgba(0,0,0,0) 60%);
  /* will be brightened by JS as user scrolls */
  filter: brightness(0.45) saturate(0.85);
  transition: none;            /* GSAP drives this */
}
.cover3d-bg-circuits {
  position: absolute; inset: 0;
  background-image: url("img/circuits.svg");
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  mix-blend-mode: screen;
  filter: brightness(0.6) hue-rotate(-5deg);
}
.cover3d-bg-sparks {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 75%, rgba(255,180,80,0.55) 0%, rgba(0,0,0,0) 0.18%),
    radial-gradient(circle at 82% 30%, rgba(255,200,100,0.55) 0%, rgba(0,0,0,0) 0.18%),
    radial-gradient(circle at 35% 85%, rgba(255,170,60,0.55) 0%, rgba(0,0,0,0) 0.15%),
    radial-gradient(circle at 70% 80%, rgba(255,210,120,0.55) 0%, rgba(0,0,0,0) 0.15%),
    radial-gradient(circle at 25% 40%, rgba(255,180,80,0.4) 0%, rgba(0,0,0,0) 0.12%),
    radial-gradient(circle at 60% 60%, rgba(255,180,80,0.4) 0%, rgba(0,0,0,0) 0.10%);
  filter: blur(0.6px);
  opacity: 0.6;
}

.cover3d-stage {
  position: absolute; inset: 0;
  z-index: 3;
}
.cover3d-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.cover3d-text {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  bottom: 12vh;
  padding: 0 var(--gutter);
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  pointer-events: none;
}
.cover3d-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--c-text);
  text-shadow: 0 0 40px rgba(0,0,0,0.85), 0 4px 24px rgba(0,0,0,0.6);
  text-transform: uppercase;
}
.cover3d-sub {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--c-text-mute);
  text-shadow: 0 2px 12px rgba(0,0,0,0.85);
  max-width: 36ch;
}

.cover3d-cue {
  position: absolute;
  left: 50%; top: 14vh;
  transform: translateX(-50%);
  z-index: 6;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.36em;
  color: var(--c-gold-hot);
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  pointer-events: none;
  opacity: 0.7;
}
.cover3d-cue-line {
  width: 36px; height: 1px;
  background: linear-gradient(to right, var(--c-gold-hot), transparent);
}

@media (max-width: 720px) {
  .cover3d-title { font-size: clamp(32px, 9vw, 60px); }
  .cover3d-text  { bottom: 8vh; gap: 10px; }
  .cover3d-cue   { top: 9vh; font-size: 9px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO · video right (slight offset) + text already visible left
   - object-position: 50% 30% keeps the TOP of the video safe, crops bottom only
   - side shadows give cinematic feel
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
/* Soft top-fade — bridges the cover3d → hero transition so the join is
   gradual, not a hard cut. */
.hero-pin::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 35vh;
  background: linear-gradient(to bottom, var(--c-void) 0%, rgba(0,0,0,0.9) 25%, rgba(0,0,0,0) 100%);
  z-index: 7;
  pointer-events: none;
}
.hero-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;       /* preserve top, crop bottom only */
  display: block;
}
.hero-side-shadow {
  position: absolute;
  top: 0; bottom: 0;
  width: 14%;
  pointer-events: none;
  z-index: 2;
}
.hero-side-shadow--left  { left: 0;  background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%); }
.hero-side-shadow--right { right: 0; background: linear-gradient(to left,  rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%); }

/* Horizontal mask making text-side legible */
.hero-video-mask {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 62%;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.78) 35%,
    rgba(0,0,0,0.42) 70%,
    rgba(0,0,0,0)    100%
  );
  pointer-events: none;
  z-index: 3;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 70% 50%,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0.18) 60%,
    rgba(0,0,0,0.55) 100%
  );
  pointer-events: none;
  z-index: 4;
}

.hero-text {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(620px, 50vw);
  padding: 0 var(--gutter);
  display: flex; flex-direction: column;
  gap: 18px;
}
.hero-text .section-title {
  font-size: clamp(36px, 5.2vw, 86px);
  line-height: 0.95;
  text-shadow:
    0 2px 18px rgba(0,0,0,0.85),
    0 6px 40px rgba(0,0,0,0.55);
}
.hero-text .section-sub { max-width: 44ch; }

.hero-scroll-cue {
  position: absolute;
  left: 50%; bottom: 36px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.36em;
  color: var(--c-gold-hot);
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.hero-scroll-line {
  width: 56px; height: 1px;
  background: linear-gradient(to right, transparent, var(--c-gold-hot), transparent);
}
.hero-scroll-label { animation: scrollPulse 2.4s ease-in-out infinite; }
@keyframes scrollPulse {
  0%,100% { opacity: 0.6; }
  50%     { opacity: 1.0; }
}

.hero-blackout {
  position: absolute; inset: 0;
  background: var(--c-void);
  z-index: 8;
  opacity: 0;     /* starts transparent — hero visible on load; GSAP fades to 1 at exit */
  pointer-events: none;
}

/* MOBILE HERO — VIDEO on top (primary focus, large), TEXT below.
   Stacked layout, no overlap, video is the dominant visual.
   Nav clearance reserved at top so the video isn't cropped behind the fixed nav. */
@media (max-width: 820px) {
  .hero-pin {
    display: flex;
    flex-direction: column;
    padding-top: 72px;          /* clear the fixed nav so the video isn't clipped */
  }

  /* Video is the HERO — sits BELOW the nav, takes the upper portion. */
  .hero-video-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    height: 56vh;
    flex: 0 0 56vh;
    overflow: hidden;
  }
  .hero-video-wrap video {
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* Kill the desktop overlays — not needed once video & text are stacked. */
  .hero-side-shadow,
  .hero-video-mask,
  .hero-vignette { display: none; }

  /* Soft fade from video into the text area below. */
  .hero-video-wrap::after {
    content: ""; position: absolute;
    left: 0; right: 0; bottom: 0; height: 22%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--c-void) 100%);
    pointer-events: none; z-index: 5;
  }

  /* Text below — supporting copy, compact and well-spaced. */
  .hero-text {
    position: relative;
    inset: auto;
    top: auto; left: auto;
    transform: none;
    width: 100%;
    flex: 1 1 auto;
    padding: 22px var(--gutter) 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
  }

  /* Tighten title size so the text section stays compact. */
  .hero-text .section-title { font-size: clamp(32px, 9vw, 52px); }

  /* Hide the SCROLL cue on mobile. */
  .hero-scroll-cue { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZOOM SECTION (AGENTS) — title zooms toward camera, bg goes white,
   placeholder content reveals on white, then white→black for next section.
   - SCALE STRATEGY: text base font-size is HUGE (scale=1 is the natural target).
     Initial scale is 0.40 (small/far). Animation only zooms UP TO 1.0, never
     past it → text is rasterized at peak size = always vector-sharp.
   ═══════════════════════════════════════════════════════════════════════════ */

.zoom-bg-black {
  position: absolute; inset: 0;
  background: var(--c-void);
  z-index: 1;
}
.zoom-bg-white {
  position: absolute; inset: 0;
  background: var(--c-white);
  z-index: 2;
  opacity: 0;
}
.zoom-stage {
  position: absolute; inset: 0;
  z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  padding: 0 var(--gutter);
  text-align: center;
  transform-origin: 50% 50%;
}
.zoom-badge { justify-content: center; }
.zoom-title {
  font-family: var(--f-display);
  font-weight: 900;
  /* base size near viewport-filling so scale-down never blurs */
  font-size: clamp(48px, 11vw, 180px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--c-text);
  text-shadow: 0 0 60px rgba(0,0,0,0.9);
  text-transform: uppercase;
}

/* Exit blackout — covers everything in the final scrub frames so nothing bleeds
   through into the signal section. */
.zoom-blackout {
  position: absolute; inset: 0;
  background: var(--c-void);
  z-index: 9;
  opacity: 0;
  pointer-events: none;
}

.zoom-reveal {
  position: absolute; inset: 0;
  z-index: 4;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 0 var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  opacity: 0;
  pointer-events: none;
}
.zoom-reveal-eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--c-gold-warm);
  text-transform: uppercase;
}
.zoom-reveal-lead {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.18;
  color: var(--c-white-text);
  text-transform: uppercase;
  letter-spacing: -0.012em;
  max-width: 24ch;
}
/* ── HIERARCHY · 4-tier diagram with 10 nodes ───────────────────── */

.hierarchy {
  position: relative;
  margin-top: 14px;
  padding: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}
.hierarchy-lines {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  fill: none;
  stroke: rgba(184, 137, 54, 0.45);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.hierarchy-lines path {
  stroke-dasharray: 4 6;
  animation: hierFlow 6s linear infinite;
}
@keyframes hierFlow {
  to { stroke-dashoffset: -120; }
}
.hierarchy-tier {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hierarchy-tier--t3 { gap: 8px; align-items: stretch; }
.hierarchy-tier--t4 { gap: 12px; align-items: stretch; }
/* Specialists (tier 3) get a tighter label size — the longest token here is
   COMMERCIALISTA (14 chars), so we shrink type slightly to keep every node's
   label on a single line at the desktop layout. */
.hierarchy-tier--t3 .hier-node {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 11px 10px;
}
.hierarchy-tier--t3 .hier-node-label {
  font-size: clamp(10.5px, 0.86vw, 13.5px);
  letter-spacing: -0.01em;
}
.hierarchy-tier--t3 .hier-node-meta { font-size: 8.5px; letter-spacing: 0.10em; }

.hier-node {
  flex: 0 1 150px;
  min-width: 140px;
  background: rgba(20, 16, 8, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
}
.hier-node::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 28%; height: 2px;
  background: var(--c-gold-warm);
  border-radius: 2px;
}
.hier-node--lead {
  flex-basis: 280px;
  background: linear-gradient(135deg, rgba(232,190,92,0.18), rgba(184,137,54,0.10));
  border-color: rgba(184,137,54,0.55);
  box-shadow: 0 8px 30px -10px rgba(184,137,54,0.40);
}
.hier-node--lead::before {
  width: 100%;
  background: linear-gradient(90deg, var(--c-gold-hot), transparent);
}
.hier-node--director {
  flex-basis: 200px;
  background: linear-gradient(135deg, rgba(232,190,92,0.10), rgba(184,137,54,0.04));
  border-color: rgba(184,137,54,0.35);
}
.hier-node--tool {
  flex-basis: 165px;
  background: rgba(0, 0, 0, 0.04);
  border-style: dashed;
}
.hier-node:hover {
  border-color: var(--c-gold-warm);
  transform: translateY(-2px);
}
.hier-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin-bottom: 4px;
  border-radius: 6px;
  background: rgba(232, 190, 92, 0.10);
  color: var(--c-gold-warm);
}
.hier-node-icon svg {
  width: 18px; height: 18px;
}
.hier-node--lead .hier-node-icon {
  background: rgba(232, 190, 92, 0.25);
  color: var(--c-gold-hot);
}
.hier-node--lead .hier-node-icon svg { width: 20px; height: 20px; }
.hier-node-num {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.30em;
  color: var(--c-gold-warm);
}
.hier-node-label {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(12px, 1.05vw, 17px);
  letter-spacing: -0.005em;
  color: var(--c-white-text);
  text-transform: uppercase;
  line-height: 1.05;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.hier-node--lead .hier-node-label {
  font-size: clamp(15px, 1.4vw, 22px);
}
.hier-node-meta {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--c-white-mute);
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .hier-node { flex: 1 1 calc(33.333% - 12px); min-width: 0; }
  .hier-node--lead { flex-basis: 100%; }
  .hier-node--director { flex: 1 1 calc(33.333% - 12px); }
}
@media (max-width: 820px) {
  /* Mobile hierarchy: 14 nodes have to fit inside an 812-ish px reveal block,
     so we compress everything aggressively — tighter gaps, smaller padding,
     no per-node meta text. The icon + label is enough at this scale. */
  .hierarchy { gap: 10px; margin-top: 8px; padding-top: 6px; }
  .hierarchy-lines { display: none; }     /* the static SVG geometry doesn't match a wrapped flow on mobile */
  .hierarchy-tier { gap: 6px; }
  .hier-node {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    padding: 7px 10px 6px;
    gap: 2px;
  }
  .hier-node--lead { flex-basis: 100%; padding: 9px 12px 8px; }
  .hier-node--director { flex: 1 1 calc(50% - 3px); }
  .hier-node--tool { flex: 1 1 calc(50% - 3px); }
  .hierarchy-tier--t3 .hier-node {
    flex: 1 1 calc(50% - 3px);
    padding: 7px 10px 6px;
  }
  .hierarchy-tier--t3 .hier-node-label {
    font-size: 12.5px;
    letter-spacing: 0;
  }
  .hier-node-meta { display: none; }      /* drop the meta lines on mobile to save vertical space */
  .hier-node--lead .hier-node-meta { display: block; font-size: 9px; }   /* keep on the lead card only */
  .hier-node-icon { width: 22px; height: 22px; margin-bottom: 2px; }
  .hier-node-icon svg { width: 14px; height: 14px; }
  .hier-node-num { font-size: 8px; letter-spacing: 0.22em; }
}
@media (max-width: 480px) {
  .hier-node--lead .hier-node-meta { display: none; }   /* very tight phones — drop everything but label */
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIGNAL · staggered text overlay → slow crossfade to sand video
   - Title sized like AGENTS (no huge zoom-target). Pure opacity/y motion.
   - Video fades in slowly behind text; text fades out before video plays.
   - Sand video object-position 50% 30% (preserve top, crop bottom).
   - Side shadows so video keeps full frame width.
   ═══════════════════════════════════════════════════════════════════════════ */

.signal-text-stage {
  position: absolute; inset: 0;
  z-index: 5;                         /* sits ABOVE the video so it overlays during crossfade */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
  padding: 0 var(--gutter);
  text-align: center;
  will-change: opacity;
  pointer-events: none;
}
.signal-badge { justify-content: center; }

.signal-title {
  font-family: var(--f-display);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 0.04em;
}
.signal-line-a {
  font-size: clamp(48px, 11vw, 180px);
  color: var(--c-text);
  text-shadow: 0 0 60px rgba(0,0,0,0.9);
}
.signal-line-b {
  font-size: clamp(48px, 11vw, 180px);
  letter-spacing: -0.025em;
  display: inline-block;
}
.signal-sub {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--c-text-mute);
  max-width: 48ch;
  text-align: center;
  margin-top: 16px;
}

.signal-video-stage {
  position: absolute; inset: 0;
  z-index: 4;
  opacity: 0;
  will-change: opacity;
  overflow: hidden;
}
.signal-video-stage video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;       /* preserve top of frame */
  display: block;
}

/* On portrait phones we still cover the viewport but bias the framing to the
   center of the video so the burj sits whole. The top/bottom mask gradients
   below soften the crop edges so it reads as cinematic letterbox, not hard cut. */
@media (max-width: 720px) {
  .signal-video-stage video {
    object-position: 50% 60%;   /* push burj down so its tip isn't behind the nav */
  }
}

.signal-side-shadow {
  position: absolute;
  top: 0; bottom: 0;
  width: 12%;
  pointer-events: none;
  z-index: 2;
}
.signal-side-shadow--left  { left: 0;  background: linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%); }
.signal-side-shadow--right { right: 0; background: linear-gradient(to left,  rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%); }

/* Mobile: subtle top + bottom feather only — no thick dark band that reads as a border */
@media (max-width: 720px) {
  .signal-side-shadow--left,
  .signal-side-shadow--right {
    top: auto; bottom: auto;
    left: 0; right: 0;
    width: 100%;
    height: 8%;
  }
  .signal-side-shadow--left  { top: 0;    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); }
  .signal-side-shadow--right { bottom: 0; background: linear-gradient(to top,    rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); }
}

.signal-video-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0.25) 60%,
    rgba(0,0,0,0.7) 100%
  );
  pointer-events: none;
  z-index: 3;
}

.signal-blackout {
  position: absolute; inset: 0;
  background: var(--c-void);
  z-index: 8;
  opacity: 1;     /* default COVERED — GSAP fades to 0 when animation starts */
  pointer-events: none;
}

.signal-cue {
  position: absolute;
  right: var(--gutter); bottom: 28px;
  z-index: 7;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--c-gold-hot);
  text-transform: uppercase;
  opacity: 0;
}
.signal-cue-line { width: 60px; height: 1px; background: linear-gradient(to right, var(--c-gold-hot), transparent); }
.signal-cue-pct  { color: var(--c-text-mute); min-width: 36px; text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════════
   STATIC SECTIONS (caps + contact)
   ═══════════════════════════════════════════════════════════════════════════ */

.section {
  position: relative;
  z-index: 10;             /* sit above pinned-section spacers */
  width: 100%;
  min-height: 100vh;
  padding: 14vh var(--gutter);
  background: var(--c-void);  /* opaque — blocks bleed from pinned sections */
}
.caps-wrap, .contact-wrap {
  max-width: var(--max);
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 26px;
}

.caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 4vh;
}
@media (max-width: 980px) { .caps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .caps-grid { grid-template-columns: 1fr; } }

.caps-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 20px;
  background: var(--c-glass-tint);
  border: 1px solid var(--c-glass-edge);
  border-radius: 8px;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  position: relative; overflow: hidden;
  transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
  min-height: 170px;
}
.caps-card::before {
  content: ""; position: absolute;
  top: 0; left: 0;
  width: 30%; height: 1px;
  background: var(--c-gold-hot);
  box-shadow: 0 0 8px var(--c-gold-hot);
}
.caps-card:hover {
  border-color: var(--c-gold);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -20px rgba(201,162,78,0.3);
}
.caps-card-num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--c-gold-hot);
}
.caps-card h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(16px, 1.7vw, 22px);
  letter-spacing: -0.005em;
  color: var(--c-text);
  text-transform: uppercase;
}
.caps-card p {
  font-size: 13px; line-height: 1.5;
  color: var(--c-text-mute);
}

.caps-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 6vh;
  border-top: 1px solid var(--c-gold-15);
  border-bottom: 1px solid var(--c-gold-15);
}
@media (max-width: 720px) { .caps-stats { grid-template-columns: repeat(2, 1fr); } }
.caps-stats > div {
  padding: 24px 20px;
  border-right: 1px solid var(--c-gold-15);
  display: flex; flex-direction: column;
  gap: 8px; align-items: flex-start;
}
.caps-stats > div:first-child { padding-left: 0; }
.caps-stats > div:last-child  { border-right: 0; padding-right: 0; }
@media (max-width: 720px) {
  .caps-stats > div                  { padding: 22px 16px; }
  .caps-stats > div:nth-child(2n)    { border-right: 0; padding-right: 0; }
  .caps-stats > div:nth-child(2n+1)  { padding-left: 0; }
  .caps-stats > div:nth-child(n+3)   { border-top: 1px solid var(--c-gold-15); }
}
.stat-num {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(36px, 4.5vw, 70px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--c-text-mute);
  text-transform: uppercase;
}

.contact-form {
  margin-top: 4vh;
  padding: 28px;
  background: var(--c-glass-tint);
  border: 1px solid var(--c-glass-edge);
  border-radius: 16px;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  display: flex; flex-direction: column;
  max-width: 880px;
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) { .contact-row { grid-template-columns: 1fr; } }
.contact-form label {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--c-gold-15);
  border-right: 1px solid var(--c-gold-15);
  position: relative;
  transition: background 0.4s;
}
.contact-row label:last-child { border-right: 0; padding-right: 0; padding-left: 20px; }
@media (max-width: 720px) {
  .contact-form label { border-right: 0; padding-left: 0 !important; padding-right: 20px !important; }
}
.contact-full { padding-left: 0 !important; padding-right: 0; border-right: 0 !important; }
.contact-form label:focus-within { background: linear-gradient(90deg, rgba(201,162,78,0.06), transparent); }
.contact-form span {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold-hot);
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  background: transparent; border: 0; outline: 0;
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 16px; font-weight: 300;
  padding: 4px 0;
  resize: none;
  width: 100%;
}
.contact-form select option { background: var(--c-ink); }
.contact-form button { align-self: flex-start; margin-top: 24px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT · MAP (Meydan HQ)
   ═══════════════════════════════════════════════════════════════════════════ */

.contact-map {
  position: relative;
  margin: 8vh auto 0;
  max-width: var(--max);
  height: clamp(320px, 56vh, 560px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--c-glass-edge);
  background: #0a0a0a;
}
/* iframe locked: pointer-events:none disables panning/zooming, so the pin
   + address card stay anchored where we placed them. */
.contact-map iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  pointer-events: none;
  /* Black & white palette */
  filter: grayscale(1) invert(0.92) brightness(0.85) contrast(1.05);
}
/* Gold accent overlay — adds warm tint + subtle vignette to match the brand */
.contact-map-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201,162,78,0.10) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(232,190,92,0.06) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(232,190,92,0.05) 100%);
  mix-blend-mode: normal;
}
.contact-map-pin {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}
.contact-map-pin-card {
  background: var(--c-void);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.45;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid var(--c-glass-edge);
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.8);
  white-space: nowrap;
  margin-bottom: 14px;
}
.contact-map-pin-dot {
  width: 14px; height: 18px;
  background: var(--c-gold-hot);
  clip-path: path("M7 18 L1 8 A6 6 0 1 1 13 8 Z");
  filter: drop-shadow(0 4px 12px rgba(232, 190, 92, 0.55));
}
@media (max-width: 600px) {
  .contact-map { height: 60vh; margin-top: 6vh; }
  .contact-map-pin-card { font-size: 12px; padding: 10px 14px; white-space: normal; max-width: 78vw; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.footer {
  position: relative;
  z-index: 10;
  background: var(--c-void);
  padding: 8vh var(--gutter) 4vh;
  border-top: 1px solid var(--c-gold-15);
}
.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid > div { display: flex; flex-direction: column; gap: 6px; }
.footer-label {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.28em;
  color: var(--c-gold-hot);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.footer-grid p { font-size: 13px; color: var(--c-text-mute); line-height: 1.5; }
.footer-grid a:hover { color: var(--c-gold-hot); }

.footer-socials {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text-mute);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  transition: color 0.3s;
}
.footer-socials a:hover { color: var(--c-gold-hot); }
.footer-socials svg { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  *, .metal { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER — fixed pill bottom-left, EN / AR / IT
   ═══════════════════════════════════════════════════════════════════════════ */
.lang-switcher {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 200;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(20, 16, 8, 0.62);
  border: 1px solid rgba(232, 190, 92, 0.30);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  user-select: none;
}
.lang-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: rgba(245, 230, 200, 0.55);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  transition: color 0.25s, background 0.25s;
}
.lang-btn[lang="ar"] {
  font-family: 'Noto Naskh Arabic', 'Geeza Pro', 'Arabic Typesetting', serif;
  font-size: 13px;
  letter-spacing: 0;
  padding: 4px 10px;
}
.lang-btn:hover { color: var(--c-gold-warm); }
.lang-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(232, 190, 92, 0.22), rgba(184, 137, 54, 0.12));
  color: var(--c-gold-hot);
  box-shadow: inset 0 0 0 1px rgba(232, 190, 92, 0.45);
}

/* When the page is RTL (Arabic), flip the switcher to the bottom-right so it
   stays in the natural "secondary actions" corner for RTL readers. */
html[dir="rtl"] .lang-switcher {
  left: auto;
  right: 18px;
}
/* Arabic typography pass — give Arabic text a font that handles the script
   gracefully and a slightly tighter line-height for diacritics. */
html[lang="ar"] {
  font-family: 'Noto Naskh Arabic', 'Geeza Pro', 'Arabic Typesetting', system-ui, sans-serif;
}
html[lang="ar"] .section-title,
html[lang="ar"] .zoom-title,
html[lang="ar"] .hier-node-label,
html[lang="ar"] .hier-node-num,
html[lang="ar"] .hier-node-meta,
html[lang="ar"] .section-badge-name,
html[lang="ar"] .footer-label {
  font-family: 'Noto Naskh Arabic', 'Geeza Pro', 'Arabic Typesetting', system-ui, sans-serif;
  letter-spacing: 0;
}

@media (max-width: 480px) {
  .lang-switcher { left: 12px; bottom: 12px; font-size: 10px; }
  html[dir="rtl"] .lang-switcher { left: auto; right: 12px; }
}

/* ── Mobile: glow .metal ridotto (le ombre px fisse sui font piccoli bruciavano il colore,
      l'oro sembrava diverso da desktop) ── */
@media (max-width: 720px) {
  .metal {
    text-shadow:
      0 -1px 0 #ffd87a,
      0  1px 0 #c2761a,
      0  0  4px rgba(255, 170, 60, 0.3);
  }
}

/* ── Mobile: titolo agents renderizzato 3x e scalato meno → niente pixel durante lo zoom ── */
@media (max-width: 720px) {
  .zoom-title {
    font-size: 140px;
    white-space: nowrap;
    width: max-content; /* il flex align-items:center centra anche l'overflow */
  }
  .zoom-badge { transform: scale(2.6); transform-origin: center; margin-bottom: 30px; }
}


/* ── Mobile: reveal multi-agent compatto, niente taglio sotto la nav ── */
@media (max-width: 720px) {
  .zoom-reveal { justify-content: flex-start; padding-top: 84px; gap: 13px; overflow: hidden; }
  .zoom-reveal-lead { font-size: 16.5px; line-height: 1.22; max-width: 100%; }
  .hierarchy { gap: 10px; margin-top: 2px; }
  .hierarchy-tier { gap: 7px; }
  .hier-node { padding: 8px 7px 7px !important; }
  .hierarchy-tier--t3 .hier-node, .hierarchy-tier--t4 .hier-node { flex: 1 1 30% !important; }
  .hier-node-label { font-size: 10px !important; word-break: keep-all; }
  .hier-node-meta { display: none !important; }
  .hierarchy-lines { display: none; }
}

/* forms-enable redeploy */