/* FAST INDIA TRANSPORT — site styles */
:root{
  --navy:#0A2540; --navy-deep:#071B2E; --gold:#F5B300; --green:#1FA97A;
  --warm:#FAFAF7; --charcoal:#12172A;
}
html{ -webkit-text-size-adjust:100%; }
body{ background:var(--warm); color:var(--charcoal); font-family:'Inter',system-ui,sans-serif; overflow-x:hidden; }
::selection{ background:var(--gold); color:var(--navy); }

/* focus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:4px;
}

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(24px); }
.no-motion .reveal{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto !important; }
}

/* header */
.site-header{ transition:background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease, border-color .35s ease; }
.site-header.is-scrolled{ background:rgba(10,37,64,.88); backdrop-filter:blur(14px); box-shadow:0 10px 30px -18px rgba(0,0,0,.7); border-bottom-color:rgba(245,179,0,.25); }
.nav-link{ position:relative; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--gold); transition:width .3s ease; }
.nav-link:hover::after,.nav-link[aria-current="page"]::after{ width:100%; }

.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-menu{ opacity:0; visibility:hidden; transform:translateY(8px); transition:all .22s ease; }

/* tilt cards */
.tilt{ transform-style:preserve-3d; transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease; will-change:transform; }
.tilt-inner{ transform:translateZ(28px); }

/* marquee */
.marquee{ display:flex; overflow:hidden; user-select:none; gap:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ flex-shrink:0; display:flex; align-items:center; gap:3rem; padding-right:3rem; min-width:100%; animation:marquee 42s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-100%);} }

/* gradient overlay helper */
.photo-shade::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,27,46,.15) 0%,rgba(7,27,46,.55) 55%,rgba(7,27,46,.92) 100%); }

.hairline{ border-color:rgba(255,255,255,.12); }
.grid-lines{
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
}
.dot-grid{ background-image:radial-gradient(rgba(10,37,64,.14) 1px, transparent 1px); background-size:22px 22px; }

/* pulse dots for map */
.pulse-dot{ animation:pulse 2.6s ease-out infinite; transform-origin:center; }
@keyframes pulse{ 0%{ opacity:.85; r:4 } 70%{ opacity:0; r:16 } 100%{ opacity:0; r:16 } }

/* accordion */
.acc-body{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.acc-item.open .acc-body{ max-height:520px; }
.acc-item.open .acc-icon{ transform:rotate(45deg); }
.acc-icon{ transition:transform .3s ease; }

/* lightbox */
#lightbox{ transition:opacity .3s ease; }

/* forms */
.field{ width:100%; border:1px solid rgba(10,37,64,.16); background:#fff; border-radius:.6rem; padding:.8rem 1rem; font-size:.95rem; color:var(--charcoal); transition:border-color .2s ease, box-shadow .2s ease; }
.field:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,179,0,.18); outline:none; }
.label{ display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:rgba(10,37,64,.65); margin-bottom:.45rem; }

