:root{
    --green-950:#071F10;
    --green-900:#0B3D22;
    --green-850:#0E4A2A;
    --green-700:#146536;
    --lime-500:#8BD146;
    --lime-400:#A6E065;
    --lime-300:#C4EE93;
    --cream:#F6FAF4;
    --white:#FFFFFF;
    --ink-900:#0E1F16;
    --ink-700:#2B3A32;
    --ink-500:#5C6D63;
    --line:#E1EAE0;
    --gold:#F2B33D;
    --shadow-lg: 0 24px 48px -18px rgba(7,31,16,0.35);
    --shadow-sm: 0 8px 20px -10px rgba(7,31,16,0.25);
    --radius: 18px;
  }
  *{
    box-sizing:border-box;
}
  html{
    scroll-behavior:smooth;
}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    color:var(--ink-900);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Space Grotesk',sans-serif;
    margin:0;
    letter-spacing:-0.01em;
  }
  p{
    margin:0;
}
  a{
    text-decoration:none;
    color:inherit;
}
  ul{
    list-style:none;
    margin:0;
    padding:0;
}
  img{
    max-width:100%;
    display:block;
}
  button{
    font-family:inherit;
    cursor:pointer;
    border:none;
    background:none;
}
  .container{
    max-width:1240px;
    margin:0 auto;
    padding:0 32px;
}
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--lime-400);
  }
  .section{
    padding:96px 0;
}
  .section-head{
    max-width:640px;
    margin:0 0 52px;
}
  .section-head.center{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
  .section-title{
    font-size:clamp(28px,3.4vw,40px);
    font-weight:700;
    color:var(--green-950);
    line-height:1.15;
    margin-top:12px;
}
  .section-sub{
    font-size:16.5px;
    color:var(--ink-500);
    margin-top:14px;
    line-height:1.6;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:15px 26px;
    border-radius:100px;
    font-weight:700;
    font-size:15px;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
  }
  .btn svg{
    width:18px;
    height:18px;
    flex-shrink:0;
}
  .btn-primary{
    background:var(--lime-500);
    color:var(--green-950);
    box-shadow:var(--shadow-sm);
}
  .btn-primary:hover{
    transform:translateY(-2px);
    background:var(--lime-400);
}
  .btn-outline{
    background:transparent;
    color:var(--white);
    border:1.5px solid rgba(255,255,255,0.35);
}
  .btn-outline:hover{
    border-color:var(--lime-400);
    color:var(--lime-400);
}
  .btn-dark{
    background:var(--green-900);
    color:var(--white);
}
  .btn-dark:hover{
    transform:translateY(-2px);
    background:var(--green-850);
}

  /* ---------- road/route signature divider ---------- */
  .route-divider{
    position:relative;
    height:2px;
    margin:64px 0;
    background-image:linear-gradient(90deg, var(--lime-500) 0 14px, transparent 14px 26px);
    background-size:26px 2px;
    background-repeat:repeat-x;
    opacity:0.55;
  }
  .route-divider::after{
    content:'';
    position:absolute;
    top:50%;
    left:0;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--lime-500);
    transform:translateY(-50%);
    animation:travel 7s linear infinite;
  }
  @keyframes travel{
    0%{
        left:0%;
    }
    100%{
        left:calc(100% - 9px);
    }
}
 
  /* ---------- header ---------- */
  header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:82px;
}
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Space Grotesk',sans-serif;
}
  .logo-mark{
    width:clamp(28px,7vw,38px);
    height:auto;
    aspect-ratio:1/1;
    flex-shrink:0;
    object-fit:contain;
    display:block;
}
  .logo-text{
    line-height:1.05;
}
  .logo-text b{
    display:block;
    font-size:16px;
    font-weight:700;
    color:var(--green-950);
    letter-spacing:0.02em;
}
  .logo-text span{
    display:block;
    font-size:11px;
    font-weight:600;
    color:var(--ink-500);
    letter-spacing:0.1em;
}
  nav.main-nav{
    display:flex;
    align-items:center;
    gap:30px;
}
  nav.main-nav a{
    font-size:14.5px;
    font-weight:600;
    color:var(--ink-700);
    transition:color .15s ease;
}
  nav.main-nav a:hover{
    color:var(--green-700);
}
  .header-actions{
    display:flex;
    align-items:center;
    gap:18px;
}
  .header-phone{
    display:flex;
    align-items:center;
    gap:10px;
}
  .header-phone svg{
    width:20px;
    height:20px;
    color:var(--green-700);
}
  .header-phone b{
    display:block;
    font-size:14px;
    font-weight:700;
    color:var(--green-950);
}
  .header-phone span{
    display:block;
    font-size:11.5px;
    color:var(--ink-500);
}
  .menu-toggle{
    display:none;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
}
  .menu-toggle svg{
    width:24px;
    height:24px;
    color:var(--green-950);
}

  /* ---------- hero ---------- */
   .hero{
    position:relative;
    overflow:hidden;
    background:radial-gradient(1100px 620px at 78% -8%, var(--green-700) 0%, transparent 60%), linear-gradient(155deg, var(--green-950) 10%, var(--green-900) 55%, var(--green-850) 100%);
    color:var(--white);
    padding:76px 0 0;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:48px;
    align-items:center;
    width:100%;
}
  .hero-copy{
    min-width:0;
}
  .hero-copy h1{
    font-size:clamp(30px,4.6vw,58px);
    line-height:1.1;
    font-weight:700;
    margin-top:16px;
}
  .hero-copy h1 em{
    font-style:normal;
    color:var(--lime-400);
}
  .hero-copy p{
    font-size:clamp(14.5px,2.4vw,17px);
    color:rgba(255,255,255,0.78);
    line-height:1.65;
    margin-top:20px;
    max-width:480px;
  }
  .hero-actions{
    display:flex;
    gap:14px;
    margin-top:32px;
    flex-wrap:wrap;
    min-width:0;
  }
  .hero-actions .btn{
    flex:1 1 auto;
    min-width:0;
}
  .hero-badges{
    display:flex;
    gap:22px 26px;
    margin-top:44px;
    flex-wrap:wrap;
    min-width:0;
  }
  .hero-badge{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .hero-badge .ic{
    width:38px;
    height:38px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(139,209,70,0.16);
    color:var(--lime-400);
    flex-shrink:0;   
  }
  .hero-badge .ic svg{
    width:19px;
    height:19px;
}
  .hero-badge b{
    display:block;
    font-size:13.5px;
    font-weight:700;
    white-space:nowrap;
}
  .hero-badge span{
    display:block;
    font-size:12px;
    color:rgba(255,255,255,0.6);
    white-space:nowrap;
}
 
  /* hero promo carousel */
  .promo-carousel{
    position:relative;
    min-width:0;
    width:100%;
}
  .promo-track-wrap{
    overflow:hidden;
    border-radius:22px;
    width:100%;
}
  .promo-track{
    display:flex;
    transition:transform .55s cubic-bezier(.65,0,.35,1);
}
  .promo-slide{
    min-width:100%;
    padding:2px;
}
  .promo-card{
    position:relative;
    border-radius:22px;
    padding:34px 30px;
    min-height:320px;
    background:linear-gradient(150deg, var(--green-850) 0%, var(--green-900) 100%);
    border:1px solid rgba(255,255,255,0.08);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-shadow:var(--shadow-lg);
  }
  .promo-header{
    display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 16px;
}
.promo-tag {
  display: inline-flex;
  align-self: flex-start; /* Impede que a tag estique na altura */
  background: var(--lime-500);
  color: var(--green-950);
  font-weight: 800;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  width: fit-content; /* Garante que ela ocupe apenas o tamanho do texto */
}

.promo-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(139, 209, 70, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime-400);
  flex-shrink: 0;
}

