/* ============================================================
   Sections — section-specific styles
   Claude Code: build out each section per IMPLEMENTATION-BRIEF.md
   ============================================================ */

/* ---------- HERO (per Figma node 797:733) ----------
   Hero uses absolute positioning inside .hero__inner — the inner is the
   1440-wide design frame, and copy/visual are placed at exact Figma
   coordinates within it. No section horizontal padding so coordinates
   map 1:1 to Figma at vw=1440. */
.hero {
  padding: 0;
  min-height: 729px;
  position: relative;
  overflow: hidden;
}
.hero__inner {
  position: relative;
  max-width: var(--container-max); /* 1440 */
  margin: 0 auto;
  min-height: 729px;
}
.hero__copy {
  position: absolute;
  /* Hero copy is flush to the left edge — no section padding gap.
     Other sections still use var(--section-px) for their content. */
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 530px;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  z-index: 1;
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  /* Per-design 1.2 leaves ~9.6px of leading visible between the two
     stacked lines — too loose visually. Tightening to 1.1. */
  line-height: 1.1;
  margin: 0;
  /* Span the full .hero__copy width — parent's items-start otherwise
     shrinks the title block to its content (max line) width. Figma's
     Heading 1 wrapper is w-full inside the items-start column. */
  width: 100%;
}
.hero__title-line-1 { display: block; color: var(--c-text-secondary); }
.hero__title-line-2 { display: block; }
.hero__subtitle {
  font-size: var(--fs-body-lg);
  color: var(--c-text-secondary);
  max-width: 460px;
  margin: 0;
}
.hero__visual {
  position: absolute;
  left: 388px;
  top: 50%;
  transform: translateY(-50%);
  width: 1043px;
  /* SVG world map is 2:1 — visual height follows aspect ratio so pin
     centroids in % map directly to country centers without object-fit
     translations. */
  height: auto;
  overflow: visible; /* tooltips can extend past map edge */
}

/* ---- Hero responsive: stack + center text + map below 1024px ---- */
@media (max-width: 1024px) {
  .hero {
    padding: var(--section-py-md) var(--section-px) var(--section-py-sm);
    min-height: 0;
  }
  .hero__inner {
    position: static;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* center children horizontally */
    text-align: center;
    gap: var(--sp-2xl);
    padding-top: var(--sp-2xl); /* clears fixed nav */
  }
  .hero__copy {
    position: static;
    transform: none;
    width: 100%;
    max-width: 580px;
    left: auto;
    top: auto;
    align-items: center;
  }
  .hero__subtitle { margin-inline: auto; }
  .hero__visual {
    /* relative (not static) so pins inside it keep their containing block */
    position: relative;
    transform: none;
    width: 100%;
    max-width: 100%;
    left: auto;
    top: auto;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .hero__inner { gap: var(--sp-xl); }
  .hero-map__pin { width: 11px; height: 11px; }
  .hero-map__tooltip {
    min-width: 140px;
    padding: 10px 12px;
  }
}

/* ---- Hero world map (inline SVG, Natural Earth via topojson) ---- */
.hero-map__image {
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
}

.hero-map__pins {
  position: absolute;
  inset: 0;
}

/* Pin button: sits at the (x, y) percent provided by inline custom props.
   The dot itself is centered on that point via translate(-50%, -50%). */
.hero-map__pin {
  position: absolute;
  top: var(--pin-y);
  left: var(--pin-x);
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-teal);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 0 0 4px rgba(33, 208, 179, 0.18);
  transition: box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.hero-map__pin:hover,
.hero-map__pin:focus-visible {
  box-shadow: 0 0 0 7px rgba(33, 208, 179, 0.28);
  transform: translate(-50%, -50%) scale(1.15);
}

/* Origin pin (Lebanon) gets a continuous pulse halo */
.hero-map__pin--origin {
  background: var(--c-blue-grad-end);
}
.hero-map__pin--origin::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--c-teal);
  animation: pin-pulse 2.4s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes pin-pulse {
  0%   { transform: scale(0.8); opacity: 0.9; }
  70%  { transform: scale(2.2); opacity: 0;   }
  100% { transform: scale(2.2); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .hero-map__pin--origin::before { animation: none; }
}

/* Hover tooltip — popup card showing country + city list.
   Default state hidden; appears on pin hover or keyboard focus. */
.hero-map__tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 12px;
  transform: translate(-50%, 6px);
  min-width: 180px;
  padding: 14px 18px;
  background: var(--c-glass-fill);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility 0s linear var(--dur-fast);
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
}
.hero-map__pin:hover .hero-map__tooltip,
.hero-map__pin:focus-visible .hero-map__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.hero-map__tooltip-country {
  display: block;
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--c-text-primary);
  margin-bottom: 6px;
}
.hero-map__tooltip-cities {
  font-size: var(--fs-body);
  color: var(--c-text-secondary);
  list-style: disc inside;
  padding: 0;
  margin: 0;
}
.hero-map__tooltip-cities li + li { margin-top: 2px; }

