/*=====================================================================
  Hero + Single Window + How It Works  (scoped under .bx so the
  template's CSS is not affected)   Royal Blue + Gold + White
=====================================================================*/
.bx{
  --b-ink:#0b1a5e; --b-text:#5a6275; --b-blue:#0b1a5e; --b-blue-d:#0b1a5e;
  --b-gold:#f5b400; --b-gold-l:#ffd24d; --b-line:#e4eaf5; --b-soft:#f8f5f1;
  --b-shadow:0 10px 30px rgba(15,31,85,.08); --b-shadow-lg:0 22px 54px rgba(15,31,85,.15);
  font-family:"DM Sans",sans-serif; color:var(--b-text);
}
.bx *{box-sizing:border-box}
.bx h1,.bx h2,.bx h3,.bx h4{font-family:"Sora","DM Sans",sans-serif;color:var(--b-ink);letter-spacing:-.02em;margin:0;line-height:1.15}
.bx p{margin:0}
.bx ul{list-style:none;margin:0;padding:0}
.bx img{max-width:100%;display:block}
.bx .wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.bx .sec{padding:30px 0;position:relative}
@media(max-width:767px){.bx .sec{padding:70px 0}}

/* shared */
.bx .eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 13px/1 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#d99e00;margin-bottom:16px}
.bx .eyebrow:before{content:"";width:28px;height:2px;border-radius:2px;background:var(--b-gold)}
.bx .title{font-size:clamp(30px,4vw,46px);font-weight:800}
.bx .title em{font-style:normal;color:var(--b-blue)}
.bx .lead{font-size:18px;line-height:1.65;max-width:620px;margin-top:18px}
.bx .center{text-align:center}.bx .center .lead{margin-inline:auto}
.bx .sec-head{margin-bottom:56px}

