/* Reference-aligned hero: every overlay shares the same 1812 x 868 coordinates. */
.brand-vector{display:block;max-width:200px;max-height:50px;height:auto;object-fit:contain}
.hero-hd{display:block;padding:0;background:#fffaf4;border:1.5px solid #ff5108;border-radius:24px;overflow:hidden}
.hero-canvas{position:relative;width:100%;max-width:1812px;margin:auto;aspect-ratio:1812/868;isolation:isolate;overflow:hidden;border-radius:20px}
.hero-art{display:block;width:100%;height:100%}
.flight-route{fill:none;stroke:#ff6316;stroke-width:2;stroke-dasharray:10 8;animation:route-flow 18s linear infinite}
.flight-motion{animation:flight-glide 10s ease-in-out infinite;transform-origin:1540px 78px;will-change:transform}
.truck-motion{animation:truck-drive 9s ease-in-out infinite;will-change:transform}
.map-pin{transform-box:fill-box;transform-origin:50% 100%;animation:pin-pop 5.8s var(--delay) infinite;filter:drop-shadow(0 2px 4px #ff790044)}
.hero-cta-overlay{position:absolute;left:3.87%;top:73.85%;width:21.1%;height:8.6%;border-radius:12px;transition:background .2s}
.hero-cta-overlay:hover{background:#ffffff22}
.hero-service-hotspots{position:absolute;left:30.68%;top:12.3%;width:12.32%;height:61%;display:flex;flex-direction:column;gap:1.2%}
.hero-hotspot{flex:1;border-radius:14px;transition:background .2s}.hero-hotspot:hover{background:#ff7a0014}
.hero-hd a:focus-visible,.hero-motion:focus-visible{outline:3px solid #083c68;outline-offset:3px}
.hero-motion{position:absolute;right:12px;bottom:12px;width:36px;height:36px;display:grid;place-items:center;border:1px solid #ffd1af;border-radius:50%;background:#fffcf0e8;color:#a04414;cursor:pointer;font-size:16px;z-index:3}
.hero-hd.is-paused *{animation-play-state:paused!important}
.mobile-hero-copy,.mobile-services{display:none}
@keyframes flight-glide{0%,100%{transform:translate(-22px,7px) rotate(-1deg)}50%{transform:translate(30px,-8px) rotate(1deg)}}
@keyframes truck-drive{0%,100%{transform:translate(10px,-2px)}50%{transform:translate(-45px,7px)}}
@keyframes pin-pop{0%,10%,100%{transform:scale(.78);opacity:.7}22%{transform:scale(1.13);opacity:1}32%,78%{transform:scale(1);opacity:1}90%{transform:scale(.78);opacity:.7}}
@keyframes route-flow{to{stroke-dashoffset:-180}}
@media(max-width:700px){
.mobile-hero-copy{display:block;padding:32px 24px 22px}.mobile-hero-copy .eyebrow{font-size:11px;line-height:1.6;letter-spacing:.3px}.hero-hd .mobile-hero-copy h1{font-size:clamp(44px,10vw,65px);line-height:1.02;margin:18px 0;letter-spacing:-2px}.mobile-hero-copy em{font-style:normal;color:#ff4c08}.mobile-hero-copy>p:not(.eyebrow){font-size:16px;line-height:1.65;color:#6b788d}.mobile-hero-copy .button{margin-top:20px;font-size:15px;padding:16px 20px}.hero-canvas{width:175%;max-width:none;margin-left:-75%;aspect-ratio:1812/868}.hero-cta-overlay,.hero-service-hotspots{display:none}.hero-motion{right:12px;bottom:8px}.mobile-services{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:20px 24px 28px}.mobile-services a{padding:13px 11px;border:1px solid #ffd7b3;background:#fff;border-radius:10px;font-size:12px;font-weight:700}.mp-inner .marquee-wrap{width:100%}
}
@media(prefers-reduced-motion:reduce){.hero-hd *,.marquee-track{animation:none!important}.hero-motion{display:none}}

/* ══════════════════════════════════════════════════════
   MARKETPLACE LOGO STRIP — Infinite scrolling marquee
   ══════════════════════════════════════════════════════ */
.marketplace-strip {
  background: linear-gradient(180deg, #fff9f4 0%, #fff 100%);
  padding: 44px 0 48px;
  overflow: hidden;
  border-bottom: 1px solid #f0e8e0;
}

.mp-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 36px;
}

.mp-label {
  min-width: 110px;
  flex-shrink: 0;
}

.mp-label .line {
  width: 28px;
  height: 2px;
  background: var(--orange);
  display: block;
  margin-bottom: 10px;
}

.mp-label p {
  font-size: 11px;
  letter-spacing: 1.4px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
  text-transform: uppercase;
}

.mp-label strong {
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
}

/* Marquee container — fades edges for polish.
   Padding + negative-margin trick gives vertical room for hover-scale
   without clipping the enlarged card. */
.marquee-wrap {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  padding: 22px 0;
  margin: -22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: mp-scroll 35s linear infinite;
}

/* Pause on hover so user can inspect a logo */
.marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}

/* Individual logo card */
.mp-card {
  flex-shrink: 0;
  width: 112px;
  height: 92px;
  background: #fff;
  border: 1px solid #f0e8e3;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px 8px;
  box-shadow: 0 4px 10px rgba(88,41,12,0.03);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
  cursor: pointer;
  position: relative;
}

/* Hover: enlarge + orange glow */
.mp-card:hover {
  transform: scale(1.18);
  box-shadow: 0 10px 28px rgba(233,71,8,0.18);
  border-color: #ffb88a;
  z-index: 3;
}

.mp-card svg {
  width: 64px;
  height: 36px;
  flex-shrink: 0;
}

.mp-card span {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: #8a95a3;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes mp-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .marketplace-strip { padding: 30px 0 34px; }
  .mp-inner {
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    padding: 0 20px;
  }
  .mp-card {
    width: 95px;
    height: 80px;
  }
  .mp-card svg {
    width: 54px;
    height: 30px;
  }
}

@media (max-width: 500px) {
  .mp-card {
    width: 85px;
    height: 72px;
    border-radius: 9px;
    gap: 4px;
  }
  .mp-card span { font-size: 7px; }
}

.header{max-width:1600px;height:88px;padding:0 4%;gap:40px}.header .brand{width:185px}.header .brand-vector{height:65px;width:185px;object-fit:contain}.header nav{align-items:center;gap:32px}.header nav a{display:inline-flex;align-items:center;gap:6px;line-height:24px}.nav-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.header .button.small{height:48px;padding:0 22px;gap:18px;line-height:1}.header nav a.active:after{bottom:3px}
.theme-toggle{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1.5px solid #ffd7b3;background:#fffbf6;color:#e94708;cursor:pointer;position:relative;overflow:hidden;transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 4px 12px rgba(233,71,8,0.12);flex-shrink:0}.theme-toggle:hover{transform:scale(1.1) rotate(15deg);background:#fff2e6;border-color:#ffb88a}.theme-toggle svg{width:20px;height:20px;transition:transform 0.4s ease,opacity 0.3s ease}.dark-mode .theme-toggle{background:#14253c;border-color:#27456b;color:#ff9e42;box-shadow:0 4px 14px rgba(0,0,0,0.4)}
.hero-hd{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;max-width:1780px;width:calc(100% - 32px);margin:16px auto;padding:20px 44px 20px 20px;gap:24px;background:#fffbf6;border:1.5px solid #ff5108;border-radius:24px;overflow:hidden;box-shadow:0 10px 35px rgba(255,81,8,0.07)}.mobile-hero-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(24px,3.5vw,60px);min-width:0}.mobile-hero-copy .eyebrow{font-size:clamp(10px,1vw,16px);letter-spacing:.5px}.hero-hd .mobile-hero-copy h1{font-size:clamp(48px,5.3vw,92px);line-height:1.01;letter-spacing:-.045em;margin:22px 0}.mobile-hero-copy>p:not(.eyebrow){font-size:clamp(15px,1.2vw,20px);line-height:1.65;color:#6b788d;max-width:570px}.mobile-hero-copy .button{margin-top:24px;font-size:clamp(15px,1.2vw,20px);padding:17px 25px}.mobile-hero-copy .hero-tagline{font-size:14px!important;margin-top:18px}.hero-canvas{width:100%;max-width:none;margin:0;aspect-ratio:1812/868;align-self:center;border-radius:20px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.04)}.hero-hd .hero-art{width:100%;height:100%;border-radius:20px;overflow:hidden}.hero-cta-overlay,.hero-service-hotspots{display:none}.mobile-services{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin-top:26px}.mobile-services a{padding:9px 12px;background:white;border:1px solid #f3d9c6;border-radius:9px;font-size:12px;font-weight:600}.mobile-services a:hover{border-color:#ff610d;color:#ed4b0a}.scene-caption{position:absolute;bottom:5%;left:4%;display:flex;align-items:center;gap:12px;background:#fffaf4f5;border:1.5px solid #ffe1c8;border-radius:12px;padding:13px 18px;box-shadow:0 8px 25px #99410e14}.scene-caption>span{font-size:32px;color:#ff4c08;line-height:1}.scene-caption strong{font-size:16px;display:block}.scene-caption small{font-size:12px;color:#788294;display:block}
.truck-motion{animation:truck-arrive 12s cubic-bezier(.22,.61,.36,1) infinite;transform-origin:1590px 706px}.flight-motion{animation:flight-travel 16s linear infinite;transform-origin:1544px 77px}
@keyframes truck-arrive{0%{transform:translate(420px,-90px) scale(.72);opacity:0}7%{opacity:1}44%,72%{transform:translate(-8px,0) scale(1);opacity:1}89%{transform:translate(-180px,42px) scale(1.02);opacity:0}100%{transform:translate(-180px,42px) scale(1.02);opacity:0}}
@keyframes flight-travel{0%{transform:translate(-590px,75px) rotate(-10deg);opacity:0}8%{opacity:1}45%{transform:translate(-240px,-2px) rotate(-3deg);opacity:1}76%{transform:translate(40px,3px) rotate(5deg);opacity:1}94%,100%{transform:translate(370px,80px) rotate(12deg);opacity:0}}
.dashboard-bar{transform-box:fill-box;transform-origin:center bottom;animation:bar-grow 7s var(--bar-delay) ease-in-out infinite}.sales-line{stroke-dasharray:1;animation:chart-draw 7s ease-in-out infinite}@keyframes bar-grow{0%,100%{transform:scaleY(.18)}35%,80%{transform:scaleY(1)}}@keyframes chart-draw{0%,100%{stroke-dashoffset:1}42%,80%{stroke-dashoffset:0}}
@media(max-width:1000px){.header{gap:20px}.header nav{gap:18px}.mobile-hero-copy{padding:30px}.hero-hd .mobile-hero-copy h1{font-size:58px}.mobile-services{gap:6px;margin-top:18px}.mobile-services a{font-size:11px;padding:7px 9px}.scene-caption{padding:9px 12px}.scene-caption strong{font-size:13px}.scene-caption small{font-size:10px}}
@media(max-width:700px){.header{height:78px;padding:0 22px}.header .brand,.header .brand-vector{width:150px}.header nav{align-items:flex-start}.hero-hd{grid-template-columns:1fr}.mobile-hero-copy{padding:32px 24px}.hero-hd .mobile-hero-copy h1{font-size:58px;margin:20px 0}.hero-canvas{width:100%;margin:0;aspect-ratio:1022/868}.mobile-services{display:flex}.scene-caption{bottom:4%;left:4%}.hero-motion{bottom:10px}}
@media(prefers-reduced-motion:reduce){.truck-motion,.flight-motion{transform:none;opacity:1}.sales-line{stroke-dashoffset:0}}

@media(max-width:700px){.hero-hd .mobile-hero-copy h1{font-size:clamp(44px,14vw,58px)}}


.hero-hd{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hero-canvas{aspect-ratio:1022/868;min-width:0}.mobile-hero-copy h1{max-width:100%}@media(max-width:700px){.hero-hd{grid-template-columns:minmax(0,1fr);padding:12px;gap:8px}.mobile-hero-copy{padding:24px 12px}.hero-hd .mobile-hero-copy h1{font-size:clamp(40px,12vw,58px)}}

/* Reference refinements: parked delivery truck and larger marketplace carousel. */
@media(min-width:701px){.hero-hd{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:20px}}
.truck-motion{animation:none!important;transform:none!important;opacity:1!important;will-change:auto}
.marketplace-strip{padding:34px 0 28px}.mp-inner{max-width:1560px;gap:28px}.mp-card{width:142px;height:114px;gap:10px;padding:16px 12px;overflow:hidden;isolation:isolate;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.mp-card svg{width:88px;height:51px}.mp-card img{width:100px;height:64px;object-fit:contain;mix-blend-mode:multiply}.mp-card span{font-size:10px;letter-spacing:.7px}.marquee-track{gap:20px;animation:mp-scroll 40s linear infinite;will-change:transform}.marquee-wrap{padding:24px 0;margin:-24px 0}.marquee-wrap:focus-within .marquee-track,.marquee-wrap.is-touching .marquee-track{animation-play-state:paused}
.mp-card::before{content:'';position:absolute;inset:-70%;background:linear-gradient(115deg,transparent 40%,#fff9 47%,#ffe7a8cc 50%,#fff9 53%,transparent 60%);transform:translateX(-100%) rotate(8deg);pointer-events:none;z-index:2}.mp-card::after{content:'✦';position:absolute;right:9px;top:5px;color:#ffad20;font-size:20px;opacity:0;transform:scale(.3);pointer-events:none}.mp-card:hover,.mp-card:focus-visible,.mp-card.is-sparkling{transform:translateY(-5px) scale(1.06);border-color:#ffb55f;box-shadow:0 10px 24px #ff8b0030;outline:none}.mp-card:hover::before,.mp-card:focus-visible::before,.mp-card.is-sparkling::before{animation:card-shimmer 1.3s ease infinite}.mp-card:hover::after,.mp-card:focus-visible::after,.mp-card.is-sparkling::after{animation:card-sparkle 1.3s ease infinite}@keyframes card-shimmer{to{transform:translateX(100%) rotate(8deg)}}@keyframes card-sparkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1) rotate(70deg)}}@keyframes mp-scroll{to{transform:translateX(calc(-50% - 10px))}}
.section.about{padding-top:38px}
@media(max-width:700px){.marketplace-strip{padding:24px 0}.mp-inner{gap:18px}.mp-card{width:118px;height:100px}.mp-card svg{width:76px;height:43px}.mp-card img{width:85px;height:54px}.mp-card span{font-size:9px}.section.about{padding-top:30px}}
@media(prefers-reduced-motion:reduce){.marquee-track,.mp-card::before,.mp-card::after{animation:none!important}.mp-card:hover::after,.mp-card:focus-visible::after{opacity:1;transform:none}.marquee-wrap{overflow-x:auto;mask-image:none;-webkit-mask-image:none}}

/* Theme Toggle Button & Dark Mode Overrides */
button.theme-toggle,
.theme-toggle {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1.5px solid #ffd2b3 !important;
  background: #fff8f2 !important;
  color: #ea4908 !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 14px rgba(233, 71, 8, 0.16) !important;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  outline: none !important;
}

button.theme-toggle:hover {
  transform: scale(1.08) rotate(12deg) !important;
  background: #fff0e4 !important;
  border-color: #ffb080 !important;
  box-shadow: 0 6px 20px rgba(233, 71, 8, 0.28) !important;
}

button.theme-toggle .sun-icon,
button.theme-toggle .moon-icon {
  width: 22px !important;
  height: 22px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin-top: -11px !important;
  margin-left: -11px !important;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease !important;
  pointer-events: none !important;
}

button.theme-toggle .sun-icon {
  opacity: 1 !important;
  transform: scale(1) rotate(0deg) !important;
}

button.theme-toggle .moon-icon {
  opacity: 0 !important;
  transform: scale(0.3) rotate(-120deg) !important;
}

html.dark-mode button.theme-toggle,
body.dark-mode button.theme-toggle,
html.dark-mode .theme-toggle,
body.dark-mode .theme-toggle {
  background: #102238 !important;
  border-color: #2b4970 !important;
  color: #ffb74d !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 183, 77, 0.15) !important;
}

html.dark-mode button.theme-toggle .sun-icon,
body.dark-mode button.theme-toggle .sun-icon {
  opacity: 0 !important;
  transform: scale(0.3) rotate(120deg) !important;
}

html.dark-mode button.theme-toggle .moon-icon,
body.dark-mode button.theme-toggle .moon-icon {
  opacity: 1 !important;
  transform: scale(1) rotate(0deg) !important;
}

html.dark-mode, body.dark-mode { background-color: #070f1a !important; color: #e2e8f0 !important; }
html.dark-mode header.header, body.dark-mode header.header { background: rgba(7, 15, 26, 0.94) !important; border-bottom: 1px solid #14253a !important; }
html.dark-mode .header nav a, body.dark-mode .header nav a { color: #94a3b8 !important; }
html.dark-mode .header nav a.active, body.dark-mode .header nav a.active, html.dark-mode .header nav a:hover, body.dark-mode .header nav a:hover { color: #ff6c14 !important; }
html.dark-mode .hero-hd, body.dark-mode .hero-hd { background: #0b1828 !important; border-color: #ff5108 !important; }
html.dark-mode .marketplace-strip, body.dark-mode .marketplace-strip { background: linear-gradient(180deg, #081424 0%, #070f1a 100%) !important; border-bottom-color: #15263b !important; }
html.dark-mode .mp-card, body.dark-mode .mp-card { background: #0f2035 !important; border-color: #1c3350 !important; }
html.dark-mode .mp-card span, body.dark-mode .mp-card span { color: #94a3b8 !important; }
html.dark-mode .mp-card svg text, body.dark-mode .mp-card svg text { fill: #e2e8f0 !important; }
html.dark-mode .mp-label p, body.dark-mode .mp-label p { color: #8fa0b5 !important; }
html.dark-mode .mp-label strong, body.dark-mode .mp-label strong { color: #ffffff !important; }