/* ---------- BENEFITS ---------- */
.benefits {
  padding: var(--sp-4xl) var(--section-px);
}
.benefits .h2 > span:first-child { color: var(--c-text-secondary); }
.benefits .h2 br + span { display: block; margin-top: 4px; }

/* ---------- ITS NOT WHAT — DARK ---------- */
.brand-promise {
  background: var(--c-deep-navy);
  color: var(--c-text-light-primary);
  padding: var(--sp-4xl) var(--section-px) var(--sp-6xl);
  position: relative;
  overflow: hidden;
}
/* Vertical gradient dividers at ±200px from each edge per spec §3 */
.brand-promise::before,
.brand-promise::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--grad-brand-vert);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.brand-promise::before { left: 200px; }
.brand-promise::after  { right: 200px; }
.brand-promise__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2xl);
  position: relative;
  z-index: 1;
}

/* Horizontal gradient dividers framing the inner content area per Figma.
   Positioned at content top/bottom (section.padding-top and bottom). */
.brand-promise__hbars {
  position: absolute;
  top: var(--sp-4xl);     /* matches padding-top: 100px */
  bottom: var(--sp-4xl);  /* close to Figma's 99.96 (100) */
  left: 0; right: 0;
  pointer-events: none;
  background:
    var(--grad-brand) top    / 100% 1px no-repeat,
    var(--grad-brand) bottom / 100% 1px no-repeat;
  opacity: 0.4;
  z-index: 0;
}

/* Media + text grouping inside the inner — they share a 48px gap per Figma,
   while the parent inner uses 64px to space the heading from this group. */
