/* ========== Base ========== */
:root{
  --red-900:#5a0606;
  --red-800:#7a0808;
  --red-700:#a30b0b;
  --red-600:#c61010;
  --red-500:#ee1c1c;
  --red-400:#ff3a3a;
  --dark:#0c0708;
  --dark-2:#150b0c;
  --dark-3:#1c1011;
  --light:#f7f1f1;
  --muted:#c9b9b9;
  --gold:#ffd166;
  --shadow:0 30px 60px -20px rgba(255,30,30,.35);
  --radius:18px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,sans-serif;
  background:radial-gradient(ellipse at top,#1a0a0b 0%,#0a0506 60%,#000 100%);
  color:var(--light);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,92%);margin:0 auto}
.hl{
  background:linear-gradient(90deg,#ff5252,#ff8a00,#ffd166);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:900;
}

/* ========== Loader ========== */
#loader{
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(circle at center,#1a0a0b,#000);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .6s ease,visibility .6s;
}
#loader.hide{opacity:0;visibility:hidden}
.loader-truck{font-size:54px;color:#fff;animation:bounce 1.2s infinite}
.loader-truck i{filter:drop-shadow(0 0 20px rgba(255,40,40,.7))}
.loader-road{width:220px;height:4px;background:#2a1213;border-radius:99px;overflow:hidden;position:relative}
.loader-road span{position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ff3a3a,transparent);animation:roadrun 1.2s infinite}
#loader p{color:#ff9a9a;font-size:13px;letter-spacing:3px;text-transform:uppercase}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes roadrun{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ========== Header ========== */
#header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:14px 0;
  transition:all .35s var(--ease);
  background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);
  backdrop-filter:blur(0px);
}
#header.scrolled{
  background:rgba(10,5,5,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,40,40,.15);
  padding:10px 0;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{
  display:flex;align-items:center;gap:10px;
}
.brand-logo .d{
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--red-600),var(--red-800));
  color:#fff;font-family:'Oswald';font-weight:700;font-size:30px;line-height:1;
  box-shadow:0 8px 22px -8px rgba(255,40,40,.7), inset 0 0 0 2px rgba(255,255,255,.08);
}
.brand-logo strong{font-family:'Oswald';letter-spacing:2px;font-size:18px;display:block;line-height:1}
.brand-logo em{font-style:normal;letter-spacing:6px;font-size:10px;color:#ff8080;display:block}
nav{display:flex;gap:26px}
nav a{
  font-weight:600;font-size:14px;color:#e6d6d6;
  position:relative;padding:6px 0;
}
nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,#ff3a3a,#ffd166);
  transition:width .35s var(--ease);
}
nav a:hover{color:#fff}
nav a:hover::after{width:100%}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}

/* ========== Buttons ========== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:99px;border:0;cursor:pointer;
  font-weight:700;font-size:14px;letter-spacing:.3px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn-lg{padding:16px 28px;font-size:15px}
.btn-primary{
  background:linear-gradient(135deg,#ee1c1c,#a30b0b);
  color:#fff;
  box-shadow:0 12px 30px -8px rgba(255,40,40,.6);
  position:relative;overflow:hidden;
}
.btn-primary::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);
  transform:translateX(-120%);transition:transform .7s ease;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -10px rgba(255,40,40,.7)}
.btn-primary:hover::before{transform:translateX(120%)}
.btn-ghost{
  background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.18);
}
.btn-ghost:hover{border-color:#ff3a3a;color:#ffd1d1;background:rgba(255,40,40,.08)}
.btn-block{width:100%;justify-content:center}

/* ========== Hero ========== */
.hero{
  position:relative;min-height:100vh;
  padding:140px 0 80px;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 80% at 80% 20%,rgba(255,40,40,.25),transparent 60%),
    radial-gradient(40% 60% at 10% 80%,rgba(255,140,40,.15),transparent 60%),
    linear-gradient(180deg,#0e0506,#000);
  z-index:-3;
}
.hero-grid{
  position:absolute;inset:0;z-index:-2;
  background-image:
    linear-gradient(rgba(255,80,80,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,80,80,.06) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 70%);
}
.hero-glow{
  position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,40,40,.35),transparent 65%);
  top:-200px;right:-150px;filter:blur(40px);z-index:-1;
  animation:float 8s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(30px)}}

