:root{
  --navy:#0A1F3D; --navy-800:#0F2A4F; --navy-900:#071629; --navy-950:#040E1E;
  --gold:#C7A44B; --gold-light:#E4D4A8; --gold-dark:#9C7F2D;
  --ivory:#FBF9F4; --cream:#F4EFE6; --charcoal:#1A1D23;
  --slate:#5A6472; --platinum:#E5E1D8;
}

/* ---- scroll progress ---- */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;
  background:linear-gradient(to right,var(--gold),var(--gold-light));
  transition:width .15s ease-out;
  box-shadow:0 0 12px rgba(199,164,75,.5);
}

/* ---- hero carousel ---- */
.hero-carousel{position:relative;overflow:hidden;height:min(94vh,880px)}
.hero-slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.4s cubic-bezier(.4,0,.2,1), transform 9s ease-out;
  background-size:cover;background-position:center;
  transform:scale(1);
}
.hero-slide.active{opacity:1;transform:scale(1.07)}
.hero-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(4,14,30,.95) 0%,rgba(4,14,30,.72) 50%,rgba(4,14,30,.30) 100%);
}
.hero-content{position:relative;z-index:2}
#hero-title, #hero-sub{transition:opacity .35s ease}

/* ---- marquee ---- */
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-track{display:flex;width:max-content;gap:5rem;align-items:center;animation:marquee 44s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.client-logo{
  height:55px !important;
  width:auto !important;
  max-height:55px !important;
  max-width:450px !important;
  opacity:.45;
  filter:grayscale(.2);
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0;
}
.client-logo:hover{
  opacity:1;
  filter:grayscale(0);
}
@media (max-width:640px){
  .client-logo{
    height:40px !important;
    max-height:40px !important;
    max-width:320px !important;
  }
}

.marquee-mask{
  mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);
}

