:root{
      --brand:#067BC2;
                --brand2: #17BEBB;
      --text:#1b1f27;
      --muted:#6b7280;
      --border:#e5e7eb;
      --footer:#111318;
      --footer2:#0c0e12;
                  --line: #e5e7eb;
    }

    body{ 
        font-family: 'Plus Jakarta Sans', sans-serif;
         color:var(--text); 
        }

    /* ===== HEADER ===== */
    .site-header{
      position: sticky;
      top:0;
      z-index: 1030;
      background:#fff;
      border-bottom:1px solid #f1f2f4;
    }
    .nav-wrap{
      height:70px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color:var(--text);
      font-weight:800;
      letter-spacing:.2px;
    }
    .brand .logo-badge{
      border-radius:10px;
      background: #fff;
      display:grid; place-items:center;
      overflow:hidden;
    }
    .brand img{ height:40px; width:auto; display:block; } /* replace logo img if needed */

    .main-nav .nav-link{
      color:#2b2f36;
      font-weight:600;
      font-size:14px;
      padding:10px 14px;
    }
    .main-nav .nav-link:hover{ color:var(--brand); }

    .btn-demo{
      background:var(--brand);
      border-color:var(--brand);
      color:#fff;
      font-weight:700;
      font-size:13px;
      padding:10px 14px;
      border-radius:999px;
      white-space:nowrap;
    }
    .btn-demo:hover{ 
        filter:brightness(.96); 
        color:#000000;
        box-shadow: 0 10px 20px #067ac26a;
    }

    .btn-login{
      color:#2b2f36;
      font-weight:700;
      font-size:14px;
      text-decoration:none;
      padding:8px 10px;
      border-radius:10px;
    }
    .btn-login:hover{ background:#f7f7f8; }

    .header-icon{
      width:38px; height:38px;
      border:1px solid var(--border);
      border-radius:999px;
      display:grid; place-items:center;
      color:#2b2f36;
      background:#fff;
    }
    .header-icon:hover{ background:#f7f7f8; }

    .nav-right{
      display:flex;
      align-items:center;
      gap:10px;
    }

    /* Mobile menu button */
    .navbar-toggler{
font-size: 20px;
    }

    /* ===== FOOTER ===== */
    .site-footer{
      background: var(--footer);
      color:#cbd5e1;
    }
    .footer-top{
      padding:48px 0 28px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .footer-title{
      color:#ffffff;
      font-weight:800;
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      margin-bottom:12px;
    }
    .footer-link{
      color:#cbd5e1;
      text-decoration:none;
      display:inline-block;
      padding:6px 0;
      font-size:14px;
    }
    .footer-link:hover{ color:#ffffff; }

    .footer-contact{
      display:flex;
      flex-direction:column;
      gap:8px;
      font-size:14px;
      color:#cbd5e1;
    }
    .footer-contact a{ color:#cbd5e1; text-decoration:none; }
    .footer-contact a:hover{ color:#fff; }

    .footer-brand{
      display:flex;
      align-items:center;
      gap:10px;
      margin-top:22px;
    }
    .footer-brand .logo{
      width:42px; height:42px;
      border-radius:14px;
      background: rgba(255,255,255,.06);
      display:grid; place-items:center;
      border:1px solid rgba(255,255,255,.08);
    }
    .footer-brand .name{
      color:#fff;
      font-weight:900;
      font-size:20px;
      letter-spacing:.4px;
    }
    .store-badges img{
      height:34px;
      width:auto;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.12);
    }
    .social{
      display:flex;
      gap:10px;
      margin-top:10px;
    }
    .social a{
      width:36px; height:36px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      display:grid; place-items:center;
      color:#fff;
      text-decoration:none;
      background: rgba(255,255,255,.04);
    }
    .social a:hover{ background: rgba(255,255,255,.08); }

    .footer-bottom{
      background: var(--footer2);
      padding:16px 0;
      font-size:13px;
      color:#9aa4b2;
    }
    .footer-bottom a{ color:#9aa4b2; text-decoration:none; }
    .footer-bottom a:hover{ color:#fff; }

    /* keep header layout tight like screenshot */
    @media (max-width: 991.98px){
      .nav-wrap{ height:auto; padding:12px 0; }
      .btn-demo{ padding:9px 12px; }
    }

       .text-blue {
        color: #067BC2;;
       }

    .btn-blue {
        background: #067BC2;
        color: white;
    }

        .btn-blue:hover {
        background: #84BCDA;
        color: black;
    }

    /* ===== Dropdown (Runo-style) ===== */
.nav-dd{ position:relative; }
.nav-dd > .nav-link{
  display:flex; align-items:center; gap:6px;
}
.nav-dd .dd-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform: translate(-50%, 10px);
  width: 270px;
  background:#fff;
  border:1px solid rgba(229,231,235,.9);
  border-radius:16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  padding:10px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: all .18s ease;
  z-index:2000;
}
.nav-dd .dd-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:12px;
  text-decoration:none;
  color:#111827;
  font-weight:700;
  font-size:14px;
}
.nav-dd .dd-item:hover{ background:#f7f7f8; }
.nav-dd .dd-ic{
  width:34px; height:34px;
  border-radius:12px;
  display:grid; place-items:center;
  border:1px solid #eef0f3;
  background:#fff;
  color:#111827;
}
.nav-dd .dd-item:hover .dd-ic{ border-color:#e5e7eb; }

/* Desktop hover open */
@media (min-width: 992px){
  .nav-dd:hover .dd-menu,
  .nav-dd:focus-within .dd-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform: translate(-50%, 16px);
  }
}

/* Caret smooth rotate */
.nav-dd .caret{
  display:inline-block;
  transition: transform .18s ease;
}
@media (min-width: 992px){
  .nav-dd:hover .caret{ transform: rotate(180deg); }
}

/* Nav Dropdown */

/* Mobile dropdown (inside offcanvas) */
/* wrapper ko anchor banाओ */
.nav-dd{ position:relative; }

/* dropdown open state - wrapper hover/focus par */
@media (min-width: 992px){
  .nav-dd:hover .dd-menu,
  .nav-dd:focus-within .dd-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform: translate(-50%, 14px);
  }
}

/* IMPORTANT: hover-bridge (gap ko cover karega) */
.nav-dd::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:18px;              /* gap cover */
  background:transparent;
}

/* dropdown position + safe width */
.nav-dd .dd-menu{
  top:100%;
  left:50%;
  transform: translate(-50%, 6px);
  margin-top:10px;          /* aapka spacing */
}

/* optional: arrow rotate same */
@media (min-width: 992px){
  .nav-dd:hover .caret{ transform: rotate(180deg); }
}

/* About Us */

.about-hero{
  background-image: url('/images/nav-background.avif');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;   /* image ko properly cover karega */
  min-height: 280px;        /* section ki height fix, warna bg cut/na dikhe */
  
  color:#fff;
  padding: 70px 0 45px;
  position: relative;
  overflow: hidden;
}
.about-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.35); /* adjust ya 0 kar do */
  z-index:0;
}
.about-hero > *{
  position:relative;
  z-index:1;
}

.about-pill{
    display:inline-block;
    font-size:12px;
    letter-spacing:.10em;
    font-weight:800;
    text-transform:uppercase;
    opacity:.95;
    margin-bottom:10px;
}

.about-hero h1{
    font-weight:900;
    line-height:1.15;
    font-size: clamp(22px, 3vw, 34px);
    margin: 0 0 20px;
}

.about-hero .sub{
    font-size: 14px;
    font-weight:700;
    opacity:.95;
    max-width: 860px;
    margin: 0 auto;
    line-height:1.6;
}

.about-wrap{
    background: #fff;
    padding: 34px 0 16px;
}

.lead-center{
    text-align:center;
    font-weight:800;
    color:#111827;
    max-width: 980px;
    margin: 0 auto 26px;
    line-height:1.65;
    font-size: 24px;
}

.about-block{
    padding: 34px 0;
}

.about-title{
    font-weight:900;
    color: var(--text);
    font-size: 20px;
    margin-bottom: 14px;
}

.about-para{
    color: var(--muted);
    font-weight:600;
    font-size: 14px;
    line-height:1.8;
    margin-bottom: 12px;
}

.about-para strong{
    color:#111827;
    font-weight:900;
}

.mock-wrap{
    position: relative;
    width: 100%;
    min-height: 280px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* soft blob behind phones */
.mock-blob{
    position:absolute;
    width: 260px;
    height: 220px;
    background:#eef2f7;
    border-radius: 140px;
    filter: blur(0px);
    z-index:0;
    transform: rotate(-8deg);
}

.phone-a, .phone-b{
    position: relative;
    z-index: 2;
    width: 190px;
    max-width: 46%;
    height: auto;
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(17,24,39,.22);
}
.phone-b{
    transform: translate(22px, 18px) rotate(8deg);
    box-shadow: 0 22px 60px rgba(17,24,39,.18);
}
.phone-a{
    transform: translate(-14px, -8px) rotate(-6deg);
}

/* CTA band */
.about-cta{
    background: var(--brand);
    padding: 28px 0 26px;
    color:#fff;
    text-align:center;
    margin-top: 16px;
}
.about-cta h3{
    font-weight:900;
    margin:0 0 10px;
    font-size: 18px;
    line-height: 1.25;
}
.cta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius: 10px;
    padding: 9px 16px;
    font-weight:900;
    border: 0;
    background:#fff;
    color:#111827;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
    text-decoration:none;
    font-size: 12px;
}
.store-row{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    margin-top: 10px;
}
.store-badge{
    height: 30px;
    width:auto;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.15);
    padding: 2px 8px;
}
.cta-meta{
    margin-top: 8px;
    font-weight:800;
    font-size: 12px;
    opacity:.95;
}

/* responsive */
@media (max-width: 991.98px){
    .mock-wrap{ min-height: 240px; margin-bottom: 10px; }
    .phone-a,.phone-b{ width: 170px; }
}

/* Blog Css */
    .blog-wrap{ padding: 42px 0 60px; }
    .blog-title{
        font-weight: 500;
        letter-spacing: .2px;
        font-size: clamp(26px, 3vw, 40px);
        text-align:center;
        margin-bottom: 28px;
    }

    .blog-card{
        border:1px solid var(--border);
        border-radius: 6px;
        overflow:hidden;
        background:#fff;
        height:100%;
        display:flex;
        flex-direction:column;
    }

    /* Top banner area like screenshot */
    .blog-thumb{
        position:relative;
        height: 175px;
        background: #fde7ea;
        border-bottom:1px solid var(--border);
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    }
    .blog-thumb.dark{ background:#0b1d47; }
    .blog-thumb .CallZen-mark{
        position:absolute;
        top:10px; left:12px;
        font-weight:900;
        color: var(--brand);
        font-size:16px;
        letter-spacing:.5px;
        opacity:.95;
    }

    .blog-thumb .thumb-img{
        width: 140px;
        height: auto;
        filter: drop-shadow(0 14px 18px rgba(0,0,0,.15));
        transform: rotate(-8deg);
    }

    .blog-thumb .right-graphic{
        position:absolute;
        right:0; top:0; bottom:0;
        width: 48%;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 60%);
        opacity:.9;
    }

    /* content */
    .blog-body{
        padding: 18px 18px 16px;
        display:flex;
        flex-direction:column;
        gap: 12px;
        flex:1;
    }

    .pub-date{
        text-align:center;
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
    }

    .blog-h{
        font-weight: 800;
        color: var(--text);
        font-size: 18px;
        line-height: 1.25;
        margin: 0;
    }

    .blog-p{
        color: #374151;
        font-size: 13px;
        line-height: 1.8;
        margin: 0;
        min-height: 72px; /* keeps cards aligned */
    }

    .btn-read{
        margin-top:auto;
        width: 100%;
        border-radius: 10px;
        padding: 11px 12px;
        font-weight: 800;
        font-size: 13px;
        border: 1px solid #111;
        background:#fff;
        color:#111;
        transition:.15s ease;
    }

    .btn-read:hover{
       transform: translateY(-1px);
       background: #000;
          color:#fff;
       }

    /* small hover */
    .blog-card:hover{
        box-shadow: 0 16px 40px rgba(17,24,39,.10);
        transition: .2s ease;
    }

    /* Responsive tweaks */
    @media (max-width: 575.98px){
        .blog-thumb{ height: 155px; }
        .blog-p{ min-height:auto; }
    }

    /* faq css */
/* HERO */
.faq-hero {
    background: var(--brand);
    color: #fff;
    padding: 70px 0 55px;
    position: relative;
    overflow: hidden;
    margin-bottom: 60px;
}

.faq-hero:before,
.faq-hero:after {
    content: "";
    position: absolute;
    top: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}

.faq-hero:before {
    left: -140px;
}

.faq-hero:after {
    right: -140px;
}

.faq-badge {
    display: inline-block;
    font-weight: 800;
    letter-spacing: .10em;
    font-size: 12px;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(255, 255, 255, .75);
    margin-bottom: 16px;
}

.faq-title {
    font-weight: 900;
    font-size: clamp(24px, 3.2vw, 44px);
    line-height: 1.12;
    margin: 0 0 10px;
}

.faq-sub {
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.7;
}

/* TABS */
.faq-tabs {
    margin-top: -28px;
    display: flex;
    justify-content: center;
}

.faq-tabs .nav {
    gap: 20px;
    flex-wrap: wrap;
}

.faq-tabs .nav-link {
    border: 0 !important;
    background: #f1f1f1;
    color: #111;
    font-weight: 800;
    border-radius: 999px !important;
    padding: 14px 54px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
}

.faq-tabs .nav-link.active {
    background: #000;
    color: #fff;
}

/* SEARCH */
.faq-search {
    max-width: 820px;
    margin: 26px auto 34px;
}

.faq-search .form-control {
    border: 1.5px solid var(--brand);
    border-right: 0;
    height: 52px;
    border-radius: 0;
    padding: 0 16px;
    box-shadow: none !important;
}

.faq-search .btn {
    height: 52px;
    border-radius: 0;
    border: 1.5px solid var(--brand);
    background: #fff;
}

.faq-search .btn:hover {
    background: #fff;
}

/* SECTION TITLE */
.faq-section-title {
    font-size: 44px;
    font-weight: 300;
    color: #111;
    margin: 0 0 12px;
}

/* ACCORDION LIST (flat lines) */
.faq-list {
    border-top: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 22px 0;
    background: transparent;
    border: 0;
    text-align: left;
    font-weight: 800;
    color: #111;
    font-size: 20px;
}

.faq-q:hover {
    color: #111;
}

.faq-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 2px solid #111;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: transform .18s ease;
}

