/* ==========================================================================
   EXFARO — Guiding Global Logistics
   Pure CSS, no frameworks. GSAP drives transforms only (compositor-friendly).
   ========================================================================== */

:root {
  --bg: #050505;
  --graphite: #1a1a1c;
  --text: #e8ebf0;
  --text-soft: #9aa1ab;
  --text-faint: #5c6168;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --beam-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.98'/%3E%3Cstop offset='.45' stop-color='%23fff' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.4'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b)'%3E%3Cpolygon points='100,216 6,6 194,6' fill='url(%23g)'/%3E%3Cpolygon points='100,216 60,6 140,6' fill='url(%23g)' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  --beam-air: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23dce6f2' stop-opacity='.5'/%3E%3Cstop offset='.5' stop-color='%23dce6f2' stop-opacity='.14'/%3E%3Cstop offset='1' stop-color='%23dce6f2' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon points='100,216 6,6 194,6' fill='url(%23a)' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

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

html { color-scheme: dark; }
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul { margin: 0; }

::selection { background: #26303d; color: #f2f5f9; }

:focus-visible { outline: 1px solid #9fb4cc; outline-offset: 3px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  touch-action: pan-y;
}

/* Layer A — atmosphere */
.fog {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: .04;
  background: radial-gradient(40% 35% at 30% 60%, #8fa6c0 0%, transparent 70%);
  will-change: transform;
  animation: fog-a 46s ease-in-out infinite alternate;
}
.fog--b {
  opacity: .03;
  background: radial-gradient(45% 40% at 70% 40%, #6f7f92 0%, transparent 70%);
  animation: fog-b 58s ease-in-out infinite alternate;
}
@keyframes fog-a { from { transform: translate3d(-3%, 1%, 0); } to { transform: translate3d(3%, -2%, 0); } }
@keyframes fog-b { from { transform: translate3d(2%, -1%, 0); } to { transform: translate3d(-3%, 2%, 0); } }

/* Ambient cone — soft volumetric glow always visible from the lighthouse anchor. */
.beam-ambient {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  background-image: var(--beam-air);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: blur(22px);
  will-change: transform;
}

/* Layer B — the hidden world */
.world { position: absolute; inset: 0; pointer-events: none; }
.world--dim { opacity: .055; z-index: 2; }
.world--lit { will-change: transform; }

.world-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.map { width: min(88vw, 1280px); height: auto; color: #c6d0dd; }
.world--lit .map { color: #cdd9e7; }

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + .07em), -50%);
  font-size: clamp(3.4rem, 13vw, 11.5rem);
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
  line-height: 1;
}
.world--dim .logo { color: #fff; }
.world--lit .logo {
  color: #f0f4f9;
  text-shadow: 0 0 30px rgba(208, 224, 244, .22), 0 0 110px rgba(170, 195, 225, .12);
}

/* Layer C — the volumetric beam */
.beam-rotor {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  visibility: hidden;
}

.beam-glow {
  position: absolute;
  background-image: var(--beam-air);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: .08;
  filter: blur(12px);
}

.beam-clip {
  position: absolute;
  -webkit-mask-image: var(--beam-mask);
          mask-image: var(--beam-mask);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.beam-source {
  position: absolute;
  left: -90px;
  top: -46px;
  width: 180px;
  height: 80px;
  background: radial-gradient(50% 55% at 50% 62%, rgba(226, 236, 248, .3) 0%, rgba(226, 236, 248, 0) 70%);
}

/* The lighthouse */
.beacon {
  position: absolute;
  left: 50%;
  top: 92%;
  transform: translate(-50%, -9px);
  z-index: 4;
  pointer-events: none;
}
.beacon svg { display: block; }
.beacon-light { animation: beacon-pulse 2.6s ease-in-out infinite; }
@keyframes beacon-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* Tagline */
.tagline {
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(58px, 10vw, 132px));
  transform: translateX(calc(-50% + .16em));
  z-index: 5;
  width: max-content;
  max-width: 92vw;
  text-align: center;
  font-size: clamp(.66rem, 1.3vw, .92rem);
  letter-spacing: .32em;
  line-height: 2;
  text-transform: uppercase;
  color: #b9c2cf;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: keep-all;
}

/* Hero lead paragraph */
.hero-lead {
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(108px, 17vw, 200px));
  transform: translateX(-50%);
  z-index: 5;
  width: min(580px, 88vw);
  text-align: center;
  font-size: clamp(.84rem, 1.1vw, .95rem);
  line-height: 1.75;
  color: #8f97a3;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Scroll hint */
.scroll-hint {
  position: absolute;
  left: 28px;
  bottom: 26px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #8a919c;
  text-decoration: none;
}
.scroll-line {
  display: block;
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, #4a505a, transparent);
  transform-origin: left center;
  animation: hint-pulse 2.8s ease-in-out infinite;
}
@keyframes hint-pulse { 0%, 100% { transform: scaleX(.55); opacity: .5; } 50% { transform: scaleX(1); opacity: 1; } }

/* Intro: these elements start hidden only when JS is available */
.js .beacon,
.js .tagline,
.js .hero-lead,
.js .scroll-hint,
.js .hud,
.js .beam-ambient { opacity: 0; visibility: hidden; }
.js .tagline    { transform: translateX(calc(-50% + .16em)) translateY(14px); }
.js .hero-lead  { transform: translateX(-50%) translateY(14px); }

/* ---------- HUD navigation ---------- */

.hud { position: fixed; right: 28px; bottom: 22px; z-index: 50; }

.menu-toggle { display: none; }

.hud-links {
  list-style: none;
  display: flex;
  gap: 28px;
  padding: 0;
}

.hud-links a {
  display: inline-block;
  padding: 6px 2px;
  color: #dfe5ec;
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .55;
}
.hud-links a:hover,
.hud-links a:focus-visible { opacity: 1 !important; }

/* ---------- Content sections ---------- */

.section {
  position: relative;
  overflow: hidden;
  padding: clamp(110px, 16vh, 180px) clamp(22px, 6vw, 64px);
  border-top: 1px solid #101013;
}

.section-inner { max-width: 1100px; margin: 0 auto; }

/* Scroll-sweep */
.sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  background: linear-gradient(80deg,
    rgba(210, 224, 240, 0) 8%,
    rgba(210, 224, 240, .05) 42%,
    rgba(210, 224, 240, .09) 50%,
    rgba(210, 224, 240, .05) 58%,
    rgba(210, 224, 240, 0) 92%);
}

.kicker {
  font-size: .72rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: #7e8794;
  margin-bottom: 22px;
}

.section h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.15;
  color: #eef1f5;
  max-width: 18em;
  hyphens: none;
  -webkit-hyphens: none;
}

.section-lead {
  margin-top: 18px;
  max-width: 560px;
  color: var(--text-soft);
}

.section-lead--center {
  margin-inline: auto;
  hyphens: none;
  -webkit-hyphens: none;
}

.js [data-reveal] { opacity: 0; visibility: hidden; transform: translateY(26px); }

/* Services */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 56px;
}
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
}