/* ---- icon animations ---- */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(199,164,75,.45)}70%{box-shadow:0 0 0 16px rgba(199,164,75,0)}100%{box-shadow:0 0 0 0 rgba(199,164,75,0)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes dash-move{to{stroke-dashoffset:-200}}
@keyframes take-off{0%,55%{transform:translate(0,0) rotate(0)}75%{transform:translate(3px,-3px) rotate(-8deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes roll{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}

.ico-float{animation:float 5s ease-in-out infinite}
.ico-spin{animation:spin-slow 18s linear infinite}
.ico-pulse{animation:pulse-ring 3s cubic-bezier(.4,0,.6,1) infinite}
.ico-bob{animation:bob 3s ease-in-out infinite}
.ico-dash{stroke-dasharray:6 8;animation:dash-move 3s linear infinite}
.ico-takeoff{animation:take-off 4s ease-in-out infinite}
.ico-roll{animation:roll 2s ease-in-out infinite}
.d1{animation-delay:.2s}.d2{animation-delay:.4s}.d3{animation-delay:.6s}.d4{animation-delay:.8s}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.6,.3,1),transform .9s cubic-bezier(.2,.6,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal-stagger.in>*{opacity:1;transform:none}
.reveal-stagger.in>*:nth-child(1){transition-delay:.05s}
.reveal-stagger.in>*:nth-child(2){transition-delay:.18s}
.reveal-stagger.in>*:nth-child(3){transition-delay:.31s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.44s}
.reveal-stagger.in>*:nth-child(5){transition-delay:.57s}
.reveal-stagger.in>*:nth-child(6){transition-delay:.70s}

/* ---- gold accents ---- */
.link-sweep{position:relative;display:inline-block;padding-bottom:2px}
.link-sweep::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.2,.6,.3,1);
}
.link-sweep:hover::after{transform:scaleX(1);transform-origin:left}

.btn-gold{
  background:var(--gold);color:var(--navy-900);
  transition:all .35s cubic-bezier(.2,.6,.3,1);
  display:inline-block;font-weight:600;
}
.btn-gold:hover{
  background:var(--gold-light);transform:translateY(-1px);
  box-shadow:0 12px 32px -12px rgba(199,164,75,.55);
}

.img-zoom{overflow:hidden}
.img-zoom img{transition:transform 1.4s cubic-bezier(.2,.6,.3,1)}
.img-zoom:hover img{transform:scale(1.06)}

.card-premium{
  background:#fff;border:1px solid var(--platinum);
  transition:all .5s cubic-bezier(.2,.6,.3,1);
}
.card-premium:hover{
  border-color:var(--gold);transform:translateY(-3px);
  box-shadow:0 24px 60px -20px rgba(10,31,61,.18);
}

.counter{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .hero-slide,.marquee-track,.ico-float,.ico-spin,.ico-pulse,.ico-bob,
  .ico-dash,.ico-takeoff,.ico-roll,.reveal,.reveal-stagger>*{
    animation:none!important;transition:none!important;
  }
  .reveal,.reveal-stagger>*{opacity:1;transform:none}
}

/* ============================================================
   TRACK PAGE - cinematic hero + animations
   ============================================================ */

/* Dark map tiles (from CartoDB) render nicely with the gold route */
.track-hero{
  position:relative;
  overflow:hidden;
  background:#040E1E;
  border-bottom:1px solid rgba(199,164,75,.15);
}
.track-hero .leaflet-container{
  background:#040E1E;
  font-family:'Inter',system-ui,sans-serif;
}
.track-map{
  height:520px;
  width:100%;
  position:relative;
}
@media (max-width:768px){ .track-map{height:380px} }
@media (max-width:640px){ .track-map{height:340px} }

/* Map overlay panel - top left */
.track-overlay{
  position:absolute;
  top:1.5rem;
  left:1.5rem;
  z-index:500;
  background:rgba(4,14,30,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(199,164,75,.3);
  border-radius:14px;
  padding:1rem 1.25rem;
  color:#fff;
  max-width:calc(100% - 3rem);
}
@media (max-width:640px){ .track-overlay{top:1rem;left:1rem;padding:.75rem 1rem} }

.track-overlay .tk-label{
  font-size:9px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(199,164,75,.9); font-weight:600; margin-bottom:.25rem;
}
.track-overlay .tk-number{
  font-family:'Courier New',monospace;
  font-size:1.15rem; font-weight:700; color:#fff;
  letter-spacing:.05em; line-height:1.2;
}
.track-overlay .tk-status{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:.5rem; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600;
  color:#E4D4A8;
}

/* Live pulse dot */
.live-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#34D399; position:relative; flex-shrink:0;
}
.live-dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background:rgba(52,211,153,.35); animation:live-ping 1.8s ease-out infinite;
}
@keyframes live-ping{
  0% {transform:scale(1); opacity:.9}
  100% {transform:scale(2.4); opacity:0}
}

/* Map marker animations */
.track-marker-wrap{
  position:relative;
  width:44px; height:44px;
}
.track-marker-icon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 4px 12px rgba(199,164,75,.5));
}
.track-marker-icon svg{
  width:22px; height:22px;
  transform-origin:center;
  transition:transform .6s ease;
  animation:marker-bob 2.4s ease-in-out infinite;
}
@keyframes marker-bob{
  0%,100%{transform:translateY(0) rotate(var(--heading,0deg))}
  50%{transform:translateY(-3px) rotate(var(--heading,0deg))}
}

.track-marker-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(199,164,75,.7);
  animation:marker-ring 2.6s ease-out infinite;
}
@keyframes marker-ring{
  0%{transform:scale(.4); opacity:.9}
  80%{transform:scale(1.8); opacity:0}
  100%{transform:scale(1.8); opacity:0}
}

.track-marker-pulse{
  position:absolute; left:50%; top:50%; width:14px; height:14px;
  border-radius:50%; background:#C7A44B; box-shadow:0 0 12px #C7A44B;
  transform:translate(-50%,-50%);
}

/* Route polyline dash animation */
.route-animated{
  stroke-dasharray:8 10;
  animation:route-flow 26s linear infinite;
}
@keyframes route-flow{
  to{ stroke-dashoffset:-180 }
}

/* Small history dots */
.history-dot{
  background:rgba(199,164,75,.55);
  border:1.5px solid #040E1E;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(199,164,75,.4);
}

/* ============================================================
   JOURNEY STEPPER
   ============================================================ */