.brand-promise__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xl);  /* 48px */
  width: 100%;
}
.brand-promise__header { text-align: center; }
.brand-promise__header .h2 { color: #FFFFFF; }
.brand-promise__subhead {
  margin-top: 14.99px;
  font-size: var(--fs-body-lg);
}
.brand-promise__video {
  position: relative;
  width: 711px;
  height: 400px;
  max-width: 100%;
  border-radius: var(--radius-md);
  border: 1.2px solid var(--c-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
@media (max-width: 768px) {
  .brand-promise__video {
    width: 100%;
    aspect-ratio: 711 / 400;
    height: auto;
  }
  /* Dividers at ±200px from each edge collide on narrow screens */
  .brand-promise::before,
  .brand-promise::after { display: none; }
  .brand-promise__hbars { display: none; }
  .brand-promise__inner { padding: 0 var(--sp-sm); }
}
.brand-promise__video-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.brand-promise__video-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  background: var(--c-bg);
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.brand-promise__video:hover .brand-promise__video-btn {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: var(--shadow-lift);
}
.brand-promise__body {
  text-align: center;
  font-size: var(--fs-body-lg);
  display: flex; flex-direction: column; gap: var(--sp-xs);
}

/* ---------- ROLES ---------- */
.roles {
  padding: var(--sp-4xl) var(--section-px);
}
/* Spec §4: 80px gap below header to card grid (overrides default 64px) */
.roles .section__header { margin-bottom: var(--sp-3xl); }
.roles__cta {
  margin-top: var(--sp-3xl);
  text-align: center;
}

/* ---------- TRUST ---------- */
.trust {
  padding: 41px var(--section-px) var(--sp-3xl);
  border-top: 1px solid var(--c-border);
  text-align: left;
  display: flex;
  flex-direction: column;
  /* 40px below the "Trusted by" label, then a much tighter 16px
     between the two marquee strips themselves. */
  gap: var(--sp-xl);
}
.trust__marquee + .trust__marquee { margin-top: calc(-1 * var(--sp-xl) + var(--sp-sm)); }
/* Flex children of .trust need full-width — without this the global
   `margin-inline: auto` rule lets them shrink to content and center. */
.trust > * { width: 100%; }
.trust__label {
  font-size: var(--fs-body);     /* 14px */
  font-weight: var(--fw-regular);
  color: var(--c-text-muted);    /* #697077 */
  margin: 0;
}

/* Center the trust label on tablet/mobile */
@media (max-width: 1024px) {
  .trust { text-align: center; }
}

/* ---------- PROCESS ---------- */
.process {
  padding: var(--sp-3xl) var(--section-px);
}
.timeline {
  position: relative;
  background: var(--c-glass-fill-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 49px 41px;
}
.timeline__step {
  position: relative;
  display: flex;
  gap: var(--sp-md);
  padding-bottom: var(--sp-lg);
}
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step > div:last-child { padding-top: 10px; }
.timeline__step .card__title { margin-bottom: var(--sp-xs); }
/* Icon must paint above the connector line */
.timeline__step .card__icon { position: relative; z-index: 1; }

/* Connector line: each step (except the last) draws a vertical line
   from the bottom of its icon down to the next step. Width 2px,
   centered on the 48px icon column. The line is animated to draw
   downward when the step enters the viewport. */
.timeline__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 23px;          /* icon center 24px - line half-width 1px */
  top: 48px;           /* directly below the 48px icon */
  bottom: 0;
  width: 2px;
  background: var(--grad-brand-vert);
  opacity: 0.5;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 600ms var(--ease-out);
  z-index: 0;
}
.timeline__step.is-visible:not(:last-child)::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .timeline__step:not(:last-child)::before {
    transform: scaleY(1);
    transition: none;
  }
}

.testimonial {
  background: var(--c-glass-fill-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 49px 41px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-sm); /* 16px — matches spec rhythm around the divider */
}
.testimonial__author { margin-top: var(--sp-xs); }
.testimonial__avatar {
  width: 200px; height: 200px;
  background: var(--c-glass-fill-faint);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
}
.testimonial__name {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-text-primary);
}
.testimonial__title {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
}
.testimonial__divider {
  width: 100%;
  height: 1px;
  background: var(--c-border);
  border: 0;
  margin: 0; /* gap on .testimonial provides the surrounding 16px */
}
.testimonial__quote {
  text-align: left;
  font-size: var(--fs-body);
  color: var(--c-text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

/* ---------- CTA banner ---------- */
.cta-banner {
  padding: 0 var(--section-px) var(--sp-4xl);
}
.cta-banner__card {
  position: relative;
  height: 360px;
  border-radius: var(--radius-lg);
  background: var(--c-deep-navy);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.cta-banner__bg {
  position: absolute;
  right: 0; top: 0;
  width: 58%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}
.cta-banner__content {
  position: relative;
  width: 605px;
  height: 100%;
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* keep button width to its content, not stretched */
}
.cta-banner__content .h2 { color: #FFFFFF; }
.cta-banner__body {
  margin-top: var(--sp-sm); /* 16px H2 → body per spec §7 */
  font-size: var(--fs-body);
  color: var(--c-text-light-body);
}
.cta-banner__content .btn { margin-top: 13.1px; flex-shrink: 0; }

@media (max-width: 900px) {
  .cta-banner__card {
    height: auto;
    min-height: 0;
  }
  .cta-banner__content {
    width: 100%;
    /* Bottom padding leaves a clean photo strip below the button */
    padding: var(--sp-3xl) var(--sp-md) 220px;
    position: relative;
    z-index: 2;
  }
  .cta-banner__bg {
    width: 100%;
    height: 280px;
    top: auto;
    bottom: 0;
    /* Smooth fade from solid navy (above) into the photo below.
       Three stops give a longer, softer transition than a single
       transparent → opaque step. */
    -webkit-mask-image: linear-gradient(180deg,
      rgba(0,0,0,0)   0%,
      rgba(0,0,0,0.3) 25%,
      rgba(0,0,0,0.7) 50%,
      rgba(0,0,0,1)   75%);
            mask-image: linear-gradient(180deg,
      rgba(0,0,0,0)   0%,
      rgba(0,0,0,0.3) 25%,
      rgba(0,0,0,0.7) 50%,
      rgba(0,0,0,1)   75%);
    z-index: 1;
  }
  /* Extra navy scrim overlay so the button area sitting just above
     the photo gets a guaranteed readable backdrop even on portrait
     phones where the content stack is tall. */
  .cta-banner__card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 280px;
    height: 80px;
    background: linear-gradient(180deg, transparent 0%, var(--c-deep-navy) 100%);
    z-index: 1;
    pointer-events: none;
  }
}