/* ============================================================
   BUNMIWELL LOGISTICS — DESIGN TOKENS
   ============================================================ */
:root{
  /* colour: derived from the brand mark's exact indigo-navy */
  --navy:        #130B47;
  --navy-2:      #1D1265;
  --navy-3:      #241A73;
  --ink:         #0A0620;
  --steel:       #3E6FD9;
  --steel-light: #6E93F0;
  --chrome:      #CBD1E4;
  --crimson:     #D4293C;
  --paper:       #F7F6F3;
  --paper-2:     #EEEEF0;
  --ash:         #5C5E6D;
  --ash-light:   #8B8DA0;
  --white:       #FFFFFF;

  --font-display: 'Fraunces', serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --container: 1240px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; font-weight:600; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.025; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--chrome); margin-bottom:22px;
}
.eyebrow--dark{ color:var(--steel); }
.eyebrow__dot{
  width:6px; height:6px; border-radius:50%; background:var(--crimson);
  box-shadow:0 0 0 3px rgba(212,41,60,.18);
  flex:none;
}

.section__head{ max-width:640px; margin:0 auto 64px; text-align:center; }
.section__title{
  font-size:clamp(2rem, 3.4vw, 2.9rem);
  line-height:1.12; letter-spacing:-.01em; color:var(--ink);
}
.section__title--light{ color:var(--white); }
.section__sub{
  margin-top:18px; font-size:16.5px; line-height:1.65; color:var(--ash);
  max-width:520px;
}
.section__sub--light{ color:rgba(255,255,255,.68); }
.section__head .section__sub{ margin-left:auto; margin-right:auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border-radius:100px; border:1px solid transparent;
  font-size:14.5px; font-weight:600; letter-spacing:.01em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s, color .3s;
  white-space:nowrap;
}
.btn--primary{
  background:linear-gradient(135deg, var(--steel-light), var(--steel));
  color:var(--white);
  box-shadow:0 10px 26px -8px rgba(62,111,217,.55);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(62,111,217,.65); }
.btn--ghost{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.22);
  color:var(--white);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); transform:translateY(-2px); }
.btn--outline{
  background:transparent; border-color:rgba(255,255,255,.3); color:var(--white);
}
.btn--outline:hover{ background:var(--white); color:var(--navy); }
.btn--small{ padding:11px 22px; font-size:13.5px; }
.btn--full{ width:100%; padding:17px; font-size:15px; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:20px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-solid{
  background:rgba(19,11,71,.92);
  backdrop-filter:blur(14px);
  padding:13px 0;
  box-shadow:0 10px 30px -14px rgba(10,6,32,.6);
}
.nav__inner{
  max-width:var(--container); margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__logo{ width:42px; height:42px; border-radius:10px; object-fit:cover; }
.nav__brandtext{ display:flex; flex-direction:column; line-height:1.1; }
.nav__brandtext strong{ font-family:var(--font-display); font-size:16.5px; color:var(--white); letter-spacing:.01em; }
.nav__brandtext em{ font-style:normal; font-size:10.5px; letter-spacing:.22em; color:var(--chrome); text-transform:uppercase; }

.nav__links{ display:flex; gap:36px; }
.nav__links a{
  font-size:14px; font-weight:600; color:rgba(255,255,255,.82);
  position:relative; padding:6px 0; transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--steel-light); transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--white); }
.nav__links a:hover::after{ width:100%; }

.nav__actions{ display:flex; align-items:center; gap:18px; }
.nav__phone{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.85); }
.nav__phone:hover{ color:var(--white); }

.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.nav__burger span{ width:22px; height:2px; background:var(--white); border-radius:2px; transition:transform .3s, opacity .3s; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh;
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, var(--ink) 100%);
  overflow:hidden;
  display:flex; align-items:center;
  padding:130px 0 90px;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bgimg{
  position:absolute; top:0; right:-8%; height:100%; width:75%; object-fit:cover;
  opacity:.32; filter:blur(1px) saturate(1.05);
  -webkit-mask-image:linear-gradient(to left, black 30%, transparent 92%);
  mask-image:linear-gradient(to left, black 30%, transparent 92%);
}
.hero__bgfade{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 15% 20%, rgba(62,111,217,.18), transparent 60%),
    linear-gradient(180deg, rgba(10,6,32,.1), var(--ink) 100%);
}

.hero__inner{
  position:relative; z-index:2;
  max-width:var(--container); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center;
  width:100%;
}