.journey-stepper{
  background:#fff;
  border-bottom:1px solid #E5E1D8;
}
.stepper-row{
  display:flex; align-items:center; gap:0;
  max-width:64rem; margin:0 auto;
  padding:1.5rem 1rem;
  overflow-x:auto;
}
.stepper-step{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  flex-shrink:0; min-width:80px; position:relative; z-index:2;
}
.stepper-dot{
  width:36px; height:36px; border-radius:50%;
  background:#F4EFE6; color:#94A3B8;
  border:2px solid #E5E1D8;
  display:flex; align-items:center; justify-content:center;
  transition:all .5s cubic-bezier(.2,.6,.3,1);
  position:relative;
}
.stepper-step.done .stepper-dot{
  background:#0A1F3D; color:#C7A44B; border-color:#0A1F3D;
}
.stepper-step.current .stepper-dot{
  background:#C7A44B; color:#040E1E; border-color:#C7A44B;
  box-shadow:0 0 0 4px rgba(199,164,75,.18);
  animation:current-step-pulse 2s ease-in-out infinite;
}
.stepper-step.current .stepper-dot::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(199,164,75,.5);
  animation:current-step-ring 2.4s ease-out infinite;
}
@keyframes current-step-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
@keyframes current-step-ring{
  0%{transform:scale(.8); opacity:1}
  100%{transform:scale(1.6); opacity:0}
}
.stepper-dot svg{width:16px; height:16px}
.stepper-label{
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:#94A3B8; font-weight:600; text-align:center;
}
.stepper-step.done .stepper-label,
.stepper-step.current .stepper-label{ color:#0A1F3D }
.stepper-line{
  flex:1; height:2px; background:#E5E1D8;
  min-width:20px; position:relative; align-self:center;
  margin-top:-1.25rem;
}
.stepper-line.done{ background:#0A1F3D }
.stepper-line.done::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, #C7A44B, transparent);
  animation:line-shine 2.5s ease-in-out infinite;
}
@keyframes line-shine{
  0%,100%{opacity:0}
  50%{opacity:.7}
}
@media (max-width:640px){
  .stepper-label{font-size:8px}
  .stepper-dot{width:30px; height:30px}
}

/* ============================================================
   TIMELINE REVEAL + CURRENT HIGHLIGHT
   ============================================================ */
.timeline-item{
  position:relative;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.timeline-item.in{ opacity:1; transform:none }

.timeline-item.current .tl-title{ color:#C7A44B }
.timeline-item.current .tl-marker{
  background:#C7A44B;
  box-shadow:0 0 0 4px rgba(199,164,75,.25), 0 0 20px rgba(199,164,75,.4);
  animation:current-tl-pulse 2.2s ease-in-out infinite;
}
@keyframes current-tl-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(199,164,75,.25), 0 0 20px rgba(199,164,75,.4)}
  50%{box-shadow:0 0 0 6px rgba(199,164,75,.35), 0 0 28px rgba(199,164,75,.6)}
}

/* Status banner (replaces the old solid banner) */
.status-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem; border-radius:100px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700;
}
.status-pill.delivered{ background:rgba(16,185,129,.15); color:#34D399; border:1px solid rgba(16,185,129,.3) }
.status-pill.in_transit{ background:rgba(59,130,246,.15); color:#93C5FD; border:1px solid rgba(59,130,246,.3) }
.status-pill.out_for_delivery{ background:rgba(129,140,248,.15); color:#A5B4FC; border:1px solid rgba(129,140,248,.3) }
.status-pill.created{ background:rgba(148,163,184,.15); color:#CBD5E1; border:1px solid rgba(148,163,184,.3) }
.status-pill.exception{ background:rgba(239,68,68,.15); color:#FCA5A5; border:1px solid rgba(239,68,68,.3) }
.status-pill.picked_up{ background:rgba(56,189,248,.15); color:#7DD3FC; border:1px solid rgba(56,189,248,.3) }

/* Auto-refresh indicator */
.live-indicator{
  position:absolute; bottom:1.5rem; right:1.5rem; z-index:500;
  background:rgba(4,14,30,.82); backdrop-filter:blur(10px);
  border:1px solid rgba(199,164,75,.3);
  border-radius:999px; padding:.5rem .9rem;
  color:#E4D4A8; font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; font-weight:600;
  display:inline-flex; align-items:center; gap:.5rem;
}
.live-indicator.paused{ opacity:.5 }

@media (prefers-reduced-motion:reduce){
  .route-animated,
  .track-marker-icon svg,
  .track-marker-ring,
  .live-dot::after,
  .stepper-step.current .stepper-dot::after,
  .stepper-line.done::after,
  .timeline-item.current .tl-marker{
    animation:none!important;
  }
  .timeline-item{opacity:1; transform:none}
}

/* ============================================================
   TRACK PAGE - cinematic hero + animations
   ============================================================ */
.track-hero{position:relative;overflow:hidden;background:#040E1E;border-bottom:1px solid rgba(199,164,75,.15);}
.track-hero .leaflet-container{background:#040E1E;font-family:'Inter',system-ui,sans-serif;}
.track-map{height:520px;width:100%;position:relative;}
@media (max-width:768px){ .track-map{height:380px} }
@media (max-width:640px){ .track-map{height:340px} }
.track-overlay{position:absolute;top:1.5rem;left:1.5rem;z-index:500;background:rgba(4,14,30,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(199,164,75,.3);border-radius:14px;padding:1rem 1.25rem;color:#fff;max-width:calc(100% - 3rem);}
@media (max-width:640px){ .track-overlay{top:1rem;left:1rem;padding:.75rem 1rem} }
.track-overlay .tk-label{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(199,164,75,.9);font-weight:600;margin-bottom:.25rem;}
.track-overlay .tk-number{font-family:'Courier New',monospace;font-size:1.15rem;font-weight:700;color:#fff;letter-spacing:.05em;line-height:1.2;}
.track-overlay .tk-status{display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#E4D4A8;}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#34D399;position:relative;flex-shrink:0;}
.live-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:rgba(52,211,153,.35);animation:live-ping 1.8s ease-out infinite;}
@keyframes live-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.track-marker-wrap{position:relative;width:44px;height:44px;}
.track-marker-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 4px 12px rgba(199,164,75,.5));}
.track-marker-icon svg{width:22px;height:22px;transform-origin:center;transition:transform .6s ease;animation:marker-bob 2.4s ease-in-out infinite;}
@keyframes marker-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.track-marker-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(199,164,75,.7);animation:marker-ring 2.6s ease-out infinite;}
@keyframes marker-ring{0%{transform:scale(.4);opacity:.9}80%{transform:scale(1.8);opacity:0}100%{transform:scale(1.8);opacity:0}}
.track-marker-pulse{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;background:#C7A44B;box-shadow:0 0 12px #C7A44B;transform:translate(-50%,-50%);}
.route-animated{stroke-dasharray:8 10;animation:route-flow 26s linear infinite;}
@keyframes route-flow{to{stroke-dashoffset:-180}}
.history-dot{background:rgba(199,164,75,.55);border:1.5px solid #040E1E;border-radius:50%;box-shadow:0 0 0 1px rgba(199,164,75,.4);}
.journey-stepper{background:#fff;border-bottom:1px solid #E5E1D8;}
.stepper-row{display:flex;align-items:center;gap:0;max-width:64rem;margin:0 auto;padding:1.5rem 1rem;overflow-x:auto;}
.stepper-step{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex-shrink:0;min-width:80px;position:relative;z-index:2;}
.stepper-dot{width:36px;height:36px;border-radius:50%;background:#F4EFE6;color:#94A3B8;border:2px solid #E5E1D8;display:flex;align-items:center;justify-content:center;transition:all .5s cubic-bezier(.2,.6,.3,1);position:relative;}
.stepper-step.done .stepper-dot{background:#0A1F3D;color:#C7A44B;border-color:#0A1F3D;}
.stepper-step.current .stepper-dot{background:#C7A44B;color:#040E1E;border-color:#C7A44B;box-shadow:0 0 0 4px rgba(199,164,75,.18);animation:current-step-pulse 2s ease-in-out infinite;}
@keyframes current-step-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.stepper-dot svg{width:16px;height:16px}
.stepper-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#94A3B8;font-weight:600;text-align:center;}
.stepper-step.done .stepper-label,.stepper-step.current .stepper-label{color:#0A1F3D}
.stepper-line{flex:1;height:2px;background:#E5E1D8;min-width:20px;position:relative;align-self:center;margin-top:-1.25rem;}
.stepper-line.done{background:#0A1F3D}
@media (max-width:640px){ .stepper-label{font-size:8px} .stepper-dot{width:30px;height:30px} }
.timeline-item{position:relative;opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.timeline-item.in{opacity:1;transform:none}
.timeline-item.current .tl-title{color:#C7A44B}
.timeline-item.current .tl-marker{background:#C7A44B;box-shadow:0 0 0 4px rgba(199,164,75,.25),0 0 20px rgba(199,164,75,.4);animation:current-tl-pulse 2.2s ease-in-out infinite;}
@keyframes current-tl-pulse{0%,100%{box-shadow:0 0 0 4px rgba(199,164,75,.25),0 0 20px rgba(199,164,75,.4)}50%{box-shadow:0 0 0 6px rgba(199,164,75,.35),0 0 28px rgba(199,164,75,.6)}}
.live-indicator{position:absolute;bottom:1.5rem;right:1.5rem;z-index:500;background:rgba(4,14,30,.82);backdrop-filter:blur(10px);border:1px solid rgba(199,164,75,.3);border-radius:999px;padding:.5rem .9rem;color:#E4D4A8;font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;gap:.5rem;}
@media (prefers-reduced-motion:reduce){
  .route-animated,.track-marker-icon svg,.track-marker-ring,.live-dot::after,.stepper-step.current .stepper-dot,.timeline-item.current .tl-marker{animation:none!important}
  .timeline-item{opacity:1;transform:none}
}

/* ============================================================
   TIMELINE VISIBILITY FIX
   Visible by default (no-JS safe). Only hidden for reveal
   animation if the JS ran and added .js-enabled to <html>.
   ============================================================ */
.timeline-item {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .6s ease, transform .6s ease;
}
.js-enabled .timeline-item:not(.in) {
  opacity: 0 !important;
  transform: translateY(16px) !important;
}
.js-enabled .timeline-item.in {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   OSM TILE DARK FILTER
   CARTO now requires an API key. We use OSM standard tiles (free,
   no key) and apply an invert + hue-rotate to get the dark premium
   look we had with CartoDB dark_all.
   ============================================================ */
.track-map .leaflet-tile {
  filter: invert(1) hue-rotate(180deg) brightness(0.82) contrast(0.95) saturate(0.7);
}
/* Keep markers and popups un-filtered */
.track-map .leaflet-marker-pane,
.track-map .leaflet-popup-pane,
.track-map .leaflet-control-container {
  filter: none;
}

/* ============================================================
   MARKER ANIMATION CLEANUP
   Problem: .track-marker-icon svg had animation:marker-bob which
   uses transform:translateY(). That overwrote the rotation.
   Solution: bob lives on .track-marker-bob wrapper. SVG keeps rotation.
   ============================================================ */
.track-marker-icon svg {
  animation: none !important;
  transform-origin: center;
}
.track-marker-bob {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: marker-bob 2.4s ease-in-out infinite;
}
.track-marker-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 12px rgba(199,164,75,.5));
  pointer-events: auto;
}

/* Parked marker (delivered/exception): no bob, no pulse, smaller footprint */
.track-marker-wrap.is-parked .track-marker-static {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.track-marker-wrap.is-parked .track-marker-icon svg {
  width: 28px;
  height: 28px;
}
/* Soft green halo for delivered markers */
.track-marker-wrap.is-parked .track-marker-static::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52,211,153,.22) 0%, transparent 65%);
  pointer-events: none;
}

/* ============================================================
   GLOBAL MOBILE RESPONSIVENESS
   ============================================================ */

/* Prevent horizontal overflow at any width */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Images and embeds never overflow their parent */
img, video, iframe, svg, table { max-width: 100%; }

/* On small screens, reduce aggressive vertical padding on sections and cards
   so long pages don't become endless scrolls. Overrides Tailwind utilities
   because site.css is loaded after Tailwind's injected styles. */
@media (max-width: 640px) {
  section.py-32 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  section.py-28 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  section.py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  section.py-16 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .p-10 { padding: 1.25rem !important; }
  .p-8 { padding: 1rem !important; }
  /* Slightly smaller display headings inside cards */
  .font-display.text-5xl { font-size: 2rem !important; line-height: 1.15 !important; }
  .font-display.text-6xl { font-size: 2.25rem !important; line-height: 1.15 !important; }
}

/* Ensure hero carousel slides don't overflow horizontally */
.hero-carousel { max-width: 100vw; }

/* Prevent long unbroken strings (tracking numbers, URLs) from breaking layout */
.font-mono, code { word-break: break-all; }