.bx .bx-btn{display:inline-flex;align-items:center;gap:10px;font:700 15px/1 "DM Sans",sans-serif;padding:17px 30px;border-radius:50px;border:0;cursor:pointer;text-decoration:none;transition:all .25s ease;white-space:nowrap}
.bx .bx-primary{background:var(--b-blue);color:#fff;box-shadow:0 10px 24px rgba(11,26,94,.3)}
.bx .bx-primary:hover{background:var(--b-gold);color:var(--b-ink);transform:translateY(-3px)}
.bx .bx-ghost{background:#fff;color:var(--b-ink);border:1.5px solid #d5dcec}
.bx .bx-ghost:hover{background:var(--b-ink);color:#fff}

/* reveal */
.bx .rv{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.bx .rv.in{opacity:1;transform:none}
.bx .d1{transition-delay:.1s}.bx .d2{transition-delay:.2s}.bx .d3{transition-delay:.3s}.bx .d4{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.bx .rv{opacity:1;transform:none;transition:none}}

/*================ HERO (slider) ================*/
.bx .hero{position:relative;overflow:hidden;padding:90px 0 170px;isolation:isolate;background:#f4f7fd}
.bx .hero-bg{position:absolute;inset:0;z-index:-2;background:url(../img/slider-bg.jpg) center/cover no-repeat}
.bx .hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 42%,rgba(255,255,255,.15) 75%,rgba(255,255,255,0) 100%)}
.bx .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}
.bx .hero-tag{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:50px;background:#fff;border:1px solid #e3e8f4;font-size:14px;font-weight:500;color:var(--b-ink);margin-bottom:26px;box-shadow:0 6px 18px rgba(15,31,85,.06)}
.bx .hero-tag b{background:var(--b-gold);color:var(--b-ink);border-radius:50px;padding:5px 12px;font-size:12px;letter-spacing:.06em}
.bx .hero h1{font-size:clamp(38px,5.6vw,70px);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.bx .hero h1 span{display:block;color:var(--b-blue)}
.bx .hero p{font-size:19px;line-height:1.6;color:#4a5368;max-width:540px;margin:24px 0 36px}
.bx .hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.bx .hero-chips{display:flex;gap:22px;flex-wrap:wrap;margin-top:40px;color:#3c4560;font-size:15px}
.bx .hero-chips li{display:flex;align-items:center;gap:8px}
.bx .hero-chips i{color:var(--b-gold)}
.bx .hero-visual{position:relative;min-height:420px}
.bx .hero-ring{position:absolute;right:-60px;top:50%;width:520px;height:520px;transform:translateY(-50%);border-radius:50%;border:1px dashed rgba(26,63,176,.25);animation:bxSpin 60s linear infinite}
.bx .hero-ring:before{content:"";position:absolute;inset:60px;border-radius:50%;border:1px solid rgba(26,63,176,.12)}
.bx .hero-ring:after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--b-gold);box-shadow:0 0 16px var(--b-gold)}
@keyframes bxSpin{to{transform:translateY(-50%) rotate(360deg)}}
.bx .hero-truck{position:relative;z-index:2;width:118%;max-width:none;margin-left:-6%;filter:drop-shadow(0 40px 40px rgba(0,0,0,.35));animation:bxDrive 1.4s cubic-bezier(.2,.8,.2,1) both .2s}
@keyframes bxDrive{from{transform:translateX(30%);opacity:0}to{transform:none;opacity:1}}
.bx .hero-plane{position:absolute;z-index:3;top:-10px;right:0;width:46%;animation:bxFloat 5s ease-in-out infinite}
@keyframes bxFloat{50%{transform:translateY(-14px)}}
.bx .float-card{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;background:#fff;color:var(--b-ink);border-radius:14px;padding:12px 16px;box-shadow:var(--b-shadow-lg);font-size:14px;font-weight:600;animation:bxFloat 4s ease-in-out infinite}
.bx .float-card i{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#fff4cc;color:#d99e00;font-size:18px}
.bx .float-card small{display:block;color:#8a94b0;font-weight:500;font-size:12px}
.bx .fc-1{left:0;bottom:24px;animation-delay:.6s}
.bx .fc-2{right:4%;bottom:-10px;animation-delay:1.4s}
@media(max-width:992px){
  .bx .hero{padding:60px 0 150px}
  .bx .hero .wrap{grid-template-columns:1fr}
  .bx .hero-visual{min-height:300px}
  .bx .hero-ring{width:380px;height:380px;right:-40px}
  .bx .hero-truck{width:100%;margin:0}
  .bx .hero:before{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.85) 55%,rgba(255,255,255,.4) 100%)}
}
@media(max-width:560px){.bx .fc-2{display:none}.bx .fc-1{left:0;bottom:-6px}}

/* stats strip */
.bx .stats{margin-top:-90px;position:relative;z-index:5;margin-bottom:10px}
.bx .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:22px;box-shadow:var(--b-shadow-lg);overflow:hidden;border-bottom:3px solid var(--b-gold)}
.bx .stat{padding:32px 26px;display:flex;align-items:center;gap:18px;position:relative}
.bx .stat+.stat:before{content:"";position:absolute;left:0;top:26%;height:48%;width:1px;background:var(--b-line)}
.bx .stat i{flex:0 0 58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:24px;color:#fff;background:var(--b-blue)}
.bx .stat:nth-child(even) i{background:var(--b-gold);color:var(--b-ink)}
.bx .stat h3{font-size:34px;font-weight:800;line-height:1}
.bx .stat p{font-size:14px;color:#8a94b0;margin-top:6px;line-height:1.3}
@media(max-width:900px){.bx .stats-grid{grid-template-columns:repeat(2,1fr)}.bx .stat:nth-child(3):before{display:none}.bx .stat:nth-child(n+3){border-top:1px solid var(--b-line)}}
@media(max-width:480px){.bx .stat{padding:22px 16px;gap:12px}.bx .stat i{flex-basis:46px;height:46px;font-size:19px}.bx .stat h3{font-size:26px}}

/*================ SINGLE WINDOW ================*/
.bx .why{background:#fff}
.bx .why .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.bx .sw{background:var(--b-blue-d);border-radius:28px;padding:40px 26px;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;isolation:isolate}
.bx .sw:before{content:"";position:absolute;inset:0;background:url(../img/map-pattern.png) center/cover;opacity:.1;z-index:-1}
.bx .sw-node{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;text-align:center;font-size:14px}
.bx .sw-node i{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);font-size:22px;transition:all .3s}
.bx .sw-node:hover i{background:#fff;color:var(--b-blue)}
.bx .sw-top i{width:70px;height:70px;font-size:26px;background:#fff;color:var(--b-blue)}
.bx .sw-line{width:2px;height:44px;background:repeating-linear-gradient(180deg,var(--b-gold-l) 0 6px,transparent 6px 12px);margin:10px 0}
.bx .sw-hub{width:170px;height:170px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 12px rgba(255,255,255,.12),0 0 0 26px rgba(255,255,255,.06),0 20px 50px rgba(0,0,0,.3)}
.bx .sw-hub img{width:110px}
.bx .sw-bottom{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;padding-top:20px;border-top:2px dashed rgba(242,201,76,.6)}
.bx .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.bx .why-card{display:flex;gap:14px;padding:20px;border-radius:16px;background:#fff;border:1px solid var(--b-line);transition:all .3s}
.bx .why-card:hover{box-shadow:var(--b-shadow);transform:translateY(-4px);border-color:transparent}
.bx .why-card i{flex:0 0 44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--b-blue);color:#fff;font-size:18px}
.bx .why-card:nth-child(even) i{background:var(--b-gold);color:var(--b-ink)}
.bx .why-card h4{font-size:16px;margin-bottom:4px}
.bx .why-card p{font-size:14px;line-height:1.5}
@media(max-width:992px){.bx .why .wrap{grid-template-columns:1fr;gap:50px}}
@media(max-width:560px){.bx .why-grid{grid-template-columns:1fr}}
@media(max-width:480px){.bx .sw-bottom{grid-template-columns:1fr 1fr;row-gap:20px}}

/*================ HOW IT WORKS ================*/
.bx .process{background:var(--b-soft)}
.bx .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative}
.bx .steps:before{content:"";position:absolute;top:46px;left:12%;right:12%;border-top:2px dashed #e2cf8a;z-index:0}
.bx .step{text-align:center;position:relative;z-index:1;padding:0 8px}
.bx .step-ico{width:92px;height:92px;margin:0 auto 22px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:32px;color:var(--b-blue);box-shadow:var(--b-shadow);position:relative;transition:all .35s}
.bx .step-ico b{position:absolute;top:-4px;right:-4px;width:32px;height:32px;border-radius:50%;background:var(--b-gold);color:var(--b-ink);font:700 14px/32px "Sora",sans-serif}
.bx .step:hover .step-ico{background:var(--b-blue);color:#fff;transform:translateY(-6px)}
.bx .step h4{font-size:19px;margin-bottom:8px}
.bx .step p{font-size:15px;line-height:1.55}
@media(max-width:900px){.bx .steps{grid-template-columns:1fr 1fr;row-gap:44px}.bx .steps:before{display:none}}
@media(max-width:480px){.bx .steps{grid-template-columns:1fr}}
/* yellow highlight words */
.bx .hero h1 span,.bx .title em{color:#e8a900}

/* ---- truck on the road (not flying) ---- */
.bx .hero-visual{display:flex;align-items:flex-end;min-height:440px}
.bx .hero-road{position:absolute;z-index:1;left:-8%;right:-40%;bottom:0;height:86px;
  background:linear-gradient(180deg,#3a3f4b 0%,#23262e 100%);
  clip-path:polygon(6% 0,100% 0,100% 100%,0 100%);
  box-shadow:0 -6px 0 #f5b400 inset}
.bx .hero-road span{position:absolute;left:8%;right:0;top:42%;height:5px;
  background:repeating-linear-gradient(90deg,#fff 0 46px,transparent 46px 86px);opacity:.85;
  animation:bxLane 1.2s linear infinite}
@keyframes bxLane{to{background-position:-86px 0}}
.bx .hero-truck{margin-bottom:22px;filter:drop-shadow(0 18px 10px rgba(0,0,0,.45))}
.bx .hero-ring{top:42%}
.bx .fc-1{bottom:auto;top:58%}
.bx .fc-2{bottom:auto;top:66%}
.bx .hero-plane{top:-30px}
@media(max-width:992px){.bx .hero-visual{min-height:320px}.bx .hero-road{left:-16px;right:-16px;height:64px;clip-path:none}.bx .hero-truck{margin-bottom:16px}}
@media(max-width:560px){.bx .fc-1{top:52%}}
/* road reaches down to bottom of hero (no floating platform) */
.bx .hero-road{bottom:-175px;height:265px;left:-10%;right:-40%;clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);box-shadow:inset 0 6px 0 #f5b400}
.bx .hero-road span{top:38px}
.bx .hero-truck{margin-bottom:62px}
@media(max-width:992px){.bx .hero-road{bottom:-155px;height:225px;left:-16px;right:-16px;clip-path:none}.bx .hero-road span{top:30px}.bx .hero-truck{margin-bottom:52px}}
.bx .hero-truck{margin-bottom:50px}
.bx .fc-2{top:auto;bottom:-78px;right:6%}
@media(max-width:992px){.bx .hero-truck{margin-bottom:44px}}

/* ---- truck drives along the road (loop) ---- */
.bx .hero-truck{animation:bxRun 11s cubic-bezier(.45,.05,.35,1) infinite;will-change:transform,opacity}
@keyframes bxRun{
  0%   {transform:translateX(-65%);opacity:0}
  10%  {opacity:1}
  28%  {transform:translateX(0) translateY(0)}
  34%  {transform:translateX(0) translateY(-2px)}
  40%  {transform:translateX(0) translateY(0)}
  46%  {transform:translateX(0) translateY(-2px)}
  52%  {transform:translateX(0) translateY(0)}
  58%  {transform:translateX(0) translateY(-2px)}
  64%  {transform:translateX(0) translateY(0)}
  88%  {transform:translateX(115%);opacity:1}
  89%  {opacity:0}
  100% {transform:translateX(115%);opacity:0}
}
/* road dust/shadow under truck moves with it is not needed; lane lines keep moving */
.bx .hero-road span{animation-duration:.8s}
@media (prefers-reduced-motion:reduce){.bx .hero-truck{animation:none}}
/* truck enters from the edge of its column, never over the heading */
.bx .hero-visual{clip-path:inset(-300px -100vw -400px 0)}
.bx .hero-truck{width:112%;margin-left:0}
@media(max-width:992px){.bx .hero-visual{clip-path:none}.bx .hero-truck{width:100%}}

/* ---- truck wrapper (moves) + rotating wheels ---- */
.bx .truck-wrap{position:relative;z-index:2;width:112%;margin-bottom:50px;filter:drop-shadow(0 18px 10px rgba(0,0,0,.45));animation:bxRun 11s cubic-bezier(.45,.05,.35,1) infinite;will-change:transform,opacity}
.bx .truck-wrap .truck-img{width:100%;max-width:none;display:block}
.bx .wheel{position:absolute;display:block;pointer-events:none}
.bx .wheel i{position:absolute;inset:0;border-radius:50%;background-size:100% 100%;animation:bxSpinWheel .55s linear infinite}
@keyframes bxSpinWheel{to{transform:rotate(360deg)}}
@media(max-width:992px){.bx .truck-wrap{width:100%;margin-bottom:44px}}
@media (prefers-reduced-motion:reduce){.bx .truck-wrap,.bx .wheel i{animation:none}}
.bx .wheel-front{left:48.600%;top:79.539%;width:9.600%;height:13.833%;transform:scaleX(0.583)}
.bx .wheel-front i{background-image:url(../images/wheels/front.png)}
.bx .wheel-mid{left:25.600%;top:78.674%;width:8.000%;height:11.527%;transform:scaleX(0.450)}
.bx .wheel-mid i{background-image:url(../images/wheels/mid.png)}
.bx .wheel-rear{left:-1.000%;top:77.522%;width:7.200%;height:10.375%;transform:scaleX(0.333)}
.bx .wheel-rear i{background-image:url(../images/wheels/rear.png)}/* stat cards: top-left & right of the truck, off the road and wheels */
.bx .fc-1{top:6%;bottom:auto;left:0;right:auto}
.bx .fc-2{top:30%;bottom:auto;right:-2%;left:auto}
@media(max-width:992px){.bx .fc-1{top:2%;left:0}.bx .fc-2{display:flex;top:24%;right:0}}
@media(max-width:560px){.bx .fc-2{top:20%}}
.bx .fc-1{top:4%;left:0;right:auto;bottom:auto}
.bx .fc-2{top:calc(4% + 78px);left:0;right:auto;bottom:auto}
@media(max-width:992px){.bx .fc-1{top:0}.bx .fc-2{top:72px;left:0;right:auto}}
.bx .float-card{min-width:200px}
.bx .fc-2{top:calc(4% + 86px)}
@media(max-width:992px){.bx .fc-2{top:90px}}

/* ---- wheels v2: drawn wheels BEHIND the truck body (holes in truck-body.png) ---- */
.bx .truck-wrap .truck-img{position:relative;z-index:2}
.bx .wheel{z-index:1;border-radius:50%}
.bx .wheel i{background:url(../images/wheels/wheel.png) center/100% 100% no-repeat !important;animation:bxSpinWheel .7s linear infinite}
.bx .wheel:after{content:"";position:absolute;inset:0;border-radius:50%;background:url(../images/wheels/shade.png) center/100% 100% no-repeat}
.bx .wheel-front{left:45.170%;top:74.308%;width:18.060%;height:26.023%;transform:scaleX(0.558)}
.bx .wheel-mid{left:22.220%;top:72.651%;width:15.960%;height:22.997%;transform:scaleX(0.553)}
.bx .wheel-rear{left:-3.100%;top:72.478%;width:12.600%;height:18.156%;transform:scaleX(0.433)}