.card {
  border: 1px solid #17181b;
  border-radius: 16px;
  padding: 30px 26px;
  background: linear-gradient(180deg, #09090b 0%, #060607 100%);
  transition: border-color .35s ease, transform .35s ease;
}
.card:hover { border-color: #262a30; transform: translateY(-3px); }

.card-index {
  display: block;
  font-size: .68rem;
  letter-spacing: .3em;
  color: var(--text-faint);
  margin-bottom: 18px;
}
.card h3 {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #e6eaef;
  margin-bottom: 12px;
  hyphens: none;
  -webkit-hyphens: none;
}
.card p { font-size: .92rem; color: #959ca6; }

/* Global Trade Operations */
.projects-list { margin-top: 48px; border-top: 1px solid #141519; }

.project {
  display: grid;
  grid-template-columns: 1fr 2.5fr 1fr;
  gap: 28px 36px;
  padding: 38px 0;
  border-bottom: 1px solid #141519;
  align-items: start;
}
.project h3 {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.4;
  color: #e8ecf1;
  hyphens: none;
  -webkit-hyphens: none;
}
.project > p:not(.stat) {
  color: #959ca6;
  font-size: .91rem;
  line-height: 1.72;
  max-width: 52ch;
}

.stat { text-align: right; padding-top: 2px; }
.stat strong {
  display: block;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: .015em;
  color: #edf1f6;
  line-height: 1.15;
  white-space: nowrap;
}
.stat span {
  display: block;
  margin-top: 4px;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6b7280;
  overflow-wrap: break-word;
}

/* Contact */
.section--contact .section-inner { text-align: center; }
.section--contact h2 { margin-inline: auto; }

.contact-mail {
  display: inline-block;
  margin-top: 34px;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: .03em;
  color: #eef2f7;
  text-decoration: none;
  border-bottom: 1px solid #2c3036;
  padding-bottom: 6px;
  transition: border-color .3s ease;
}
.contact-mail:hover { border-color: #9fb0c4; }

.contact-details {
  margin-top: 40px;
  font-style: normal;
  color: #8f97a3;
  font-size: .92rem;
  line-height: 2;
  hyphens: none;
  -webkit-hyphens: none;
}
.contact-details p { letter-spacing: .04em; }

.contact-phone {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.contact-phone:hover { color: #c8d2de; transition: color .25s ease; }

/* Footer */
.footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 36px clamp(22px, 6vw, 64px);
  border-top: 1px solid #101013;
  color: #565c64;
  font-size: .78rem;
  letter-spacing: .04em;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .map { width: 150vw; }

  .menu-toggle {
    display: block;
    background: rgba(5, 5, 5, .7);
    border: 1px solid #23262b;
    border-radius: 999px;
    color: #cfd5dd;
    padding: 9px 18px;
    font-family: var(--font);
    font-size: .72rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hud-links {
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    background: rgba(5, 5, 5, .96);
  }
  body.menu-open .hud-links { display: flex; }
  .hud-links a { font-size: 1rem; opacity: .9; }

  .project { grid-template-columns: 1fr; gap: 10px; }
  .stat { text-align: left; margin-top: 6px; }

  /* ─── Hero vertical layout — three zones ────────────────────────────────
     ① EXFARO   top: 50% base, lifted by -28vh so center lands between
                 screen top and map top.
     ② Map       stays at CSS 50% center — untouched.
     ③ Tagline   68%: below map bottom; Lead: 68% + ~76px.
     Beacon at 92% is always on-screen because everything uses % of heroH. */
  .logo {
    top: 50%;
    transform: translate(calc(-50% + .07em), calc(-50% - 28vh));
  }
  .tagline {
    top: 68%;
    letter-spacing: 0.16em;
  }
  .hero-lead {
    top: calc(68% + 76px);
    line-height: 1.6;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .fog, .beacon-light, .scroll-line { animation: none; }
  .card, .contact-mail { transition: none; }
  .js [data-reveal],
  .js .beacon, .js .tagline, .js .hero-lead, .js .scroll-hint, .js .hud,
  .js .beam-ambient {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .js .beam-ambient { opacity: 0.08; }
  .js .tagline    { transform: translateX(calc(-50% + .16em)); }
  .js .hero-lead  { transform: translateX(-50%); }
}