/* ============================================================
   FOKES GLOBAL SERVICES — Landing Page Styles
   File: assets/css/home.css   (loads after main.css)
   ============================================================ */

/* ── HERO ───────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 150px 0 90px;
  background:
    radial-gradient(1000px 520px at 12% -5%, rgba(26, 92, 173, 0.13), transparent 62%),
    radial-gradient(800px 480px at 100% 30%, rgba(201, 168, 76, 0.09), transparent 55%),
    linear-gradient(180deg, #fdfeff 0%, var(--ice) 100%);
  overflow: hidden;
}
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(26, 92, 173, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 92, 173, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(900px 600px at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(900px 600px at 50% 30%, black 30%, transparent 75%);
}
.hero-inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 48px; align-items: center;
  position: relative; z-index: 2;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 100px; padding: 8px 18px;
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mid);
  box-shadow: var(--shadow-sm); margin-bottom: 26px;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 60% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }

.hero h1 { margin-bottom: 24px; }
.hero .lede { margin-bottom: 38px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; }
.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; padding-top: 34px; border-top: 1px solid var(--line); }

/* ── HERO ORBIT (signature element) ─────────────────────── */
.orbit-stage { position: relative; height: 560px; }
.orbit-core {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 190px; height: 190px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, var(--blue-lt), var(--navy) 70%);
  box-shadow:
    0 30px 70px rgba(11, 31, 58, 0.35),
    inset -14px -18px 40px rgba(0, 0, 0, 0.35),
    inset 10px 12px 30px rgba(255, 255, 255, 0.18);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center; z-index: 5;
}
.orbit-core .core-num { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; }
.orbit-core .core-lbl { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; margin-top: 5px; }
.orbit-ring {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px dashed rgba(26, 92, 173, 0.25);
  border-radius: 50%;
}
.orbit-ring.r1 { width: 340px; height: 340px; animation: spin 40s linear infinite; }
.orbit-ring.r2 { width: 500px; height: 500px; animation: spin 70s linear infinite reverse; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.orbit-ring .node {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 5px rgba(201, 168, 76, 0.18);
}
.orbit-ring.r1 .node { top: -6px; left: calc(50% - 6px); }
.orbit-ring.r2 .node { bottom: 30px; right: 50px; background: var(--blue-lt); box-shadow: 0 0 0 5px rgba(26, 92, 173, 0.15); }

.orbit-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 15px 19px;
  display: flex; align-items: center; gap: 13px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: float 7s ease-in-out infinite;
  z-index: 6;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.orbit-card:hover { transform: scale(1.06) !important; box-shadow: var(--shadow-lg); z-index: 9; }
.orbit-card .oc-icon {
  width: 40px; height: 40px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.95rem; flex-shrink: 0;
}
.orbit-card h5 { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: var(--navy); line-height: 1.2; }
.orbit-card span { font-size: 0.66rem; color: var(--text-soft); }
.oc-1 { top: 5%;  left: 4%;  animation-delay: 0s; }
.oc-2 { top: 16%; right: -2%; animation-delay: 1.6s; }
.oc-3 { bottom: 17%; left: -2%; animation-delay: 0.9s; }
.oc-4 { bottom: 4%; right: 5%; animation-delay: 2.3s; }
.oc-1 .oc-icon { background: linear-gradient(135deg, #1a5cad, #2e7be0); }
.oc-2 .oc-icon { background: linear-gradient(135deg, #0e9f6e, #31c48d); }
.oc-3 .oc-icon { background: linear-gradient(135deg, #c9a84c, #e0c26e); }
.oc-4 .oc-icon { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.orbit-pill {
  position: absolute; z-index: 6;
  font-size: 0.66rem; font-weight: 700;
  background: var(--navy); color: #fff;
  border-radius: 100px; padding: 7px 14px;
  box-shadow: 0 10px 24px rgba(11, 31, 58, 0.3);
  animation: float 8s ease-in-out infinite;
}
.op-1 { top: 42%; left: -4%; animation-delay: 1.2s; }
.op-2 { top: 55%; right: -3%; background: var(--gold); color: var(--navy-deep); animation-delay: 2.8s; }

/* ── PROBLEM / SOLUTION ─────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.pain-list { display: flex; flex-direction: column; gap: 13px; margin-top: 30px; }
.pain {
  display: flex; gap: 15px; align-items: flex-start;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px; padding: 17px 20px;
  transition: all 0.3s var(--ease);
}
.pain:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(6px); }
.pain-icon {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: rgba(224, 82, 82, 0.16); color: #f87171;
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.pain h4 { font-size: 0.9rem; font-weight: 600; color: #fff; }
.pain p { font-size: 0.78rem; color: rgba(255, 255, 255, 0.45); }

.solution-panel {
  position: relative;
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue-lt) 100%);
  border-radius: var(--r-xl);
  padding: 46px 42px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(26, 92, 173, 0.35);
}
.solution-panel::before {
  content: '';
  position: absolute; top: -70px; right: -70px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
}
.solution-panel h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1.15; margin-bottom: 16px; position: relative; }
.solution-panel > p { font-size: 0.92rem; color: rgba(255, 255, 255, 0.82); margin-bottom: 26px; position: relative; }
.sol-list { display: flex; flex-direction: column; gap: 12px; position: relative; }
.sol-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9rem; }
.sol-list i { color: rgba(255, 255, 255, 0.85); margin-top: 4px; font-size: 0.82rem; }

/* ── SERVICES ───────────────────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc-card { position: relative; overflow: hidden; }
.svc-card::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.svc-card:hover::after { transform: scaleX(1); }
.svc-card .outcome { margin-top: 16px; }

/* ── HOW IT WORKS ───────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.step {
  position: relative;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 34px 26px 30px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.step:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 800;
  font-size: 2.6rem; line-height: 1;
  background: linear-gradient(120deg, var(--blue), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block; margin-bottom: 18px;
}
.step h3 { font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; color: var(--navy); margin-bottom: 9px; }
.step p { font-size: 0.83rem; color: var(--text-mid); }

/* ── PACKAGES ───────────────────────────────────────────── */
.pkg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.pkg {
  display: flex; flex-direction: column; gap: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg); padding: 32px 26px;
  transition: all 0.4s var(--ease);
  position: relative;
}
.pkg:hover { transform: translateY(-8px); background: rgba(255, 255, 255, 0.08); }
.pkg.featured {
  background: linear-gradient(160deg, var(--blue), var(--blue-lt));
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 30px 70px rgba(26, 92, 173, 0.4);
}
.pkg-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--navy-deep);
  font-family: var(--font-display); font-size: 0.58rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 15px; border-radius: 100px; white-space: nowrap;
}
.pkg-name { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: #fff; }
.pkg-desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); }
.pkg.featured .pkg-desc { color: rgba(255, 255, 255, 0.75); }
.pkg ul { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pkg li { display: flex; gap: 10px; font-size: 0.84rem; color: rgba(255, 255, 255, 0.7); }
.pkg.featured li { color: rgba(255, 255, 255, 0.92); }
.pkg li i { color: var(--gold); margin-top: 4px; font-size: 0.72rem; }
.pkg.featured li i { color: #fff; }
.pkg .btn { justify-content: center; }

/* ── EVENTS ─────────────────────────────────────────────── */
.events-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 320px; gap: 20px; overflow-x: auto; padding: 6px 6px 22px; scroll-snap-type: x mandatory; }
.events-scroller::-webkit-scrollbar { height: 8px; }
.events-scroller::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.event-card { scroll-snap-align: start; display: flex; flex-direction: column; }
.event-type {
  align-self: flex-start;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; margin-bottom: 16px;
}
.event-type.training { background: rgba(201, 168, 76, 0.16); color: #9a7a2a; }
.event-type.seminar  { background: rgba(109, 40, 217, 0.12); color: #6d28d9; }
.event-type.webinar  { background: rgba(14, 159, 110, 0.12); color: #0e9f6e; }
.event-date { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; color: var(--blue); text-transform: uppercase; margin-bottom: 8px; }
.event-card h3 { min-height: 2.6em; }
.event-loc { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--text-soft); margin-top: auto; padding-top: 16px; }

/* ── CTA BAND ───────────────────────────────────────────── */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--navy);
  border-radius: var(--r-xl);
  padding: 84px 8%;
  text-align: center;
}
.cta-band::before, .cta-band::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(70px); pointer-events: none;
}
.cta-band::before { width: 420px; height: 420px; background: rgba(26, 92, 173, 0.5); top: -180px; left: -120px; }
.cta-band::after  { width: 360px; height: 360px; background: rgba(201, 168, 76, 0.22); bottom: -160px; right: -100px; }
.cta-band h2 { position: relative; margin-bottom: 16px; }
.cta-band .lede { position: relative; margin: 0 auto 36px; }
.cta-band .hero-actions { position: relative; justify-content: center; margin: 0; }

/* ── CONTACT ────────────────────────────────────────────── */
.contact-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 44px;
  box-shadow: var(--shadow-lg);
}
.contact-info { display: flex; flex-direction: column; gap: 16px; margin-top: 34px; }
.ci {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line);
  border-radius: 18px; padding: 19px 21px;
  transition: all 0.3s var(--ease);
}
.ci:hover { transform: translateX(6px); border-color: rgba(26, 92, 173, 0.3); box-shadow: var(--shadow-sm); }
.ci-icon {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ci h5 { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 3px; }
.ci p, .ci a { font-size: 0.92rem; font-weight: 600; color: var(--navy); }
.ci a:hover { color: var(--blue); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .orbit-stage { height: 480px; max-width: 560px; margin: 0 auto; }
  .svc-grid, .steps, .pkg-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 640px) {
  .svc-grid, .steps, .pkg-grid { grid-template-columns: 1fr; }
  .orbit-stage { height: 420px; }
  .orbit-ring.r2 { width: 400px; height: 400px; }
  .hero { padding-top: 120px; }
  .cta-band { padding: 64px 7%; border-radius: var(--r-lg); }
  .contact-card { padding: 30px 22px; }
}

/* ── ROTATING EARTH (preloader + hero orbit core) ────────── */
.earth {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 32% 28%, #2e7be0, #0b1f3a 78%);
  box-shadow:
    0 30px 70px rgba(11, 31, 58, 0.35),
    inset -16px -18px 42px rgba(0, 0, 0, 0.45),
    inset 10px 12px 30px rgba(255, 255, 255, 0.16);
}
/* scrolling continent texture: two copies side by side, shift one copy = seamless loop */
.earth::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 200%; height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 360'%3E%3Cg fill='%23ffffff' fill-opacity='0.26'%3E%3Cpath d='M95 78c22-14 58-20 78-10s14 30 34 34 44-6 54 12-8 34-28 40-24 26-44 30-46-4-62-20-36-24-44-44 -10-28 12-42z'/%3E%3Cpath d='M188 196c16-6 36 2 42 18s22 20 20 40-14 38-30 46-34 2-44-14-16-38-12-56 8-28 24-34z'/%3E%3Cpath d='M356 70c26-16 62-22 92-14s52 6 74 20 30 36 18 56-38 18-52 36-16 40-40 44-48-10-60-30-22-30-36-46-16-50 4-66z'/%3E%3Cpath d='M420 250c14-10 34-6 44 8s26 14 24 32-16 26-32 28-32-6-38-22-10-36 2-46z'/%3E%3Cpath d='M560 268c12-8 30-4 36 8s2 26-10 32-28 2-34-10 -2-24 8-30z'/%3E%3Cpath d='M296 148c10-6 24-2 28 8s-2 22-14 24-24-4-24-16 2-12 10-16z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 50% 100%;
  animation: earthSpin 20s linear infinite;
  opacity: 0.9;
}
@keyframes earthSpin { to { transform: translateX(-50%); } }
/* day/night shading + polar sheen on top of the moving map */
.earth::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.28), transparent 46%),
    radial-gradient(circle at 78% 80%, rgba(4, 12, 26, 0.55), transparent 55%);
  pointer-events: none;
}

