/* ── ROOT TOKENS ─────────────────────────────────────── */
    :root {
      --brand:       #FFB800;
      --brand-dk:    #d99e00;
      --brand-lt:    #fff8e6;
      --green:       #25D366;
      --green-dk:    #1da851;
      --txt:         #111827;
      --txt-muted:   #6b7280;
      --txt-light:   #9ca3af;
      --bg:          #ffffff;
      --bg-alt:      #f8f9fb;
      --bg-alt2:     #f1f5f9;
      --border:      #e5e7eb;
      --shadow-sm:   0 2px 8px rgba(0,0,0,.07);
      --shadow-md:   0 6px 24px rgba(0,0,0,.09);
      --shadow-lg:   0 16px 48px rgba(0,0,0,.11);
      --radius:      14px;
    }

    html { scroll-behavior: smooth; }
    body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--txt); overflow-x: hidden; }
    h1,h2,h3,h4,h5,h6 { font-family: 'Outfit', sans-serif; font-weight: 900; color: var(--txt); }

    /* ── NAVBAR ──────────────────────────────────────────── */
    #mainNav {
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid transparent;
      transition: border-color .3s, box-shadow .3s;
      padding-block: .9rem;
    }
    #mainNav.scrolled {
      border-color: var(--border);
      box-shadow: var(--shadow-sm);
    }
    .navbar-brand img    { height: 44px; }
    .navbar-nav .nav-link {
      font-size: .9rem; font-weight: 600; color: var(--txt-muted) !important;
      padding: .45rem 1rem !important; border-radius: 8px; transition: color .2s, background .2s;
    }
    .navbar-nav .nav-link:hover { color: var(--txt) !important; background: var(--bg-alt); }

    /* ── BUTTONS ─────────────────────────────────────────── */
    .btn-brand {
      background: var(--brand); color: #06090f; font-weight: 800; border: 0;
      box-shadow: 0 4px 16px rgba(255,184,0,.35);
      transition: transform .2s, box-shadow .2s, background .2s;
    }
    .btn-brand:hover { background: var(--brand-dk); color: #06090f; transform: scale(1.04); box-shadow: 0 6px 24px rgba(255,184,0,.5); }
    .btn-wa {
      background: var(--green); color: #fff; font-weight: 800; border: 0;
      box-shadow: 0 4px 16px rgba(37,211,102,.3);
      transition: transform .2s, background .2s;
    }
    .btn-wa:hover    { background: var(--green-dk); color: #fff; transform: scale(1.04); }
    .btn-outline-brand {
      background: transparent; color: var(--txt); font-weight: 700;
      border: 2px solid var(--border); transition: border-color .2s, background .2s;
    }
    .btn-outline-brand:hover { border-color: var(--brand); background: var(--brand-lt); color: var(--txt); }

    /* ── SECTION LABELS ──────────────────────────────────── */
    .section-tag {
      display: inline-block;
      font-size: .68rem; font-weight: 800;
      letter-spacing: .16em; text-transform: uppercase;
      color: var(--brand-dk);
      background: var(--brand-lt);
      border: 1px solid rgba(255,184,0,.3);
      border-radius: 999px;
      padding: .3rem .9rem;
      margin-bottom: .75rem;
    }
    .divider { border-top: 1px solid var(--border); }

    /* ════════════════════════════════════════════════════════
       HERO
    ════════════════════════════════════════════════════════ */
   /* ════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════ */
#hero{
    position:relative;
    overflow:hidden;
    padding-top:70px;
}

#hero .container,
#hero .row{
    position:relative;
}

/* Desktop */
.hero-text-col{
    position:absolute;
    top:2%;
    left:2%;
    z-index:20;
    width:min(400px, 90%);
}

/* Large image */
.skyline-strip img.skyline-img{
    width:100%;
    height:520px;
    object-fit:cover;
    object-position:center;
}

/* Tablet */
@media (max-width:991px){
    .hero-text-col{
        position:absolute;
        top:6%;
        left:4%;
        width:92%;
    }

    .skyline-strip img.skyline-img{
        height:420px;
    }
}

