:root {
      --brand:#0b2a5f;
      --accent:#ff7a00;
      --text:#0f172a;
      --muted:#64748b;
    }
    body{ color:var(--text); }

    .topbar{
      background: linear-gradient(90deg, var(--brand), #0b2a5fcc);
      color:#fff;
      font-size:.95rem;
    }
    .topbar a{ color:#fff; text-decoration:none; }
    .topbar a:hover{ text-decoration:underline; }

    .btn-accent{
      background:var(--accent);
      border-color:var(--accent);
      color:#111;
      font-weight:800;
    }
    .btn-accent:hover{ filter:brightness(.96); }

    /* HERO */
    .hero{
      position: relative;
      min-height: 86vh;
      display:flex;
      align-items:center;
      color:#fff;

      background:
        linear-gradient(
          to right,
          rgba(11, 42, 95, 0.93),
          rgba(11, 42, 95, 0.62),
          rgba(11, 42, 95, 0.18)
        ),
        url("/assets/images/hero-kamyon.jpg");

      background-size: cover;
      background-position: center;
      padding: 72px 0 52px;
    }

    .hero-badge{
      display:inline-flex; gap:.5rem; align-items:center;
      background: rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      padding:.45rem .8rem; border-radius:999px;
      backdrop-filter: blur(10px);
      font-weight:800;
    }
    .hero p{ color: rgba(255,255,255,.88); }
    .trust-pill{
      background: rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      padding:.35rem .75rem;
      display:inline-flex; gap:.5rem; align-items:center;
      color: rgba(255,255,255,.92);
      backdrop-filter: blur(10px);
    }
    .hero-card{
      border:1px solid rgba(255,255,255,.18);
      border-radius:18px;
      background: rgba(255,255,255,.10);
      box-shadow:0 18px 55px rgba(0,0,0,.20);
    }

    .section{ padding: 56px 0; }
    .section-title{ font-weight:900; letter-spacing:-0.02em; }
    .text-muted2{ color:var(--muted); }

    .card-soft{
      border:1px solid #e5e7eb;
      border-radius:18px;
      box-shadow:0 18px 50px rgba(15,23,42,.07);
      background:#fff;
    }
    .feature-card{
      border:1px solid #e5e7eb;
      border-radius:18px;
      transition: transform .15s ease, box-shadow .15s ease;
      background:#fff;
    }
    .feature-card:hover{
      transform: translateY(-3px);
      box-shadow:0 18px 50px rgba(15,23,42,.10);
    }
    .icon-circle{
      width:44px; height:44px; border-radius:14px;
      background:white;
      display:grid; place-items:center;
      color:var(--brand); font-weight:900;
    }
    .step{
      border-left: 4px solid var(--brand);
      padding-left: 14px;
    }

    .footer{ background:#0b2a5f; color:#fff; }
    .footer a{ color:#fff; opacity:.9; text-decoration:none; }
    .footer a:hover{ opacity:1; text-decoration:underline; }

    /* Floating WhatsApp */
    .wa-float{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 999;
      display:flex;
      align-items:center;
      gap:.6rem;
      padding:.7rem .9rem;
      border-radius:999px;
      background:#25D366;
      color:#111;
      text-decoration:none;
      font-weight:900;
      box-shadow:0 18px 50px rgba(15,23,42,.25);
    }
    .wa-dot{ width:10px; height:10px; border-radius:999px; background:#fff; opacity:.85; }

    /* ===== Mobile improvements ===== */
    @media (max-width: 991.98px){
      .hero{ min-height: auto; padding: 48px 0 40px; }
      .hero h1{ font-size: 2.05rem; line-height: 1.12; }
      .hero .lead{ font-size: 1.05rem; }
    }

    @media (max-width: 575.98px){
      /* Make the truck stay visible on mobile: shift focus to the right */
      .hero{ background-position: 78% center; }

      /* Stronger overlay on very small screens for readability */
      .hero{
        background:
          linear-gradient(
            to bottom,
            rgba(11, 42, 95, 0.88),
            rgba(11, 42, 95, 0.72),
            rgba(11, 42, 95, 0.35)
          ),
          url("/assets/images/hero-kamyon.jpg");
        background-size: cover;
      }

      .hero h1{ font-size: 1.9rem; }
      .hero-card{ margin-top: 14px; }
      .wa-float{ right: 14px; bottom: 14px; padding: .65rem .85rem; }
    }