/* ============================================================
   CSS VARIABLES
============================================================ */
:root {
  --brand:       #bc98e1;
  --brand-dark:  #a07cc8;
  --brand-light: #ede5f8;
  --dark:        #1a1a2e;
  --gray-bg:     #f8f9fa;
  --text-muted:  #5c626e;
  --hero-bg: radial-gradient(circle at 80% 50%, #e1ccff 0%, #ecdfff 40%, #f6f0ff 100%);

  --font-main: 'Nunito', sans-serif;
  --font-heading: var(--font-main);
  --font-body:    var(--font-main);
  
  --f-brand:       var(--brand);
  --f-brand-dark:  var(--brand-dark);
  --f-brand-light: var(--brand-light);
  --f-dark:        var(--dark);
  --f-gray-bg:     var(--gray-bg);
  --f-font:        var(--font-main);

  --sf-brand:      var(--brand);
  --sf-brand-dark: var(--brand-dark);
  --sf-dark:       var(--dark);
  --sf-text:       var(--text-muted);
  --sf-font-sans:  var(--font-main);
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden;
  font-family: var(--font-body);
  scroll-behavior: smooth;
}

body {
  background: #fff;
}


/* ============================================================
   HEADER & NAVBAR
============================================================ */
#mainNavbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
  padding: 14px 0;
  background: var(--hero-bg);
  transition: box-shadow .3s ease, padding .3s ease;
}

#mainNavbar.scrolled {
  background: var(--hero-bg);
  box-shadow: 0 2px 20px rgba(188, 152, 225, .18);
  padding: 10px 0;
}

#mainNavbar .container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 12px 16px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-img {
  width: 150px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 4px;
}

.desktop-nav a {
  text-decoration: none;
  color: var(--dark);
  font-size: .93rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  transition: .2s;
}

.desktop-nav a:hover {
  background: rgba(255, 255, 255, .5);
  color: var(--brand-dark);
}

.desktop-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.login-link {
  text-decoration: none;
  color: var(--dark);
  font-size: .9rem;
  font-weight: 700;
  transition: .2s;
}

.login-link:hover {
  color: var(--brand-dark);
}

.btn-signup {
  display: inline-block;
  text-decoration: none;
  background: linear-gradient(135deg, #a478ff, #8e5ced);
  color: #fff !important;
  padding: 8px 20px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 800;
  transition: box-shadow .2s;
}

.btn-signup:hover {
  box-shadow: 0 6px 18px rgba(142, 92, 237, .35);
}

.hamburger-btn {
  display: none;
  border: 2px solid var(--brand);
  background: transparent;
  border-radius: 8px;
  padding: 5px 8px;
  margin-right: 10px;
  line-height: 1;
  cursor: pointer;
}

.hamburger-btn:focus {
  outline: none;
  box-shadow: none;
}

.mobile-right {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.mobile-right .login-link { font-size: .8rem; padding: 5px 8px; }
.mobile-right .btn-signup  { padding: 6px 12px; font-size: .78rem; }

#mobileMenu {
  max-width: 260px;
  z-index: 1060;
}

.offcanvas-header {
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(188, 152, 225, .2);
  padding: 16px 20px;
}

.offcanvas-body { padding: 0; }

.offcanvas-body a {
  display: block;
  padding: 14px 22px;
  text-decoration: none;
  color: var(--dark);
  font-size: .96rem;
  font-weight: 700;
  border-bottom: 1px solid #f2ecfa;
  transition: .2s;
}

.offcanvas-body a:hover {
  background: var(--brand-light);
  color: var(--brand);
}

@media (max-width: 991.98px) {
  .hamburger-btn    { display: block; }
  .desktop-nav      { display: none; }
  .desktop-actions  { display: none; }
  .mobile-right     { display: flex; }
}

@media (max-width: 575px) {
  .logo-img { width: 100px; }
}

/* ============================================================
   HERO SECTION
============================================================ */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--hero-bg);
  overflow: hidden;
  padding: 60px 0;
  padding-top: calc(80px + 60px);
}

.badge-fast {
  display: inline-block;
  background: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(160, 124, 200, 0.1);
  color: var(--dark);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 800;
  color: #1e2229;
  line-height: 1.15;
}