.hero-inner{
  display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center;
}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:99px;
  background:rgba(255,40,40,.12);border:1px solid rgba(255,40,40,.35);
  color:#ffb3b3;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  margin-bottom:22px;
}
.tag i{color:#ffd166}
.hero h1{
  font-family:'Oswald';font-weight:700;
  font-size:clamp(38px,5.4vw,68px);
  line-height:1.05;letter-spacing:-.5px;
  margin-bottom:22px;text-transform:uppercase;
}
.hero .lead{
  font-size:18px;color:var(--muted);max-width:560px;margin-bottom:32px;line-height:1.6;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:42px}
.hero-stats{display:flex;gap:36px;flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats strong{
  font-family:'Oswald';font-size:38px;color:#fff;line-height:1;
  background:linear-gradient(180deg,#fff,#ff8080);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-stats i{font-style:normal;font-size:22px}
.hero-stats span{font-size:12px;color:#a99595;letter-spacing:1px;text-transform:uppercase;margin-top:6px}

/* Hero Visual / Map */
.hero-visual{display:grid;place-items:center}
.map-card{
  position:relative;width:100%;max-width:460px;aspect-ratio:4/5;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 30%,rgba(255,40,40,.22),transparent 60%),
    linear-gradient(180deg,#1a0a0b,#0b0506);
  border:1px solid rgba(255,80,80,.18);
  box-shadow:var(--shadow);
  overflow:hidden;
  isolation:isolate;
}
.map-card::before{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='500' viewBox='0 0 400 500'><path d='M60 90 Q120 60 180 100 Q240 130 280 100 Q330 80 350 140 Q360 200 320 240 Q280 280 300 340 Q310 400 250 430 Q190 450 140 410 Q80 380 70 320 Q60 260 90 220 Q120 180 80 140 Z' fill='%23ff2a2a' opacity='.18' stroke='%23ff5252' stroke-width='1.5'/></svg>") center/contain no-repeat;
  z-index:0;
}
.map-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:24px 24px;
  z-index:0;
}
.map-shape{display:none}

.pin{position:absolute;display:flex;align-items:center;gap:8px;z-index:3}
.pin .dot{
  width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px rgba(255,40,40,.4),0 0 20px rgba(255,40,40,.8);
  position:relative;
}
.pin .dot::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(255,40,40,.6);
  animation:ping 2s ease-out infinite;
}
.pin .label{
  background:rgba(0,0,0,.75);border:1px solid rgba(255,80,80,.3);
  padding:5px 10px;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:.5px;
  backdrop-filter:blur(4px);
}
.pin-1{top:14%;left:12%}
.pin-2{top:46%;left:48%}
.pin-3{top:72%;right:10%}
@keyframes ping{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.4);opacity:0}}

.route{position:absolute;inset:0;width:100%;height:100%;z-index:2}
#routePath{
  filter:drop-shadow(0 0 8px rgba(255,40,40,.8));
  animation:dash 30s linear infinite;
}
@keyframes dash{to{stroke-dashoffset:-1000}}