/* misc */
.no-scroll{ overflow:hidden; }
.stamp-spin{ animation:spin 26s linear infinite; transform-origin:50% 50%; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.card-lift{ transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.card-lift:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -30px rgba(10,37,64,.55); }
.prose-fit p{ margin-bottom:1.15rem; line-height:1.85; }
.prose-fit h2{ font-family:'Space Grotesk',sans-serif; font-size:1.65rem; font-weight:700; color:var(--navy); margin:2.4rem 0 .9rem; }
.prose-fit h3{ font-family:'Space Grotesk',sans-serif; font-size:1.2rem; font-weight:700; color:var(--navy); margin:1.8rem 0 .6rem; }
.prose-fit ul{ list-style:disc; padding-left:1.3rem; margin-bottom:1.2rem; }
.prose-fit ol{ list-style:decimal; padding-left:1.3rem; margin-bottom:1.2rem; }
.prose-fit li{ margin-bottom:.5rem; line-height:1.75; }
.prose-fit a{ color:#0A2540; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; font-weight:600; }
.prose-fit table{ width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.92rem; }
.prose-fit th,.prose-fit td{ border:1px solid rgba(10,37,64,.14); padding:.7rem .8rem; text-align:left; }
.prose-fit th{ background:rgba(10,37,64,.05); font-weight:700; }

/* ============================================================
   v2 UPGRADES — FAST INDIA TRANSPORT
   ============================================================ */

/* --- 1a. top gold stats marquee strip --- */
.fit-strip{ background:linear-gradient(90deg,#F5B300,#ffd257 45%,#F5B300); color:#0A2540; position:relative; z-index:60; }
.fit-strip__viewport{ display:flex; align-items:center; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.fit-strip__track{ flex:0 0 auto; display:flex; align-items:center; gap:2.5rem; white-space:nowrap; padding-right:2.5rem; animation:fit-strip-scroll 34s linear infinite; font-size:11.5px; font-weight:700; letter-spacing:.06em; }
.fit-strip:hover .fit-strip__track{ animation-play-state:paused; }
@keyframes fit-strip-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-100%);} }
.fit-strip__close{ position:absolute; right:.4rem; top:50%; transform:translateY(-50%); width:22px; height:22px; line-height:1; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#0A2540; background:rgba(10,37,64,.10); cursor:pointer; }
.fit-strip__close:hover{ background:rgba(10,37,64,.22); }
html.fit-strip-off .fit-strip{ display:none; }
@media (prefers-reduced-motion: reduce){ .fit-strip__track{ animation:none; } }

/* --- 1b. hero perspective drifting grid --- */
.hero-grid{ position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:.08; }
.hero-grid::before{
  content:""; position:absolute; left:-50%; right:-50%; bottom:-40%; height:150%;
  background-image:linear-gradient(rgba(245,179,0,.9) 1px,transparent 1px),linear-gradient(90deg,rgba(245,179,0,.65) 1px,transparent 1px);
  background-size:70px 70px;
  transform:perspective(560px) rotateX(66deg);
  transform-origin:50% 100%;
  animation:hero-grid-drift 9s linear infinite;
}
@keyframes hero-grid-drift{ from{ background-position:0 0; } to{ background-position:0 70px; } }
@media (prefers-reduced-motion: reduce){ .hero-grid::before{ animation:none; } }

/* --- 1c. shimmering hero headline --- */
.shimmer-gold{
  background:linear-gradient(100deg,#F5B300 0%,#F5B300 32%,#fff5cf 46%,#ffffff 52%,#fff5cf 58%,#F5B300 72%,#F5B300 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer-sweep 4s linear infinite;
}
@keyframes shimmer-sweep{ from{ background-position:180% 0; } to{ background-position:-80% 0; } }
@media (prefers-reduced-motion: reduce){ .shimmer-gold{ animation:none; } }

/* --- 1d. client pill tiles --- */
.client-pill{ transition:transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease; cursor:default; }
.client-pill:hover{ transform:translateY(-4px); border-color:rgba(245,179,0,.75); background:rgba(245,179,0,.10); box-shadow:0 16px 30px -22px rgba(245,179,0,.9); }

/* --- 2. live movement ticker --- */
.tick-row{ transition:opacity .45s ease, transform .45s ease; }
.tick-row.is-out{ opacity:0; transform:translateY(-8px); }
.tick-row.is-in{ opacity:1; transform:translateY(0); }
.dot-live{ position:relative; display:inline-block; width:8px; height:8px; border-radius:999px; }
.dot-live::after{ content:""; position:absolute; inset:-4px; border-radius:999px; border:1px solid currentColor; opacity:.45; animation:dot-ripple 1.8s ease-out infinite; }
@keyframes dot-ripple{ 0%{ transform:scale(.6); opacity:.6; } 100%{ transform:scale(1.7); opacity:0; } }

/* --- 3. service explorer tabs --- */
.svc-tab{ transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease; cursor:pointer; }
.svc-tab[aria-selected="true"]{ background:#0A2540; color:#fff; border-color:#0A2540; }
.svc-tab[aria-selected="true"] .svc-tab__idx{ color:#F5B300; }
.svc-pane{ display:none; }
.svc-pane.is-active{ display:block; animation:pane-in .45s cubic-bezier(.2,.7,.3,1) both; }
@keyframes pane-in{ from{ opacity:0; transform:translateX(18px);} to{ opacity:1; transform:none;} }

/* --- 4. route cards --- */
.route-card{ cursor:pointer; transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.route-card:hover{ transform:translateY(-5px); border-color:rgba(245,179,0,.7); box-shadow:0 26px 50px -34px rgba(10,37,64,.65); }
.route-dash{ stroke-dasharray:5 6; animation:route-dash-move 1.1s linear infinite; }
@keyframes route-dash-move{ to{ stroke-dashoffset:-22; } }
@media (prefers-reduced-motion: reduce){ .route-dash{ animation:none; } }

/* --- 5. mobile sticky CTA rail --- */
.fit-rail{ position:fixed; left:0; right:0; bottom:0; z-index:45; display:grid; grid-template-columns:repeat(3,1fr); background:#0A2540; border-top:1px solid rgba(245,179,0,.35); box-shadow:0 -10px 30px -18px rgba(0,0,0,.85); padding-bottom:env(safe-area-inset-bottom); }
.fit-rail a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:60px; font-size:11.5px; font-weight:700; letter-spacing:.05em; color:#fff; text-decoration:none; }
.fit-rail a + a{ border-left:1px solid rgba(255,255,255,.12); }
.fit-rail a:active{ background:rgba(245,179,0,.18); }
.fit-rail .rail-ico{ font-size:16px; line-height:1; }
@media (min-width:768px){ .fit-rail{ display:none; } }
@media (max-width:767px){ body{ padding-bottom:64px; } }

/* --- 7. India map pins --- */
.map-pin{ cursor:pointer; }
.map-pin:hover .pin-core{ r:7; }
.pin-core{ transition:r .2s ease; }
.pin-ripple{ transform-box:fill-box; transform-origin:center; animation:pin-ripple 2.4s ease-out infinite; }
.pin-ripple.d2{ animation-delay:.8s; }
.pin-ripple.d3{ animation-delay:1.6s; }
@keyframes pin-ripple{ 0%{ transform:scale(.35); opacity:.75; } 100%{ transform:scale(2.6); opacity:0; } }
.branch-flash{ animation:branch-flash 1.6s ease-out 1; }
@keyframes branch-flash{ 0%{ box-shadow:0 0 0 0 rgba(245,179,0,.75); } 100%{ box-shadow:0 0 0 22px rgba(245,179,0,0); } }
@media (prefers-reduced-motion: reduce){ .pin-ripple{ animation:none; opacity:.25; } }

/* --- 8. trust badges --- */
.trust-badge{ display:inline-flex; align-items:center; gap:.6rem; border-radius:999px; border:1px solid rgba(10,37,64,.18); padding:.6rem 1.05rem; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:transform .25s ease, border-color .25s ease, background-color .25s ease; }
.trust-badge:hover{ transform:translateY(-3px); border-color:rgba(245,179,0,.8); background:rgba(245,179,0,.07); }
.trust-badge--dark{ border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.85); }
.trust-badge--dark:hover{ background:rgba(245,179,0,.12); }

/* --- 9. estimate modal --- */
.fit-modal{ position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:1rem; background:rgba(7,27,46,.72); backdrop-filter:blur(6px); }
.fit-modal.is-open{ display:flex; animation:modal-fade .25s ease both; }
@keyframes modal-fade{ from{ opacity:0 } to{ opacity:1 } }
.fit-modal__panel{ width:100%; max-width:720px; max-height:90vh; overflow-y:auto; border-radius:1.35rem; background:#fff; padding:1.75rem; box-shadow:0 40px 90px -40px rgba(0,0,0,.7); animation:modal-rise .3s cubic-bezier(.2,.7,.3,1) both; }
@keyframes modal-rise{ from{ transform:translateY(18px); opacity:0 } to{ transform:none; opacity:1 } }

/* --- 13. animated about timeline --- */
.tl-wrap{ position:relative; }
.tl-wrap .tl-line{ position:absolute; left:0; top:0; width:2px; background:linear-gradient(180deg,var(--gold),rgba(245,179,0,.15)); height:0; transition:height .2s linear; }
.tl-item{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.tl-item.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .tl-item{ opacity:1; transform:none; } .tl-wrap .tl-line{ height:100% !important; } }

/* --- 12. pulsing WhatsApp float --- */
.wa-float{ position:relative; }
.wa-float::before{ content:""; position:absolute; inset:0; border-radius:999px; background:#1FA97A; opacity:.55; animation:wa-pulse 2.6s ease-out infinite; z-index:-1; }
@keyframes wa-pulse{ 0%{ transform:scale(1); opacity:.5 } 70%{ transform:scale(1.55); opacity:0 } 100%{ transform:scale(1.55); opacity:0 } }
@media (max-width:767px){ .wa-float{ bottom:76px !important; } }
@media (prefers-reduced-motion: reduce){ .wa-float::before{ animation:none; opacity:0; } }

/* --- 14. global interaction polish --- */
a[href],button,[role="button"],summary{ }
.btn-press:active,a.rounded-full:active,button:active{ transform:translateY(1px) scale(.985); }
a[class*="rounded-full"],button{ transition:transform .12s ease, background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card-lift,.route-card,.client-pill,.trust-badge,.map-pin,.svc-tab{ cursor:pointer; }
img{ max-width:100%; }
main{ overflow-x:clip; }

/* --- 10. blog share + related --- */
.share-btn{ display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; border:1px solid rgba(10,37,64,.18); padding:.6rem 1.1rem; font-size:12.5px; font-weight:700; color:#0A2540; transition:all .22s ease; }
.share-btn:hover{ border-color:transparent; color:#fff; background:#0A2540; }
.share-btn.wa:hover{ background:#1FA97A; }

/* strip offsets header + body */
html:not(.fit-strip-off) body{ padding-top:28px; }
html:not(.fit-strip-off) .site-header{ top:28px; }
.fit-strip{ position:fixed; top:0; left:0; right:0; height:28px; display:flex; align-items:center; }
.fit-strip__viewport{ width:100%; padding-right:28px; }

/* map pin colours + labels */
.pin-core{ fill:#F5B300; stroke:#0A2540; stroke-width:1.4; }
.pin-ripple{ fill:none; stroke:#F5B300; stroke-width:1.6; }
.pin-label{ fill:rgba(255,255,255,.72); font-family:'Inter',system-ui,sans-serif; font-size:11px; font-weight:700; letter-spacing:.04em; pointer-events:none; }
.map-pin:hover .pin-label,.map-pin:focus-visible .pin-label{ fill:#F5B300; }
.map-pin:focus-visible{ outline:2px solid #F5B300; outline-offset:3px; border-radius:8px; }

/* blog share buttons */
.share-btn{ display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; padding:.5rem 1.1rem; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; transition:transform .2s ease, opacity .2s ease; }
.share-btn:hover{ transform:translateY(-2px); opacity:.92; }
.share-btn:active{ transform:translateY(0) scale(.97); }
.share-btn--wa{ background:#1FA97A; }
.share-btn--li{ background:#0A66C2; }
.share-btn--x{ background:#0A2540; }

/* route dash as an animated dashed connector line (span, not svg) */
span.route-dash{ position:relative; height:2px; min-width:28px; overflow:hidden; background:none; }
span.route-dash::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(90deg, rgba(245,179,0,.95) 0 8px, transparent 8px 16px); background-size:16px 2px; animation:route-span-move .9s linear infinite; }
span.route-dash::after{ content:""; position:absolute; right:-1px; top:50%; width:0; height:0; transform:translateY(-50%); border-left:6px solid #F5B300; border-top:4px solid transparent; border-bottom:4px solid transparent; }
@keyframes route-span-move{ to{ background-position:16px 0; } }
@media (prefers-reduced-motion: reduce){ span.route-dash::before{ animation:none; } }

/* contact quick-action cards */
.qa-card{ min-height:210px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.qa-card:hover{ transform:translateY(-6px); box-shadow:0 32px 60px -40px rgba(10,37,64,.75); }
.qa-card:active{ transform:translateY(-2px) scale(.99); }
.pin-ripple{ pointer-events:none; }

/* ============================================================
   LANE RATE CARDS — 3D hover effect, gold glow, click-to-prefill
   ============================================================ */
.lane-card{
  position:relative; cursor:pointer; border-radius:1rem;
  padding:1px; background:linear-gradient(140deg, rgba(245,179,0,.35), rgba(255,255,255,.06) 55%, rgba(31,169,122,.25));
  transition: transform .35s cubic-bezier(.2,.7,.3,1), filter .35s;
  transform-style:preserve-3d;
}
.lane-card__inner{
  position:relative; border-radius:calc(1rem - 1px);
  background:linear-gradient(160deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
  padding:1rem 1.15rem; overflow:hidden; backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.06);
}
.lane-card__inner::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), rgba(245,179,0,.28), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.lane-card:hover{ transform: translateY(-4px) rotateX(3deg) rotateY(-3deg); }
.lane-card:hover .lane-card__inner::before{ opacity:1; }
.lane-card:focus-visible{ outline:2px solid #F5B300; outline-offset:3px; }
.lane-card:active{ transform: translateY(-2px) scale(.98); }

/* ============================================================
   v3 VISUAL OVERHAUL — aurora, 3D, cursor, dividers, glass
   ============================================================ */

/* --- v3.1 aurora / gradient mesh hero background --- */
.fx-aurora{ position:absolute; inset:-25%; pointer-events:none; z-index:0; overflow:hidden; }
.fx-aurora::before,.fx-aurora::after{
  content:""; position:absolute; inset:-10%; border-radius:50%;
  filter:blur(90px); opacity:.55; will-change:transform;
}
.fx-aurora::before{
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(10,37,64,0) 0deg, rgba(245,179,0,.42) 62deg, rgba(7,27,46,0) 130deg,
    rgba(31,169,122,.34) 208deg, rgba(10,37,64,0) 268deg, rgba(245,179,0,.28) 330deg, rgba(10,37,64,0) 360deg);
  animation:fx-aurora-spin 38s linear infinite;
}
.fx-aurora::after{
  background:radial-gradient(38% 44% at 28% 32%, rgba(245,179,0,.22), transparent 70%),
             radial-gradient(42% 40% at 74% 66%, rgba(31,169,122,.20), transparent 72%),
             radial-gradient(52% 52% at 50% 50%, rgba(11,58,102,.35), transparent 76%);
  animation:fx-aurora-breathe 16s ease-in-out infinite alternate;
}
@keyframes fx-aurora-spin{ to{ transform:rotate(360deg); } }
@keyframes fx-aurora-breathe{ from{ transform:scale(1) translate3d(0,0,0); opacity:.45; } to{ transform:scale(1.14) translate3d(2%,-2%,0); opacity:.72; } }
@media (prefers-reduced-motion: reduce){ .fx-aurora::before,.fx-aurora::after{ animation:none; } }

/* --- v3.2 grain / noise overlay --- */
.fx-noise{
  position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* --- v3.3 floating 3D shipment tokens --- */
.fx-tokens{ position:absolute; inset:0; pointer-events:none; z-index:1; perspective:900px; transform-style:preserve-3d; overflow:hidden; }
.fx-token{
  position:absolute; border-radius:12px;
  background:linear-gradient(150deg, rgba(245,179,0,.16), rgba(255,255,255,.05) 45%, rgba(31,169,122,.12));
  border:1px solid rgba(245,179,0,.24);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(2px);
  animation:fx-token-drift linear infinite;
  will-change:transform;
}
.fx-token::after{ content:""; position:absolute; left:8%; right:8%; top:34%; height:1px; background:rgba(245,179,0,.30); }
@keyframes fx-token-drift{
  0%{ transform:translate3d(0,0,var(--tz,0px)) rotateX(18deg) rotateY(-16deg) rotateZ(0deg); }
  50%{ transform:translate3d(38px,-28px,var(--tz,0px)) rotateX(-14deg) rotateY(20deg) rotateZ(8deg); }
  100%{ transform:translate3d(0,0,var(--tz,0px)) rotateX(18deg) rotateY(-16deg) rotateZ(0deg); }
}
@media (prefers-reduced-motion: reduce){ .fx-token{ animation:none; } }
@media (max-width:640px){ .fx-tokens{ display:none; } }

/* --- v3.4 globe glow ring --- */
.globe-halo{ position:absolute; inset:-6%; pointer-events:none; z-index:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(245,179,0,.16) 0%, rgba(245,179,0,.06) 42%, transparent 66%); }
.globe-ring{ position:absolute; inset:4%; pointer-events:none; z-index:0; border-radius:50%;
  border:1px solid rgba(245,179,0,.28); box-shadow:0 0 60px -10px rgba(245,179,0,.45) inset, 0 0 70px -22px rgba(245,179,0,.55);
  animation:globe-ring-pulse 6s ease-in-out infinite; }
.globe-ring.r2{ inset:-4%; border-color:rgba(245,179,0,.14); animation-delay:1.6s; }
@keyframes globe-ring-pulse{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.035); opacity:.55 } }
@media (prefers-reduced-motion: reduce){ .globe-ring{ animation:none; } }

/* --- v3.5 live shipments badge --- */
.live-badge{ display:inline-flex; align-items:center; gap:.65rem; border-radius:999px; padding:.55rem 1.05rem;
  border:1px solid rgba(31,169,122,.42); background:rgba(31,169,122,.10); backdrop-filter:blur(6px); }
.live-badge__dot{ position:relative; width:8px; height:8px; border-radius:999px; background:#1FA97A; flex:0 0 auto; }
.live-badge__dot::after{ content:""; position:absolute; inset:-5px; border-radius:999px; background:rgba(31,169,122,.45); animation:live-ping 1.9s ease-out infinite; }
@keyframes live-ping{ 0%{ transform:scale(.5); opacity:.8 } 100%{ transform:scale(1.9); opacity:0 } }
.live-badge__num{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:#F5B300; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion: reduce){ .live-badge__dot::after{ animation:none; } }

/* --- v3.6 inner page hero: animated stripes + gold rule --- */
.hero-stripes{ position:absolute; inset:0; pointer-events:none; opacity:.16; z-index:1;
  background-image:repeating-linear-gradient(115deg, rgba(245,179,0,.34) 0 1px, transparent 1px 26px);
  background-size:200% 100%; animation:hero-stripes-slide 22s linear infinite; }
@keyframes hero-stripes-slide{ from{ background-position:0 0 } to{ background-position:260px 0 } }
@media (prefers-reduced-motion: reduce){ .hero-stripes{ animation:none; } }
.hero-rule{ display:block; width:76px; height:3px; margin-top:1.35rem; border-radius:2px; overflow:hidden;
  background:linear-gradient(90deg,#F5B300, rgba(245,179,0,0)); position:relative; }
.hero-rule::after{ content:""; position:absolute; left:0; top:0; height:100%; width:22px; border-radius:2px; background:#fff; opacity:.85;
  animation:hero-rule-run 3.4s ease-in-out infinite; }
@keyframes hero-rule-run{ 0%{ transform:translateX(0); opacity:.9 } 60%{ transform:translateX(54px); opacity:0 } 100%{ transform:translateX(0); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .hero-rule::after{ animation:none; } }

/* --- v3.7 section backgrounds: topo + radial --- */
.bg-topo{ position:relative; }
.bg-topo::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300' viewBox='0 0 420 300'%3E%3Cg fill='none' stroke='%230A2540' stroke-width='1.1'%3E%3Cpath d='M-20 60C60 20 140 100 210 60S360 10 440 70'/%3E%3Cpath d='M-20 95C60 55 140 135 210 95S360 45 440 105'/%3E%3Cpath d='M-20 130C60 90 140 170 210 130S360 80 440 140'/%3E%3Cpath d='M-20 170C60 130 140 210 210 170S360 120 440 180'/%3E%3Cpath d='M-20 210C60 170 140 250 210 210S360 160 440 220'/%3E%3Cpath d='M-20 250C60 210 140 290 210 250S360 200 440 260'/%3E%3C/g%3E%3C/svg%3E");
  background-size:420px 300px;
}
.bg-radial{ position:relative; background-image:radial-gradient(75% 60% at 50% 0%, rgba(245,179,0,.075), transparent 62%), radial-gradient(60% 60% at 90% 100%, rgba(31,169,122,.06), transparent 65%); }
.bg-radial-dark{ position:relative; background-image:radial-gradient(70% 60% at 20% 0%, rgba(245,179,0,.14), transparent 60%), radial-gradient(60% 55% at 85% 100%, rgba(31,169,122,.12), transparent 62%); }

/* --- v3.8 section divider --- */
.fx-divider{ display:flex; align-items:center; justify-content:center; gap:1rem; padding:0 1rem; }
.fx-divider span.line{ height:1px; flex:1 1 auto; max-width:220px; background:linear-gradient(90deg, transparent, rgba(245,179,0,.55)); }
.fx-divider span.line.r{ background:linear-gradient(90deg, rgba(245,179,0,.55), transparent); }
.fx-divider span.dot{ width:8px; height:8px; border-radius:999px; background:#F5B300; box-shadow:0 0 0 5px rgba(245,179,0,.14); flex:0 0 auto; }
.fx-divider--dark span.line{ background:linear-gradient(90deg, transparent, rgba(245,179,0,.45)); }

/* --- v3.9 animated route path (draw on scroll) --- */
.route-draw path{ stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900); transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.3,1); }
.route-draw.is-drawn path{ stroke-dashoffset:0; }
@media (prefers-reduced-motion: reduce){ .route-draw path{ stroke-dashoffset:0 !important; } }

/* --- v3.10 generic 3D tilt card + shimmer sweep --- */
.tilt3d{ position:relative; transform-style:preserve-3d; will-change:transform;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, border-color .4s ease; }
.tilt3d::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; opacity:0;
  background:linear-gradient(115deg, transparent 30%, rgba(245,179,0,.24) 46%, rgba(255,255,255,.42) 52%, rgba(245,179,0,.24) 58%, transparent 74%);
  background-size:260% 100%; background-position:130% 0;
  transition:opacity .25s ease;
}
.tilt3d.is-tilting::after{ opacity:1; animation:tilt-shimmer 1.05s cubic-bezier(.2,.7,.3,1) 1; }
@keyframes tilt-shimmer{ from{ background-position:130% 0 } to{ background-position:-60% 0 } }
.tilt3d.is-tilting{ box-shadow:0 40px 70px -38px rgba(10,37,64,.62); }
.tilt3d.on-dark.is-tilting{ box-shadow:0 40px 80px -38px rgba(0,0,0,.85); }
@media (prefers-reduced-motion: reduce){ .tilt3d{ transform:none !important; } .tilt3d::after{ animation:none !important; } }

/* --- v3.11 cursor spotlight (desktop only) --- */
#fx-spotlight{
  position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%;
  pointer-events:none; z-index:70; mix-blend-mode:screen; opacity:0;
  background:radial-gradient(circle, rgba(245,179,0,.16) 0%, rgba(245,179,0,.07) 34%, transparent 68%);
  transition:opacity .5s ease; will-change:transform;
}
#fx-spotlight.is-on{ opacity:1; }
@media (hover:none),(prefers-reduced-motion: reduce){ #fx-spotlight{ display:none !important; } }

/* --- v3.12 scroll progress bar --- */
#fx-progress{ position:fixed; top:0; left:0; height:3px; width:0%; z-index:99;
  background:linear-gradient(90deg,#F5B300,#ffd257 60%,#1FA97A); box-shadow:0 0 14px rgba(245,179,0,.7); transition:width .1s linear; }

/* --- v3.13 page load overlay --- */
#fx-loader{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:#071B2E;
  transition:opacity .3s ease, visibility .3s ease; }
#fx-loader.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }
#fx-loader img{ width:64px; height:64px; border-radius:50%; object-fit:cover; animation:loader-pop .45s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes loader-pop{ from{ transform:scale(.75); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* --- v3.14 glass counter cards + odometer --- */
.stat-glass{ position:relative; border-radius:1.15rem; padding:1.5rem 1.25rem; overflow:hidden;
  background:linear-gradient(165deg, rgba(255,255,255,.82), rgba(255,255,255,.55));
  border:1px solid rgba(10,37,64,.10); backdrop-filter:blur(10px);
  box-shadow:0 22px 50px -40px rgba(10,37,64,.55); transition:transform .35s ease, box-shadow .35s ease; }
.stat-glass::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, #F5B300, transparent); opacity:.9; }
.stat-glass:hover{ transform:translateY(-5px); box-shadow:0 34px 60px -38px rgba(10,37,64,.6); }
.stat-glass .stat-ico{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:.7rem;
  background:rgba(10,37,64,.06); color:#0A2540; margin-bottom:.85rem; }
.odo{ display:inline-flex; align-items:baseline; font-variant-numeric:tabular-nums; }
.odo-d{ display:inline-block; height:1em; overflow:hidden; line-height:1; }
.odo-d i{ display:block; font-style:normal; transition:transform 1.1s cubic-bezier(.2,.8,.25,1); }
@media (prefers-reduced-motion: reduce){ .odo-d i{ transition:none; } }

/* --- v3.15 testimonial richness --- */
.testi-card{ position:relative; overflow:hidden; }
.testi-card__mark{ position:absolute; right:1.2rem; top:-2.6rem; font-family:'Space Grotesk',sans-serif; font-size:15rem; line-height:1;
  color:transparent; -webkit-text-stroke:2px rgba(245,179,0,.30); pointer-events:none; user-select:none; }
.testi-stars{ display:inline-flex; gap:.18rem; color:#F5B300; }
.testi-logo{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:1rem;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:.04em; color:#0A2540;
  background:linear-gradient(150deg,#F5B300,#ffd769); box-shadow:0 16px 34px -20px rgba(245,179,0,.9); flex:0 0 auto; }
@media (max-width:640px){ .testi-card__mark{ font-size:9rem; top:-1.4rem; } }

/* --- v3.16 gold eyebrow bar on section headers --- */
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; }
.eyebrow::before{ content:""; width:3px; height:14px; border-radius:2px; background:#F5B300; display:inline-block; flex:0 0 auto; }

/* --- v3.17 footer v3 --- */
.footer-v3{ position:relative; overflow:hidden; }
.footer-v3__glow{ position:absolute; inset:-40% -10%; pointer-events:none; z-index:0; opacity:.5;
  background:radial-gradient(40% 45% at 18% 20%, rgba(245,179,0,.18), transparent 70%),
             radial-gradient(42% 44% at 82% 78%, rgba(31,169,122,.16), transparent 72%);
  animation:footer-glow 18s ease-in-out infinite alternate; }
@keyframes footer-glow{ from{ transform:translate3d(-2%,0,0) scale(1) } to{ transform:translate3d(3%,-3%,0) scale(1.12) } }
@media (prefers-reduced-motion: reduce){ .footer-v3__glow{ animation:none; } }
.footer-v3 > *{ position:relative; z-index:1; }
.foot-phone{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1;
  background:linear-gradient(100deg,#fff 10%,#F5B300 55%,#fff 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.trust-ribbon{ display:flex; flex-wrap:wrap; gap:.55rem; }
.trust-ribbon span{ border-radius:999px; border:1px solid rgba(245,179,0,.32); background:rgba(245,179,0,.07);
  padding:.4rem .9rem; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.news-input{ width:100%; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
  padding:.8rem 1.1rem; font-size:13px; color:#fff; }
.news-input::placeholder{ color:rgba(255,255,255,.4); }
.news-input:focus{ border-color:rgba(245,179,0,.7); outline:none; box-shadow:0 0 0 3px rgba(245,179,0,.15); }

/* --- v3.18 coverage 3D map --- */
.map3d{ position:relative; perspective:1200px; }
.map3d__inner{ transform:rotateX(16deg) rotateZ(-2deg); transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.map3d:hover .map3d__inner{ transform:rotateX(8deg) rotateZ(0deg) scale(1.02); }
.map-glow{ animation:map-glow 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.map-glow.d2{ animation-delay:.6s } .map-glow.d3{ animation-delay:1.2s } .map-glow.d4{ animation-delay:1.8s } .map-glow.d5{ animation-delay:2.4s }
@keyframes map-glow{ 0%,100%{ opacity:.35; transform:scale(1) } 50%{ opacity:1; transform:scale(1.35) } }
@media (prefers-reduced-motion: reduce){ .map-glow{ animation:none; opacity:.8 } .map3d__inner{ transform:none } }

/* --- v3.19 marquee tile (client type tiles) --- */
.mq-tile{ display:inline-flex; align-items:center; white-space:nowrap; border-radius:.85rem; border:1px solid rgba(10,37,64,.10);
  background:#fff; padding:.7rem 1.2rem; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; color:rgba(10,37,64,.55);
  transition:color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.mq-tile:hover{ color:#0A2540; border-color:rgba(245,179,0,.75); transform:translateY(-3px); box-shadow:0 18px 34px -26px rgba(245,179,0,.9); }

/* --- v3.20 404 float --- */
.float-slow{ animation:float-slow 5.5s ease-in-out infinite; }
@keyframes float-slow{ 0%,100%{ transform:translateY(0) rotate(-1deg) } 50%{ transform:translateY(-16px) rotate(1.5deg) } }
@media (prefers-reduced-motion: reduce){ .float-slow{ animation:none; } }

/* ============================================================
   V4 PREMIUM UPGRADES — heavy 3D, rich colors, cinematic depth
   ============================================================ */

/* Introduce new accent colors alongside gold/green */
:root{
  --cyan: #22D3EE;
  --violet: #A855F7;
  --pink: #EC4899;
  --amber: #F5B300;
  --emerald: #1FA97A;
}

/* ---------- 1. Rich animated aurora background ---------- */
.aurora-wrap{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  filter:blur(70px) saturate(1.6);
  opacity:1;
  z-index:0;
}
/* Ensure hero content sits above aurora */
section.overflow-hidden > .relative,
section.overflow-hidden > .mx-auto{ position:relative; z-index:5; }
.aurora-blob{
  position:absolute; border-radius:50%; will-change:transform;
  animation:aurora-drift 24s ease-in-out infinite;
}
.aurora-blob--gold{
  width:52vw; height:52vw; left:-8vw; top:-10vw;
  background:radial-gradient(circle, rgba(245,179,0,.75) 0%, rgba(245,179,0,0) 65%);
  animation-delay:0s;
}
.aurora-blob--cyan{
  width:60vw; height:60vw; right:-15vw; top:5vw;
  background:radial-gradient(circle, rgba(34,211,238,.65) 0%, rgba(34,211,238,0) 60%);
  animation-delay:-8s;
}
.aurora-blob--violet{
  width:44vw; height:44vw; left:25vw; bottom:-12vw;
  background:radial-gradient(circle, rgba(168,85,247,.62) 0%, rgba(168,85,247,0) 60%);
  animation-delay:-14s;
}
.aurora-blob--emerald{
  width:36vw; height:36vw; right:10vw; bottom:-8vw;
  background:radial-gradient(circle, rgba(31,169,122,.60) 0%, rgba(31,169,122,0) 60%);
  animation-delay:-20s;
}
@keyframes aurora-drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(6vw,-4vw) scale(1.15); }
  66%{ transform:translate(-4vw,5vw) scale(0.9); }
}
@media (prefers-reduced-motion: reduce){
  .aurora-blob{ animation:none; }
}

/* Static conic-gradient rotating slowly behind aurora */
.aurora-conic{
  position:absolute; inset:-25%;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(245,179,0,.22) 0deg,
    rgba(34,211,238,.20) 90deg,
    rgba(168,85,247,.24) 180deg,
    rgba(31,169,122,.20) 270deg,
    rgba(245,179,0,.22) 360deg);
  animation:conic-spin 40s linear infinite;
  opacity:.55;
  filter:blur(80px);
  pointer-events:none;
}
@keyframes conic-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .aurora-conic{ animation:none; } }

/* Noise grain overlay — adds texture to dark sections */
.noise-overlay{
  position:absolute; inset:0; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
  background-size:200px 200px;
}

/* ---------- 2. Glass card ---------- */
.glass{
  background:linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.glass-light{
  background:linear-gradient(160deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.35) 100%);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(10,37,64,.08);
  box-shadow: 0 20px 40px -20px rgba(10,37,64,.25);
}

/* ---------- 3. Universal 3D tilt on cards ---------- */
.tilt3d{
  transform-style:preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
  will-change:transform;
}
.tilt3d:hover{
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.35), 0 0 0 1px rgba(245,179,0,.35);
}
.tilt3d__shine{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%), rgba(245,179,0,.18), transparent 60%);
  opacity:0; transition:opacity .3s; border-radius:inherit;
}
.tilt3d:hover .tilt3d__shine{ opacity:1; }

/* ---------- 4. Gradient text ---------- */
.grad-text{
  background:linear-gradient(115deg, #F5B300 0%, #FFD24E 40%, #F5B300 60%, #D48D00 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:grad-slide 6s ease-in-out infinite;
}
.grad-text-cool{
  background:linear-gradient(115deg, #22D3EE 0%, #A855F7 50%, #EC4899 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
@keyframes grad-slide{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* ---------- 5. Section transition — animated wave divider ---------- */
.wave-div{
  position:relative; height:80px; margin-top:-1px;
  background:linear-gradient(180deg, transparent 0%, currentColor 100%);
}

/* ---------- 6. Colored pulsing spotlights (dark sections) ---------- */
.spotlight{
  position:absolute; width:600px; height:600px; border-radius:50%;
  pointer-events:none; filter:blur(80px); opacity:.35;
  animation:spotlight-pulse 8s ease-in-out infinite;
}
.spotlight--gold{ background:radial-gradient(circle, #F5B300 0%, transparent 70%); }
.spotlight--cyan{ background:radial-gradient(circle, #22D3EE 0%, transparent 70%); animation-delay:-2s; }
.spotlight--violet{ background:radial-gradient(circle, #A855F7 0%, transparent 70%); animation-delay:-4s; }
.spotlight--emerald{ background:radial-gradient(circle, #1FA97A 0%, transparent 70%); animation-delay:-6s; }
@keyframes spotlight-pulse{
  0%,100%{ transform:scale(1); opacity:.30; }
  50%{ transform:scale(1.15); opacity:.42; }
}

/* ---------- 7. Enhanced globe container ---------- */
#globe-canvas{
  position:relative;
  aspect-ratio:1/1;
  max-width:640px;
  width:100%;
  margin-left:auto;
}
#globe-canvas::before{
  content:""; position:absolute; inset:-8%; border-radius:50%;
  background:radial-gradient(circle, rgba(245,179,0,.15) 0%, rgba(34,211,238,.10) 40%, transparent 65%);
  filter:blur(30px); pointer-events:none;
  animation:globe-halo 6s ease-in-out infinite;
}
@keyframes globe-halo{
  0%,100%{ opacity:.6; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.05); }
}
/* Rotating gold ring around globe */
#globe-canvas::after{
  content:""; position:absolute; inset:-4%; border-radius:50%;
  border:1px dashed rgba(245,179,0,.35);
  animation:ring-rotate 40s linear infinite;
  pointer-events:none;
}
@keyframes ring-rotate{ to{ transform:rotate(360deg); } }

/* ---------- 8. Enhanced service cards — glow border on hover ---------- */
.svc-card-v2{
  position:relative; overflow:hidden; border-radius:1.5rem;
  background:linear-gradient(160deg, #fff 0%, #FAFAF7 100%);
  border:1px solid rgba(10,37,64,.08);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
}
.svc-card-v2::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:conic-gradient(from var(--ang,0deg), #F5B300, #22D3EE, #A855F7, #1FA97A, #F5B300);
  opacity:0; transition:opacity .4s;
  animation:card-glow-spin 4s linear infinite;
}
.svc-card-v2:hover{ transform:translateY(-6px); box-shadow: 0 25px 50px -20px rgba(10,37,64,.35); }
.svc-card-v2:hover::before{ opacity:.8; }
@keyframes card-glow-spin{ to{ --ang:360deg; } }
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* ---------- 9. Number counter — gradient background ---------- */
.stat-card{
  position:relative; overflow:hidden; border-radius:1.25rem;
  padding:2rem 1.75rem;
  background:linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.stat-card::before{
  content:""; position:absolute; left:0; top:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, #F5B300, transparent);
  animation:top-line-sweep 3s ease-in-out infinite;
}
@keyframes top-line-sweep{
  0%,100%{ opacity:.3; transform:scaleX(.4); }
  50%{ opacity:1; transform:scaleX(1); }
}
.stat-card__value{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size:clamp(2.25rem, 5vw, 3.5rem); line-height:1;
  background:linear-gradient(135deg, #F5B300 0%, #FFD24E 60%, #FFF 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- 10. Scroll progress bar (top) ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:200;
  background:linear-gradient(90deg, #F5B300, #22D3EE, #A855F7);
  box-shadow: 0 0 12px rgba(245,179,0,.6);
  transition:width .1s linear;
}

/* ---------- 11. Floating shipment tokens (hero) ---------- */
.float-token{
  position:absolute; pointer-events:none;
  border-radius:6px;
  background:linear-gradient(135deg, rgba(245,179,0,.15), rgba(245,179,0,.03));
  border:1px solid rgba(245,179,0,.20);
  backdrop-filter:blur(6px);
  animation:token-float 12s ease-in-out infinite;
}
.float-token::after{
  content:""; position:absolute; inset:4px; border-radius:4px;
  background:linear-gradient(135deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
}
@keyframes token-float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-30px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce){ .float-token{ animation:none; } }

/* ---------- 12. Improved shimmer on gold text ---------- */
.shimmer-gold{
  background:linear-gradient(90deg, #F5B300 0%, #FFF8DC 40%, #F5B300 60%, #B78500 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmer-slide 3.5s ease-in-out infinite;
}
@keyframes shimmer-slide{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* ---------- 13. Cursor spotlight (desktop only) ---------- */
.cursor-glow{
  position:fixed; width:520px; height:520px; border-radius:50%;
  pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(245,179,0,.10) 0%, transparent 60%);
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  transition:opacity .3s;
  will-change:transform, top, left;
}
@media (hover:none), (max-width: 767px){ .cursor-glow{ display:none; } }

/* ---------- 14. Marquee — client pills infinite scroll ---------- */
.marquee-track{
  display:flex; gap:2rem; animation:marquee 45s linear infinite;
  width:max-content;
}
.marquee-container:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- 15. Section eyebrow with gold bar ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:#F5B300;
}
.eyebrow::before{
  content:""; display:inline-block; width:28px; height:2px;
  background:linear-gradient(90deg, #F5B300, transparent);
}

/* ---------- 16. Fancy button — gradient border ---------- */
.btn-fancy{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 2rem; border-radius:9999px; font-weight:700; font-size:14px;
  color:#0A2540; background:#F5B300; overflow:hidden;
  transition: transform .2s, box-shadow .3s;
  box-shadow: 0 8px 24px -8px rgba(245,179,0,.55);
}
.btn-fancy::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(115deg, #F5B300, #FFD24E, #F5B300);
  transition:opacity .3s; opacity:1;
}
.btn-fancy::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(115deg, #FFD24E, #F5B300, #FFD24E);
  opacity:0; transition:opacity .3s;
}
.btn-fancy:hover::after{ opacity:1; }
.btn-fancy:hover{ transform:translateY(-2px); box-shadow: 0 14px 32px -8px rgba(245,179,0,.75); }
.btn-fancy > span{ position:relative; z-index:2; }

/* ---------- 17. Subtle background pattern for warm sections ---------- */
.pattern-dots{
  background-image:radial-gradient(circle at center, rgba(10,37,64,.06) 1px, transparent 1px);
  background-size:24px 24px;
}
.pattern-grid-light{
  background-image:
    linear-gradient(rgba(10,37,64,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,37,64,.04) 1px, transparent 1px);
  background-size:48px 48px;
}
.pattern-topo{
  background-image:
    radial-gradient(ellipse 400px 100px at 20% 30%, rgba(245,179,0,.04), transparent),
    radial-gradient(ellipse 500px 150px at 80% 70%, rgba(34,211,238,.04), transparent);
}

/* ---------- 18. Route arc SVG decoration ---------- */
.route-arc{
  position:absolute; pointer-events:none;
  stroke:#F5B300; stroke-width:1.5; fill:none;
  stroke-dasharray:6 8; opacity:.35;
  animation:dash-shift 20s linear infinite;
}
@keyframes dash-shift{ to{ stroke-dashoffset:-140; } }

/* ---------- 19. Section reveal — richer stagger ---------- */
.reveal-fine{ opacity:0; transform:translateY(20px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal-fine.in{ opacity:1; transform:none; }
.reveal-fine.d1{ transition-delay:.08s; }
.reveal-fine.d2{ transition-delay:.16s; }
.reveal-fine.d3{ transition-delay:.24s; }
.reveal-fine.d4{ transition-delay:.32s; }
.reveal-fine.d5{ transition-delay:.40s; }

/* ---------- 20. Hero content — better hierarchy ---------- */
.hero-eyebrow-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem 1rem; border-radius:9999px;
  background:linear-gradient(90deg, rgba(31,169,122,.15), rgba(31,169,122,.05));
  border:1px solid rgba(31,169,122,.30);
  backdrop-filter:blur(8px);
}
.hero-eyebrow-pill .dot{
  width:.4rem; height:.4rem; border-radius:50%; background:#1FA97A;
  box-shadow: 0 0 12px #1FA97A;
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.5; transform:scale(1.3); }
}

/* ============================================================
   Mobile sticky rail (Call + WhatsApp + Quote) — mobile only
   ============================================================ */
.fit-mobile-rail{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(7,27,46,0) 0%, rgba(7,27,46,.92) 30%, #071B2E 100%);
  gap:8px;
}
@media (max-width: 767.98px){
  .fit-mobile-rail{ display:grid; grid-template-columns:1fr 1fr 1fr; }
  /* Push WhatsApp float above the rail on mobile */
  .wa-float{ bottom:80px !important; }
}
.mrail-btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 8px; border-radius:12px; font-size:13px; font-weight:700;
  text-decoration:none; color:#fff;
  transition: transform .12s;
}
.mrail-btn:active{ transform:scale(.96); }
.mrail-call{ background:linear-gradient(135deg, #22D3EE, #0891B2); color:#0A2540; }
.mrail-wa{ background:linear-gradient(135deg, #1FA97A, #059669); }
.mrail-quote{ background:linear-gradient(135deg, #F5B300, #B78500); color:#0A2540; }
.mrail-btn svg{ flex-shrink:0; }