.hero__headline{
  font-size:clamp(2.6rem, 4.6vw, 4rem);
  line-height:1.06; letter-spacing:-.015em; color:var(--white);
  font-weight:500;
}
.hero__headline--accent{
  background:linear-gradient(100deg, var(--chrome), var(--steel-light) 60%, var(--chrome));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  margin-top:26px; max-width:460px; font-size:16.5px; line-height:1.7;
  color:rgba(255,255,255,.62);
}
.hero__cta{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }

.routeline{
  margin-top:56px; display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.5); max-width:460px;
}
.routeline__label{ white-space:nowrap; color:rgba(255,255,255,.72); }
.routeline__track{
  position:relative; flex:1; height:1px; background:rgba(255,255,255,.18);
  min-width:60px;
}
.routeline__dot{
  position:absolute; top:50%; left:0; width:7px; height:7px; border-radius:50%;
  background:var(--crimson); transform:translateY(-50%);
  box-shadow:0 0 0 4px rgba(212,41,60,.2);
  animation:routeTravel 4.5s ease-in-out infinite;
}

.hero__stack{ position:relative; height:520px; }
.hero__card{
  position:absolute; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 40px 70px -25px rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.08);
}
.hero__card img{ width:100%; height:100%; object-fit:cover; }
.hero__card--main{ top:0; right:0; width:88%; height:390px; }
.hero__card--sub{
  bottom:0; left:-4%; width:56%; height:190px;
  box-shadow:0 30px 50px -20px rgba(0,0,0,.7);
}
.hero__cardtag{
  position:absolute; left:14px; bottom:14px;
  background:rgba(10,6,32,.65); backdrop-filter:blur(6px);
  color:var(--white); font-size:11px; font-weight:600;
  padding:7px 13px; border-radius:100px; letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.14);
}
.hero__glow{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(62,111,217,.35), transparent 70%);
  top:20%; right:10%; z-index:-1; filter:blur(10px);
}

.hero__scroll{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:1.5px solid rgba(255,255,255,.35);
  border-radius:100px; z-index:3;
}
.hero__scroll span{
  position:absolute; top:8px; left:50%; width:4px; height:8px; margin-left:-2px;
  background:var(--white); border-radius:3px;
  animation:scrollDot 2s ease-in-out infinite;
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{ background:var(--ink); padding:52px 0; }
.trust__inner{
  max-width:var(--container); margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.trust__stat{ text-align:center; flex:1; }
.trust__num{
  font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem);
  color:var(--white); font-weight:600;
}
.trust__plus{
  font-family:var(--font-display); font-size:clamp(1.2rem,2vw,1.6rem);
  color:var(--steel-light); font-weight:500;
}
.trust__label{
  display:block; margin-top:8px; font-size:12.5px; color:rgba(255,255,255,.5);
  letter-spacing:.03em;
}
.trust__div{ width:1px; height:46px; background:rgba(255,255,255,.12); flex:none; }

/* ============================================================
   SERVICES
   ============================================================ */
.services{ padding:130px 0 110px; max-width:var(--container); margin:0 auto; padding-left:32px; padding-right:32px; }
.services__grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;
}
.scard{
  background:var(--white); border:1px solid #E7E7EA; border-radius:var(--radius-md);
  padding:32px 26px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.scard:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 50px -25px rgba(19,11,71,.25);
  border-color:transparent;
}
.scard__icon{
  display:flex; align-items:center; justify-content:center;
  width:50px; height:50px; border-radius:13px;
  background:linear-gradient(135deg, var(--navy), var(--navy-2));
  color:var(--chrome); margin-bottom:20px;
}
.scard__icon svg{ width:24px; height:24px; }
.scard h3{ font-size:18px; color:var(--ink); margin-bottom:10px; font-weight:600; }
.scard p{ font-size:14.5px; line-height:1.6; color:var(--ash); }

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why{
  background:linear-gradient(160deg, var(--navy) 0%, var(--ink) 100%);
  padding:120px 0;
}
.why__inner{
  max-width:var(--container); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:start;
}
.why__side .btn{ margin-top:34px; }
.why__grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.wcard{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md); padding:30px 26px;
  transition:background .35s, transform .35s var(--ease), border-color .35s;
}
.wcard:hover{ background:rgba(255,255,255,.08); transform:translateY(-4px); border-color:rgba(255,255,255,.22); }
.wcard__num{
  font-family:var(--font-mono); font-size:12px; color:var(--steel-light);
  letter-spacing:.08em;
}
.wcard h4{ margin-top:16px; font-size:17px; color:var(--white); font-weight:600; }
.wcard p{ margin-top:10px; font-size:14px; line-height:1.6; color:rgba(255,255,255,.55); }