.truck-wrap{
  position:absolute;width:90px;height:90px;z-index:4;
  offset-path:path("M 80 110 Q 200 220 220 280 T 330 380");
  offset-rotate:auto;
  animation:drive 12s linear infinite;
}
@keyframes drive{
  0%{offset-distance:0%}
  100%{offset-distance:100%}
}
.truck{
  display:grid;place-items:center;width:64px;height:64px;border-radius:14px;
  background:linear-gradient(135deg,#ff3a3a,#a30b0b);
  color:#fff;font-size:30px;
  box-shadow:0 14px 26px -8px rgba(255,40,40,.7), inset 0 0 0 2px rgba(255,255,255,.15);
  transform:translate(-50%,-50%);
  position:relative;
}
.truck-shadow{
  position:absolute;left:50%;top:60%;transform:translate(-50%,0);
  width:60px;height:8px;background:rgba(0,0,0,.55);border-radius:50%;filter:blur(6px);
}

/* Marquee */
.hero-marquee{
  margin-top:60px;border-top:1px solid rgba(255,80,80,.15);
  border-bottom:1px solid rgba(255,80,80,.15);
  background:rgba(0,0,0,.4);
  overflow:hidden;padding:14px 0;
}
.marquee-track{
  display:flex;gap:50px;white-space:nowrap;
  animation:marquee 28s linear infinite;
  font-weight:600;letter-spacing:1px;color:#ffd1d1;font-size:14px;text-transform:uppercase;
}
.marquee-track span{display:inline-flex;align-items:center;gap:10px}
.marquee-track i{color:#ff5252}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ========== Sections ========== */
.section{padding:120px 0;position:relative}
.section-dark{
  background:linear-gradient(180deg,transparent,#0a0405 30%,#0a0405 70%,transparent);
}
.section-head{text-align:center;max-width:760px;margin:0 auto 64px}
.kicker{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:4px;
  color:#ff8080;text-transform:uppercase;margin-bottom:14px;
}
.kicker.light{color:#ffd1d1}
.section h2{
  font-family:'Oswald';font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,3.8vw,48px);line-height:1.1;margin-bottom:16px;
}
.section-head p{color:var(--muted);font-size:17px;line-height:1.6}

/* Grids */
.grid{display:grid;gap:24px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* Cards */
.card{
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,40,40,.04));
  border:1px solid rgba(255,80,80,.15);
  border-radius:var(--radius);
  padding:32px 26px;
  transition:transform .4s var(--ease), border-color .3s, box-shadow .4s;
  position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(255,40,40,.18),transparent 40%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.card:hover{
  transform:translateY(-8px);
  border-color:rgba(255,80,80,.5);
  box-shadow:0 30px 60px -25px rgba(255,40,40,.5);
}
.card:hover::before{opacity:1}
.card-icon{
  display:grid;place-items:center;width:58px;height:58px;border-radius:14px;
  background:linear-gradient(135deg,#ee1c1c,#7a0808);
  color:#fff;font-size:24px;margin-bottom:20px;
  box-shadow:0 10px 24px -8px rgba(255,40,40,.6);
}
.card h3{font-size:18px;margin-bottom:10px;letter-spacing:.3px}
.card p{color:var(--muted);font-size:14.5px;line-height:1.6}

/* Route */
.route-line{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(135deg,rgba(255,40,40,.08),rgba(0,0,0,.4));
  padding:50px 40px;border-radius:24px;
  border:1px solid rgba(255,80,80,.18);
  flex-wrap:wrap;
}
.route-stop{flex:1;min-width:200px;text-align:center;position:relative}
.stop-pin{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#ff3a3a,#a30b0b);color:#fff;font-size:24px;
  margin:0 auto 16px;box-shadow:0 0 0 6px rgba(255,40,40,.15),0 14px 30px -8px rgba(255,40,40,.6);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 6px rgba(255,40,40,.15),0 14px 30px -8px rgba(255,40,40,.6)}50%{box-shadow:0 0 0 14px rgba(255,40,40,.05),0 14px 30px -8px rgba(255,40,40,.6)}}
.route-stop h4{font-family:'Oswald';letter-spacing:2px;font-size:22px;margin-bottom:6px;text-transform:uppercase}
.route-stop p{color:var(--muted);font-size:13.5px;line-height:1.5}
.route-dash{
  flex:0 0 80px;height:3px;
  background:repeating-linear-gradient(90deg,#ff3a3a 0 12px,transparent 12px 22px);
  position:relative;
}
.route-dash::after{
  content:"\f0a4";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:#ff3a3a;font-size:14px;background:#0a0405;padding:0 6px;
}

/* Features */
.feature{
  display:flex;gap:18px;align-items:flex-start;
  padding:24px;border-radius:var(--radius);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,80,80,.12);
  transition:transform .35s var(--ease),background .3s;
}
.feature:hover{transform:translateY(-4px);background:rgba(255,40,40,.06)}
.feature > i{
  font-size:30px;
  background:linear-gradient(135deg,#ff5252,#ffd166);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  flex-shrink:0;
}
.feature h3{font-size:18px;margin-bottom:6px}
.feature p{color:var(--muted);font-size:14.5px;line-height:1.55}

/* CTA */
.cta-section{
  position:relative;padding:120px 0;
  background:
    radial-gradient(60% 80% at 0% 50%,rgba(255,40,40,.25),transparent 60%),
    linear-gradient(135deg,#1a0708,#0a0405);
  border-top:1px solid rgba(255,80,80,.15);
  border-bottom:1px solid rgba(255,80,80,.15);
  overflow:hidden;
}
.cta-section::before{
  content:"";position:absolute;right:-100px;bottom:-100px;width:500px;height:500px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,140,40,.3),transparent 70%);
  filter:blur(40px);
}
.cta-inner{
  position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;
}
.cta-inner h2{font-family:'Oswald';font-size:clamp(28px,3.6vw,44px);text-transform:uppercase;line-height:1.1;margin-bottom:14px}
.cta-inner p{color:var(--muted);font-size:17px;margin-bottom:28px;max-width:560px;line-height:1.6}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.contact-list{list-style:none;display:flex;flex-direction:column;gap:10px;color:#e0caca;font-size:14.5px}
.contact-list i{color:#ff5252;margin-right:10px;width:18px;text-align:center}

.cta-card{
  background:linear-gradient(160deg,#fff,#ffeded);
  color:#1a0708;border-radius:24px;padding:30px;
  box-shadow:0 40px 60px -20px rgba(0,0,0,.6);
  transform:rotate(-1deg);
  transition:transform .35s var(--ease);
}
.cta-card:hover{transform:rotate(0deg) translateY(-4px)}
.cta-card-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px dashed rgba(0,0,0,.15)}
.cta-card-head i{font-size:36px;color:#25D366}
.cta-card-head strong{display:block;font-size:16px}
.cta-card-head span{font-size:12px;color:#666}
.cta-card p{font-size:16px;font-style:italic;color:#3a1a1b;margin-bottom:20px;line-height:1.5}

/* Footer */
footer{
  background:#070304;padding:60px 0 0;border-top:1px solid rgba(255,80,80,.1);
}
.footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:40px}
footer .brand p{color:#988;margin-top:14px;font-size:14px;line-height:1.6;max-width:380px}
footer h5{font-family:'Oswald';letter-spacing:2px;font-size:14px;margin-bottom:16px;color:#fff;text-transform:uppercase}
footer p{color:#aa9090;font-size:14px;margin-bottom:8px}
footer p i{color:#ff5252;margin-right:8px}
.copyright{
  text-align:center;padding:22px 0;border-top:1px solid rgba(255,255,255,.05);
  font-size:12.5px;color:#777;letter-spacing:.5px;
}

/* WhatsApp Float */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:90;
  width:62px;height:62px;border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  display:grid;place-items:center;color:#fff;font-size:30px;
  box-shadow:0 14px 30px -6px rgba(37,211,102,.55);
  transition:transform .3s var(--ease);
}
.wa-float:hover{transform:scale(1.08)}
.wa-float .pulse{
  position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:waping 2s ease-out infinite;
}
@keyframes waping{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Mobile menu */
.mobile-nav{
  position:fixed;inset:0;background:rgba(8,3,4,.96);backdrop-filter:blur(14px);
  z-index:99;display:none;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  opacity:0;transition:opacity .3s;
}
.mobile-nav.open{display:flex;opacity:1}
.mobile-nav a{font-family:'Oswald';font-size:24px;letter-spacing:2px;text-transform:uppercase;color:#fff}
.mobile-nav .close{position:absolute;top:24px;right:24px;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}

/* ========== Responsive ========== */
@media (max-width:980px){
  nav{display:none}
  .nav-cta{display:none}
  .menu-toggle{display:block}
  .hero-inner{grid-template-columns:1fr;gap:60px}
  .hero{padding:120px 0 60px;min-height:auto}
  .map-card{max-width:380px;margin:0 auto}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;gap:30px}
  .route-dash{display:none}
}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr}
  .hero-stats{gap:24px}
  .hero-stats strong{font-size:30px}
  .section{padding:80px 0}
  .cta-section{padding:80px 0}
  .route-line{padding:34px 20px}
}