/* Hero core becomes the earth: keep the label readable above the map */
.orbit-core.earth { background: radial-gradient(circle at 32% 28%, #2e7be0, #0b1f3a 78%); }
.orbit-core.earth .core-num,
.orbit-core.earth .core-lbl {
  position: relative; z-index: 3;
  text-shadow: 0 2px 12px rgba(4, 12, 26, 0.75);
}

/* ── FGS PRELOADER (earth flies into the hero on load) ───── */
#fgsPreloader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
}
#fgsPreloader .pre-bg {
  position: absolute; inset: 0;
  background: radial-gradient(900px 500px at 50% 40%, #12335f, #0b1f3a 70%);
  transition: opacity 0.7s ease;
}
#fgsPreloader .pre-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
#fgsPreloader .earth { width: 150px; height: 150px; will-change: transform; }
#fgsPreloader .pre-text {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.5rem; letter-spacing: 0.42em;
  padding-left: 0.42em; /* optically center the tracked text */
  color: #fff;
  transition: opacity 0.4s ease;
  animation: fgsGlow 1.8s ease-in-out infinite;
}
@keyframes fgsGlow { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
#fgsPreloader.flying .pre-bg { opacity: 0; }
#fgsPreloader.flying .pre-text { opacity: 0; }
#fgsPreloader.flying { pointer-events: none; }
#fgsPreloader .earth.fly {
  transition: transform 0.95s cubic-bezier(0.65, 0.05, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .earth::before { animation: none; }
  #fgsPreloader .pre-text { animation: none; }
}

/* ── EARTH v2: realistic continents, clouds, atmosphere ───── */
.earth {
  background: radial-gradient(circle at 30% 26%,
    #3d8ee8 0%, #1a5cad 38%, #0a2a55 72%, #05152e 100%);
  box-shadow:
    0 0 46px rgba(46, 123, 224, 0.45),
    0 0 100px rgba(46, 123, 224, 0.22),
    0 30px 70px rgba(11, 31, 58, 0.35),
    inset -18px -20px 46px rgba(0, 0, 0, 0.5),
    inset 10px 12px 30px rgba(255, 255, 255, 0.14);
}
/* real-silhouette world map (equirectangular, tiles seamlessly) */
.earth::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 360'%3E%3Cg fill='%23cfe4ff' fill-opacity='0.34'%3E%3Cpath d='M28 52 C60 30 130 28 180 44 C230 40 250 66 236 86 C246 96 224 110 210 124 C206 136 196 142 186 142 C170 152 160 160 196 166 C186 172 176 168 168 158 C150 146 130 140 116 120 C90 112 60 96 44 76 C30 68 22 60 28 52 Z'/%3E%3Cpath d='M272 44 C280 24 306 20 316 34 C320 48 306 60 292 62 C280 60 270 54 272 44 Z'/%3E%3Cpath d='M206 164 C230 156 262 168 278 186 C290 206 282 232 268 252 C258 276 246 292 234 296 C226 286 224 262 226 240 C218 214 204 190 206 164 Z'/%3E%3Cpath d='M346 96 C338 78 352 58 372 52 C392 44 420 44 436 54 C448 62 444 76 430 80 C420 90 404 92 392 96 C376 104 356 106 346 96 Z'/%3E%3Cpath d='M352 112 C376 102 412 104 434 116 C452 124 458 142 452 160 C444 182 430 204 418 224 C410 242 398 252 388 248 C378 236 372 214 366 192 C356 168 344 140 352 112 Z'/%3E%3Cpath d='M446 224 C452 218 460 222 458 232 C456 240 448 242 444 236 Z'/%3E%3Cpath d='M446 64 C470 38 530 28 580 36 C630 30 676 44 700 64 C716 76 714 92 698 100 C684 114 664 118 648 126 C636 140 622 146 610 142 C596 152 580 150 572 138 C556 146 540 142 532 128 C512 124 494 116 484 102 C468 94 452 82 446 64 Z'/%3E%3Cpath d='M492 128 C504 120 520 124 526 136 C530 152 522 170 510 178 C500 170 492 150 492 128 Z'/%3E%3Cpath d='M572 186 c8 -4 16 0 14 8 c-2 8 -12 10 -16 4 c-2 -6 -2 -10 2 -12 z'/%3E%3Cpath d='M604 196 c10 -4 18 2 14 10 c-4 8 -16 8 -18 0 c-2 -6 0 -8 4 -10 z'/%3E%3Cpath d='M636 190 c8 -2 12 4 10 10 c-4 6 -12 4 -14 -2 c0 -4 0 -6 4 -8 z'/%3E%3Cpath d='M596 214 C612 204 644 206 656 218 C664 230 658 244 642 248 C624 252 604 246 596 234 C592 226 590 220 596 214 Z'/%3E%3Cpath d='M676 252 c6 -2 10 4 6 10 c-4 6 -10 2 -10 -4 c0 -4 2 -6 4 -6 z'/%3E%3Cpath d='M0 334 C30 334 60 330 120 334 C200 328 280 338 360 332 C440 328 520 338 600 332 C650 336 690 334 720 334 L720 360 L0 360 Z'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 1;
}
/* drifting cloud layer — slower than the land, adds depth */
.earth-clouds {
  position: absolute; top: 0; left: 0;
  width: 200%; height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 360'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='110' cy='84' rx='74' ry='15'/%3E%3Cellipse cx='150' cy='96' rx='48' ry='11'/%3E%3Cellipse cx='300' cy='190' rx='88' ry='14'/%3E%3Cellipse cx='260' cy='176' rx='42' ry='10'/%3E%3Cellipse cx='470' cy='90' rx='80' ry='13'/%3E%3Cellipse cx='520' cy='104' rx='44' ry='9'/%3E%3Cellipse cx='600' cy='260' rx='70' ry='12'/%3E%3Cellipse cx='380' cy='300' rx='60' ry='10'/%3E%3Cellipse cx='0' cy='150' rx='52' ry='11'/%3E%3Cellipse cx='720' cy='150' rx='52' ry='11'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 50% 100%;
  opacity: 0.16;
  filter: blur(0.6px);
  animation: earthSpin 38s linear infinite;
  pointer-events: none;
}
/* terminator + specular + rim atmosphere */
.earth::after {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.32), transparent 42%),
    radial-gradient(circle at 80% 82%, rgba(3, 10, 24, 0.65), transparent 58%),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(90, 160, 240, 0.25) 96%);
}