.promo-icon svg {
  width: 27px;
  height: 27px;
}
  .promo-card h3{
    font-size:clamp(19px,2.6vw,24px);
    font-weight:700;
    margin-top:22px;
    line-height:1.25;
    color:var(--white);
  }
  .promo-card p{
    font-size:14.5px;
    color:rgba(255,255,255,0.65);
    margin-top:10px;
    line-height:1.55;
  }
  .promo-cta{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:22px;
    font-weight:700;
    font-size:14px;
    color:var(--lime-400);
  }
  .promo-cta svg{
    width:15px;
    height:15px;
    flex-shrink:0;
  }
  .carousel-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:20px;
    gap:12px;
    flex-wrap:wrap;
  }
  .carousel-dots{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .carousel-dots button{
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,0.25);
    transition:all .2s ease;
    flex-shrink:0;
}
  .carousel-dots button.active{
    width:24px;
    border-radius:5px;
    background:var(--lime-500);
}
  .carousel-arrows{
    display:flex;
    gap:8px;
    flex-shrink:0;
}
  .carousel-arrows button{
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.22);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--white);
    transition:all .18s ease;
    flex-shrink:0;
  }
  .carousel-arrows button:hover{
    background:var(--lime-500);
    color:var(--green-950);
    border-color:var(--lime-500);
}
  .carousel-arrows svg{
    width:17px;
    height:17px;
}
 
  .hero-bottom-space{
    height:88px;
}
 
  /* ---------- categories carousel ---------- */
  .cat-carousel{
    position:relative;
}
  .cat-track{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:78%;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:4px 4px 10px;
    margin:0 -4px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .cat-track::-webkit-scrollbar{
    display:none;
}
  .cat-card{
    scroll-snap-align:start;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px 24px 26px;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    background:var(--white);
    display:flex;
    flex-direction:column;
  }
  .cat-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-sm);
    border-color:transparent;
}
  .cat-visual{
    height:9rem;
    border-radius:14px;
    margin-bottom:20px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(150deg, var(--cream) 0%, #EAF4E4 100%);
    flex-shrink:0;
  }
  .cat-visual img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity .9s ease;
  }
  .cat-visual img.active{
    opacity:1;
}
  .cat-visual .cat-photo-dots{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:5px;
    z-index:2;
  }
  .cat-visual .cat-photo-dots span{
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(255,255,255,0.55);
    transition:all .2s ease;
}
  .cat-visual .cat-photo-dots span.active{
    background:var(--white);
    width:14px;
    border-radius:3px;
}
  .cat-card h3{
    font-size:18.5px;
    font-weight:700;
    color:var(--green-950);
}
  .cat-card p{
    font-size:13.5px;
    color:var(--ink-500);
    margin-top:8px;
    line-height:1.55;
    flex-grow:1;
}
  .cat-price{
    display:flex;
    align-items:baseline;
    gap:6px;
    margin-top:16px;
    padding-top:16px;
    border-top:1px dashed var(--line);
}
  .cat-price span{
    font-size:11.5px;
    color:var(--ink-500);
    font-weight:600;
}
  .cat-price b{
    font-size:19px;
    color:var(--green-900);
    font-weight:700;
}
  .cat-controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-top:22px;
}
  .cat-controls button{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1.5px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--green-900);
    transition:all .18s ease;
  }
  .cat-controls button:hover{
    background:var(--lime-500);
    border-color:var(--lime-500);
    color:var(--green-950);
}
  .cat-controls svg{
    width:18px;
    height:18px;
}
  @media (min-width:640px){ 
    .cat-track{
        grid-auto-columns:46%;
    } 
}
  @media (min-width:960px){ 
    .cat-track{
        grid-auto-columns:31.5%;
    } 
}
  @media (min-width:1240px){ 
    .cat-track{
        grid-auto-columns:23.5%;
    } 
}
 
  /* ---------- how it works ---------- */
  .how-section{
    background:var(--green-950);
    color:var(--white);
    position:relative;
    overflow:hidden;
}
  .how-section::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(700px 400px at 10% 100%, rgba(139,209,70,0.14), transparent 60%);
  }
  .how-section .eyebrow{
    color:var(--lime-400);
}
  .how-section .section-title{
    color:var(--white);
}
  .how-section .section-sub{
    color:rgba(255,255,255,0.65);
}
  .how-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    position:relative;
    z-index:1;
    counter-reset:step;
}
  .how-step{
    position:relative;
    padding:0 26px 0 0;
}
  .how-step:not(:last-child)::after{
    content:'';
    position:absolute;
    top:27px;
    left:calc(100% - 13px);
    width:calc(100% - 14px);
    height:1px;
    background-image:linear-gradient(90deg, rgba(139,209,70,0.5) 0 8px, transparent 8px 15px);
    background-size:15px 1px;
  }
  .how-num{
    counter-increment:step;
    width:54px;
    height:54px;
    border-radius:50%;
    background:rgba(139,209,70,0.14);
    border:1.5px solid rgba(139,209,70,0.4);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Space Grotesk',sans-serif;
    font-size:19px;
    font-weight:700;
    color:var(--lime-400);
    margin-bottom:22px;
  }
  .how-num::before{
    content:counter(step, decimal-leading-zero);
}
  .how-step h3{
    font-size:18px;
    font-weight:700;
    margin-bottom:10px;
}
  .how-step p{
    font-size:14px;
    color:rgba(255,255,255,0.62);
    line-height:1.6;
}

  /* ---------- diferenciais ---------- */
  .diff-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2px;
    background:var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--line);
}
  .diff-card{
    background:var(--white);
    padding:34px 28px;
    transition:background .2s ease;
}
  .diff-card:hover{
    background:var(--cream);
}
  .diff-ic{
    width:46px;
    height:46px;
    border-radius:12px;
    background:var(--green-900);
    color:var(--lime-400);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
  }
  .diff-ic svg{
    width:22px;
    height:22px;
  }
  .diff-card h3{
    font-size:16.5px;
    font-weight:700;
    color:var(--green-950);
  }
  .diff-card p{
    font-size:13.5px;
    color:var(--ink-500);
    margin-top:9px;
    line-height:1.6;
  }

  /* ---------- reviews ---------- */
  .reviews-wrap{
    background:var(--cream);
}
  .review-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
  .review-card{
    background:var(--white);
    border-radius:var(--radius);
    padding:28px 26px;
    border:1px solid var(--line);
  }
  .stars{
    display:flex;
    gap:3px;
    color:var(--gold);
}
  .stars svg{
    width:15px;
    height:15px;
}
  .review-card p{
    font-size:14.5px;
    color:var(--ink-700);
    line-height:1.65;
    margin-top:16px;
  }
  .reviewer{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:20px;
  }
  .reviewer-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--green-900);
    color:var(--lime-400);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-family:'Space Grotesk',sans-serif;
    font-size:14px;
    flex-shrink:0;
  }
  .reviewer b{
    display:block;
    font-size:13.5px;
    font-weight:700;
    color:var(--green-950);
}
  .reviewer span{
    display:block;
    font-size:12px;
    color:var(--ink-500);
}
  .review-stats{
    display:flex;
    gap:56px;
    margin-top:56px;
    justify-content:center;
    flex-wrap:wrap;
  }
  .review-stat b{
    display:block;
    font-family:'Space Grotesk',sans-serif;
    font-size:34px;
    font-weight:700;
    color:var(--green-900);
  }
  .review-stat span{
    display:block;
    font-size:13px;
    color:var(--ink-500);
    font-weight:600;
    margin-top:4px;
  }

  /* ---------- filiais ---------- */
  .branch-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}
  .branch-card{
    border-radius:var(--radius);
    border:1px solid var(--line);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:box-shadow .2s ease, transform .2s ease;
  }
  .branch-card:hover{
    box-shadow:var(--shadow-sm);
    transform:translateY(-4px);
}
  .branch-top{
    background:linear-gradient(150deg, var(--green-900), var(--green-850));
    color:var(--white);
    padding:26px 26px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .branch-top .b-label{
    font-size:12px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--lime-400);
  }
  .branch-top h3{
    font-size:21px;
    font-weight:700;
    margin-top:6px;
  }
  .branch-pin{
    width:44px;
    height:44px;
    border-radius:12px;
    background:rgba(139,209,70,0.16);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--lime-400);
    flex-shrink:0;
  }
  .branch-pin svg{
    width:22px;
    height:22px;
  }
  .branch-body{
    padding:24px 26px 26px;
    background:var(--white);
  }
  .branch-row{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
  }
  .branch-row svg{
    width:18px;
    height:18px;
    color:var(--green-700);
    flex-shrink:0;
    margin-top:2px;
  }
  .branch-row p{
    font-size:14px;
    color:var(--ink-700);
    line-height:1.55;
  }
  .branch-row b{
    color:var(--green-950);
  }
  .branch-body .btn{
    width:100%;
    margin-top:12px;
  }

  /* ---------- contato / cta final ---------- */
  .cta-final{
    background:linear-gradient(135deg, var(--lime-500), var(--lime-400));
    border-radius:28px;
    padding:56px 60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    flex-wrap:wrap;
  }
  .cta-final h2{
    font-size:clamp(24px,3vw,32px);
    font-weight:700;
    color:var(--green-950);
    max-width:480px;
    line-height:1.2;
  }
  .cta-final p{
    font-size:14.5px;
    color:rgba(14,31,22,0.7);
    margin-top:10px;
    font-weight:600;
  }
  .cta-final .btn-dark svg{
    color:var(--lime-400);
  }

  /* ---------- footer ---------- */
  footer{
    background:var(--green-950);
    color:rgba(255,255,255,0.72);
    padding:72px 0 0;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.1fr;
    gap:40px;
    padding-bottom:56px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .footer-logo{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
  }
  .footer-logo-mark{
    width:clamp(26px,6vw,34px);
    height:auto;
    aspect-ratio:1/1;
    object-fit:contain;
    flex-shrink:0;
  }
  .footer-logo b{
    color:var(--white);
    font-family:'Space Grotesk',sans-serif;
    font-size:16px;
    font-weight:700;
  }
  .footer-about p{
    font-size:13.5px;
    line-height:1.7;
    max-width:300px;
  }
  .footer-social{
    display:flex;
    gap:10px;
    margin-top:22px;
  }
  .footer-social a{
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.18);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .18s ease;
  }
  .footer-social a:hover{
    background:var(--lime-500);
    border-color:var(--lime-500);
    color:var(--green-950);
  }
  .footer-social svg{
    width:17px;
    height:17px;
  }
  .footer-col h4{
    font-size:13px;
    font-weight:700;
    color:var(--white);
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-bottom:18px;
  }
  .footer-col ul li{
    margin-bottom:12px;
  }
  .footer-col ul li a{
    font-size:13.5px;
    transition:color .15s ease;
  }
  .footer-col ul li a:hover{
    color:var(--lime-400);
  }
  .footer-contact li{
    display:flex;
    gap:10px;
    font-size:13.5px;
    margin-bottom:14px;
    align-items:flex-start;
  }
  .footer-contact svg{
    width:16px;
    height:16px;
    color:var(--lime-400);
    flex-shrink:0;
    margin-top:2px;
  }
  .footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 0;
    font-size:12.5px;
    color:rgba(255,255,255,0.45);
    flex-wrap:wrap;
    gap:10px;
}
  .footer-bottom a{
    color:rgba(255,255,255,0.45);
}
  .footer-bottom a:hover{
    color:var(--lime-400);
}
 
  /* whatsapp floating button */
  .wa-float{
    position:fixed;
    bottom:26px;
    right:26px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#25D366;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 28px -8px rgba(37,211,102,0.6);
    z-index:200;
    transition:transform .2s ease;
  }
  .wa-float:hover{
    transform:scale(1.08);
}
  .wa-float svg{
    width:30px;
    height:30px;
    color:var(--white);
}
 
  /* ---------- responsive ---------- */
  @media (max-width:1024px){
    .hero-grid{
        grid-template-columns:1fr;
    }
    .hero-bottom-space{
        height:64px;
    }
    .how-grid{
        grid-template-columns:repeat(2,1fr);
        row-gap:40px;
    }
    .how-step:nth-child(2)::after{
        display:none;
    }
    .diff-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .review-grid{
        grid-template-columns:1fr;
    }
    .branch-grid{
        grid-template-columns:1fr;
    }
    .footer-grid{
        grid-template-columns:1fr 1fr;
        row-gap:36px;
    }
  }
  @media (max-width:900px){
    .header-phone{
        display:none;
    }
  }
  @media (max-width:760px){
    .container{
        padding:0 18px;
    }
    nav.main-nav{
        display:none;
    }
    .menu-toggle{
        display:flex;
    }
    .nav-wrap{
        height:68px;
    }
    .logo-mark{
        width:32px;height:32px;
    }
    .logo-text b{
        font-size:14px;
    }
    .logo-text span{
        font-size:9.5px;
    }
    .header-actions{
        gap:10px;
    }
    .header-actions .btn-dark{
        padding:11px 16px;
        font-size:13px;
    }
    .section{
        padding:56px 0;
    }
    .section-head{
        margin-bottom:36px;
    }

    .hero{
        padding-top:28px;
    }
    .hero-copy h1{
        margin-top:12px;
    }
    .hero-copy p{
        font-size:15.5px;
        margin-top:16px;
    }
    .hero-actions{
        flex-direction:column;
        align-items:stretch;
        margin-top:26px;
        gap:12px;
    }
    .hero-actions .btn{
        width:100%;
    }
    .hero-badges{
        gap:16px 22px;
        margin-top:32px;
    }
    .hero-badge b{
        font-size:13px;
    }
    .hero-badge span{
        font-size:11px;
    }
    .promo-card{
        padding:26px 22px;
        min-height:250px;
        border-radius:18px;
    }
    .promo-card h3{
        font-size:20px;
        margin-top:18px;
    }
    .promo-tag{
        top:20px;
        right:20px;
        font-size:11px;
        padding:6px 11px;
    }
    .carousel-arrows button{
        width:36px;
        height:36px;
    }
    .hero-bottom-space{
        height:44px;
    }
 
    .cat-track{
        grid-auto-columns:82%;
    }
    .how-grid{
        grid-template-columns:1fr;
    }
    .diff-grid{
        grid-template-columns:1fr;
    }
    .footer-grid{
        grid-template-columns:1fr;
    }
    .cta-final{
        padding:32px 24px;
        flex-direction:column;
        align-items:flex-start;
    }
    .cta-final .btn{
        width:100%;
    }
    .review-stats{
        gap:28px 32px;
    }
    .review-stat b{
        font-size:28px;
    }
  }
  @media (max-width:420px){
    .container{
        padding:0 16px;
    }
    .logo-text span{
        display:none;
    }
    .header-actions .btn-dark{
        padding:10px 13px;
        font-size:12.5px;
    }
    .hero-copy h1{
        font-size:32px;
    }
    .hero-badges{
        flex-direction:column;
        gap:14px;
    }
    .cat-track{
        grid-auto-columns:88%;
    }
    .cta-final h2{
        font-size:22px;
    }
  }