@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --teal:#0E8C82;
  --teal-deep:#0A6E66;
  --teal-soft:#E4F5F2;
  --navy:#1C2B6B;
  --navy-deep:#12194A;
  --sun:#FFC93C;
  --paper:#FFFDF9;
  --cloud:#F3F1E9;
  --ink:#16203D;
  --steel:#606A80;
  --line:#E3E0D4;
  --white:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  color:var(--navy-deep);
  letter-spacing:-0.01em;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}

/* ---------- NAV ---------- */
nav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,253,249,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1320px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.brand{display:flex;align-items:center;gap:10px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:19px;color:var(--navy-deep);white-space:nowrap;flex-shrink:0;}
.brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.nav-links{display:flex;gap:20px;font-size:14px;font-weight:600;color:var(--navy);flex-shrink:0;}
.nav-links a{position:relative;padding:6px 0;transition:color .15s;white-space:nowrap;}
.nav-links a:hover{color:var(--teal);}
.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.btn-pill{
  background:var(--teal);color:#fff;padding:10px 20px;border-radius:999px;
  font-weight:700;font-size:14px;border:none;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 8px 18px rgba(14,140,130,0.28);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.btn-pill:hover{transform:translateY(-2px);background:var(--teal-deep);}
.btn-pill.navy{background:var(--navy);box-shadow:0 8px 18px rgba(28,43,107,0.28);}
.btn-pill.navy:hover{background:var(--navy-deep);}
.btn-outline{
  padding:9px 18px;border-radius:999px;border:2px solid var(--navy);white-space:nowrap;
  font-weight:700;font-size:14px;color:var(--navy);background:transparent;cursor:pointer;
  transition:background .15s,color .15s;
}
.btn-outline:hover{background:var(--navy);color:#fff;}
.nav-hide{display:flex;}
.menu-btn{display:none;}
@media (max-width:1180px){
  .nav-links,.nav-hide{display:none;}
  .menu-btn{display:block;background:none;border:none;font-size:22px;cursor:pointer;color:var(--navy);}
}

/* ---------- HERO ---------- */
.hero{padding:86px 0 60px;position:relative;overflow:hidden;}
.hero::before{
  content:'';position:absolute;top:-140px;right:-140px;width:420px;height:420px;
  border-radius:50%;background:var(--teal-soft);z-index:0;
}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:50px;align-items:center;position:relative;z-index:1;}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr;}}
.badge-eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:var(--teal-soft);color:var(--teal-deep);
  font-weight:700;font-size:13px;padding:8px 16px;border-radius:999px;margin-bottom:20px;
}
.badge-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--sun);}
.hero h1{font-size:clamp(34px,4.8vw,52px);line-height:1.08;margin-bottom:20px;}
.hero h1 span{color:var(--teal);}
.hero p.lead{font-size:17px;line-height:1.65;color:var(--steel);max-width:480px;margin-bottom:30px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.trust-row{display:flex;gap:30px;margin-top:40px;flex-wrap:wrap;}
.trust-item{display:flex;align-items:center;gap:10px;}
.trust-item .n{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:22px;color:var(--navy-deep);}
.trust-item .l{font-size:12.5px;color:var(--steel);}

.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.center-row {display:flex;justify-content:center; align-items: center;}

.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;}
.hero-ring{
  width:380px;height:380px;border-radius:50%;
  background:conic-gradient(from 200deg, var(--teal-soft), var(--white) 40%, var(--teal-soft) 100%);
  border:3px solid var(--teal);position:relative;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 30px 50px rgba(28,43,107,0.12);
}
.hero-ring img{width:78%;border-radius:50%;object-fit:cover;}
.float-chip{
  position:absolute;background:#fff;border-radius:16px;padding:12px 16px;
  box-shadow:0 14px 30px rgba(28,43,107,0.14);display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:13.5px;color:var(--navy-deep);border:1px solid var(--line);
}
.float-chip .ic{width:30px;height:30px;border-radius:50%;background:var(--teal-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.chip-1{top:2%;left:-4%;animation:floaty 4.5s ease-in-out infinite;}
.chip-2{bottom:8%;right:-6%;animation:floaty 5.5s ease-in-out infinite reverse;}
.chip-3{bottom:-4%;left:14%;animation:floaty 5s ease-in-out infinite 1s;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@media (max-width:520px){.float-chip{display:none;}}

/* ---------- SECTION SHARED ---------- */
.section{padding:80px 0;}
.section-head{max-width:600px;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(26px,3.4vw,38px);line-height:1.12;}
.section-head p{color:var(--steel);font-size:15.5px;margin-top:12px;line-height:1.6;}
.bg-mint{background:var(--teal-soft);}
.bg-navy{background:var(--navy-deep);color:#fff;}
.bg-navy .section-head h2{color:#fff;}
.bg-navy .section-head p{color:#B7BEDB;}
.bg-navy .badge-eyebrow{background:rgba(255,255,255,0.1);color:var(--sun);}

/* ---------- HANGER DIVIDER (signature) ---------- */
.hanger-divider{display:flex;justify-content:center;padding:6px 0 2px;}
.hanger-divider svg{opacity:0.55;}

/* ---------- SERVICE CARDS ---------- */
.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.grid-corporate{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:980px){.service-grid{grid-template-columns:repeat(3,1fr);} .grid-corporate{grid-template-columns:repeat(3,1fr);}}
@media (max-width:620px){.service-grid{grid-template-columns:repeat(2,1fr);} .grid-corporate{grid-template-columns:repeat(2,1fr);}}
.service-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 20px;text-align:center;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.service-card:hover{transform:translateY(-5px);box-shadow:0 18px 32px rgba(28,43,107,0.1);border-color:var(--teal);}
.service-ic{
  width:56px;height:56px;border-radius:50%;background:var(--teal-soft);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.service-card h3{font-size:16.5px;margin-bottom:8px;}
.service-card p{font-size:13px;color:var(--steel);line-height:1.5;}

/* ---------- STEPS ---------- */
.steps-row{display:flex;gap:0;counter-reset:step;}
@media (max-width:880px){.steps-row{flex-direction:column;gap:28px;}}
.step-item{flex:1;position:relative;padding:0 18px;text-align:center;}
.step-item:first-child{padding-left:0;}
.step-item:last-child{padding-right:0;}
.step-circle{
  width:58px;height:58px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:20px;position:relative;z-index:1;
}
.step-line-h{position:absolute;top:29px;left:50%;right:-50%;height:2px;background:var(--line);z-index:0;}
.step-item:last-child .step-line-h{display:none;}
@media (max-width:880px){.step-line-h{display:none;}}
.step-item h3{font-size:16px;margin-bottom:6px;}
.step-item p{font-size:13.5px;color:var(--steel);line-height:1.55;max-width:220px;margin:0 auto;}

/* ---------- BENTO / FEATURE BLOCKS ---------- */
.bento{display:grid;grid-template-columns:1.15fr 0.85fr;gap:22px;align-items:start;}
@media (max-width:880px){.bento{grid-template-columns:1fr;}}
.bento-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;display:flex;flex-direction:column;align-items:flex-start;}
.bento-card .check-list,.bento-card p{width:100%;}
.bento-card h3{font-size:20px;margin-bottom:10px;}
.bento-card p{color:var(--steel);font-size:14.5px;line-height:1.6;margin-bottom:14px;}
.check-list{list-style:none;}
.check-list li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink);padding:6px 0;}
.check-list li .tick{width:20px;height:20px;border-radius:50%;background:var(--teal);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:11px;margin-top:1px;}
/* Dark-background cards need light list text — the default --ink is unreadable on navy */
.bg-navy .check-list li,.on-dark .check-list li{color:#E9ECF7;}

/* ---------- PRICING ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:880px){.price-grid{grid-template-columns:1fr;}}
.price-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 26px;position:relative;}
.price-card.popular{border:2px solid var(--teal);box-shadow:0 20px 40px rgba(14,140,130,0.14);}
.price-tag{
  position:absolute;top:-13px;right:24px;background:var(--sun);color:var(--navy-deep);
  font-size:12px;font-weight:700;padding:5px 14px;border-radius:999px;
}
.price-card h3{font-size:17px;margin-bottom:6px;}
.price-card .amt{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:30px;color:var(--navy-deep);margin-bottom:4px;}
.price-card .amt span{font-size:13px;font-weight:600;color:var(--steel);}
.price-card .desc{font-size:13px;color:var(--steel);margin-bottom:18px;}
.price-card ul{list-style:none;margin-bottom:20px;}
.price-card li{font-size:13.5px;color:var(--ink);padding:5px 0;display:flex;align-items:center;gap:8px;}
.price-card li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0;}

/* Terms and Condition */

 .legal-section{padding:40px 0 80px;}
  .legal-section .wrap{max-width:850px;}
  .legal-section h2{font-size:1.25rem;margin:32px 0 12px;color:#1a1a2e;}
  .legal-section h2:first-child{margin-top:0;}
  .legal-section p, .legal-section li{color:#4a4f6a;line-height:1.7;font-size:0.98rem;}
  .legal-section ul{padding-left:20px;margin:0 0 16px;}
  .legal-section li{margin-bottom:6px;}
  .legal-updated{color:#8890B5;font-size:0.9rem;margin-bottom:24px;}
  
/* ---------- SCHEME BADGES ---------- */
.scheme-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:880px){.scheme-row{grid-template-columns:1fr;}}
.scheme-card{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;
  border-radius:18px;padding:24px 22px;position:relative;overflow:hidden;
}
.scheme-card::after{content:'';position:absolute;bottom:-30px;right:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,0.06);}
.scheme-card .pct{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:30px;color:var(--sun);margin-bottom:8px;}
.scheme-card h4{color:#fff;font-size:15.5px;margin-bottom:6px;}
.scheme-card p{font-size:13px;color:#C3C9E3;line-height:1.5;}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--teal);padding:60px 0;text-align:center;color:#fff;position:relative;overflow:hidden;}
.cta-band h2{color:#fff;font-size:clamp(24px,3.2vw,34px);margin-bottom:12px;}
.cta-band p{color:#DFF5F2;margin-bottom:26px;font-size:15.5px;}
.cta-band .btn-pill{background:#fff;color:var(--teal-deep);box-shadow:0 10px 24px rgba(0,0,0,0.15);}
.cta-band .btn-pill:hover{background:var(--cloud);}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-deep);color:#AEB6D6;padding:56px 0 26px;font-size:14px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:32px;margin-bottom:40px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{color:#fff;font-size:13px;margin-bottom:14px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:9px;}
.footer-grid a:hover{color:#fff;}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.foot-brand img{width:38px;height:38px;border-radius:50%;}
.foot-brand span{font-family:'Baloo 2',sans-serif;font-weight:700;color:#fff;font-size:17px;}
.footer-bottom{border-top:1px solid #2A3470;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#7F87AD;}

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{
  position:fixed;bottom:22px;right:22px;z-index:70;background:#25D366;color:#fff;
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 26px rgba(37,211,102,0.4);
}
.demo-badge{
  position:fixed;bottom:22px;left:22px;background:var(--navy-deep);color:#fff;
  font-size:11px;padding:8px 14px;border-radius:20px;z-index:70;font-weight:600;
  box-shadow:0 8px 20px rgba(0,0,0,0.2);display:flex;align-items:center;gap:8px;
}
.demo-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--sun);}

/* ---------- PAGE HERO (sub-pages) ---------- */
.page-hero{background:var(--teal-soft);padding:60px 0 50px;position:relative;overflow:hidden;}
.page-hero .wrap{position:relative;z-index:1;}
.page-hero h1{font-size:clamp(30px,4vw,44px);margin-bottom:14px;}
.page-hero p{color:var(--steel);font-size:16px;max-width:560px;}
.crumbs{font-size:13px;color:var(--teal-deep);font-weight:700;margin-bottom:14px;}

/* ---------- FORM (franchise lead) ---------- */
.lead-panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:0 26px 50px rgba(28,43,107,0.1);}
.lead-panel h3{font-size:20px;margin-bottom:6px;}
.lead-panel .sub{font-size:13.5px;color:var(--steel);margin-bottom:22px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
@media (max-width:520px){.form-row{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1/-1;}
.field label{font-size:12.5px;font-weight:700;color:var(--navy);}
.field input,.field select,.field textarea{
  border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;
  font-family:'Inter',sans-serif;color:var(--ink);background:var(--cloud);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);outline:none;background:#fff;}
.field textarea{resize:vertical;min-height:80px;}
.lead-panel .submit-wa{
  width:100%;background:#25D366;color:#fff;border:none;border-radius:12px;padding:15px;
  font-weight:700;font-size:15.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .15s, transform .15s;
}
.lead-panel .submit-wa:hover{background:#1EBE5A;transform:translateY(-1px);}
.form-note{font-size:11.5px;color:var(--steel);margin-top:12px;text-align:center;}

/* ---------- WHY FRANCHISE STAT STRIP ---------- */
.stat-strip{display:flex;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;}
.stat-strip .s{flex:1;text-align:center;border-right:1px solid var(--line);}
.stat-strip .s:last-child{border-right:none;}
.stat-strip .num{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:26px;color:var(--teal-deep);}
.stat-strip .lab{font-size:12.5px;color:var(--steel);margin-top:4px;}
@media (max-width:700px){.stat-strip{flex-wrap:wrap;}.stat-strip .s{flex:1 1 45%;border-right:none;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px;}}

@media (max-width:420px){
    .hero-ring{
  width:340px;height:340px;
    }
 }



/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

.mobile-menu-btn,
.mobile-menu {
  display: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

  /* -----------------------------------------
     NAVIGATION
     ----------------------------------------- */

  .nav {
    position: relative;
    padding: 10px 18px;
  }


  /* Hide desktop navigation */
  .nav-links,
  .nav-right {
    display: none !important;
  }


  /* -----------------------------------------
     HAMBURGER BUTTON
     ----------------------------------------- */

  .mobile-menu-btn {

    display: flex;

    width: 44px;
    height: 44px;

    padding: 8px;
    margin-left: auto;

    border: none;
    border-radius: 10px;

    background: transparent;

    cursor: pointer;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    color: var(--ink);

    -webkit-tap-highlight-color: transparent;
  }


  .mobile-menu-btn:hover {
    background: var(--blue-light);
  }


  .mobile-menu-btn span {

    display: block;

    width: 25px;
    height: 2px;

    background: var(--ink);

    border-radius: 5px;

    transition:
      transform .25s var(--ease),
      opacity .25s var(--ease),
      background .25s var(--ease);
  }


  /* -----------------------------------------
     HAMBURGER → CLOSE
     ----------------------------------------- */

  .mobile-menu-btn.active span:nth-child(1) {

    transform:
      translateY(7px)
      rotate(45deg);
  }


  .mobile-menu-btn.active span:nth-child(2) {

    opacity: 0;
  }


  .mobile-menu-btn.active span:nth-child(3) {

    transform:
      translateY(-7px)
      rotate(-45deg);
  }


  /* -----------------------------------------
     MOBILE DROPDOWN
     ----------------------------------------- */

  .mobile-menu {

    position: absolute;

    top: calc(100% + 8px);

    left: 14px;
    right: 14px;

    padding: 10px;

    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: var(--radius);

    box-shadow:
      0 20px 45px -15px
      rgba(14, 33, 61, .25);

    z-index: 999;

    display: none;

    flex-direction: column;

    gap: 3px;

    animation: mobileMenuIn .2s var(--ease) both;
  }


  /* Show menu */
  .mobile-menu.open {

    display: flex;
  }


  /* -----------------------------------------
     MENU LINKS
     ----------------------------------------- */

  .mobile-menu a {

    display: block;

    width: 100%;

    padding: 13px 14px;

    text-decoration: none;

    color: var(--ink);

    font-family: 'Public Sans', sans-serif;

    font-size: 15px;

    font-weight: 650;

    border-radius: var(--radius-sm);

    transition:
      color .2s var(--ease),
      background .2s var(--ease);
  }


  .mobile-menu a:hover {

    color: var(--blue);

    background: var(--blue-light);
  }


  /* Current page */
  .mobile-menu a.current {

    color: var(--blue);

    background: var(--blue-light);
  }


  /* -----------------------------------------
     MOBILE WHATSAPP BUTTON
     ----------------------------------------- */

  .mobile-menu .mobile-whatsapp {

    margin-top: 8px;

    text-align: center;

    color: #ffffff;

    background:
      linear-gradient(
        135deg,
        var(--blue),
        #00A3C4
      );

    box-shadow:
      0 8px 18px -10px
      rgba(0, 119, 194, .55);
  }


  .mobile-menu .mobile-whatsapp:hover {

    color: #ffffff;

    background:
      linear-gradient(
        135deg,
        var(--blue),
        #00A3C4
      );
  }


  /* -----------------------------------------
     MENU ANIMATION
     ----------------------------------------- */

  @keyframes mobileMenuIn {

    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }

  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .nav {
    padding-left: 14px;
    padding-right: 14px;
  }

  .brand {
    gap: 7px;
  }

  .brand img {
    height: 36px;
  }

  .brand .word {
    font-size: 18px;
  }

  .mobile-menu {
    left: 10px;
    right: 10px;
  }

}


/* Add after styles.css */
/* .grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;} */

/* .prose h4{font-size:17px;margin:14px 0 6px;color:var(--teal-deep);} */
/* .tagline{font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--teal-deep);letter-spacing:.06em;font-size:14px;margin-bottom:10px;} */
/* .pill-list{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0;} */
/* .pill-list span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:600;font-size:14px;color:var(--navy);} */
/* .flow{font-family:'Baloo 2',sans-serif;font-weight:600;color:var(--navy);font-size:16px;line-height:1.7;margin:14px 0;} */
.note{font-size:12.5px;color:var(--steel);margin-top:10px;}
/* .big-quote{font-family:'Baloo 2',sans-serif;font-size:clamp(22px,3vw,30px);color:var(--sun);font-weight:700;margin:14px 0;} */
/* .bg-navy .prose p{color:#B7BEDB;} */
/* .bg-navy .prose h2{color:#fff;} */