/* ── Letter-by-letter fade-up ─────────────────────────────── */
.word { display: inline-block; white-space: nowrap; }
.ltr {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.ltr.in { opacity: 1; transform: none; }
/* letters inside the hero's italic <em> keep the gradient treatment */
.h-display em .ltr {
  background: linear-gradient(120deg, var(--blue), var(--blue-lt) 60%, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* preloader wordmark: pulse only after the letters land */
#fgsPreloader .pre-text { animation: none; letter-spacing: 0.42em; }
#fgsPreloader .pre-text.pulse { animation: fgsGlow 1.8s ease-in-out infinite; }
.fly-wrap { will-change: transform; }

/* ── HERO STATS: one straight row, calmer sizing ──────────── */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: end;
}
.stat-val { font-size: clamp(1.5rem, 2.6vw, 2.4rem); white-space: nowrap; }
.stat-label { font-size: 0.74rem; margin-top: 4px; }

/* ── MOBILE: smaller orbit texts + tighter stats ──────────── */
@media (max-width: 640px) {
  .hero-stats { gap: 12px; padding-top: 24px; }
  .stat-val   { font-size: 1.3rem; }
  .stat-label { font-size: 0.6rem; line-height: 1.4; }

  .orbit-card { padding: 10px 12px; gap: 9px; border-radius: 14px; }
  .orbit-card .oc-icon { width: 30px; height: 30px; border-radius: 10px; font-size: 0.75rem; }
  .orbit-card h5   { font-size: 0.64rem; }
  .orbit-card span { font-size: 0.56rem; }
  .orbit-pill { font-size: 0.56rem; padding: 5px 10px; }

  .orbit-core { width: 150px; height: 150px; }
  .orbit-core .core-num { font-size: 1.5rem; }
  .orbit-core .core-lbl { font-size: 0.52rem; }
}

/* ── STATS v2: values locked on one line, smaller ─────────── */
.hero-stats { align-items: start; gap: 16px; }
.stat-val   { font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.1; }
.stat-label { font-size: 0.68rem; }

/* ── MOBILE v2: orbit decluttered, stats compact ──────────── */
@media (max-width: 640px) {
  .stat-val   { font-size: 1.15rem; }
  .stat-label { font-size: 0.56rem; }

  .orbit-stage { height: 350px; }
  .orbit-ring.r1 { width: 230px; height: 230px; }
  .orbit-ring.r2 { width: 320px; height: 320px; }
  .orbit-core { width: 124px; height: 124px; }
  .orbit-core .core-num { font-size: 1.3rem; }
  .orbit-core .core-lbl { font-size: 0.48rem; }
  .orbit-card { padding: 6px 9px; gap: 6px; border-radius: 11px; box-shadow: var(--shadow-sm); }
  .orbit-card .oc-icon { width: 22px; height: 22px; border-radius: 7px; font-size: 0.58rem; }
  .orbit-card h5 { font-size: 0.55rem; }
  .orbit-card span { display: none; }   /* secondary lines removed on small screens */
  .orbit-pill { display: none; }        /* pills removed — they caused the overlap */
  .oc-1 { top: 3%;  left: 0; }
  .oc-2 { top: 12%; right: 0; }
  .oc-3 { bottom: 14%; left: 0; }
  .oc-4 { bottom: 3%;  right: 2%; }
}

/* ── HOW IT WORKS: pinned scroll scene ────────────────────── */
.hiw-scroll { position: relative; height: 280vh; background: #fff; }
.hiw-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hiw-text {
  position: relative; z-index: 1;           /* text sits BEHIND the objects */
  width: 100%;
  will-change: transform;
}
.hiw-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hiw-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hiw-lines .hl {
  stroke: #2e7be0; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-dasharray: 2 2.4;
  opacity: 0; vector-effect: non-scaling-stroke;
}
.hiw-phone, .hiw-profile, .hiw-worker {
  position: absolute; left: 50%; top: 50%;
  will-change: transform, opacity;
  filter: drop-shadow(0 18px 30px rgba(11, 31, 58, 0.18));
}
.hiw-phone   { width: 170px; margin: -80px 0 0 -85px; transform: translateY(-120vh); }
.hiw-profile { width: 140px; margin: -76px 0 0 -70px; opacity: 0; }
.hiw-worker  { width: 128px; margin: -62px 0 0 -64px; opacity: 0; }

@media (max-width: 640px) {
  .hiw-phone   { width: 118px; margin: -56px 0 0 -59px; }
  .hiw-profile { width: 104px; margin: -56px 0 0 -52px; }
  .hiw-worker  { width: 86px;  margin: -42px 0 0 -43px; }
  .hiw-scroll  { height: 240vh; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-scroll { height: auto; }
  .hiw-sticky { position: static; height: auto; }
  .hiw-stage  { display: none; }
}

/* ── DARK "WHAT WE DO" ────────────────────────────────────── */
.dark .chip { background: rgba(46, 123, 224, 0.22); color: #9cc3f5; }
.dark .svc-tab-btn.btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.dark .svc-tab-btn.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ── JOURNEY: golden line + traveler phone ────────────────── */
.svc-journey { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#svcPathSvg { position: absolute; inset: 0; width: 100%; height: 100%; }
#svcPath {
  stroke: rgba(201, 168, 76, 0.5); stroke-width: 2.5;
  fill: none; stroke-linecap: round;
  opacity: 0;                        /* revealed by the script */
}
#travelerPhone {
  position: absolute; left: 0; top: 0;
  width: 88px; margin: -41px 0 0 -44px;
  opacity: 0; transition: opacity 0.35s ease;
  filter: drop-shadow(0 14px 24px rgba(4, 12, 26, 0.5));
}
@media (max-width: 640px) { #travelerPhone { width: 64px; margin: -30px 0 0 -32px; } }

/* ── DOODLES: background sketches that draw themselves in ─── */
section > .container { position: relative; z-index: 1; }
.doodle { position: absolute; z-index: 0; pointer-events: none; }
.doodle path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.doodle.in path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s var(--ease) 0.15s;
}
.doodle.spin { animation: doodleSpin 30s linear infinite; transform-origin: center; }
@keyframes doodleSpin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .doodle { transform: scale(0.7); transform-origin: center; } }
@media (prefers-reduced-motion: reduce) {
  .doodle path { stroke-dashoffset: 0; }
  .doodle.spin { animation: none; }
}

/* events scroller: manual snap off so the drift is smooth */
.events-scroller { scroll-snap-type: none; }

/* ── Hero earth in "waiting" mode: fades + pops in on arrival ── */
.orbit-core.earth-wait {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.orbit-core.earth-wait.earth-in {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ── HOW-IT-WORKS v2: premium UI cards ────────────────────── */
.hiw-phone, .hiw-profile, .hiw-worker { filter: none; }
.hiw-phone   { width: 280px; margin: -78px 0 0 -140px; }
.hiw-profile { width: 190px; margin: -84px 0 0 -95px; }
.hiw-worker  { width: 210px; margin: -34px 0 0 -105px; }

.call-card {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 16px 18px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 12px;
}
.cc-top {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft);
}
.cc-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pulse 2s infinite; }
.cc-body { display: flex; gap: 12px; align-items: center; }
.cc-avatar {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--blue-lt));
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.cc-body h5 { font-family: var(--font-display); font-size: 0.9rem; color: var(--navy); }
.cc-body span { font-size: 0.72rem; color: var(--text-soft); }
.cc-answer {
  display: inline-flex; align-items: center; gap: 8px;
  background: #22c55e; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  border-radius: 100px; padding: 8px 18px;
}

.hub-card {
  background: radial-gradient(320px 180px at 80% -20%, rgba(46,123,224,.5), transparent 60%), var(--navy);
  color: #fff; border-radius: 22px; padding: 22px 24px;
  box-shadow: 0 30px 70px rgba(11, 31, 58, 0.35);
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.hub-avatar {
  width: 54px; height: 54px; border-radius: 17px;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
}
.hub-card h5 { font-family: var(--font-display); font-size: 0.88rem; }
.hub-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.62rem; font-weight: 700;
  background: rgba(34, 197, 94, 0.18); color: #4ade80;
  padding: 4px 12px; border-radius: 100px;
}

.team-card {
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line); border-radius: 18px;
  padding: 12px 15px; display: flex; gap: 12px; align-items: center;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tc-icon {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.team-card h5 { font-family: var(--font-display); font-size: 0.76rem; color: var(--navy); line-height: 1.2; }
.team-card span { display: flex; align-items: center; gap: 6px; font-size: 0.64rem; color: var(--text-soft); }
.tc-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }

#travelerPhone { width: 42px; margin: -21px 0 0 -21px; filter: drop-shadow(0 0 14px rgba(201, 168, 76, 0.6)); }

@media (max-width: 640px) {
  .hiw-phone   { width: 236px; margin: -70px 0 0 -118px; }
  .hiw-profile { width: 156px; margin: -72px 0 0 -78px; }
  .hiw-worker  { width: 156px; margin: -27px 0 0 -78px; }
  .call-card { padding: 12px 14px; border-radius: 16px; }
  .cc-body h5 { font-size: 0.78rem; }
  .hub-card { padding: 16px 16px; }
  .team-card { padding: 8px 10px; border-radius: 13px; gap: 8px; }
  .tc-icon { width: 28px; height: 28px; border-radius: 9px; font-size: 0.66rem; }
  .team-card h5 { font-size: 0.6rem; }
  .team-card span { font-size: 0.5rem; }
  #travelerPhone { width: 32px; margin: -16px 0 0 -16px; }
}

/* ── BRANDS: colored logo train ───────────────────────────── */
.brands-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brands-track {
  display: flex; align-items: center; gap: 56px;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.brands-marquee:hover .brands-track { animation-play-state: paused; }
.brands-track img {
  height: 42px; width: auto;
  border-radius: 8px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .brands-track { gap: 34px; animation-duration: 28s; }
  .brands-track img { height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .brands-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ── TESTIMONIALS: drifting quote wall ────────────────────── */
.testi-section { position: relative; overflow: hidden; padding: 90px 0; }
.testi-bgword {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(9rem, 26vw, 22rem); font-weight: 700; line-height: 1;
  color: rgba(255, 255, 255, 0.02);
  white-space: nowrap; pointer-events: none; user-select: none;
}
.testi-marquee {
  overflow: hidden; margin-top: 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testi-track {
  display: flex; gap: 20px; width: max-content;
  padding: 0 4vw;
  animation: marquee 60s linear infinite;
}
.testi-marquee:hover .testi-track { animation-play-state: paused; }
.testi-card {
  width: 350px; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px; padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.testi-card:hover { border-color: rgba(201, 168, 76, 0.45); transform: translateY(-4px); }
.testi-top { display: flex; justify-content: space-between; align-items: center; }
.testi-top .fa-quote-left { color: var(--gold); font-size: 1.35rem; opacity: 0.85; }
.testi-stars { display: flex; gap: 3px; color: var(--gold); font-size: 0.62rem; }
.testi-card blockquote {
  font-size: 0.86rem; line-height: 1.68;
  color: rgba(255, 255, 255, 0.82);
  flex: 1;
}
.testi-card figcaption { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.testi-avatar {
  width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.82rem; color: #fff;
}
.testi-who strong { display: block; font-family: var(--font-display); font-size: 0.8rem; color: #fff; }
.testi-who em { display: block; font-style: normal; font-size: 0.66rem; color: rgba(201, 168, 76, 0.9); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .testi-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ── BRANDS: bigger logos ─────────────────────────────────── */
.brands-track { gap: 64px; }
.brands-track img { height: 58px; border-radius: 10px; }

/* ── MOBILE OPTIMIZATION PASS ─────────────────────────────── */
@media (max-width: 640px) {
  .container { width: 100%; padding: 0 20px; }
  .section-pad { padding: 62px 0; }
  .section-head { margin-bottom: 34px; }
  .h-section { font-size: clamp(1.35rem, 6.6vw, 1.7rem); }
  .lede { font-size: 0.88rem; }
  .h-display { font-size: clamp(1.9rem, 9.4vw, 2.5rem); }
  .eyebrow { font-size: 0.62rem; }

  .hero-cta { gap: 10px; }
  .hero-cta .btn { padding: 13px 20px; font-size: 0.78rem; }

  .split { grid-template-columns: 1fr; gap: 36px; }
  .svc-grid { gap: 12px; }
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .pkg-grid { grid-template-columns: 1fr; gap: 14px; }

  .card { padding: 22px; }
  .event-card { min-width: 258px; }

  /* pinned scene: tighter, lighter text behind the objects */
  .hiw-scroll { height: 220vh; }
  .hiw-text .step p { font-size: 0.72rem; }
  .hiw-text .step h3 { font-size: 0.8rem; }

  /* testimonials */
  .testi-section { padding: 64px 0; }
  .testi-card { width: 288px; padding: 20px; }
  .testi-card blockquote { font-size: 0.8rem; }
  .testi-track { animation-duration: 46s; }

  /* brands on mobile: bigger than before, still tidy */
  .brands-track { gap: 40px; }
  .brands-track img { height: 42px; }
}