/* ============================================================
   FLEET
   ============================================================ */
.fleet{ padding:130px 0; max-width:var(--container); margin:0 auto; padding-left:32px; padding-right:32px; }
.fleet__grid{
  display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:300px; gap:20px;
}
.fcard{
  position:relative; margin:0; border-radius:var(--radius-lg); overflow:hidden;
  isolation:isolate;
}
.fcard--wide{ grid-column:span 2; }
.fcard img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.fcard::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,6,32,.86) 0%, rgba(10,6,32,.15) 55%, transparent 75%);
  z-index:1;
}
.fcard:hover img{ transform:scale(1.06); }
.fcard figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 28px;
}
.fcard__eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel-light);
}
.fcard h3{
  margin-top:8px; font-size:22px; color:var(--white); font-weight:600;
}
.fcard p{ margin-top:6px; font-size:13.5px; color:rgba(255,255,255,.68); }

/* ============================================================
   CONTACT / FORM
   ============================================================ */
.contact{
  background:linear-gradient(180deg, var(--ink) 0%, var(--navy) 100%);
  padding:130px 0;
}
.contact__inner{
  max-width:var(--container); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px;
}
.contact__details{ margin-top:44px; display:flex; flex-direction:column; gap:22px; }
.contact__details div{ display:flex; flex-direction:column; gap:4px; }
.contact__label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.4);
}
.contact__details a, .contact__details span{ font-size:15.5px; color:var(--white); font-weight:500; }
.contact__details a:hover{ color:var(--steel-light); }

.contact__form{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding:40px;
  backdrop-filter:blur(10px);
}
.ff__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ff{ margin-bottom:18px; }
.ff label{
  display:block; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.7);
  margin-bottom:8px; letter-spacing:.02em;
}
.ff label span{ color:rgba(255,255,255,.35); font-weight:400; }
.ff input, .ff select, .ff textarea{
  width:100%; padding:13px 15px; border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
  color:var(--white); font-size:14.5px; transition:border-color .3s, background .3s;
  resize:vertical;
}
.ff input::placeholder, .ff textarea::placeholder{ color:rgba(255,255,255,.3); }
.ff input:focus, .ff select:focus, .ff textarea:focus{
  outline:none; border-color:var(--steel-light); background:rgba(255,255,255,.07);
}
.ff select option{ background:var(--navy); color:var(--white); }
.ff input[type="date"], .ff input[type="time"], .ff input[type="file"]{ color-scheme:dark; }

.ff__checks{ display:flex; gap:26px; margin-bottom:22px; flex-wrap:wrap; }
.ff__check{ display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(255,255,255,.72); cursor:pointer; }
.ff__check input{ width:17px; height:17px; accent-color:var(--steel); }

.ff__success{
  display:none; margin-top:16px; text-align:center; font-size:14px;
  color:var(--steel-light); font-weight:500;
}
.ff__success.is-visible{ display:block; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); padding:90px 0 0; }
.footer__top{
  max-width:var(--container); margin:0 auto; padding:0 32px 70px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer__brand img{ width:52px; height:52px; border-radius:12px; margin-bottom:20px; }
.footer__brand p{ font-size:14px; line-height:1.65; color:rgba(255,255,255,.5); max-width:280px; }
.footer__social{ display:flex; gap:12px; margin-top:24px; }
.footer__social a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.6);
  transition:background .3s, color .3s, border-color .3s;
}
.footer__social a:hover{ background:var(--steel); color:var(--white); border-color:var(--steel); }

.footer__col h5{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.4); margin-bottom:20px; font-weight:500;
}
.footer__col{ display:flex; flex-direction:column; gap:13px; }
.footer__col a, .footer__col span{ font-size:14.5px; color:rgba(255,255,255,.68); }
.footer__col a:hover{ color:var(--white); }

.footer__bottom{
  max-width:var(--container); margin:0 auto; padding:26px 32px;
  display:flex; justify-content:space-between; font-size:12.5px;
  color:rgba(255,255,255,.35); font-family:var(--font-mono); letter-spacing:.02em;
}