/* Mobile */
@media (max-width:767px){
    .hero-text-col{
        position:relative;
        top:auto;
        left:auto;
        width:100%;
        margin:5px 0;
        padding:2px;
        border-radius:16px;
        background:#ffffff;
        box-shadow:0 8px 22px rgba(0,0,0,.08);
        border:1px solid #e5e7eb;
    }


    .skyline-strip img.skyline-img{
        height:280px;
    }

    .hero-title{
        font-size:1.9rem;
        line-height:1.15;
    }

    .trust-pill{
        font-size:.75rem;
        padding:.35rem .8rem;
    }
}
.hero-text-col{
   background:rgba(255,255,255,.15);
   backdrop-filter:blur(6px);
   padding:10px;
   border-radius:8px;
} 

    /* ════════════════════════════════════════════════════════
       STATS BAR
    ════════════════════════════════════════════════════════ */
    .stats-bar {
      background: var(--txt);
      padding-block: 1.8rem;
    }
    .stat-item { text-align: center; }
    .stat-num  { font-size: 1.8rem; font-weight: 900; color: var(--brand); display: block; line-height: 1; }
    .stat-lbl  { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.55); margin-top: .25rem; display: block; text-transform: uppercase; letter-spacing: .08em; }
    .stat-div  { border-left: 1px solid rgba(255,255,255,.12); }

    /* ════════════════════════════════════════════════════════
       SERVICES
    ════════════════════════════════════════════════════════ */
    .service-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden; height: 100%;
      box-shadow: var(--shadow-sm);
      transition: transform .32s, box-shadow .32s, border-color .32s;
    }
    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: var(--brand);
    }
    .card-img-box {
      position: relative; height: 260px; overflow: hidden;
    }
    .card-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
    .service-card:hover .card-img-box img { transform: scale(1.08); }
    .card-img-box::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.1) 55%, transparent 100%);
    }
    .card-badge-top {
      position: absolute; top: 12px; left: 12px; z-index: 2;
      padding: .25rem .8rem;
      border-radius: 999px;
      font-size: .65rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    }
    .card-foot {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: .9rem 1.1rem; z-index: 2;
    }
    .svc-icon {
      width: 44px; height: 44px; border-radius: 10px;
      background: rgba(255,184,0,.2);
      border: 1px solid rgba(255,184,0,.4);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: .65rem;
    }
    .svc-icon i { font-size: 1.3rem; color: var(--brand); }
    .card-foot h3 { font-size: 1.15rem; color: #fff; margin: 0; }
    .card-body-pad { padding: 1.1rem 1.25rem 1.3rem; }
    .card-body-pad p { color: var(--txt-muted); font-size: .91rem; line-height: 1.72; margin-bottom: .85rem; }
    .link-brand { color: var(--brand-dk); font-weight: 800; font-size: .88rem; display: inline-flex; align-items: center; gap: .3rem; transition: gap .2s; }
    .link-brand:hover { gap: .6rem; color: var(--brand); }

    /* ════════════════════════════════════════════════════════
       BRAND TILES
    ════════════════════════════════════════════════════════ */
    .brand-tile {
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.1);
      cursor: default;
      transition: transform .25s, box-shadow .25s;
      position: relative;
    }
    .brand-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.3); }
    .brand-tile::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg,rgba(255,255,255,.13) 0%,transparent 55%,rgba(0,0,0,.15) 100%);
      pointer-events: none;
    }
    .brand-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.4rem .75rem; text-align: center; gap: .2rem; position: relative; }
    .brand-inner.tall { padding-block: 1.75rem; }
    .b-name   { font-size: 1.15rem; font-weight: 900; letter-spacing: -.02em; }
    .b-origin { font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }

    /* ════════════════════════════════════════════════════════
       HOW IT WORKS
    ════════════════════════════════════════════════════════ */
    .step-num {
      width: 50px; height: 50px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.15rem; font-weight: 900; flex-shrink: 0;
    }
    .step-num.plain  { background: var(--bg-alt2); color: var(--brand-dk); }
    .step-num.active { background: var(--brand);   color: #06090f; box-shadow: 0 4px 18px rgba(255,184,0,.4); }
    .step-connector  { width: 2px; height: 28px; background: var(--border); margin: .35rem auto; margin-left: 25px; }

    .how-img-wrap {
      border-radius: 18px; overflow: hidden; height: 440px;
      border: 1px solid var(--border); box-shadow: var(--shadow-md);
    }
    .how-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

    .guarantee-card {
      position: absolute; bottom: -1.25rem; left: -1.25rem;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px; padding: .9rem 1.1rem;
      display: flex; align-items: center; gap: .75rem;
      box-shadow: var(--shadow-md);
    }
    .g-icon {
      width: 40px; height: 40px; border-radius: 50%;
      background: #d1fae5; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .g-icon i { color: #059669; font-size: 1.2rem; }

    /* ════════════════════════════════════════════════════════
       COVERAGE
    ════════════════════════════════════════════════════════ */
    .city-pill {
      display: inline-flex; align-items: center; gap: .7rem;
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 999px;
      padding: .85rem 2.25rem;
      font-size: 1.1rem; font-weight: 800; color: var(--txt);
      box-shadow: var(--shadow-sm);
      transition: border-color .2s, box-shadow .2s;
    }
    .city-pill:hover { border-color: var(--brand); box-shadow: 0 6px 20px rgba(255,184,0,.2); }
    .city-dot {
      width: 11px; height: 11px; border-radius: 50%;
      background: var(--brand); flex-shrink: 0;
      animation: dot-glow 2s ease-in-out infinite;
    }
    @keyframes dot-glow {
      0%,100% { transform: scale(1); opacity: 1; }
      50%      { transform: scale(1.6); opacity: .45; }
    }

    /* ════════════════════════════════════════════════════════
       FAQ ACCORDION
    ════════════════════════════════════════════════════════ */
    .faq-wrap .accordion-item {
      background: #fff !important;
      border: 1px solid var(--border) !important;
      border-radius: 12px !important;
      margin-bottom: .75rem;
      overflow: hidden;
    }
    .faq-wrap .accordion-button {
      background: #fff !important;
      color: var(--txt) !important;
      font-family: 'Outfit', sans-serif;
      font-weight: 700; font-size: 1rem;
      padding: 1.1rem 1.3rem !important;
      box-shadow: none !important;
    }
    .faq-wrap .accordion-button:not(.collapsed) { color: var(--brand-dk) !important; }
    .faq-wrap .accordion-button::after { filter: none; }
    .faq-wrap .accordion-body { padding: 0 1.3rem 1.2rem !important; color: var(--txt-muted); font-size: .94rem; line-height: 1.78; }

    /* ════════════════════════════════════════════════════════
       CTA SECTION
    ════════════════════════════════════════════════════════ */
    #cta-section { background: var(--txt); }
    #cta-section h2 { color: #fff; }
    #cta-section p  { color: rgba(255,255,255,.6); }
    .cta-trust-item { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.55); }
    .cta-trust-item i { color: var(--brand); }

    /* ════════════════════════════════════════════════════════
       FOOTER
    ════════════════════════════════════════════════════════ */
    footer { background: var(--bg-alt2); border-top: 1px solid var(--border); }
    .footer-logo img { height: 40px; }
    footer a { color: var(--txt-muted); text-decoration: none; font-size: .88rem; transition: color .2s; }
    footer a:hover { color: var(--brand-dk); }
    .footer-heading { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--txt); display: block; margin-bottom: .85rem; }
    .footer-contact-row { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--txt-muted); margin-bottom: .5rem; }
    .footer-contact-row i { color: var(--brand-dk); font-size: .9rem; }
    .footer-contact-row a { color: var(--txt-muted); }
    .footer-contact-row a:hover { color: var(--brand-dk); }

    /* ════════════════════════════════════════════════════════
       FLOATING WHATSAPP FAB
    ════════════════════════════════════════════════════════ */
    .fab-wa {
      position: fixed; bottom: 1.5rem; right: 1.4rem; z-index: 9999;
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--green);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 22px rgba(37,211,102,.45);
      transition: transform .2s, box-shadow .2s;
    }
    .fab-wa:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(37,211,102,.65); color: #fff; }
    .fab-wa i { font-size: 1.7rem; color: #fff; }

    /* ── utility ── */
    .bg-alt  { background: var(--bg-alt); }
    .bg-alt2 { background: var(--bg-alt2); }
	.nav-btn{
    border-radius: 6px;
    padding: 7px 14px;
    min-width: 105px;
    text-align: center;
    font-size: 14px;
    white-space: nowrap;
}

/* Mobile Responsive */
@media (max-width: 576px){

    .nav-btn{
        min-width: auto;
        padding: 6px 10px;
        font-size: 13px;
    }

    .navbar-brand img{
        max-height: 42px;
    }
}