.highlight-text { color: #8e5ced; }

.hero-desc {
  font-size: 18px;
  color: #5c626e;
}

.btn-send {
  background: linear-gradient(135deg, #a478ff, #8e5ced);
  color: #fff;
  padding: 14px 32px;
  border-radius: 16px;
  border: none;
  font-weight: 700;
  transition: box-shadow .3s, transform .2s;
}

.btn-send:hover {
  box-shadow: 0 10px 25px rgba(142, 92, 237, .35);
  transform: translateY(-2px);
  color: #fff;
}

.rider-scene {
  position: relative;
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
  animation: riderFloat 2.2s ease-in-out infinite alternate;
}

@keyframes riderFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}

.rider-img {
  margin-top: 30px;
  width: 100%;
  display: block;
  position: relative;
  z-index: 2;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 15px 35px rgba(188, 153, 225, .35));
}

.floating-card {
  position: absolute;
  background: #fff;
  color: #1e2229;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
  border: 1px solid rgba(0, 0, 0, .05);
  transition: .3s;
}

.floating-card:hover { transform: scale(1.05); }

.fc-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #8e5ced;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(142, 92, 237, .35);
}

.card-1 { top: 60px; left: -25px; animation: floatA 3.2s ease-in-out infinite alternate; }
.card-2 { top: 150px; right: -30px; animation: floatB 3.8s ease-in-out infinite alternate; }

@keyframes floatA {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-14px) rotate(2deg); }
}

@keyframes floatB {
  from { transform: translateY(0) rotate(2deg); }
  to   { transform: translateY(-16px) rotate(-2deg); }
}

.map-pin {
  position: absolute;
  color: #8e5ced;
  font-size: 24px;
  opacity: .6;
}

.pin-1 { top: 40%; left: 6%; }
.pin-2 { top: 15%; right: 6%; }

@media (max-width: 991.98px) {
  .hero-section .col-lg-6:first-child { text-align: center; }
  .rider-scene { margin-top: 36px; }
  .btn-send { padding: 12px 26px; font-size: .95rem; border-radius: 12px; }
}

@media (max-width: 767px) {
  .floating-card { font-size: 10px; padding: 6px 10px; gap: 5px; }
  .fc-dot { width: 22px; height: 22px; font-size: 10px; }
  .card-1 { top: 30px; left: -8px; }
  .card-2 { top: 100px; right: -8px; }
  .map-pin { font-size: 16px; }
}

/* ============================================================
   FEATURES BENTO GRID
============================================================ */
.features-section{
    width:100%;
    padding:100px 24px;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
}

.features-container{ width:100%; max-width:1140px; }

.features-section-title{
    margin:0 0 60px;
    color:var(--f-dark);
    font:800 clamp(2rem,4vw,3rem)/1.2 var(--f-font);
    text-align:center;
    letter-spacing:-1px;
}

.features-highlight{ color:var(--f-brand-dark); }

.features-bento-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.f-card{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:clamp(24px,3vw,36px);
    background:#fff;
    border:1px solid #eef0f3;
    border-radius:20px;
    box-shadow:0 4px 20px rgba(0,0,0,.02);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}

.f-card:hover{
    transform:translateY(-5px);
    border-color:var(--f-brand);
    box-shadow:0 15px 35px rgba(160,124,200,.08);
}

.f-icon-wrapper{
    width:50px;
    height:50px;
    margin-bottom:28px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--f-brand-light);
    color:var(--f-brand-dark);
    border-radius:14px;
    transition:transform .3s ease;
}

.f-card:hover .f-icon-wrapper{ transform:scale(1.05); }
.f-icon-wrapper svg{ width:24px; height:24px; }
.f-card-content{ flex:1; }

.f-card h3{
    margin:0 0 12px;
    color:var(--f-dark);
    font-family:var(--f-font);
    font-size:1.35rem;
    font-weight:700;
    letter-spacing:-.3px;
}