.faq-q[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

.faq-a {
    padding: 0 0 18px;
    color: var(--muted);
    font-weight: 600;
    line-height: 1.8;
    font-size: 15px;
    max-width: 980px;
}

/* Responsive */
@media (max-width: 768px) {
    .faq-q {
        font-size: 16px;
        padding: 18px 0;
    }

    .faq-section-title {
        font-size: 30px;
    }

    .faq-tabs .nav-link {
        padding: 12px 34px;
    }
}

/* Become a partner */
  .partner-wrap{
    border-top: 3px solid #d94a2c; /* thin top border like screenshot */
    padding: 26px 0 40px;
    background:#fff;
  }

  .partner-title{
    font-size: 28px;
    font-weight: 500;
    color: var(--text);
    margin: 10px 0 8px;
  }
  .partner-sub{
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    max-width: 440px;
    line-height: 1.7;
    margin-bottom: 18px;
  }

  .benefits{
    margin-top: 10px;
    padding-left: 0;
    list-style: none;
    max-width: 520px;
  }
  .benefits li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    align-items: center;
    margin-bottom: 12px;
    color:#111;
    font-size: 12px;
    font-weight: 600;
  }
  .b-ic{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex: 0 0 auto;
    margin-top: 1px;
  }
  .b-ic svg{ width: 12px; height: 12px; fill:#fff; }

  .b1{ background:#3b82f6; } /* blue */
  .b2{ background:#22c55e; } /* green */
  .b3{ background:#06b6d4; } /* cyan */
  .b4{ background:#ef4444; } /* red */
  .b5{ background:#eab308; } /* yellow */

  /* form side */
  .form-label{
    font-weight:700;
    font-size: 12px;
    color:#111;
    margin-bottom: 6px;
  }
  .form-control{
    border: 1px solid var(--line);
    border-radius: 8px;
    height: 36px;
    font-size: 12px;
    padding: 8px 10px;
    box-shadow:none !important;
  }
  textarea.form-control{
    height: 92px;
    resize: vertical;
  }

  .phone-group .input-group-text{
    height: 36px;
    border-radius: 8px 0 0 8px;
    background:#f9fafb;
    border:1px solid var(--line);
    font-size:12px;
    font-weight:700;
    color:#111;
    padding: 0 10px;
  }
  .phone-group .form-control{
    border-left:0;
    border-radius: 0 8px 8px 0;
  }

  .privacy{
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin: 10px 0 14px;
  }
  .privacy a{
    color:#ef4444;
    text-decoration:none;
    font-weight:800;
  }
  .privacy a:hover{ text-decoration:underline; }

  .btn-partner{
    background:#000;
    color:#fff;
    border:0;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight:800;
    font-size: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
  }
  .btn-partner:hover{ background:#111; }

  /* layout alignment */
  .left-col{
    padding-top: 54px; /* same vertical start like screenshot */
  }

  @media (max-width: 991.98px){
    .left-col{ padding-top: 0; }
    .partner-title{ font-size: 24px; }
  }

  /* Lead management system */

/* HERO */
.lm-hero {
    padding: 44px 0 22px;
    background: #fff;
}

.crumbs {
    font-size: 12px;
    font-weight: 700;
    color: #9ca3af;
    margin-bottom: 14px;
}

.crumbs a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 800;
}

.hero-title {
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.12;
    margin: 0 0 10px;
}

.hero-sub {
    color: var(--muted);
    font-weight: 600;
    line-height: 1.7;
    max-width: 560px;
}

.hero-bullets {
    margin: 18px 0 18px;
    padding: 0;
    list-style: none;
}

.hero-bullets li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #111;
    font-weight: 700;
    font-size: 13px;
    margin: 10px 0;
}

.hero-bullets .dot {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 75, 43, .14);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin-top: 2px;
}

.hero-bullets .dot svg {
    width: 12px;
    height: 12px;
    fill: var(--brand);
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.btn-dark-pill {
    background: #000;
    color: #fff;
    border: 0;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 13px;
}

.btn-outline-pill {
    background: #fff;
    color: #111;
    border: 1px solid #111;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 13px;
}

.hero-note {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 700;
    margin-top: 8px;
}

/* Right illustration placeholder */
.hero-ill {
    width: 100%;
    border-radius: 16px;
    background: linear-gradient(180deg, #f7f7fb, #ffffff);
    border: 1px solid var(--line);
    min-height: 310px;
    position: relative;
    overflow: hidden;
}

.hero-ill .spark {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 40px;
    height: 40px;
    opacity: .75;
}

.hero-ill .board {
    position: absolute;
    right: 22px;
    bottom: 18px;
    width: 62%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(17, 24, 39, .10);
    padding: 14px;
}

.hero-ill .mini-bar {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
}

.hero-ill .mini-bar span {
    flex: 1;
    text-align: center;
    padding: 6px 8px;
    border-radius: 999px;
    background: #f3f4f6;
}

.hero-ill .mini-bar span.active {
    background: rgba(255, 75, 43, .12);
    color: var(--brand);
}

.hero-ill .faces {
    position: absolute;
    right: 36px;
    top: 62px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    width: 64%;
    align-items: flex-start;
}

.hero-ill .face {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 4px solid #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
    background: #d1d5db;
    overflow: hidden;
}

.hero-ill .face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* LOGO STRIP */
.logo-strip {
    padding: 18px 0 20px;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    margin-top: 18px;
}

.logo-strip .title {
    text-align: center;
    color: #9ca3af;
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 12px;
}

.logos {
    display: flex;
    gap: 26px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    opacity: .88;
}

.logos img {
    height: 18px;
    width: auto;
    filter: grayscale(1);
    opacity: .85;
}

/* SECTION HEAD */
.sec-title {
    text-align: center;
    margin: 34px 0 18px;
    font-weight: 800;
    font-size: 26px;
    color: var(--text);
}

.sec-sub {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 16px;
    color: var(--muted);
    font-weight: 600;
    line-height: 1.7;
    font-size: 13px;
}

/* FEATURE TABS */
.feat-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 18px;
}

.feat-tabs .tab {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 800;
    font-size: 12px;
    color: #111;
    cursor: pointer;
}

.feat-tabs .tab.active {
    background: #000;
    color: #fff;
    border-color: #000;
}

.feat-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    padding: 26px;
    box-shadow: 0 18px 50px rgba(17, 24, 39, .08);
    overflow: hidden;
}

.feat-h {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin-bottom: 8px;
}

.feat-p {
    color: var(--muted);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.8;
    max-width: 520px;
}

.feat-ill {
    width: 100%;
    border-radius: 16px;
    background: #f3f4f6;
    min-height: 220px;
    border: 1px solid var(--line);
    position: relative;
}

.feat-ill .chips {
    position: absolute;
    left: 14px;
    top: 14px;
    display: grid;
    gap: 10px;
}

.feat-ill .chip {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 800;
    color: #111;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .08);
    width: 140px;
}

/* WHY */
.why-wrap {
    padding: 34px 0 0;
}

.why-title {
    text-align: center;
    font-weight: 800;
    font-size: 28px;
    margin-bottom: 8px;
}

.why-sub {
    text-align: center;
    color: var(--muted);
    font-weight: 600;
    max-width: 860px;
    margin: 0 auto 18px;
}

.why-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px 18px;
    background: #fff;
    height: 100%;
    text-align: center;
}

.why-card h4 {
    font-weight: 900;
    font-size: 15px;
    margin-bottom: 6px;
}

.why-card p {
    margin: 0;
    color: var(--muted);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.7;
}

/* WhatsApp section */
.wa-wrap {
    padding: 36px 0 50px;
}

.wa-title {
    text-align: center;
    font-weight: 800;
    font-size: 22px;
    margin-bottom: 18px;
}

.wa-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wa-bullets li {
    display: flex;
    gap: 10px;
    color: #111;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 10px;
}

.wa-bullets .tick {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 75, 43, .14);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin-top: 2px;
}

.wa-bullets .tick svg {
    width: 12px;
    height: 12px;
    fill: var(--brand);
}

.wa-ill {
    width: 100%;
    min-height: 260px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f7f7fb, #fff);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

.wa-ill .phone {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 56%;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
    padding: 10px;
}

.wa-ill .bubble {
    width: 100%;
    height: 160px;
    border-radius: 14px;
    background: #f3f4f6;
}

@media (max-width: 991.98px) {
    .hero-ill {
        margin-top: 18px;
    }

    .logo-strip {
        margin-top: 8px;
    }
}

.benefits li a {
    color: #2563eb;
    font-weight: 500;
}
.benefits li a:hover {
    text-decoration: underline;
}