.f-card p{ margin:0; color:#555566; font-size:.95rem; line-height:1.6; }
.wide-card{ grid-column:span 2; flex-direction:row; align-items:center; gap:40px; }
.f-card-images{ height:180px; gap:12px; display:flex; align-items:center; flex-shrink:0; }

.f-stock-img{
    width:115px;
    height:100%;
    object-fit:cover;
    border-radius:14px;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
    transition:transform .4s ease;
}

.wide-card:hover .f-stock-img{ transform:translateY(-3px); }

.hero-card{
    background:var(--f-brand-dark);
    color:#fff;
    border:none;
    box-shadow:0 8px 25px rgba(160,124,200,.2);
}
.hero-card:hover{ background:#9570be; box-shadow:0 12px 30px rgba(160,124,200,.3); }
.hero-card h3{ color:#fff; }
.hero-card p{ color:rgba(255,255,255,.85); }
.hero-card .f-icon-wrapper{ background:rgba(255,255,255,.15); color:#fff; }

.light-card{ background:var(--f-gray-bg); }
.accent-card{ background:#fffbf5; border-color:#f7ebd9; }
.accent-card .f-icon-wrapper{ background:#fdf0df; color:#d97706; }
.accent-card:hover{ border-color:#d97706; }

@media (max-width:1024px){
    .features-section{ padding:80px 24px; }
    .features-bento-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
    .wide-card{ grid-column:span 2; }
}
@media (max-width:850px){
    .wide-card{ flex-direction:column; align-items:flex-start; gap:24px; }
    .f-card-images{ width:100%; height:160px; }
    .f-stock-img{ flex:1; width:45%; }
}
@media (max-width:650px){
    .features-section{ padding:60px 16px; }
    .features-section-title{ margin-bottom:40px; }
    .features-bento-grid{ grid-template-columns:1fr; gap:16px; }
    .wide-card{ grid-column:span 1; }
}

/* ============================================================
   COURIER SOLUTIONS / SERVICES SECTION
============================================================ */
.services-section { background-color: #ffffff; padding: 100px 0; }

.service-badge {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-dark);
  background-color: var(--brand-light);
  padding: 6px 16px;
  border-radius: 999px;
  display: inline-block;
}

.service-card {
  padding: 30px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #eef0f3;
  box-shadow: 0 4px 20px rgba(0,0,0,.01);
  transition: all 0.35s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand);
  box-shadow: 0 15px 35px rgba(160,124,200,.08);
}
.service-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background-color: var(--brand-light);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}
.service-card:hover .service-icon-box {
  background-color: var(--brand);
  color: #fff;
}



/* ============================================================
   STATISTICS COUNTER
============================================================ */
.stats-section { background-color: var(--dark); padding: 80px 0; color: white; }
.stat-number { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 800; color: #fff; margin-bottom: 4px; }
.stat-label { color: #a0a5b5; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

/* ============================================================
   SPLIT FAQ SECTION
============================================================ */
.split-faq-section {
    background: #ffffff;
    padding: 100px 0;
    width: 100%;
    box-sizing: border-box;
}

.sf-container {
    /* Bootstrap container handles max-width natively */
}

.sf-grid-layout { 
    display: grid; 
    grid-template-columns: 1fr 1.25fr; 
    gap: 60px; 
    align-items: start; 
}

.sf-sticky-content { 
    position: -webkit-sticky; 
    position: sticky; 
    top: 120px; 
}

.sf-badge { 
    display: inline-block; 
    font-family: var(--sf-font-sans); 
    font-size: 0.85rem; 
    font-weight: 700; 
    color: var(--sf-brand-dark); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 12px; 
}

.sf-section-title {
    font-family: var(--sf-font-sans);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: var(--sf-dark);
    line-height: 1.2;
    margin-bottom: 18px;
    letter-spacing: -1px;
}
.sf-section-title .sf-highlight { color: var(--sf-brand-dark); }

.sf-section-desc { 
    font-family: var(--sf-font-sans); 
    font-size: 1rem; 
    color: var(--sf-text); 
    line-height: 1.6; 
    margin-bottom: 30px; 
}

.sf-image-wrapper { 
    width: 100%; 
    border-radius: 20px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(160, 124, 200, 0.04); 
}

.sf-banner-img { 
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover; 
}

.sf-accordion-wrapper { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.sf-item {
    background: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.sf-item:hover { border-color: var(--sf-brand); }
.sf-toggle { display: none; }

.sf-question {
    font-family: var(--sf-font-sans);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sf-dark);
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease;
}

.sf-icon {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.sf-icon::before, .sf-icon::after { content: ""; position: absolute; background-color: var(--sf-brand-dark); transition: all 0.3s ease; }
.sf-icon::before { width: 14px; height: 2px; }
.sf-icon::after { width: 2px; height: 14px; }

.sf-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease-out; }
.sf-answer-inner { overflow: hidden; }
.sf-answer p {
    font-family: var(--sf-font-sans);
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--sf-text);
    padding: 0 30px 24px 30px;
    margin: 0;
}

.sf-toggle:checked ~ .sf-question { color: var(--sf-brand-dark); }
.sf-toggle:checked ~ .sf-answer { grid-template-rows: 1fr; }
.sf-toggle:checked ~ .sf-question .sf-icon::after { transform: rotate(90deg); opacity: 0; }
.sf-toggle:checked ~ .sf-question .sf-icon { transform: rotate(180deg); }
.sf-toggle:checked ~ .sf-question { padding-bottom: 16px; }

@media (max-width: 991px) {
    .sf-grid-layout { grid-template-columns: 1fr; gap: 40px; }
    .sf-sticky-content { position: static; }
    .sf-image-wrapper { display: none; }
    .split-faq-section { padding: 80px 0; }
}
@media (max-width: 600px) {
    .split-faq-section { padding: 60px 0; }
    .sf-question { padding: 20px 20px; font-size: 1.02rem; gap: 15px; }
    .sf-answer p { padding: 0 20px 20px 20px; }
    .sf-section-title { margin-bottom: 12px; }
}

/* ============================================================
   CTA CONVERSION BANNER
============================================================ */
.cta-conversion-section {
  width: 100%;
  background: var(--hero-bg);
  padding: 90px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(160, 124, 200, .15);
}
.cta-blur-1 { position: absolute; top: -40px; left: -40px; width: 180px; height: 180px; background: #d0b3ff; opacity: 0.25; border-radius: 50%; filter: blur(40px); }
.cta-blur-2 { position: absolute; bottom: -40px; right: -40px; width: 220px; height: 220px; background: #bc98e1; opacity: 0.3; border-radius: 50%; filter: blur(40px); }

/* ============================================================
   FOOTER
============================================================ */
.footer-section {
  background: var(--hero-bg);
  padding: 70px 0 25px;
  color: var(--dark);
  border-top: 1px solid rgba(160, 124, 200, .2);
  width: 100%;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.6fr;
  gap: 40px;
}

.brand-col { display: flex; flex-direction: column; }
.logo-area { margin-bottom: 20px; display: flex; align-items: center; }
.footer-logo { max-width: 180px; height: auto; object-fit: contain; display: block; }
.brand-desc { font-size: 14px; line-height: 1.6; color: var(--dark); opacity: .8; margin-bottom: 25px; max-width: 320px; }
.social-icons { display: flex; gap: 12px; }

.social-icons a {
  width: 38px;
  height: 38px;
  background-color: #fff;
  color: var(--brand-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  text-decoration: none;
  transition: all .3s ease;
  box-shadow: 0 3px 6px rgba(160, 124, 200, .1);
  font-size: 15px;
}

.social-icons a:hover {
  background-color: var(--brand);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 5px 12px rgba(160, 124, 200, .3);
}

.footer-col h3 { font-family: var(--font-heading); font-size: 16px; color: var(--dark); font-weight: 700; margin-bottom: 25px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 14px; }
.footer-col ul li a { color: var(--dark); opacity: .85; font-size: 14.5px; text-decoration: none; transition: all .2s ease; display: inline-block; }
.footer-col ul li a:hover { color: var(--brand-dark); opacity: 1; transform: translateX(3px); }

.contact-col { display: flex; flex-direction: column; }
.contact-list { display: flex; flex-direction: column; gap: 15px; }
.contact-item { display: flex; align-items: center; }
.contact-icon-wrapper { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 14px; flex-shrink: 0; font-size: 15px; }

.loc-bg   { background-color: #FFF0F0; color: #FF5A5A; }
.phone-bg { background-color: rgba(188, 152, 225, .2); color: var(--brand-dark); }
.email-bg { background-color: #EBF3FE; color: #1E88E5; }
.contact-text { font-size: 14.5px; font-weight: 500; color: var(--dark); }
.contact-text a { color: var(--dark); text-decoration: none; transition: color .2s ease; }
.contact-text a:hover { color: var(--brand-dark); }

.footer-bottom { margin-top: 60px; padding-top: 25px; border-top: 1px solid rgba(160, 124, 200, .15); text-align: center; }
.footer-bottom p { font-size: 13.5px; color: var(--dark); opacity: .6; }

@media (max-width: 992px) { .footer-container { grid-template-columns: 1fr 1fr; gap: 35px; } }
@media (max-width: 576px) { .footer-container { grid-template-columns: 1fr; gap: 30px; } .footer-section { padding: 50px 0 20px; } .brand-desc { max-width: 100%; } }