/* ===========================================================================
   SECTION: GLOBAL / BASE UTILITIES  + NAV + MOBILE MENU
   ACTION: conflict-free (UI SAME) | duplicates removed | sticky/fixed conflict solved
   NOTE : Paste/replace this entire block where your original global/nav/menu CSS sits
   ============================================================================ */

/* ============================================================
   :root & base
   ============================================================ */
:root{
  --brand:#6DC849;
  --brandDark:#2CA04B;
  --accent:#3CB8D9;
}

/* basic */
html { scroll-behavior: smooth; }
::selection { background:var(--brand); color:#fff; }

a { transition: color .22s ease, opacity .22s ease, transform .18s ease; -webkit-tap-highlight-color: transparent; }

/* keep body fade-in but slightly faster */
body { opacity:0; transition:opacity .45s ease; }
body.fade-in { opacity:1; }

.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: transform .56s cubic-bezier(.2,.7,.2,1), opacity .46s ease;
  will-change: transform, opacity;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
.stagger > .reveal{
  transition-delay: calc(var(--i) * 90ms);
}

/* cheaper keyframes (kept small) */
@keyframes pop { 0%{transform:scale(.98)} 100%{transform:scale(1)} }
@keyframes fade-in{ from{opacity:0; transform:translateY(8px)} to{opacity:1;} }
@keyframes slide-up{ from{opacity:0; transform:translateY(14px)} to{opacity:1;} }


/* ============================================================
   INFO BAR (TOP SMALL STRIP)  (UI SAME)
   ============================================================ */
.infobar{
  background:linear-gradient(90deg,var(--brandDark),var(--accent));
  color:#fff;
  font-size:.95rem
}
.infobar-deco{
  position:absolute;left:0;top:0;bottom:0;width:80px;
  background:linear-gradient(135deg,var(--accent),var(--brand));
  clip-path:polygon(0 0,100% 0,75% 100%,0% 100%);
  opacity:.95
}















/* =========================================================
   INFO BAR — MOBILE ONLY responsive
   Desktop bilkul same rahega
   ========================================================= */

/* ===== MOBILE VIEW ONLY ===== */
@media (max-width: 768px){

  .infobar{
    overflow:hidden;
    font-size:.88rem;              /* thora compact */
  }

  .infobar .max-w-7xl{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;   /* 1 line force */
    gap:14px !important;
    white-space:nowrap !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  /* email + phone block */
  .infobar .max-w-7xl > div{
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap !important;
    min-width:0;
  }

  /* links wrap na hon */
  .infobar a{
    white-space:nowrap !important;
  }

  /* email mobile pe break na ho — ellipsis use ho */
  .infobar a[href^="mailto:"]{
    max-width:48vw;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* icons thore chotay */
  .infobar svg{
    width:14px;
    height:14px;
    flex-shrink:0;
  }
}

/* ===== EXTRA SMALL PHONES ===== */
@media (max-width: 360px){

  .infobar{
    font-size:.82rem;
  }

  /* "|" hata do taa ke wrap na ho */
  .infobar .opacity-50{
    display:none !important;
  }

  .infobar a[href^="mailto:"]{
    max-width:55vw;
  }
}

/* =========================================================
   INFO BAR — MOBILE ONLY center align
   Desktop bilkul same rahega
   ========================================================= */

@media (max-width: 768px){

  .infobar .max-w-7xl{
    justify-content: center !important;   /* RIGHT se MID */
    text-align: center;
  }

  /* email + phone blocks bhi center */
  .infobar .max-w-7xl > div{
    justify-content: center;
  }
}


/* ============================================================
   NAVBAR CTA + HEADER BUTTONS (UI SAME)
   ============================================================ */

/* nav-cta: tone down very large shadow */
.nav-cta{
  background: linear-gradient(90deg,var(--brandDark) 0%, var(--brand) 52%, var(--accent) 100%);
  color:#fff; font-weight:700; border-radius:12px;
  padding:.65rem 1.1rem; line-height:1; display:inline-flex; align-items:center; gap:.5rem;

  /* HEAVY - commented */
  /*
  box-shadow:0 10px 24px rgba(60,184,217,.25);
  transition:filter .25s, transform .25s, box-shadow .25s;
  */

  /* FIX */
  box-shadow:0 8px 20px rgba(60,184,217,0.12);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.nav-cta:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(60,184,217,.18);
}

/* Pill CTA */
.nav-appointment-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.4rem; font-weight: 700; font-size: 1rem;
  color: #fff; border-radius: 9999px;
  background: linear-gradient(90deg, #2CA04B 0%, #3CB8D9 100%);

  /* HEAVY - commented */
  /*
  box-shadow: 0 4px 16px rgba(60, 184, 217, 0.35);
  transition: all 0.3s ease;
  */

  /* FIX */
  box-shadow: 0 6px 18px rgba(60,184,217,0.12);
  transition: transform .18s ease, filter .18s ease;
}
.nav-appointment-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(44, 160, 75, 0.14);
}
@media (max-width: 768px){
  .nav-appointment-btn{ display:none !important; }
}

/* NAV container (UI SAME) */
.nav-pro{
  background:#fff !important;

  /* HEAVY - commented */
  /*
  box-shadow: 0 4px 14px rgba(16,24,40,0.04);
  */

  /* FIX */
  box-shadow: 0 6px 18px rgba(16,24,40,0.035);
  border-top: 1px solid rgba(10,18,30,0.02);

  position: relative; /* in-flow by default */
  transition: box-shadow .18s ease, transform .12s ease;

  /* NOTE: z-index yahan se hata diya (conflict-free),
     final sticky header rule niche handle karega */
}

/* Logo container — keeps layout tight */
.nav-pro .nav-logo{
  display:inline-flex;
  padding:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  line-height:1;
  vertical-align:middle;
}

/* ============================================================
   NAV HEIGHT/LOGO — FINAL SINGLE SOURCE (NO DUPLICATES)
   (UI SAME as your final compact look)
   ============================================================ */

/* HEAVY / DUPLICATE - commented (purane size rules jo conflict bana rahe thay) */
/*
.nav-pro img.nav-logo {
  height: 64px !important;
  width: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-height: 120px;
}
@media (max-width: 768px){
  .nav-pro img.nav-logo { height: 54px !important; }
}
.nav-pro .max-w-7xl,
.nav-pro > .max-w-7xl,
.nav-pro .max-w-7xl > div {
  min-height: 84px;
  align-items: center;
}
*/

/* FIX (FINAL): stable header height + logo size (same UI you wanted) */
.nav-pro .max-w-7xl,
.nav-pro > .max-w-7xl,
.nav-pro .max-w-7xl > div{
  min-height: 64px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center;
}

.nav-pro img.nav-logo{
  height: 48px !important;
  width:auto !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  max-height: 120px;
}
@media (max-width: 768px){
  .nav-pro img.nav-logo { height: 42px !important; }
}

/* slim variants preserved (UI SAME if you ever use .slim) */
.nav-pro.slim .max-w-7xl,
.nav-pro.slim > .max-w-7xl,
.nav-pro.slim .max-w-7xl > div{
  min-height: 64px !important;
  padding-top: 4px;
  padding-bottom: 4px;
}
.nav-pro.slim img.nav-logo{ height:48px !important; border-radius:6px; }
@media (max-width:768px){
  .nav-pro.slim img.nav-logo{ height:42px !important; }
}

/* ============================================================
   STICKY / FIXED CONFLICT RESOLVED
   - Aapka FINAL sticky rule niche hai
   - JS wali .is-sticky class ab position change nahi karegi (sirf shadow/look)
   ============================================================ */
.nav-pro.is-sticky{
  /* HEAVY/CONFLICT - commented (fixed + top/left/right) */
  /*
  position: fixed !important;
  top: 0; left: 0; right: 0;
  */

  /* FIX: sirf look maintain (UI SAME), no layout shift */
  box-shadow: 0 12px 28px rgba(16,24,40,0.085);
  transform: translateZ(0);
}

/* remove unwanted white gap below header (if theme injects spacing) */
header.nav-pro { margin-bottom: 0 !important; padding-bottom: 0 !important; }
body > .site-top-space { display: none !important; height: 0 !important; }
main, section:first-of-type { margin-top: 0 !important; padding-top: 0 !important; }


/* ============================================================
   MOBILE MENU (SLIDE-IN PANEL) (UI SAME)
   ============================================================ */
.mobile-menu { display:none; }
.mobile-open .mobile-menu{ display:block; }

/* overlay element may be heavy if it uses large shadow; keep simple */
#overlay.hidden{ display:none; }

.mobile-menu{
  position: fixed; top:0; right:-100%; bottom:0;
  width:min(86vw,380px); z-index:60;
  background:#fff; border-left:1px solid rgba(0,0,0,.06);

  /* HEAVY - commented */
  /*
  box-shadow: -18px 0 40px rgba(0,0,0,.12);
  transition: right .32s cubic-bezier(.2,.7,.2,1);
  */

  /* FIX */
  box-shadow: -12px 0 28px rgba(0,0,0,0.08);
  transition: right .32s cubic-bezier(.2,.7,.2,1);
}
.mobile-open #overlay{ display:block; }
.mobile-open #mobileMenu{ right:0; }

.mobile-link{
  display:block;
  padding:12px 10px;
  border-radius:10px;
  font-weight:700;
  color:#0f172a;
}
.mobile-link:hover{ background:#f7fafc; color:var(--brandDark); }

.menu-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.4rem; font-weight:700; color:#fff;
  border-radius:9999px;
  background: linear-gradient(90deg,#2CA04B 0%, #3CB8D9 100%);

  /* HEAVY - commented */
  /*
  box-shadow:0 6px 20px rgba(60,184,217,.35); transition:.3s;
  */

  /* FIX */
  box-shadow:0 8px 20px rgba(60,184,217,0.12);
  transition: transform .18s ease, filter .18s ease;
}
.menu-cta:hover{ filter:brightness(1.08); transform:translateY(-2px); }


/* ================================================
   FIX: Infobar + Navbar responsive only (UI same)
   ================================================ */
@media (max-width: 768px){
  .infobar .max-w-7xl{
    justify-content:center;
    gap:10px;
  }
}
@media (max-width: 480px){
  .infobar .max-w-7xl{
    flex-wrap:wrap;
    row-gap:6px;
    padding-inline:12px;
  }
  .infobar .max-w-7xl > div{
    display:flex;
    align-items:center;
    justify-content:center;
  }
}

/* Navbar: small screens padding safe */
@media (max-width: 768px){
  .nav-pro .max-w-7xl{
    padding-inline:16px !important;
  }
}
@media (max-width: 400px){
  .nav-pro img.nav-logo{
    height: 38px !important;
  }
  #menuBtn{ flex-shrink:0; }
}

/* MOBILE: hero image hamesha hide (Note 11 Pro, sab phones) */
@media (max-width: 979px){
  .hero-visual{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    height:0 !important;
    opacity:0 !important;
  }
  .hero-img{ display:none !important; }
}


/* ===============================
   FORCE STICKY NAVBAR (FINAL)
   =============================== */
header.nav-pro{
  position: sticky !important;
  top: 0 !important;
  z-index: 2147483000 !important;
}


/* =========================================================
   FIX: Chrome Mobile "Desktop site" scroll bug (CTA colors vanish)
   Cause: sticky/fixed header + filter/backdrop/transform compositing
   Paste at VERY END of style.css
   ========================================================= */

/* 1) Header ko heavy GPU/filter tricks se bachao (mobile/desktop-site mode) */
@media (hover:none){
  body :is(header, .site-header, .main-header, .navbar){
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
    -webkit-filter:none !important;

    transform:none !important;
    -webkit-transform:none !important;
    will-change:auto !important;
  }
}

/* 2) CTA section ko apni paint/layer do taake gradient scroll pe na “gayab” ho */
@media (hover:none){
  body :is(.cta-band, .cta-section, .hero-cta, .cta-wrap, section#cta){
    position: relative !important;
    isolation: isolate !important;
    z-index: 0 !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
  }
}




/* =========================================================
   FIX: Chrome Android "Desktop site" paint/compositing bug
   Sticky header toggles => CTA gradient vanishes
   UI SAME, sirf rendering stable
   Paste at VERY END of style.css
   ========================================================= */

/* 1) Header ko clean rakho: no transform / filter / will-change */
@media (hover:none){
  header.nav-pro,
  .nav-pro,
  .nav-pro.is-sticky{
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;

    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* sticky header should not create weird paint containment */
  header.nav-pro{
    contain: none !important;
  }
}

/* 2) CTA section ko stable paint context do */
@media (hover:none){
  /* apne CTA section ka actual selector yahan match hota hai */
  body :is(.cta-band, .cta-section, .hero-cta, .cta-wrap, section#cta){
    position: relative !important;
    isolation: isolate !important;
    contain: paint !important;        /* important: forces proper repaint */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* 3) CTA gradient ko pseudo-element pe shift karo (LOOK same, paint stable) */
@media (hover:none){
  body :is(.cta-band, .cta-section, .hero-cta, .cta-wrap, section#cta)::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;

    /* yahan aapka existing gradient SAME rakha (agar CTA pe already gradient hai to look same rahega) */
    background: linear-gradient(90deg, var(--brandDark), var(--brand), var(--accent));

    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* CTA ke andar content top pe rahe */
  body :is(.cta-band, .cta-section, .hero-cta, .cta-wrap, section#cta) > *{
    position: relative;
    z-index: 1;
  }
}





/* =========================================================
   FORCE FIX: "Let's Discuss Your Project" ke neeche green block remove
   Paste at VERY END
   ========================================================= */

/* 1) Hero CTA wrappers ka accidental background/pseudo hatao */
@media (hover:none){

  /* common hero CTA wrappers */
  body :is(.hero-cta, .cta-wrap, .cta-band, .cta-section, .hero-actions, .hero-buttons){
    background: transparent !important;
  }

  /* wrappers ke pseudo elements remove (yehi aksar green slab banate hain) */
  body :is(.hero-cta, .cta-wrap, .cta-band, .cta-section, .hero-actions, .hero-buttons)::before,
  body :is(.hero-cta, .cta-wrap, .cta-band, .cta-section, .hero-actions, .hero-buttons)::after{
    content: none !important;
    display: none !important;
  }

  /* 2) Button/anchor ke pseudo remove (agar button ke neeche slab pseudo se aa rahi ho) */
  body :is(.hero-cta, .cta-wrap, .hero-actions, .hero-buttons) :is(a, button, .btn, .cta-btn)::before,
  body :is(.hero-cta, .cta-wrap, .hero-actions, .hero-buttons) :is(a, button, .btn, .cta-btn)::after{
    content: none !important;
    display: none !important;
  }

  /* 3) Sirf safety: extra “bar” type shadow/bleed ko clip */
  body :is(.hero-cta, .cta-wrap, .hero-actions, .hero-buttons){
    overflow: visible !important; /* UI same */
  }
}


/* ============================================================
   END OF SECTION: GLOBAL / NAV / MOBILE MENU
   ============================================================ */













/* ===========================================================================
   MOBILE DRAWER (Optimized, comments kept)
   Replace your existing drawer CSS with this block.
   - Heavy rules are COMMENTED OUT (kept for reference)
   - Lighter replacements follow immediately
   - UI/look preserved; performance improved (less paint + cheaper shadows)
   =========================================================================== */

/* -----------------------------------------------------------
   Drawer variables (local overrides)
   ----------------------------------------------------------- */
:root{
  --drawer-bg: #fff;
  --drawer-shadow: rgba(6,22,36,0.32);
  --drawer-border: rgba(10,20,30,0.04);
  --navText: #0b1220;
}

/* -----------------------------------------------------------
   Overlay that dims page when drawer is open
   ⚠️ heavy: backdrop-filter + high-opacity can cause expensive paints on mobile.
   (we keep it but reduce intensity and provide commented original)
   ----------------------------------------------------------- */
/*
#drawerOverlay {
  position: fixed; inset: 0;
  background: rgba(7,12,17,0.48);
  backdrop-filter: blur(6px) saturate(120%);
  z-index: 12040;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
*/
#drawerOverlay {
  position: fixed; inset: 0;
  /* lighter dim + cheaper backdrop usage */
  background: rgba(7,12,17,0.42);
  /* keep a subtle blur but much cheaper: use blur(4px) (less GPU pressure) */
  backdrop-filter: blur(4px) saturate(110%);
  z-index: 12040;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
  -webkit-backdrop-filter: blur(4px) saturate(110%);
}
/* show state (unchanged) */
#drawerOverlay.show { opacity: 1; pointer-events: auto; }


/* Drawer: hamesha full screen + bottom padding safe */
#proMobileDrawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(92vw,420px);
  max-width:420px;

  /* pehle 100vh fallback, phir 100dvh (Android/iOS new) */
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;

  background: linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow: -14px 18px 36px rgba(6,22,36,0.12);
  border-left: 1px solid var(--drawer-border);
  border-radius: 18px 0 0 18px;
  transform: translateX(110%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: transform .36s cubic-bezier(.2,.8,.2), opacity .24s ease;
  z-index: 12050;

  /* upar + side same, neeche extra padding taa ke button cut na ho */
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));

  display:flex;
  flex-direction:column;
  gap:12px;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform, opacity;
}


/* Drawer open state (unchanged behaviour) */
#proMobileDrawer.open {
  transform: translateX(0); opacity:1; visibility: visible; pointer-events:auto;
  transition-delay: 0s;
}

/* ensure z-index priority (kept) */
#proMobileDrawer { z-index: 12050 !important; }
#drawerOverlay { z-index: 12040 !important; }

/* -----------------------------------------------------------
   When drawer is open, keep header under it and non-interactive
   (keep transforms cheap)
   ----------------------------------------------------------- */
.drawer-open .nav-pro {
  z-index: 11500 !important; /* lower than drawer */
  pointer-events: none; user-select: none;
  /* keep transform to a simple translateZ to create new stacking context */
  transform: translateZ(0);
}

/* -----------------------------------------------------------
   Drawer header area (title + close button)
   - Keep heights and spacing same for UI stability
   - Tone down button shadow slightly
   ----------------------------------------------------------- */
#proMobileDrawer .drawer-top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:6px; }
#proMobileDrawer .drawer-title { font-weight:800; font-size:1.05rem; color:var(--navText); }

/* Close button: original had heavier shadow -> commented; replacement lighter */
 /*
#proMobileDrawer .drawer-close {
  height:44px; width:44px; display:grid; place-items:center; border-radius:10px; background:#fff;
  border:1px solid rgba(11,18,32,.06); box-shadow:0 6px 18px rgba(8,20,34,.06); cursor:pointer;
}
*/
#proMobileDrawer .drawer-close {
  height:44px; width:44px; display:grid; place-items:center; border-radius:10px; background:#fff;
  border:1px solid rgba(11,18,32,.06);
  /* lighter shadow */
  box-shadow: 0 4px 10px rgba(8,20,34,0.05);
  cursor:pointer;
}

/* -----------------------------------------------------------
   Navigation links inside drawer
   - Keep same padding/font but prefer transform on hover (cheap)
   - transition only background + transform (cheap)
   ----------------------------------------------------------- */
#proMobileDrawer nav { display:flex; flex-direction:column; gap:10px; padding-top:6px; margin-top:6px; }
.pro-drawer-link {
  display:flex; align-items:center; gap:14px; padding:14px 12px; border-radius:12px;
  font-weight:700; color:var(--navText); font-size:1.05rem;
  transition: background .18s ease, transform .12s ease;
}
.pro-drawer-link svg{ flex:0 0 28px; height:28px; width:28px; opacity:.95; }

/* hover: keep subtle bg + small translate (cheap) */
.pro-drawer-link:hover { background: rgba(44,160,75,0.06); transform: translateX(4px); color:var(--brandDark); }
.pro-drawer-link:focus { outline: 3px solid rgba(44,160,75,.12); outline-offset:3px; }

/* divider inside drawer (cheap gradient) */
.pro-drawer-divider { height:1px; background: linear-gradient(90deg,transparent, rgba(11,18,32,.06), transparent); margin:6px 0; border-radius:2px; }

/* -----------------------------------------------------------
   Bottom CTA inside drawer
   - Heavy shadow commented; lighter replacement used
   ----------------------------------------------------------- */

.pro-drawer-cta {
  margin-top:auto; display:block; width:100%; text-align:center; padding:13px 16px; font-weight:800;
  border-radius:999px; background: linear-gradient(90deg,var(--brandDark),var(--accent));
  color:#fff;
  /* lighter box-shadow to reduce GPU cost */
  box-shadow: 0 8px 20px rgba(44,160,75,0.10);
  transition: transform .14s ease, filter .14s ease;
}
.pro-drawer-cta:hover { transform: translateY(-3px); filter: brightness(1.03); }

/* small subtext under CTA in drawer */
.pro-drawer-sub { font-size:0.88rem; color:#556272; margin-top:8px; text-align:center; }


/* CTA & subtext ko hamesha visible rakho (scroll se upar na katain) */
.pro-drawer-cta,
.pro-drawer-sub {
  flex-shrink: 0;    /* height kabhi compress na ho */
}


/* responsive narrow drawer (full-width on tiny screens) */
@media (max-width:420px){
  #proMobileDrawer{ width:100vw; border-radius:0; }
  .pro-drawer-link{ font-size:1rem }
  /* On tiny screens reduce blur on overlay even more for battery/CPU */
  #drawerOverlay { backdrop-filter: blur(3px) saturate(105%); -webkit-backdrop-filter: blur(3px) saturate(105%); }
}

@media (max-height: 640px) {
  #proMobileDrawer {
    padding-top: 10px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}







/* FIX: Drawer open ho to WhatsApp FAB hide */
.drawer-open #sellify-fab-wrap{
  display: none !important;
}


/* -----------------------------------------------------------
   NOTE: Duplicate blocks removed in final (we kept only one canonical drawer block),
   but original duplicate is preserved in your old file above — I commented heavy originals
   so you can find/restore if needed.
   ----------------------------------------------------------- */

/* ===========================================================================
   End MOBILE DRAWER (optimized)
   =========================================================================== */










                                /* END OF NAV + MOBILE DRAWER CSS */



















/* ....................................................................................... */

/* ========================================================================
   SELLIFY — STATS SECTION (PERFORMANCE-OPTIMIZED)
   Replacements: heavy rules commented (marked "HEAVY") and lighter fallbacks added.
   UI kept intact — only performance tweaks.
   ======================================================================== */

:root{
  --g1:#2CA04B;
  --g2:#3CB8D9;
  --glass: rgba(255,255,255,0.85); /* slightly more solid so we can remove heavy blur */
  --card-shadow: 0 12px 28px rgba(11,38,32,0.06); /* reduced shadow for perf */
  --card-shadow-hover: 0 22px 60px rgba(10,28,24,0.08); /* lighter hover shadow */
  --radius:14px; /* slightly smaller radius for lighter repaints */
  --maxw:1200px;
}

/* Section background: keep subtle but avoid expensive layered blend modes */
.sellify-stats-pro2{
  /* HEAVY: previously used multiple layered gradients — kept light single gradient */
  background: linear-gradient(180deg, rgba(44,160,75,0.02), rgba(60,184,217,0.02)), #f7fbfa;
  padding: 64px 18px;
  /* preserve layout spacing */
}

/* Inner white card floating panel */
/* HEAVY: backdrop-filter: blur(...) is commented out (expensive on many devices).
   If you REALLY want blur, uncomment — but expect FPS hit on low-end devices. */
.stats-wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--glass);
  border-radius: calc(var(--radius) + 2px);
  padding: 22px;
  box-shadow: 0 20px 48px rgba(8,20,18,0.04);
  border: 1px solid rgba(11,38,32,0.03);
  /* HEAVY: backdrop-filter causes repaints; commented for perf */
  /* backdrop-filter: blur(6px); */ /* HEAVY: commented — was heavy */
}

/* Grid responsive: 3 → 2 → 1 with balanced gaps */
.stats-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
  align-items:stretch;
}

/* Card: simplified shadows & transitions for perf */
.stat-card{
  display:flex;
  align-items:center;
  background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.98));
  border-radius: var(--radius);
  padding:16px 18px;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(11,38,32,0.04);
  /* reduce transition cost: remove transform on continuous hover, keep subtle */
  transition: box-shadow .22s ease, transform .18s ease;
  min-height:120px;
  position:relative;
  overflow:visible;
}

/* remove heavy gloss pseudo-element (kept removed) */
/* .stat-card::before { ... } removed for perf */

/* Left row: badge + text aligned */
.left{ display:flex; gap:14px; align-items:center; width:100%; }

/* Badge: keep visual but avoid many layered shadows where possible */
.stat-badge{
  width:72px;
  height:72px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  /* keep hero-like gradient but avoid extra inset shadows */
  background: linear-gradient(135deg,var(--g1),var(--g2));
  box-shadow: 0 10px 24px rgba(44,160,75,0.10);
  padding:8px;
  flex-shrink:0;
}

/* Make svg icons slightly larger and crisp */
.stat-badge svg{ width:28px; height:28px; stroke:#ffffff; }

/* Text / numbers area */
.stat-main{ flex:1; min-width:0; }
.stat-top{ display:flex; align-items:baseline; gap:8px; }

/* Number styling: keep gradient text but avoid heavy text-shadows */
.stat-value{
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight:900;
  line-height:1;
  background: linear-gradient(90deg, var(--g1), var(--g2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: transform .18s ease;
}

/* Unit next to number */
.stat-unit{
  color: #13523b;
  font-weight:800;
  font-size:1.05rem;
  margin-left:4px;
  line-height:1;
}

/* Label */
.stat-label{
  margin-top:8px;
  font-weight:700;
  color:#0b3b33;
  font-size:0.95rem;
  display:block;
  position:relative;
}

/* Underline: animate width only (cheaper than animating layout) */
.stat-underline{
  position:absolute;
  left:0;
  bottom:-9px;
  height:6px;
  width:0%;
  border-radius:6px;
  background: linear-gradient(90deg,var(--g1),var(--g2));
  transition: width .55s cubic-bezier(.2,.8,.2,1), opacity .35s;
  opacity:0;
}
.stat-label.done .stat-underline{ width:68px; opacity:1; }

/* Hover focus interactions: subtle (avoid large translate that triggers repaints) */
.stat-card:hover, .stat-card:focus{
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
}
.stat-card:focus-visible{
  outline:none;
  box-shadow: 0 34px 90px rgba(10,28,24,0.1), 0 0 0 6px rgba(44,160,75,0.05);
}

/* reduce pointer-event heavy rules on aria-hidden elements */
.stat-card [aria-hidden="true"]{ user-select:none; }

/* Tablet — 2 columns */
@media (max-width:1100px){
  .stats-grid{ grid-template-columns: repeat(2,1fr); gap:20px; }
  .stat-badge{ width:64px; height:64px; }
}

/* Mobile — single column and compact */
@media (max-width:560px){
  .stats-grid{ grid-template-columns: 1fr; gap:14px; }

  .stats-wrap{ padding:14px; border-radius:12px; }

  .stat-card{
    padding:12px 14px;
    min-height:86px;
    border-radius:12px;
    box-shadow: 0 10px 30px rgba(11,38,32,0.06);
  }

  .stat-badge{ width:52px; height:52px; border-radius:10px; padding:6px; }
  .stat-badge svg{ width:20px; height:20px; }

  .left{ gap:12px; align-items:flex-start; }

  .stat-value{
    font-size: clamp(1.1rem, 6vw, 1.5rem);
    font-weight:800;
    background: none;
    color:#08332a;
  }
  .stat-unit{ font-size:0.95rem; color:#13523b; }

  .stat-label{
    margin-top:6px;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.03em;
    color:#243233;
  }

  .stat-underline{ bottom:-8px; height:4px; width:48px; opacity:1; transition: width .45s; }
}

/* Extra small */
@media (max-width:420px){
  .stat-value{ font-size: clamp(1rem, 7vw, 1.4rem); }
  .stat-label{ font-size:0.72rem; }
}

/* MOBILE — Balanced larger look without overdraw */
@media (max-width:560px){
  .stat-card{
    padding: 18px 16px;
    min-height: 110px;
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(8,20,18,0.07);
  }

  .stat-badge{
    width: 68px;
    height: 68px;
    border-radius: 12px;
    padding: 8px;
  }
  .stat-badge svg{ width: 28px; height: 28px; }

  .left{ gap: 16px; align-items: center; }

  .stat-value{
    font-size: 1.7rem;
    font-weight: 900;
    color: #08332a;
    line-height: 1.05;
  }

  .stat-unit{
    font-size: 1.05rem;
    font-weight: 800;
    margin-left: 6px;
    color: #126045;
  }

  .stat-label{
    margin-top: 8px;
    font-size: 0.98rem;
    font-weight: 700;
    color: #0c3a33;
  }

  .stat-underline{ height: 5px; width: 64px; bottom: -10px; }
  .stats-grid{ gap: 18px !important; }
}

/* MATCH COLORS WITH 'HOW WE WORK' SECTION — CLEAN OVERRIDES */
/* Kept the colors similar but removed conflicting overrides and redundant !important uses */

.sellify-stats-pro2 .stat-badge{
  /* keep gradient but simpler */
  background: linear-gradient(135deg, #2CA04B 0%, #3CB8D9 100%);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(44,160,75,0.10);
}

.sellify-stats-pro2 .stat-badge svg,
.sellify-stats-pro2 .stat-badge svg *{
  stroke: #ffffff;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 1;
}

/* keep numbers readable */
.sellify-stats-pro2 .stat-value{
  color: #1A2B3F;
  font-weight: 900;
}

/* subtle unit colour */
.sellify-stats-pro2 .stat-unit{
  color: #2CA04B;
  font-weight: 800;
}

/* label colour */
.sellify-stats-pro2 .stat-label{
  color: #1A2B3F;
}

/* underline color */
.sellify-stats-pro2 .stat-underline{
  background: #2CA04B;
}

/* spacing tweaks for whole block */
.sellify-stats-pro2 { padding-top: 72px !important; padding-bottom: 72px !important; }
.sellify-stats-pro2 .stats-wrap { padding-top: 36px !important; padding-bottom: 36px !important; }

/* MOBILE spacing adjustments */
@media (max-width:560px){
  .sellify-stats-pro2 { padding-top: 56px !important; padding-bottom: 56px !important; }
  .sellify-stats-pro2 .stats-wrap { padding-top: 26px !important; padding-bottom: 26px !important; }
}

/* Headings (kept gradient text but removed repeated declarations) */
.sellify-stats-pro2 .stats-heading,
.sellify-stats-pro2 .headline-gradient{
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.05;
  background: linear-gradient(90deg, #1A2B3F 0%, #2CA04B 55%, #3CB8D9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Mobile heading size */
@media (max-width:640px){
  .sellify-stats-pro2 .stats-heading,
  .sellify-stats-pro2 .headline-gradient{ font-size:1.9rem; line-height:1.04; }
}


/* ===========================
   FIX: Ensure stat numbers are visible on mobile
   Paste at END of your CSS (mobile-first override)
   - Keeps layout & look same
   - Forces readable color & ensures gradient-text fallback removed on small screens
   =========================== */

@media (max-width: 560px) {

  /* IMPORTANT: force the number to be visible + readable.
     Reason: earlier gradient-text used -webkit-text-fill-color: transparent which
     can persist if more specific mobile rules weren't applied. */
  .sellify-stats-pro2 .stat-value {
    display: inline-block !important;        /* ensure it's not accidentally inline-hidden */
    background: none !important;             /* remove clipped gradient fallback */
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: #0b3b33 !important;               /* dark readable color */
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums;      /* stable number width */
    line-height: 1 !important;
    visibility: visible !important;          /* in case something set hidden */
    opacity: 1 !important;                   /* in case opacity was 0 */
    text-shadow: none !important;            /* remove heavy text-shadows */
    transform: none !important;
  }

  /* ensure unit (yrs / + / +) sits inline and visible */
  .sellify-stats-pro2 .stat-unit {
    display: inline-block !important;
    color: #2CA04B !important;
    font-weight: 800 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Defensive: if any ancestor forced color-inheritance to white/transparent */
  .sellify-stats-pro2 .stat-card,
  .sellify-stats-pro2 .stat-main,
  .sellify-stats-pro2 .left {
    color: initial !important;
    -webkit-text-fill-color: initial !important;
  }

  /* If numbers still show as 0 because JS counter not running, make the initial text slightly larger
     so user can at least see the '0' while debugging — you can remove later if JS counter works */
  .sellify-stats-pro2 .stat-value[data-target]::before{
    content: attr(data-target);
    display: none; /* keep hidden by default; if you want to debug set to block */
  }
}



/* =========================================================
   STATS — COMPACT LAYOUT (TABLET + MOBILE)
   ========================================================= */

/* Tablet / small laptop: 3 chhote cards, ek row me */
@media (min-width: 768px) and (max-width: 1100px) {

  .sellify-stats-pro2 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .sellify-stats-pro2 .stats-wrap {
    padding: 22px 20px !important;
  }

  .sellify-stats-pro2 .stats-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 16px !important;
  }

  .sellify-stats-pro2 .stat-card {
    min-height: 110px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  .sellify-stats-pro2 .stat-badge {
    width: 54px !important;
    height: 54px !important;
    border-radius: 10px !important;
    padding: 6px !important;
  }

  .sellify-stats-pro2 .stat-badge svg {
    width: 22px !important;
    height: 22px !important;
  }

  .sellify-stats-pro2 .stat-value {
    font-size: 1.35rem !important;
  }

  .sellify-stats-pro2 .stat-label {
    font-size: 0.82rem !important;
  }
}

/* Mobile: section + cards dono chhote aur compact */
@media (max-width: 600px) {

  .sellify-stats-pro2 {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .sellify-stats-pro2 .stats-wrap {
    padding: 18px 14px !important;
    border-radius: 12px !important;
  }

  .sellify-stats-pro2 .stats-heading {
    font-size: 1.7rem !important;
    margin-bottom: 18px !important;
  }

  .sellify-stats-pro2 .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .sellify-stats-pro2 .stat-card {
    min-height: 96px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.06) !important;
  }

  .sellify-stats-pro2 .left {
    gap: 10px !important;
  }

  .sellify-stats-pro2 .stat-badge {
    width: 48px !important;
    height: 48px !important;
    padding: 5px !important;
  }

  .sellify-stats-pro2 .stat-badge svg {
    width: 20px !important;
    height: 20px !important;
  }

  .sellify-stats-pro2 .stat-value {
    font-size: 1.25rem !important;
    line-height: 1.05 !important;
  }

  .sellify-stats-pro2 .stat-unit {
    font-size: 0.9rem !important;
  }

  .sellify-stats-pro2 .stat-label {
    font-size: 0.78rem !important;
    margin-top: 4px !important;
  }
}


/* ============================================================
   HARD FIX — + aur years ko number ke center me align karo
   ============================================================ */

/* Row ko force vertical center */
.sellify-stats-pro2 .stat-top {
  align-items: center !important;
}

/* + , yrs , years — final override */
.sellify-stats-pro2 .stat-top .stat-unit {
  font-size: 1.3rem !important;     /* thoda bada */
  line-height: 1 !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 0 0 6px !important;
  transform: translateY(0px) !important;
  vertical-align: middle !important;
}

















/* ==============================================
                    SERVICES SECTION 
======================================================== */


:root{
  --brand:#2CA04B;
  --accent:#3CB8D9;
  --glass-bg:rgba(255,255,255,0.88);
  --glass-border:rgba(255,255,255,0.65);
  --glass-shadow: 0 12px 28px rgba(10,28,24,0.06);
  --grad:linear-gradient(135deg,var(--brand),var(--accent));
}


/* FIX */
.reveal-x,
.reveal-x.left,
.reveal-x.right,
.reveal-x.is-visible,
.reveal-delay-1,
.reveal-delay-2 {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* layout */
#services{
  padding-top:40px;
  padding-bottom:48px;
}
#services .section-head {
  text-align:center;
  margin-bottom:18px;
}
#services .section-head h2{
  font-weight:800;
  color:var(--text, #222);
  margin:0;
  line-height:1.02;
  font-size:2.25rem;
}
#services .section-head p { margin-top:10px; color:#7a7a7a; font-size:1rem; }

.services-grid-wrap{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}


/* FIX */
.services-main-card{
  border-radius:20px;
  padding:18px;
  color:#fff;
  box-shadow: 0 12px 34px rgba(0,0,0,0.08);
  transition: none !important;
  border:1px solid rgba(255,255,255,0.06);
  background:var(--grad);
}

.services-main-row {
  display: grid !important;
  grid-template-columns: min-content 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}

.services-main-icon {
  width:48px;
  height:48px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg,#2CA04B,#3CB8D9);
  box-shadow:0 8px 20px rgba(44,160,75,0.10);
  flex-shrink:0;
}

.h-12.w-12 { }

.services-main-icon svg,
.services-main-icon svg rect { background:transparent; fill:none; stroke:currentColor; }

.services-main-title{
  font-size:1.125rem;
  font-weight:600;
  margin:0;
  line-height:1.05;
}
.services-main-desc {
  margin-top:6px !important;
  color: rgba(255,255,255,0.92);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 52ch;
}

.services-main-list{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 18px;
  font-size:0.95rem;
  justify-items: flex-start;
  text-align: left;
}

.services-main-list li{
  width:100%;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: rgba(14,30,30,0.78);
  list-style-position: inside;
}
.services-main-list li span:first-child { margin-top:6px; display:inline-block; }

.services-right-col{ display:flex; flex-direction:column; gap:16px; }


/* FIX */
.services-glass{
  border-radius:14px;
  padding:16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: none !important;
  will-change: auto !important;
  opacity: 1 !important;
  transform: none !important;
}

.services-glass .icon{
  width:48px;
  height:48px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg,#2CA04B,#3CB8D9);
  box-shadow: 0 8px 18px rgba(44,160,75,0.08);
  transition: none !important;
}
.services-glass .icon svg,
.services-glass .icon svg rect { background:transparent; fill:none; stroke:currentColor; }

.services-glass h3{ margin:0; font-size:1.125rem; font-weight:600; color:#222; }


/* FIX */
.services-main-card,
.services-glass {
  transform: none !important;
  box-shadow: var(--glass-shadow) !important;
}

@media(min-width: 900px){
  .services-grid-wrap{
    grid-template-columns: 7fr 5fr;
    gap:28px;
    align-items:start;
  }
  .services-main-card{ padding:32px; border-radius:24px; }
  .services-main-row{ gap:18px; }
  .services-main-title{ font-size:1.25rem; }
  .services-main-desc{ font-size:1rem; }
}

@media (max-width: 640px){
  #services .section-head h2{
    font-size:1.9rem;
    line-height:1.04;
  }
  #services .section-head p{ font-size:1.02rem; color:#6f6f6f; }

  .services-grid-wrap{
    grid-template-columns:1fr;
    gap:14px;
  }

  .services-main-card{
    padding:18px;
    border-radius:16px;
    margin:0 14px;
  }

  .services-main-row{ display:flex; gap:12px; align-items:flex-start; }
  .services-main-icon{ width:46px; height:46px; border-radius:10px; }
  .services-main-title{ font-size:1.2rem; }
  .services-main-desc{ font-size:1.01rem; line-height:1.7; max-width:100%; margin-top:10px; }

  .services-main-list{
    grid-template-columns:1fr;
    gap:10px 0;
    margin-top:12px;
  }
  .services-main-list li{ gap:8px; font-size:0.98rem; }

  .services-right-col{ margin:0 14px 6px 14px; }
  .services-glass{ padding:14px; border-radius:12px; }
  .services-glass .icon{ width:42px; height:42px; border-radius:10px; }

  #services{ padding-bottom:56px; }
}

@media (max-width:420px){
  .services-main-icon, .services-glass .icon { min-width:44px; min-height:44px; }
  .services-main-title{ font-size:1.15rem; }
  .services-main-desc{ font-size:1rem; }
}

.headline-gradient {
  background: linear-gradient(90deg, #1A2B3F 0%, #2CA04B 55%, #3CB8D9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width:640px){
  .headline-gradient { font-size: 2rem !important; line-height: 1.15 !important; }
}

.services-helpers { --icon-size: 48px; --icon-gap: 16px; }
.services-helpers { --shift: calc(var(--icon-size) + var(--icon-gap)); }

.green-inner-card { position: relative; }
.green-inner-card .green-inner-content { position: relative; }

.green-inner-card .green-inner-content p {
  margin-left: calc(-1 * var(--shift));
  max-width: calc(100% + var(--shift));
  display: block;
}


/* FIX */
.green-inner-card .green-inner-content ul {
  margin-left: 0 !important;
  max-width: 100% !important;
  padding-left: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 18px;
  justify-items: flex-start;
}

@media (max-width: 900px) {
  .services-helpers { --icon-size: 44px; --icon-gap: 14px; }
}
@media (max-width: 640px) {
  .services-helpers { --icon-size: 40px; --icon-gap: 12px; }
  .green-inner-card .green-inner-content p { font-size: 0.98rem; margin-left: calc(-1 * var(--shift)); }
  .green-inner-card .green-inner-content ul { grid-template-columns: 1fr; padding-left: 0.5rem; gap: 10px 0; }
}
@media (max-width: 420px) {
  .services-helpers { --icon-size: 36px; --icon-gap: 10px; }
  .green-inner-card .green-inner-content p { font-size: 0.95rem; }
}

.green-inner-card .icon,
.green-inner-card .h-12.w-12 {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}
@media (max-width: 420px) {
  .green-inner-card .icon,
  .green-inner-card .h-12.w-12 {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
  }
}

@media (max-width: 640px) {
  .green-inner-content ul {
    width: 100%;
    margin-top: 1.25rem;
    padding-left: 0.25rem;
    display: grid;
    gap: 0.75rem;
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .green-inner-content ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    width: 100%;
  }
  .green-inner-content ul li span:first-child { margin-top: 0.45rem; }
  .green-inner-card .green-inner-content ul { padding-left: 0.5rem; grid-template-columns: 1fr; }
}

.services-glass {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}
html.js-reveal .services-glass {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
  backface-visibility: hidden;
  transition: none !important;
}
html.js-reveal .services-glass.right-in { transform: none !important; }
html.js-reveal .services-glass.left-in  { transform: none !important; }
html.js-reveal .services-glass.is-visible {
  opacity: 1 !important;
  transform: none !important;
  box-shadow: var(--glass-shadow) !important;
}
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .services-glass { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ICON GRADIENT FORCE */
.services-main-icon,
.services-glass .icon,
.green-inner-card .icon,
.h-12.w-12,
.icon-sq {
  background-image: linear-gradient(135deg, #2CA04B 0%, #3CB8D9 100%) !important;
  background-color: transparent !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 10px 28px rgba(44,160,75,0.12) !important;
  padding: 8px !important;
  overflow: visible !important;
}
.services-main-icon svg,
.services-glass .icon svg,
.icon-sq svg,
.green-inner-card .icon svg,
.services-main-icon svg * ,
.services-glass .icon svg * {
  background: transparent !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  vector-effect: non-scaling-stroke !important;
  opacity: 1 !important;
}
.services-main-icon,
.services-glass .icon { color: #ffffff !important; }

@media (max-width: 640px) {
  .services-main-icon,
  .services-glass .icon,
  .icon-sq {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 10px !important;
    padding: 6px !important;
    box-shadow: 0 8px 20px rgba(44,160,75,0.10) !important;
  }
  .services-main-icon svg,
  .services-glass .icon svg { width: 20px !important; height: 20px !important; }
}

/* BULLETS LEFT-ALIGN FIX */
.green-inner-card .green-inner-content ul {
  margin-left: 0 !important;
  padding-left: 1.05rem !important;
  list-style-position: outside !important;
  list-style-type: disc !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 10px 18px !important;
  justify-items: start !important;
  align-items: start !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.green-inner-card .green-inner-content ul li {
  width: 100% !important;
  display: block !important;
  text-align: left !important;
  padding-left: 0 !important;
  margin: 0 0 8px 0 !important;
  color: rgba(14,30,30,0.72) !important;
}
.services-main-list {
  justify-items: start !important;
  text-align: left !important;
  list-style-position: outside !important;
}
.services-main-list li {
  width:100% !important;
  display:block !important;
  text-align:left !important;
  margin: 0 0 8px 0 !important;
}
.services-main-list li::marker,
.green-inner-card .green-inner-content ul li::marker {
  font-size: 0.9em;
  color: rgba(14,30,30,0.6);
  margin-right: 8px;
}
@media (max-width: 640px) {
  .green-inner-card .green-inner-content ul,
  .services-main-list { grid-template-columns: 1fr !important; gap: 8px 0 !important; padding-left: .9rem !important; }
}

/* BULLETS ALIGN UNDER PARAGRAPH START */
.green-inner-card .green-inner-content ul {
  margin-left: calc(-1 * var(--shift)) !important;
  max-width: calc(100% + var(--shift)) !important;
  padding-left: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
}
.green-inner-card .green-inner-content ul li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  text-align: left !important;
  color: inherit;
}
.green-inner-card .green-inner-content ul li span {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  margin-top: 6px !important;
  border-radius: 50% !important;
  background: #9aa3b1 !important;
  flex: 0 0 6px !important;
}
@media (min-width: 640px) {
  .green-inner-card .green-inner-content ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 24px !important;
  }
}
@media (max-width: 639px) {
  .green-inner-card .green-inner-content ul {
    grid-template-columns: 1fr !important;
    margin-left: calc(-1 * var(--shift)) !important;
    gap: 10px !important;
  }
  .green-inner-card .green-inner-content ul li span {
    margin-top: 4px !important;
  }
}

/* =======================================================
   SERVICES SECTION — Equal Height Fix (Desktop ≥ 900px)
   Right-side glass cards = same height as big green card
   ======================================================= */

@media (min-width: 900px) {

  /* Pure grid ko equal-height banana */
  #services .services-helpers {
    align-items: stretch !important;
  }

  /* Left big card ALWAYS full height */
  #services .services-helpers .services-main-card,
  #services .services-helpers > div:first-child {
    height: 100% !important;
    display: flex !important;
  }

  /* Right column: stretch full height */
  #services .services-right-col {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* distribute both cards */
  }

  /* Each small card take 50% of height */
  #services .services-right-col .services-glass {
    flex: 1 1 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Inner content proper spacing */
  #services .services-right-col .services-glass p {
    margin-top: auto !important;
  }
}











/* =========================================================================== 
   HOW WE WORK — STYLED SECTION (Final — Organized, Heavy rules commented, Fixes below)
   =========================================================================== */

/* =========================================================================== 
   1) MICRO ANIMATIONS / REDUCED MOTION SUPPORT
   --------------------------------------------------------------------------- */
@keyframes floatY { 
  0%,100% { transform: translateY(0); } 
  50%     { transform: translateY(-6px); } 
}
.anim-float { animation: floatY 7s ease-in-out infinite; }
/* FIX: reduce-paint-area hint for better perf (only when used on small elements) */
.anim-float { will-change: transform; }

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) { .anim-float { animation: none; } }


/* =========================================================================== 
   2) LARGE IMAGE HELPERS (imgBox / imgEl)
   --------------------------------------------------------------------------- */
.imgBox { height: 420px; display: grid; place-items: center; overflow: hidden; }

/* HEAVY - commented
.imgEl {
  max-height: 380px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.15));
}
*/
/* FIX */
/* Reduced shadow and removed large blur drop-shadow for performance.
   keep same visual depth with lighter box-shadow on a wrapper if needed. */
.imgEl {
  max-height: 380px;
  width: auto;
  object-fit: contain;
  display: block;
  /* lightweight shadow that is GPU-friendly */
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  /* avoid expensive filter() operations on images */
  will-change: transform;
}

/* Desktop adjustments */
@media (min-width: 1024px) {
  .imgBox { height: 480px; }
  .imgEl  { max-height: 440px; }
}


/* =========================================================================== 
   3) SECTION BAND BACKGROUND (soft band + tints)
   --------------------------------------------------------------------------- */
.steps-band{
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(45,160,75,.10), transparent 60%),
    radial-gradient(60% 80% at 100% 0%, rgba(60,184,217,.10), transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 30%,#F3FAF6 100%);
  /* ensure decent contrast on mobile */
  background-repeat: no-repeat;
  background-attachment: scroll;
}


/* =========================================================================== 
   4) PREMIUM HEADLINE UTILITY
   --------------------------------------------------------------------------- */
.headline-gradient {
  /* Use Sellify gradient chain, preserve text-clip */
  background: linear-gradient(90deg, #6DC849 0%, #2CA04B 55%, #3CB8D9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* mobile scaling — use specificity not !important */
@media (max-width:640px){
  .headline-gradient { font-size: 2rem; line-height: 1.15; }
}


/* =========================================================================== 
   5) HOW GRID — CENTERED STEP ICONS (layout overrides for .how-grid > .step)
   --------------------------------------------------------------------------- */

/* HEAVY - commented
.how-grid > .step,
.how-grid > .step.reveal {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  width: 100% !important;
  transform: none !important;
  margin: 0 auto !important;
  gap: .6rem !important;
}
*/
/* FIX */
/* Mobile-first, predictable layout without forcing !important (UI unchanged). */
.how-grid > .step,
.how-grid > .step.reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  transform: none;
  margin: 0 auto;
  gap: .6rem;
}

/* Icon sizing inside steps (mobile-first compact) */
/* HEAVY - commented
.how-grid > .step .step-icon {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}
*/
/* FIX */
/* Keep same size/positioning so UI unchanged; apply extracted screenshot gradient and light effects. */
.how-grid > .step .step-icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 9999px; /* round - same visual */

  /* FINAL: exact screenshot-like gradient (green → teal → aqua) */
  background: linear-gradient(180deg, #37B66A 0%, #22A795 55%, #3BC2D7 100%); /* FIX */

  box-shadow:
    inset 0 3px 10px rgba(255,255,255,0.16), /* subtle inner highlight */
    0 8px 28px rgba(42,160,75,0.06);         /* soft outer shadow */
  will-change: transform, opacity;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Icon SVG sizing (compact) */
/* HEAVY - commented
.how-grid > .step .step-icon svg {
  display: block !important;
  margin: 0 !important;
  width: 28px !important;
  height: 28px !important;
  transform: none !important;
}
*/
/* FIX */
.how-grid > .step .step-icon svg {
  display: block;
  margin: 0;
  width: 28px;
  height: 28px;
  transform: none;
  pointer-events: none;
  shape-rendering: geometricPrecision;
}

/* Title & text alignment (unchanged) */
.how-grid > .step .step-title,
.how-grid > .step .step-text {
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* pulse icon preservation */
.how-grid > .step .step-icon.pulse { position: relative; }

@media (max-width: 640px) {
  .how-grid > .step { gap: .4rem; }
}


/* ===================================================================
   ICON STYLE: outlined white stroke (match reference)
   ------------------------------------------------------------------- */

/* HEAVY - commented
.how-grid > .step .step-icon svg,
.how-grid > .step .step-icon svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
}
*/
/* FIX */
/* Use stroke-only, thin white outlines so icons appear exactly like reference.
   This overrides inline fills/strokes if present (safe for this section). */
.how-grid > .step .step-icon svg,
.how-grid > .step .step-icon svg * {
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
  vector-effect: non-scaling-stroke !important;
}

/* Keep small central dots filled if present (e.g., target/magnifier center) */
.how-grid > .step .step-icon svg .icon-dot,
.how-grid > .step .step-icon svg circle.dot {
  fill: #ffffff !important;
  stroke: none !important;
  opacity: 1 !important;
}

/* tiny inner halo to match reference */
.how-grid > .step .step-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  pointer-events: none;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,0.03);
}

/* Mobile adjustments for very small screens */
@media (max-width: 420px) {
  .how-grid > .step .step-icon { width:58px; height:58px; }
  .how-grid > .step .step-icon svg { width:22px; height:22px; }
}


/* =========================================================================== 
   6) HOW-PRO BACKGROUND: Base gradient + tint + overlays
   --------------------------------------------------------------------------- */
.how-pro-bg{
  position: relative;
  background: linear-gradient(135deg, #E8FFF4 0%, #F5FFFB 40%, #F0FFFD 100%);
  overflow: hidden;
}

/* subtle brand tint layer */
.how-pro-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(42,160,75,0.06), rgba(60,184,217,0.06));
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: normal;
}

/* HEAVY - commented
.how-pro-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background-image:
    radial-gradient(rgba(42,160,75,0.035) 2px, transparent 2px),
    radial-gradient(rgba(60,184,217,0.03) 1.5px, transparent 1.5px),
    linear-gradient(135deg, rgba(42,160,75,0.03) 25%, rgba(42,160,75,0.015) 25%);

  background-size:
    180px 180px,
    220px 220px,
    18px 18px;

  background-position:
    20px 30px,
    120px 160px,
    0 0;

  opacity: 0.95;
  mix-blend-mode: normal;
}
*/
/* FIX */
/* Simplified pattern to reduce paint & raster cost while keeping texture */
.how-pro-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(42,160,75,0.03) 1.8px, transparent 1.8px),
    linear-gradient(135deg, rgba(42,160,75,0.018) 25%, rgba(60,184,217,0.015) 25%);
  background-size: 220px 220px, 22px 22px;
  background-position: 20px 30px, 0 0;
  opacity: 0.75;
  mix-blend-mode: normal;
  transform: translateZ(0); /* promotes to composite layer */
}

/* ensure content sits above patterns */
#how .content-wrapper { position: relative; z-index: 10; }


/* =========================================================================== 
   7) DECORATIVE BLOBS (corner accents — non-intrusive)
   --------------------------------------------------------------------------- */

/* HEAVY - commented
.how-pro-bg .corner-blob { position: absolute; border-radius: 50%; filter: blur(34px); opacity: 0.14; z-index: 0; pointer-events: none; }
*/
/* FIX */
/* Replace large blur filter with softer shadow + smaller blur to reduce cost */
.how-pro-bg .corner-blob { 
  position: absolute; 
  border-radius: 50%; 
  /* HEAVY filter replaced: */
  /* original: filter: blur(34px); */
  box-shadow: 0 40px 80px rgba(44,160,75,0.06);
  opacity: 0.14; 
  z-index: 0; 
  pointer-events: none; 
  will-change: transform, opacity;
}

.how-pro-bg .corner-blob.one {
  width: 260px; height: 260px; left: -80px; top: -60px;
  background: linear-gradient(135deg, rgba(42,160,75,0.18), rgba(60,184,217,0.08));
}
.how-pro-bg .corner-blob.two {
  width: 200px; height: 200px; right: -60px; bottom: -40px;
  background: linear-gradient(135deg, rgba(60,184,217,0.12), rgba(42,160,75,0.06));
}

/* soften or hide patterns on smaller screens */
@media (max-width: 768px) {
  .how-pro-bg::after { opacity: 0.7; background-size: 220px 220px, 260px 260px, 26px 26px; }
  .how-pro-bg .corner-blob { display: none; }
}




/* ========================
   HOW GRID — Responsive layout fixes
   Keep desktop 4-column grid, mobile stacked + centered
   ======================== */

/* Base: maintain the grid container (your existing grid definitions stay) */
.how-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* mobile default 2 columns */
  gap: 2.5rem;
  align-items: start;
}

/* Desktop / large: 4 columns, centered content inside each step */
@media (min-width: 900px) {
  .how-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
  }
}

/* Step card: center content inside, but DO NOT force full-width stacking on desktop */
.how-grid > .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  padding: 1.25rem;
  gap: .75rem;
  width: 100%;
  transform: none;
  margin: 0;
}

/* Make sure step has consistent max-width so text lines don't grow too wide on large screens */
@media (min-width: 900px) {
  .how-grid > .step { max-width: 320px; margin: 0 auto; }
}

/* Icon sizing (keep round icon above title) */
.how-grid > .step .step-icon {
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  margin-bottom: .6rem;
  box-shadow: 0 8px 28px rgba(42,160,75,0.08);
}

/* Title and text sizing — keep them consistent */
.how-grid > .step .step-title {
  font-size: 1.25rem;
  line-height: 1.08;
  margin-top: 0.2rem;
  font-weight: 800;
  color: #0f172a;
}
.how-grid > .step .step-text {
  color: #475569;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 34ch;
  margin-top: .5rem;
}

/* Small screens: stack single column for very narrow viewports */
@media (max-width: 420px) {
  .how-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .how-grid > .step { padding: .9rem; }
  .how-grid > .step .step-icon { width:58px; height:58px; }
  .how-grid > .step .step-title { font-size: 1.1rem; }
  .how-grid > .step .step-text { font-size: .98rem; }
}



  
/* Force JS-controlled timing: remove any CSS transition-delay interference */
html.js-reveal #how .step,
html.js-reveal #how .step[data-delay] {
  transition-delay: 0s !important;
}

/* Ensure initial hidden state for JS-enabled pages (no FOUC) */
html.js-reveal #how .step {
  opacity: 0;
  transform: translateY(28px) scale(.995);
  transition: transform 0.9s cubic-bezier(.16,.8,.2,1), opacity 0.75s ease;
  will-change: transform, opacity;
}

/* Visible state */
html.js-reveal #how .step.is-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* ================================================================================================== */



/* ================================================================================================ */



/* ============================================================
   PRICE CARDS SECTION
   ============================================================ */
/* ===========================================================================
   1) GRADIENT HEADING (Global Utility for Page Headings)
   =========================================================================== */
.headline-gradient {
  background: linear-gradient(180deg, #3FBF72 0%, #2BB7A4 100%);



  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
@media (max-width:640px){
  .headline-gradient {
    font-size: 2rem !important;
    line-height: 1.15 !important;
  }
}


/* ===========================================================================
   2) PRICING SECTION — LAYOUT (grid & spacing)
   =========================================================================== */
#pricing { --card-gap: 20px; }

#pricing .stagger {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  #pricing .stagger {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}


/* ===========================================================================
   3) PRICING CARDS — Base, Featured, Hover Effects
   =========================================================================== */
.pricing-card,
.pricing-featured {
  background: #fff;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 18px 40px rgba(8,20,18,0.04);
  overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.9,.3,1),
              box-shadow .28s ease;
  position: relative;
}

.pricing-card:hover,
.pricing-featured:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(8,20,18,0.08);
}

.pricing-featured {
  padding: 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(250,250,250,0.98), rgba(255,255,255,0.98));
}


/* ===========================================================================
   4) PRICING: Text, List, Buttons, Badges
   =========================================================================== */
.text-muted { color: rgba(51,65,85,0.65); }
.text-text { color: #0f172a; }

.pricing-li {
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(15,23,42,0.85);
}

.pricing-li .tick {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: linear-gradient(180deg,#2CA04B,#3CB8D9);
  border-radius: 4px;
}

/* buttons */
.btn-ghost {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:12px 16px;
  border-radius:10px;
  border:1px solid #E6EEF0;
  background:#fff;
  color:#0f172a;
  text-decoration:none;
  font-weight:600;
}
.btn-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:12px 16px;
  border-radius:10px;
  background:linear-gradient(90deg,#2CA04B,#3CB8D9);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  box-shadow: 0 10px 30px rgba(44,160,75,0.12);
}

/* badge */
.badge {
  background: linear-gradient(90deg,#fff,#ffffffcc);
  color:#0f172a;
  border-radius:8px;
  padding:6px 10px;
  font-weight:700;
  box-shadow: 0 6px 18px rgba(8,20,18,0.04);
}


/* ===========================================================================
   5) REVEAL ANIMATION (pricing card stagger animation)
   =========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(.995);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: transform .80s cubic-bezier(.16,.84,.24,1),
              opacity .56s ease;
}

/* delay based on CSS variable --i */
.reveal { transition-delay: calc(var(--i, 0) * 220ms); }

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===========================================================================
   6) PRICING SECTION BACKGROUND (same textured style as HOW section)
   =========================================================================== */
#pricing {
  position: relative;
  background: linear-gradient(135deg, #E8FFF4 0%, #F5FFFB 40%, #F0FFFD 100%);
  overflow: hidden;
}

/* tint overlay */
#pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg,
    rgba(42,160,75,0.06),
    rgba(60,184,217,0.06)
  );
  z-index: 1;
  pointer-events: none;
}

/* pattern overlay */
#pricing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background-image:
    radial-gradient(rgba(42,160,75,0.035) 2px, transparent 2px),
    radial-gradient(rgba(60,184,217,0.03) 1.5px, transparent 1.5px),
    linear-gradient(135deg, rgba(42,160,75,0.03) 25%, rgba(42,160,75,0.015) 25%);

  background-size:
    180px 180px,
    220px 220px,
    18px 18px;

  background-position:
    20px 30px,
    120px 160px,
    0 0;

  opacity: 0.95;
  mix-blend-mode: normal;
}

/* content should always be above the pattern */
#pricing > div {
  position: relative;
  z-index: 10;
}



@media (min-width: 769px) {

  /* make cards positioning context and leave room at bottom for absolute CTA */
  #pricing .stagger > article {
    position: relative;
    padding-bottom: 84px; /* room reserved for CTA height + breathing space */
    min-height: 360px;    /* optional: ensure cards have reasonable minimum height */
    display: block;       /* keep previous layout behavior (we will absolute position CTA) */
  }

  /* normalize featured inner so it doesn't interfere */
  #pricing .pricing-featured .inner { padding-bottom: 0; }

  /* Absolute-position CTAs so they all sit on the same horizontal line */
  #pricing .stagger > article a[href*="pricing"],
  #pricing .stagger > article .inner a[href*="pricing"] {
    position: absolute !important;
    left: 24px !important;
    right: 24px !important;
    bottom: 20px !important;            /* baseline for all buttons — tweak +/-1px if needed */
    margin: 0 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;             /* full width covered by left/right */
    height: 52px !important;            /* consistent CTA height */
    padding: 0 22px !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(44,160,75,0.12) !important; /* consistent shadow */
    transform: none !important;         /* remove accidental transforms */
  }

  /* ensure gradient button looks consistent (featured button) */
  #pricing .stagger > article .inner a[href*="pricing"] {
    background: linear-gradient(90deg,#2CA04B,#3CB8D9) !important;
    color: #fff !important;
  }

  /* ensure plain brand buttons look consistent (left/right) */
  #pricing .stagger > article a[href*="pricing"]:not(.btn-primary) {
    background: linear-gradient(90deg,#6DC849,#4CB04B) !important; /* or use your --brand */
    color: #fff !important;
  }
}

/* ===== Mobile: revert to normal flow so buttons sit under content ===== */
@media (max-width: 768px) {
  #pricing .stagger > article {
    position: static !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
  }
  #pricing .stagger > article a[href*="pricing"],
  #pricing .stagger > article .inner a[href*="pricing"] {
    position: static !important;
    width: 100% !important;
    margin-top: 1rem !important;
    height: auto !important;
  }
}



/* ===== MOBILE: match bottom spacing of left/right cards to featured card ===== */
@media (max-width: 768px) {

  /* make first & third cards have same inner bottom spacing as featured */
  #pricing .stagger > article.pricing-card {
    /* thoda extra inner bottom space taake CTA middle wali tarah nazar aaye */
    padding-bottom: 28px !important;
    box-sizing: border-box !important;
  }

  /* ensure featured inner keeps its existing breathing space */
  #pricing .pricing-featured .inner {
    padding-bottom: 28px !important;
  }

  /* keep CTA inside and nicely spaced */
  #pricing .stagger > article a[href*="pricing"],
  #pricing .stagger > article .inner a[href*="pricing"] {
    margin: 0.9rem 0 !important;
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    box-sizing: border-box !important;
  }
}



/* ------------------------------------------------------------------
   FIX: Responsive, robust desktop CTAs
   - keeps same visual baseline on desktop
   - responsive height and font (clamp)
   - prevents overflow on very wide/narrow cards
   - mobile behavior unchanged
   Paste this at CSS end to override old block.
   ------------------------------------------------------------------ */

:root{
  --pricing-cta-gap: 24px;
  --pricing-cta-bottom: 20px;
  --pricing-cta-min-h: 48px;
  --pricing-cta-max-h: 64px;
  --pricing-cta-font-min: 14px;
  --pricing-cta-font-max: 18px;
}

/* make sure card leaves room for the absolute CTA on desktop */
@media (min-width: 900px) {
  #pricing .stagger > article {
    position: relative;
    /* reserve space dynamically: use max of min height and CTA area */
    padding-bottom: calc(var(--pricing-cta-max-h) + var(--pricing-cta-gap));
    min-height: var(--card-min-h, 420px);
    display: flex;
    flex-direction: column;
  }

  /* featured inner shouldn't add extra bottom (we reserve via article) */
  #pricing .pricing-featured .inner { padding-bottom: 0; }

  /* absolute CTAs — responsive sizing */
  #pricing .stagger > article > a,
  #pricing .stagger > article .inner > a {
    position: absolute !important;
    left: var(--pricing-cta-gap) !important;
    right: var(--pricing-cta-gap) !important;
    bottom: var(--pricing-cta-bottom) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: clamp(var(--pricing-cta-min-h), 4.5vw, var(--pricing-cta-max-h)) !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 36px rgba(44,160,75,0.12) !important;
    transform: none !important;
    z-index: 30 !important;
    max-width: calc(100% - (var(--pricing-cta-gap) * 2)) !important;
    min-width: 180px !important;        /* keep CTAs tappable & readable */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(var(--pricing-cta-font-min), 1.6vw, var(--pricing-cta-font-max)) !important;
    line-height: 1 !important;
  }

  /* Featured CTA visual emphasis */
  #pricing .stagger > article.pricing-featured .inner > a {
    box-shadow: 0 16px 44px rgba(44,160,75,0.14) !important;
  }

  /* ensure gradients remain consistent */
  #pricing .stagger > article.pricing-featured .inner > a {
    background: linear-gradient(90deg, var(--brand-mid), var(--brand-end)) !important;
    color: #fff !important;
  }

  #pricing .stagger > article > a:not(.pricing-featured) {
    background: linear-gradient(90deg, var(--brand-start), var(--brand-mid)) !important;
    color: #fff !important;
  }

  /* small desktop / tablet fallback if card too narrow: make CTA full width inside card */
  @media (min-width: 900px) and (max-width: 1040px) {
    #pricing .stagger > article > a,
    #pricing .stagger > article .inner > a {
      left: 20px !important;
      right: 20px !important;
      min-width: 0 !important;
    }
  }
}

/* MOBILE: keep current flow (no change) */
@media (max-width: 899px) {
  #pricing .stagger > article { padding-bottom: 22px; min-height: auto; }
  #pricing .stagger > article > a,
  #pricing .stagger > article .inner > a {
    position: static !important;
    width: 100% !important;
    margin-top: 1rem !important;
    height: 52px !important;
    white-space: normal !important;
  }
}

/* Accessibility: larger focus ring but not pushing layout */
#pricing .stagger > article a:focus {
  box-shadow: 0 0 0 5px rgba(44,160,75,0.12), 0 16px 44px rgba(44,160,75,0.12) !important;
  outline: none !important;
}

/* safety: ensure CTA text doesn't wrap weird or overflow badges inside card */
#pricing .stagger > article a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* reduce motion for keyboard users */
@media (prefers-reduced-motion: reduce) {
  #pricing .stagger > article a { transition: none !important; transform: none !important; }
}






/* HEAVY - commented
   If mobile CTAs disappeared it's likely due to conflicting absolute rules or overflow hidden.
   Override below to force mobile CTAs visible and in normal flow.
*/

/* FIX: ensure mobile shows CTAs correctly (override any earlier absolute styles) */
@media (max-width: 899px) {
  /* ensure wrapper doesn't clip absolute elements */
  #pricing {
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* restore normal flow for each card */
  #pricing .stagger > article {
    position: static !important;
    padding-bottom: 22px !important;
    min-height: auto !important;
    overflow: visible !important;
    display: block !important;
  }

  /* force CTAs back into flow as full-width buttons */
  #pricing .stagger > article > a,
  #pricing .stagger > article .inner > a {
    position: static !important;
    display: inline-flex !important;
    width: 100% !important;
    margin: 1rem 0 !important;
    height: 52px !important;
    padding: 12px 18px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 40 !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  /* if any transform/translate was hiding them, remove */
  #pricing .stagger > article > a,
  #pricing .stagger > article .inner > a {
    transform: none !important;
  }

  /* ensure badge or inner wrapper doesn't cover the CTA (stack order) */
  #pricing .stagger > article .inner { z-index: 10 !important; }
  #pricing .stagger > article > a,
  #pricing .stagger > article .inner > a { z-index: 40 !important; }

  /* small screens: reduce gap so CTAs not pushed off-screen */
  #pricing .stagger { gap: 14px !important; padding-left: 12px !important; padding-right: 12px !important; }
}

/* EMERGENCY FIX: force pricing cards visible on mobile
   - overrides accidental hiding (opacity/transform/position/overflow)
   - ensures proper stacking above patterns/overlays
   - keeps original visuals (bg, radius, shadow)
   Paste this at the VERY END of your CSS file.
*/

@media (max-width: 899px) {
  /* ensure wrapper is visible and not clipped */
  #pricing, #pricing .max-w-7xl, #pricing .stagger {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* force each card to render and be on top of pattern overlays */
  #pricing .stagger > article {
    display: block !important;
    position: relative !important;
    z-index: 60 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    min-height: 120px !important; /* small safe minimum */
    margin: 0 !important;
    padding: 18px !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(8,20,18,0.06) !important;
  }

  /* ensure inner featured wrapper does not hide the outer card */
  #pricing .pricing-featured .inner {
    position: relative !important;
    z-index: 62 !important;
    background: linear-gradient(180deg, rgba(250,250,250,0.98), rgba(255,255,255,0.98)) !important;
    padding-bottom: 18px !important;
  }

  /* reveal animations sometimes set opacity:0/translate - force visible */
  #pricing .reveal,
  #pricing .reveal * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* restore CTAs into normal flow (visible & tappable) */
  #pricing .stagger > article > a,
  #pricing .stagger > article .inner > a {
    position: static !important;
    display: inline-flex !important;
    width: 100% !important;
    margin: 0.9rem 0 !important;
    height: 52px !important;
    padding: 12px 18px !important;
    z-index: 70 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* pattern overlay might be on top — push it back */
  #pricing::after,
  #pricing::before {
    z-index: 5 !important;
    pointer-events: none !important;
    opacity: 0.9 !important;
  }

  /* badges, headings etc ensure they show above pattern */
  #pricing .stagger > article * { z-index: 65 !important; }

  /* safety: remove transform/translate that can push card off-screen */
  #pricing .stagger > article,
  #pricing .stagger > article * {
    transform: none !important;
    translate: none !important;
  }
}



@media (max-width: 899px) {
  #pricing .stagger > article > a,
  #pricing .stagger > article .inner > a {
    background: linear-gradient(90deg,#2CA04B,#3CB8D9) !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}





/* ========== RESET OLD PRICING EXPERIMENT ========== */
#pricing .pricing-featured::before {
  content: none !important;   /* purana pseudo border hata do */
}
/* ========== FINAL: Middle card outer gradient outline ========== */
#pricing .pricing-featured {
  border: 2px solid transparent !important;
  border-radius: 24px !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #6DC849, #2CA04B, #3CB8D9) border-box !important;
}
/* ========== FINAL: Button gap thora kam ========== */
#pricing .pricing-card a.mt-7,
#pricing .pricing-featured a.mt-7 {
  margin-top: 1rem !important;   /* pehle ~1.75rem tha, ab thora compact */
}


/* PRICING — button ka gap REAL kam */
#pricing .pricing-card > a {
  margin-top: 0.5rem !important;   /* first & third card */
}

#pricing .pricing-featured > a {
  margin-top: 0.5rem !important;   /* beech wala card */
}



/* ============================================
   PRICING — clean layout + controlled gap
   ============================================ */

/* Saare content ko column flex bana do */
#pricing .pricing-card,
#pricing .pricing-featured .inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;          /* YAHI spacing hai items ke darmiyan */
}

/* UL ke neeche ka extra margin hata do */
#pricing .pricing-card ul,
#pricing .pricing-featured ul {
  margin-bottom: 0 !important;
}

/* Button se Tailwind margin effects hata do */
#pricing .pricing-card a,
#pricing .pricing-featured a {
  margin-top: 0 !important;
}

/* ============================================
   PRICING — MOBILE TWEAKS (≤640px)
   ============================================ */
@media (max-width: 640px) {

  /* 1) TOP & BOTTOM cards: normal flow + clear gap */
  #pricing .pricing-card {
    display: block;                    /* flex hatao, normal block layout */
  }

  #pricing .pricing-card ul {
    margin-bottom: 1rem !important;    /* list ke baad gap yahi se milega */
  }

  #pricing .pricing-card > a {
    margin-top: 0 !important;          /* extra margin ki zarurat nahi */
  }

  /* 2) MIDDLE card: jo abhi hai wohi rakho (flex + nice gap) */
  #pricing .pricing-featured .inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;                         /* is ka gap perfect hi rahe */
  }

  /* 3) Teeno buttons: width chhoti + center */
  #pricing .pricing-card a,
  #pricing .pricing-featured a {
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* MOBILE: middle card par bhi gradient outline force */
@media (max-width: 640px) {
  #pricing .pricing-featured {
    border: 2px solid transparent !important;
    border-radius: 24px !important;
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      linear-gradient(135deg, #6DC849, #2CA04B, #3CB8D9) border-box !important;
  }
}

/* FIX: Mobile (≤640px) middle card gradient outline */
@media (max-width: 640px) {

  /* emergency rule ko beat karne ke liye zyada specific selector */
  #pricing .stagger > article.pricing-featured {
    border-radius: 24px !important;
    border: 2px solid transparent !important;

    /* gradient border + white inner background trick */
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      linear-gradient(135deg, #6DC849, #2CA04B, #3CB8D9) border-box !important;

    box-shadow: 0 18px 40px rgba(8,20,18,0.06) !important;
    overflow: visible !important;
    padding: 0 !important; /* border ke andar inner ko handle karenge */
  }

  /* inner ko proper white card bana do */
  #pricing .stagger > article.pricing-featured .inner {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 20px 20px 24px !important;
  }
}










/* =========================================
   PRICING — Tablet (iPad etc.) clean layout
   ========================================= */
@media (min-width: 768px) and (max-width: 1024px) {

  /* section ko thora sa side padding */
  #pricing .max-w-7xl {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* 3 columns, controlled gap */
  #pricing .stagger {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px !important;
  }

  /* cards: equal height + bottom space for CTA */
  #pricing .stagger > article {
    position: relative !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 420px !important;
    padding: 24px 24px 90px !important; /* last value = CTA space */
    margin: 0 !important;
  }

  /* CTA buttons: same baseline, full width inside card */
  #pricing .stagger > article > a,
  #pricing .stagger > article .inner > a {
    position: absolute !important;
    left: 24px !important;
    right: 24px !important;
    bottom: 22px !important;
    width: auto !important;
    height: 52px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* mobile ka 80% width rule tablet par hata do */
  #pricing .pricing-card a,
  #pricing .pricing-featured a {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================
   PRICING — TABLET FIX (iPad etc.)
   Cards equal, no overlap, clean buttons
   ========================================= */
/* FIX */
@media (min-width: 768px) and (max-width: 1024px) {

  /* 3 columns + normal gap */
  #pricing .stagger {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px !important;
  }

  /* har card ko flex column + normal padding */
  #pricing .stagger > article {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    padding: 24px !important;
    padding-bottom: 24px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* featured ke inner ko bhi column bana do */
  #pricing .pricing-featured .inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    padding-bottom: 0 !important;
  }

  /* CTA buttons: normal flow, neeche push, full width */
  #pricing .stagger > article > a,
  #pricing .stagger > article .inner > a {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 52px !important;
    margin-top: auto !important;   /* content ke baad bilkul neeche */
    margin-bottom: 0 !important;
  }

  /* tablet pe 80% width / center rule hata do */
  #pricing .pricing-card a,
  #pricing .pricing-featured a {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* =========================================
   FINAL FIX — Tablet (middle card overlap)
   ========================================= */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Featured card inner must stretch naturally */
  #pricing .pricing-featured {
    display: flex !important;
  }

  #pricing .pricing-featured .inner {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: auto !important;
    padding-bottom: 0 !important;
  }

  /* Button always goes to the bottom, no overlap */
  #pricing .pricing-featured .inner > a {
    margin-top: auto !important;
    position: static !important;
    width: 100% !important;
    height: 52px !important;
  }
}
/* =========================================
   PRICING — Tablet button text fix
   (iPad Mini / Air 768–1024)
   ========================================= */
@media (min-width: 768px) and (max-width: 1024px) {

  #pricing .stagger > article > a,
  #pricing .stagger > article .inner > a {
    height: auto !important;              /* fixed 52px hatao */
    padding: 12px 18px !important;        /* normal padding */
    line-height: 1.25 !important;
    font-size: 14px !important;

    white-space: normal !important;       /* nowrap off */
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* safety: agar spans hon to un par bhi rules apply ho jayen */
  #pricing .stagger > article a span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}









/* FIX: Managed Plan heading ko thora neechay lao (desktop only) */
@media (min-width: 1024px){
  #pricing .pricing-featured > h3{
    margin-top: 20px !important;   /* pehle ~0–4px thi, ab thori neeche */
  }
}

/* FIX: ONLY middle card (Managed Plan) description ko neeche lao */
@media (min-width: 1024px){

  /* h3 ke فوراً baad jo description p hai (sirf featured card) */
  #pricing article.pricing-featured h3 + p{
    margin-top: 20px !important;     /* yahan value change kar sakti ho */
    padding-top: 0 !important;
  }

}

/* FIX: ONLY middle card (Managed Plan) bullets top spacing */
@media (min-width: 1024px){
  #pricing article.pricing-featured ul{
    margin-top: 2.2rem !important;
  }
}



/* FIX: ONLY middle (Managed Plan) CTA gradient */
#pricing article.pricing-featured a.pricing-btn{
  background: linear-gradient(90deg, #2CA04B 0%, #3CB8D9 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 36px rgba(44,160,75,0.18) !important;
}

#pricing article.pricing-featured a.pricing-btn:hover{
  filter: brightness(1.06);
}
/* FIX: Side cards CTA color (match sample image) */
#pricing article.pricing-card a.pricing-btn{
  background: linear-gradient(90deg, #6DC849 0%, #4CAF50 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 32px rgba(76,175,80,0.18) !important;
}

#pricing article.pricing-card a.pricing-btn:hover{
  filter: brightness(1.05);
}




/* FIX: Chrome Mobile "Desktop site" mode (desktop CSS but small screen)
   -> force ONLY mid card CTA to normal flow & centered
*/
@media (max-width: 1100px) and (min-width: 641px){

  /* featured card ko layout context do */
  #pricing article.pricing-featured{
    display: flex !important;
    flex-direction: column !important;
  }

  /* mid CTA: absolute hatao, center */
  #pricing article.pricing-featured a.pricing-btn{
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 84% !important;         /* same as screenshot-style */
    margin: 14px auto 0 !important; /* auto => perfect center */
    display: flex !important;
    justify-content: center !important;
  }
}











/* ================================================================================== */


                                /* Automate your marketing */


/* ===========================================================================
   1) PRO CARD — BASE STRUCTURE (main container, border, shadow)
   =========================================================================== */
.mk-pro{
  position:relative;
  border-radius:1.25rem;
  background:#fff;
  box-shadow:0 10px 28px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);
  transition:transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
  isolation:isolate;
}
.mk-wrap {
  background: #ffffff !important;
}


/* gradient border via mask */
.mk-pro::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,#2CA04B,#3CB8D9);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.25;
  transition:opacity .25s ease;
}

/* soft inner shine/pattern */
.mk-pro::after{
  content:"";
  position:absolute;
  inset:-20% -30% auto -30%;
  height:60%;
  background:
    radial-gradient(40% 60% at 20% 50%, rgba(109,200,73,.12), transparent 60%),
    radial-gradient(40% 60% at 80% 50%, rgba(60,184,217,.10), transparent 60%);
  filter: blur(20px);
  pointer-events:none;
  opacity:.55;
}

/* hover upgrade */
.mk-pro:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 46px rgba(16,24,40,.10);
}
.mk-pro:hover::before{
  opacity:.55;
}



/* ===========================================================================
   2) PRO ICON — 3D Gradient Ring + Inner white capsule
   =========================================================================== */
.mk-ico-pro{
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:9999px;
  background:conic-gradient(from 0deg,#2CA04B,#3CB8D9,#2CA04B);
  padding:2px;
  box-shadow:0 6px 14px rgba(60,184,217,.22);
}

.mk-ico-pro > span{
  width:100%; height:100%;
  display:grid; place-items:center;
  border-radius:inherit;
  background:linear-gradient(180deg,#fff, #f7fbff);
  border:1px solid rgba(60,184,217,.25);
}

.mk-ico-pro svg{
  width:24px; height:24px;
  color:#2CA04B;
  transition: transform .25s ease;
}
.mk-pro:hover .mk-ico-pro svg{
  transform: translateY(-1px);
}



/* ===========================================================================
   3) TITLE + PARAGRAPH (inside card)
   =========================================================================== */
.mk-h{
  font-size:1.35rem;
  line-height:1.25;
  color:#0f172a;
  font-weight:800;
  letter-spacing:.2px;
}

.mk-p{
  color:#475569;
  font-size:1.05rem;
  line-height:1.7;
}



/* ===========================================================================
   4) STAGGER ANIMATION (optional on page load)
   =========================================================================== */
@keyframes rise {
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

.mk-stagger{
  animation:rise .6s cubic-bezier(.2,.7,.2,1) both;
}

.s1{animation-delay:.04s}
.s2{animation-delay:.08s}
.s3{animation-delay:.12s}
.s4{animation-delay:.16s}

@media (prefers-reduced-motion:reduce){
  .mk-stagger{animation:none}
}



/* ===========================================================================
   5) SLIDE-IN ANIMATION (left/right entrance when in viewport)
   =========================================================================== */

/* initial state */
.mk-pro {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(.2,.7,.2,1);
}

/* positions before revealing */
.mk-pro.left-in { transform: translateX(-40px); }
.mk-pro.right-in { transform: translateX(40px); }

/* when visible */
.mk-pro.is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* optional individual delays */
.mk-pro[data-delay="1"] { transition-delay: .1s; }
.mk-pro[data-delay="2"] { transition-delay: .2s; }
.mk-pro[data-delay="3"] { transition-delay: .3s; }
.mk-pro[data-delay="4"] { transition-delay: .4s; }



/* ===========================================================================
   6) GLOBAL — Gradient heading utility
   =========================================================================== */
.headline-gradient {
  background: linear-gradient(90deg, #1A2B3F 0%, #2CA04B 55%, #3CB8D9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width:640px){
  .headline-gradient {
    font-size: 2rem !important;
    line-height: 1.15 !important;
  }
}


/* Match "Automate your marketing" section with HOW WE WORK heading + description */

/* heading (same size + same feel) */
.mk-wrap .headline-gradient {
  font-size: 2.25rem !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* description (same size as HOW WE WORK paragraph) */
.mk-wrap p {
  font-size: 1.125rem !important;    /* 18px */
  line-height: 1.65 !important;
  color: #475569 !important;
  margin-top: 1rem !important;
}

/* mobile adjustment (match HOW section mobile look) */
@media (max-width: 640px) {

  .mk-wrap .headline-gradient {
    font-size: 1.85rem !important;
    line-height: 1.2 !important;
  }

  .mk-wrap p {
    font-size: 1rem !important;   /* 16px mobile */
    line-height: 1.6 !important;
  }

}




/* ============================================================? */



/* ============================================================
   STEPS & FAQ — FINAL SELLIFY POLISHED VERSION
   ============================================================ */
/* ============================================================
   STEPS & FAQ — FINAL SELLIFY POLISHED (DROP-IN REPLACEMENT)
   ============================================================ */

/* -------- BRAND TOKENS (kept local-safe) -------- */
:root{
  --brand-start: #6DC849;
  --brand-mid:   #2CA04B;
  --brand-end:   #3CB8D9;
  --accent:      #3CB8D9;
  --brandDark:   #2CA04B;
}

/* -------------------------
   STEPS (How we work)
   ------------------------- */
.step{
  text-align:center;
  padding: 0 18px;
  will-change: transform, opacity;
}
.step-icon{
  height:88px; width:88px; margin:0 auto 18px;
  border-radius:9999px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--brandDark), var(--accent));
  box-shadow: 0 14px 30px rgba(60,184,217,.18);
  transform-origin: center;
}
@keyframes s-pop {
  0%   { transform: scale(.88); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.step.is-visible .step-icon { animation: s-pop .52s cubic-bezier(.22,.9,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  .step.is-visible .step-icon { animation: none; transform: none; }
}
.step-title{ font-weight:800; font-size:1.35rem; margin:0; }
.step-text{ margin-top:.5rem; font-size:.96rem; color:#334155; }

/* ============================================================
   FAQ — Final single-line highlight, no double border/glow
   Replace your old FAQ CSS with this block
   ============================================================ */

/* GRID */
.faq-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}
@media (min-width: 768px) { .faq-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1400px) { .faq-grid { gap: 28px; } }

/* CARD */
.faq-item {
  position: relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:16px;
  border:1px solid #eef2f7;
  box-shadow:0 10px 22px rgba(2,6,23,0.06);
  overflow: visible; /* allow our underline to render cleanly */
  transition: transform .28s cubic-bezier(.22,.9,.2,1), box-shadow .28s ease;
}

/* slight lift on open — keep consistent shadow (no extra UA outline) */
.faq-item[open]{
  transform: translateY(-4px);
  box-shadow:0 20px 42px rgba(6,20,16,0.08);
  outline: none !important;            /* REMOVE browser outer outline */
  border-color: #eef2f7 !important;    /* ensure border unchanged */
}

/* KILL any browser/native summary markers or pseudo-lines that cause duplicates */
.faq-item::before,
.faq-item::after,
.faq-summary::before,
.faq-summary::marker,
.faq-summary::-webkit-details-marker {
  display: none !important;
  content: none !important;
  border: none !important;
  background: transparent !important;
}

/* SUMMARY (click area) */
.faq-summary{
  padding:20px 24px;
  display:flex;
  gap:1rem;
  align-items:center;
  cursor:pointer;
  user-select:none;
  position:relative; /* for the single underline */
  z-index:2;
  background:transparent;
  transition: background .18s ease;
}
.faq-summary:hover { background: rgba(10,20,10,0.01); }

/* ONLY single underline (our visual indicator). This is the ONLY place a highlight appears. */
.faq-item[open] .faq-summary::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:8px;
  height:6px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--brand-mid), var(--brand-end));
  opacity:.10;
  pointer-events:none;
  transform-origin:center;
  will-change:opacity,transform;
  z-index:5;
}

/* TITLE / ICON / CHEVRON */
.faq-title{
  font-weight:700;
  flex:1;
  color:#111827;
  font-size:18px;
  line-height:1.05;
}
.faq-icon{ width:30px;height:30px;display:grid;place-items:center;color:#2b2b2b;flex-shrink:0;opacity:.95; }
.faq-chevron{
  transition: transform .28s cubic-bezier(.22,.9,.2,1), color .18s ease;
  color: rgba(0,0,0,0.55);
  flex-shrink:0;
}
.faq-item[open] .faq-chevron{ transform: rotate(180deg); color: rgba(0,0,0,0.72); }

/* CONTENT */
.faq-content{
  padding:12px 28px 22px 70px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition: max-height .34s cubic-bezier(.22,.9,.2,1), opacity .26s ease;
  font-size:16px;
  line-height:1.65;
  color:#475569;
  will-change: max-height, opacity;
}
.faq-item[open] .faq-content{ max-height:600px; opacity:1; }

/* Accessibility focus */
.faq-summary:focus{
  box-shadow: 0 0 0 5px rgba(44,160,75,0.12);
  border-radius:12px;
  outline:none;
}

/* Mobile polish */
@media (max-width:480px){
  .faq-summary{ padding:18px; }
  .faq-content{ padding:10px 20px 20px 60px; max-height:420px; }
  .faq-title{ font-size:16px; }
}

/* Reduced-motion safety */
@media (prefers-reduced-motion: reduce){
  .faq-item, .faq-summary, .faq-content, .step-icon{
    transition:none !important;
    animation:none !important;
    transform:none !important;
  }
}
/* ---------------------------
  Emergency override — single clean underline only
  Paste this at the END of your CSS file and hard-reload (Ctrl+F5)
   --------------------------- */

/* 1) remove any native/detail pseudo markers and outer pseudo highlights */
.faq-item::before,
.faq-item::after,
.faq-summary::before,
.faq-summary::marker,
.faq-summary::-webkit-details-marker {
  display: none !important;
  content: none !important;
  background: transparent !important;
  border: none !important;
}

/* 2) keep card border subtle and prevent the outer colored border when open */
.faq-item[open] {
  border-color: rgba(238,242,247,0.6) !important; /* subtle — not the green glow */
  box-shadow: 0 10px 22px rgba(2,6,23,0.06) !important; /* normal shadow */
  transform: translateY(-2px) !important;
  outline: none !important;
}

/* 3) cancel any summary-level box-shadow / background that creates the second line */
.faq-item[open] .faq-summary {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 4) make sure our single ::after underline is the only visible highlight
   (re-declare it here so this rule definitely wins) */
.faq-item[open] .faq-summary::after{
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-mid), var(--brand-end));
  opacity: 0.10;
  pointer-events: none;
  z-index: 5;
  transform: translateZ(0);
}

/* 5) ensure content area has no top-border/line that looks like a duplicate */
.faq-item .faq-content {
  border-top: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 6) last-resort: hide any tiny horizontal rule children that might be injected by other code */
.faq-item [role="separator"], .faq-item hr, .faq-item .divider {
  display: none !important;
}

/* Reduced-motion safety (keep as-is) */
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-summary, .faq-content { transition:none !important; animation:none !important; transform:none !important; }
}













/* ============================================================
   CTA SECTION (BIG SELLIFY CTA WITH WAVES)
   ============================================================ */
.cta-band{ position:relative; color:#fff; }
.cta-bg { background: linear-gradient(90deg, var(--brandDark) 0%, var(--accent) 100%); }

.cta-pattern{
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.35) 1px, transparent 1.5px) 0 0/12px 12px;
}

.wave-top, .wave-btm{ position:absolute; left:0; right:0; line-height:0; }
.wave-top{ top:-1px; opacity:.9; }
.wave-btm{ bottom:-1px; opacity:.85; }

.cta-card{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px; padding: 18px;
}






/* ============================================================
   BUTTON SYSTEM (GHOST / BLOCK / WHATSAPP)
   ============================================================ */
.btn-primary{
  background:#fff; padding:.9rem 1.4rem;
  border-radius:12px; display:inline-flex; font-weight:700;
}
.btn-ghost{
  border:2px solid rgba(255,255,255,.7);
  padding:.9rem 1.3rem; border-radius:12px; font-weight:600;
}
.btn-block{
  background:linear-gradient(90deg,var(--brand) 0%, var(--accent) 100%);
  padding:.8rem 1rem; border-radius:12px; font-weight:700;
}
.btn-wa { display:flex; gap:.55rem; padding:.9rem 1.5rem; border-radius:12px; font-weight:700; }
.btn-wa-solid{ background:#fff; color:#000; }
.btn-wa-outline{ border:1.6px solid rgba(255,255,255,0.9); color:#fff; }
















/* ===========================================================================
   CTA BAND — ORGANIZED & COMMENTED (NO STYLE CHANGES)
   =========================================================================== */


/* <!-- ===== SELLIFY — HERO CTA (Improved, mobile-first, Sellify style) ===== --> */

  :root{
    --brand-start: #6DC849;
    --brand-mid:   #2CA04B;
    --brand-end:   #3CB8D9;
    --g-gradient: linear-gradient(90deg, var(--brand-mid) 6%, #40C08A 48%, var(--brand-end) 100%);

    --glass-border: rgba(255,255,255,0.10);
    --glass-weak: rgba(255,255,255,0.04);
    --text-strong: #062814;
    --radius: 14px;
    --maxw: 1260px;
    --shadow-lg: 0 28px 70px rgba(6,20,16,0.18);
    --shadow-soft: 0 10px 32px rgba(6,20,16,0.10);
  }

  /* base */
  *{box-sizing:border-box}
  html,body{height:100%; margin:0; font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
  body{ background: linear-gradient(180deg, rgba(34,110,83,0.02), rgba(60,184,217,0.01)); }

  /* HERO BAND — mobile-first */
  .hero-band{
    position:relative;
    overflow:hidden;
    padding:60px 20px 90px;
    background: var(--g-gradient);
    color:#fff;
    /* create stacking context to keep things predictable */
    z-index:0;
  }

  /* core overlays (put these first so we can control stacking) */
  .wave-top, .wave-btm {
    position:absolute;
    left:0;
    right:0;
    pointer-events:none;
    z-index:0; /* waves behind everything */
  }
  .wave-top{ top: -1px; }
  .wave-btm{ bottom:-1px; }

  .wave-top svg, .wave-btm svg { display:block; width:100%; height:auto; }

  /* dotted grid overlay — above waves but below content */
  .hero-dot-grid{
    position:absolute;
    inset:0;
    z-index:1;              /* above waves (0), below glow/pattern (2) and content (3) */
    pointer-events:none;
    mix-blend-mode: normal; /* visible by default; change to overlay/soft-light later if you want */
    opacity:0.07;
    background-image:
      radial-gradient(circle, rgba(255,255,255,0.06) 1.2px, transparent 1.2px),
      radial-gradient(circle, rgba(0,0,0,0.008) 0.9px, transparent 0.9px);
    background-size: 18px 18px, 36px 36px;
    background-position: 0 0, 9px 9px;
    transition: opacity .25s ease;
    transform: translateZ(0);
    filter: saturate(105%);
  }

  /* subtle textured overlay and glow sit above dots */
  .dot-pattern{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 14px 14px; opacity:0.06; mix-blend-mode: overlay;
  }
  .bg-glow{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      radial-gradient(900px 420px at 12% 12%, rgba(255,255,255,0.06), transparent 12%),
      radial-gradient(600px 360px at 92% 72%, rgba(255,255,255,0.04), transparent 6%);
    filter: blur(6px);
  }

  /* main container (content above overlays) */
  .hero-inner{
    position:relative; z-index:3;
    width:100%; max-width:var(--maxw); margin:0 auto;
    display:grid; gap:20px;
    grid-template-columns: 1fr; align-items:start;
  }

  /* left column */
  .hero-left{ padding:6px 6px; text-align:left; }
  .hero-title{
    margin:0 0 8px 0;
    font-weight:800;
    font-size: clamp(28px, 8.2vw, 72px);
    line-height:1.02;
    letter-spacing:-0.6px;
    color:#fff;
  }
  .hero-lead{
    margin:0;
    color: rgba(255,255,255,0.95);
    font-size: clamp(14px, 3.2vw, 18px);
    max-width: 720px;
  }

  /* actions */
  .hero-actions{ margin-top:14px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
  .btn{ display:inline-flex; align-items:center; gap:12px; justify-content:center; padding:12px 18px; border-radius:12px; font-weight:800; text-decoration:none; cursor:pointer; min-height:48px; }
  .btn--wa{
    background: linear-gradient(90deg, var(--brand-start) 6%, var(--brand-end) 100%);
    color: var(--text-strong); box-shadow: 0 18px 44px rgba(20,85,60,0.12);
    transition: transform .18s ease, filter .12s ease; min-width:200px;
  }
  .btn--wa:active,.btn--wa:hover{ transform:translateY(-2px); filter:brightness(1.03); }
  .btn--ghost{
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
    border:1px solid rgba(255,255,255,0.12); color:#fff; font-weight:700; min-width:150px; text-align:center;
  }
  .hero-note{ margin-top:10px; color:rgba(255,255,255,0.9); font-size:14px; }

  /* hero card */
  .hero-card-wrap{ display:flex; justify-content:center; align-items:flex-start; padding:6px; }
  .hero-card{
    width:100%; max-width:420px; border-radius:var(--radius); padding:18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border:1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px) saturate(120%);
    color:#eafef4;
    transform-origin:center right;
    opacity:0; transform: translateY(18px) scale(.996);
    transition: opacity 520ms cubic-bezier(.16,.82,.24,1), transform 520ms cubic-bezier(.16,.82,.24,1);
  }
  .hero-card.is-visible{ opacity:1; transform:none; }

  .card-top{ display:flex; gap:12px; align-items:center; padding-bottom:4px; }
  .icon-sq{ width:52px; height:52px; border-radius:12px; display:grid; place-items:center; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.04); }
  .card-title{ font-weight:800; font-size:16px; color:#eafef4; }
  .card-sub{ color: rgba(255,255,255,0.72); font-size:13px; margin-top:4px; }

  .card-hr{ height:1px; margin:14px 0; background: linear-gradient(90deg,transparent, rgba(255,255,255,0.05), transparent); }
  .features{ display:flex; flex-direction:column; gap:12px; margin-top:6px; }
  .feature{ display:flex; gap:12px; align-items:flex-start; color:#e7fff7; font-weight:700; font-size:15px; }
  .check{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background: linear-gradient(180deg,var(--brand-start), var(--brand-mid)); color:#042916; font-weight:800; box-shadow:0 8px 22px rgba(44,160,75,0.14); flex-shrink:0; font-size:14px; }

  .card-cta{
    margin-top:14px;
    background: linear-gradient(90deg, rgba(44,192,88,0.98) 5%, rgba(92,193,204,0.92) 100%);
    padding:14px; border-radius:12px; text-align:center; font-weight:800; color:#062814;
    box-shadow: inset 0 -8px 40px rgba(0,0,0,0.05);
    cursor:pointer; transition: transform .12s ease, filter .12s ease;
  }
  .card-cta:hover{ transform: translateY(-2px); filter:brightness(1.03); }

  /* blobs */
  .blob-a, .blob-b{ position:absolute; border-radius:999px; filter: blur(28px); opacity:0.22; pointer-events:none; z-index:1; }
  .blob-a{ width:260px;height:260px; left:-60px; top:6%; background: radial-gradient(circle at 30% 30%, rgba(109,200,73,0.95), rgba(109,200,73,0.28)); transform:rotate(6deg) }
  .blob-b{ width:340px;height:340px; right:-60px; bottom:6%; background: radial-gradient(circle at 70% 70%, rgba(60,184,217,0.95), rgba(60,184,217,0.24)); transform:rotate(-6deg) }

  /* layout for large screens */
  @media (min-width: 920px){
    .hero-inner{ grid-template-columns: 1fr 460px; gap:32px; align-items:start; }
    .hero-left{ align-self:center; padding-right:12px; }
    .hero-card-wrap{ justify-content:flex-end; align-self:center; padding-top:28px; }
    .hero-card{ width:420px; }
    .hero-title{ font-size: clamp(34px, 6.6vw, 86px); }
  }

  @media (min-width: 1200px){
    .hero-inner{ gap:44px; }
    .hero-left{ padding-left:12px; }
  }

  @media (prefers-reduced-motion: reduce){
    .hero-card, .btn, .card-cta { transition:none !important; transform:none !important; opacity:1 !important; }
    .hero-card{ opacity:1; transform:none; }
  }

  .sr-only{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

  /* mobile tweaks for dotted grid */
  @media (max-width:920px){
    .hero-dot-grid { opacity: 0.04; background-size: 12px 12px, 24px 24px; }
    .blob-a, .blob-b{ opacity:0.14; filter: blur(20px); }
  }



/* DEBUG: force-dots visible (temporary) */
.hero-dot-grid {
  z-index: 99999 !important;
  opacity: 0.18 !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.14) 1.6px, transparent 1.6px),
    radial-gradient(circle, rgba(0,0,0,0.02) 1.2px, transparent 1.2px) !important;
  background-size: 14px 14px, 28px 28px !important;
  background-position: 0 0, 7px 7px !important;
  mix-blend-mode: normal !important;
  outline: 2px dashed rgba(255,0,0,0.45) !important; /* will show box if element exists */
}






/* === Hero dotted overlay — FULL STRONG VISIBILITY === */
#hero-dots-overlay{
  position: absolute !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  opacity: 0.22;                       /* HIGH visibility — you can go up to 0.30 */
  mix-blend-mode: normal !important;   /* remove overlay softness for full clarity */
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.55) 2px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.25) 1.5px, transparent 1.5px);
  background-size: 20px 20px, 40px 40px;   /* bigger & clearer dots spacing */
  background-position: 0 0, 10px 10px;
  filter: saturate(130%);
}

/* Desktop stronger */
@media (min-width:1200px){
  #hero-dots-overlay{
    opacity: 0.25;
    background-size: 22px 22px, 44px 44px;
  }
}

/* Mobile: still visible, not too harsh */
@media (max-width:920px){
  #hero-dots-overlay{
    opacity: 0.18;
    background-size: 16px 16px, 32px 32px;
  }
}

.hero-left {
  padding-left: 32px !important;
}

@media (min-width: 920px) {
  .hero-left {
    padding-left: 56px !important;
  }
}


.hero-lead {
  font-size: 20px !important;
  line-height: 1.55 !important;
  max-width: 760px !important;
}
@media (min-width: 920px) {
  .hero-lead {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }
}


/* ======================================================
   EXACT Screenshot Style — Perfect Glass Card Replica
   ====================================================== */

.hero-card {
  width: 100%;
  max-width: 480px;
  padding: 28px;
  border-radius: 20px;

  /* EXACT screenshot background */
  background: linear-gradient(
      180deg,
      rgba(255,255,255,0.12),
      rgba(255,255,255,0.06)
  );

  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);

  box-shadow: 0 18px 55px rgba(0,0,0,0.18);

  color: #fff;
}

/* Heading + Subheading */
.card-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
}

.card-sub {
  margin-top: 4px;
  font-size: 16px;
  color: rgba(255,255,255,0.80);
}

/* Divider */
.card-hr {
  height: 1px;
  margin: 20px 0;
  background: rgba(255,255,255,0.22);
}

/* Feature List */
.features {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.feature {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}

/* EXACT White Checkbox (Screenshot Accurate) */
.check {
  width: 28px;
  height: 28px;
  border-radius: 8px;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,0.92); /* bright white */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);

  font-size: 18px;
  font-weight: 900;
  color: #13a05a;  /* clean soft green tick */
}

/* BUTTON — Full White Border, Aqua Glass BG */
.card-cta {
  margin-top: 28px;
  padding: 18px;
  border-radius: 16px;

  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.85);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  color: #ffffff;
  font-size: 20px;
  font-weight: 800;

  cursor: pointer;
  transition: all .22s ease;
}

.card-cta:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,1);
}

/* ---------- Responsive Glass Card (mobile-friendly) ---------- */
/* Paste & replace your existing .hero-card related CSS with this block */

.hero-card {
  width: 100%;
  max-width: 480px;
  padding: 26px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 18px 48px rgba(2,20,30,0.14);
  color: #fff;
  transition: transform .22s ease, box-shadow .22s ease;
  z-index: 4; /* ensure above hero background */
  margin: 0 auto;
}

/* slight lift on hover (desktop) */
@media (hover: hover) and (min-width: 920px){
  .hero-card:hover { transform: translateY(-6px); box-shadow: 0 26px 70px rgba(2,20,30,0.16); }
}

/* top row */
.card-top { display:flex; gap:12px; align-items:center; }
.icon-sq { width:48px; height:48px; border-radius:12px;
          background: rgba(255,255,255,0.06); display:grid; place-items:center;
          border: 1px solid rgba(255,255,255,0.06); }

/* title / sub */
.card-title { font-weight:800; font-size:18px; color:#fff; line-height:1; }
.card-sub { margin-top:4px; color: rgba(255,255,255,0.78); font-size:13px; }

/* divider */
.card-hr { height:1px; margin:16px 0; background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.18)); }

/* features list */
.features { display:flex; flex-direction:column; gap:14px; margin-top:6px; }
.feature { display:flex; gap:12px; align-items:center; font-weight:700; font-size:15px; color:#fff; }

/* white checkbox (visible on mobile) */
.check {
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background: rgba(255,255,255,0.98); color:#0b6f3f; font-weight:900; font-size:14px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  flex-shrink:0;
}

/* CTA button — full width on mobile, white border like screenshot */
.card-cta {
  margin-top:18px;
  padding:14px 16px;
  border-radius:12px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.95);
  color:#fff;
  font-weight:800;
  font-size:16px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  cursor:pointer;
  width:100%;
  box-shadow: inset 0 -6px 18px rgba(0,0,0,0.06);
  transition: background .15s ease, transform .12s ease;
}
.card-cta:hover { background: rgba(255,255,255,0.10); transform: translateY(-2px); }

/* small icon in button (optional) */
.card-cta .cta-icon { font-size:18px; line-height:1; }

/* ---------------- Mobile specific tweaks ---------------- */
@media (max-width: 920px) {
  /* hide legacy WA button AND new outline CTA inside hero-left on mobile */
  .hero-left .btn--wa,
  .hero-left .cta-btn-outline {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* if you want to hide any CTA inside hero-actions on mobile (safer) */
  /* .hero-actions .cta-btn-outline { display: none !important; } */

.hero-band {
    padding: 28px 18px 60px !important; /* previously 120px bottom */
  }

  /* keep hero-card slightly snug to bottom — prevents large empty gap */
  .hero-card {
    margin-bottom: 8px !important;
  }

  /* gently nudge bottom wave up a bit if needed (prevents visible blank strip) */
  .wave-btm { bottom: -4px !important; }

  /* small tweak: make hero-left stack at top */
  .hero-inner { align-items: start; }
  .hero-left { order: 0; }
  .hero-card-wrap { order: 1; }
  .hero-note { order: 2; }

  .card-title { font-size: 16px; }
  .card-sub { font-size: 13px; }

  .feature { font-size: 14px; gap:10px; }
  .check { width:24px; height:24px; font-size:12px; border-radius:6px; }

  .card-hr { margin: 12px 0; }

  .card-cta { padding:12px; font-size:15px; border-radius:10px; }
}

/* ---------- optional: keep card visible above hero on small screens ---------- */
@media (max-width:520px){
  .hero-card { margin: 10px 14px; position: relative; }
}

/* ---------- HERO: small-screen responsive tweaks (paste at end of CSS) ---------- */
/* Makes hero heading, description and buttons behave well on phones */

@media (max-width: 920px) {
  /* overall padding to give breathing room on phones */
  .hero-band {
    padding: 28px 18px 120px; /* top smaller, bottom similar */
  }

  /* container grid: single column, content centered-ish */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* left block spacing */
  .hero-left {
    padding: 2px 6px 0 6px;
  }

  /* heading: responsive clamp + comfortable line height for mobile */
  .hero-title {
    font-size: clamp(28px, 8.6vw, 40px); /* smaller max so it wraps to 2-3 lines */
    line-height: 1.08;
    letter-spacing: -0.4px;
    margin-bottom: 12px;
    /* limit width so line-breaks look nice on very narrow screens */
    max-width: 92%;
    word-wrap: break-word;
  }

  /* description: allow 2-3 lines, slightly bigger spacing */
  .hero-lead {
    display: block;
    font-size: clamp(14px, 3.6vw, 16px);
    line-height: 1.48;
    margin-bottom: 14px;
    max-width: 92%;
    color: rgba(255,255,255,0.95);
  }

  /* actions: stack buttons vertically and full-width for easy tapping */
  .hero-actions {
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:stretch;
    margin-top: 6px;
  }

  .btn {
    min-height:48px;
    padding: 12px 16px;
    border-radius:12px;
    font-size:15px;
    width:100%;
    justify-content:center;
  }

  /* WhatsApp primary button: slightly larger, stronger shadow */
  .btn--wa {
    min-width: auto; /* allow full width */
    box-shadow: 0 20px 50px rgba(20,85,60,0.12);
  }

  /* ghost button: make it full-width and subtle */
  .btn--ghost {
    min-width: auto;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border:1px solid rgba(255,255,255,0.10);
  }

  /* hero-note smaller and readable on mobile */
  .hero-note {
    font-size: 13px;
    margin-top:10px;
    color: rgba(255,255,255,0.90);
  }

  /* ensure hero-card stacks after text and remains visually distinct */
  .hero-card-wrap {
    order: 2;
    margin-top: 6px;
    align-items:center;
    justify-content:center;
  }

  .hero-card {
    width: calc(100% - 34px); /* card fits nicely on mobile with small side gutters */
    max-width: 520px;
    margin: 8px auto 0;
  }

  /* reduce top wave overlap so content doesn't collide */
  .wave-top { top: -6px; }

  /* increase dot-grid visibility on mobile a bit */
  .hero-dot-grid { opacity: 0.08; background-size: 12px 12px, 24px 24px; }

  /* smaller heading special case for very small displays */
  @media (max-width: 360px) {
    .hero-title { font-size: clamp(24px, 9.6vw, 34px); line-height:1.06; }
    .hero-lead { font-size: 13px; line-height:1.46; }
    .btn { font-size: 14px; padding: 10px 12px; }
  }
}

/* ---------- Prevent overlapping with wave on larger small screens ---------- */
@media (min-width: 600px) and (max-width: 920px) {
  .hero-left { padding-left: 12px; padding-right: 12px; }
  .hero-title { max-width: 88%; }
  .hero-card { position: relative; right: 0; } /* keep card in-flow */
}

/* --- Mobile tweaks: hide WA button and adjust spacing --- */
@media (max-width: 920px) {
  /* hide WhatsApp CTA on mobile */
  .hero-left .btn--wa { display: none !important; }

  /* ensure hero-inner stacking/spacing good */
  .hero-inner { display: grid; grid-template-columns: 1fr; gap: 18px; }

  /* make sure card & note spacing looks nice */
  .hero-card-wrap { order: 0; }      /* card appears before hero-left content if JS not run */
  .hero-left { order: 1; }           /* hero-left (heading) stays before but our JS will move the note */
  .hero-note { margin-top: 10px; font-size: 14px; opacity: .95; }

  /* slight card padding on mobile so note appears clearly under it */
  .hero-card { margin-top: 6px; padding: 18px; }
}

/* ===========================
   IMPORTANT OVERRIDE - ONLY CHANGE:
   On mobile, keep heading at top (hero-left), then glass card, then the "hero-note" line.
   This override is intentionally specific and minimal so nothing else changes.
   =========================== */
@media (max-width:920px) {
  .hero-left { order: 0 !important; }        /* heading stays first */
  .hero-card-wrap { order: 1 !important; }   /* glass card appears after heading */
  .hero-note { order: 2 !important; }        /* response-note goes below the card */
  .hero-note { margin-top: 18px !important; }/* small extra spacing so it sits clearly below card */
}





/* WhatsApp CTA Button */
.cta-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 14px 28px;
  border-radius: 14px;

  font-weight: 800;
  font-size: 18px;
  color: #fff;

  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  text-decoration: none;
  cursor: pointer;

  transition: all .22s ease;
  box-shadow: inset 0 -6px 18px rgba(0,0,0,0.06);
}

.cta-btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  transform: translateY(-2px);
}

/* Crisp WhatsApp SVG */
.wa-svg {
  width: 20px;
  height: 20px;
  display: inline-block;
  flex-shrink: 0;

  shape-rendering: geometricPrecision;
  image-rendering: optimizeQuality;
  transform: translateZ(0);
}

/* === FIX: Show top wave + adjust hero spacing on mobile === */
@media (max-width: 920px) {
  .hero-band {
    padding-top: 40px !important;
    overflow: visible !important;
  }

  .wave-top {
    top: 0 !important;
  }
}

/* slight offsets so deeper waves don't overlap content */
.wave-top { top: -4px; }
.wave-btm { bottom: -6px; }


/* ===========================
   CENTER ONLY TEXT ELEMENTS 
   (heading, description, note)
   WITHOUT CENTERING THE CARD
   =========================== */

@media (max-width: 920px) {

  /* wrap text only to center — card unaffected */
  .hero-left {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* center heading */
  .hero-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* center description */
  .hero-lead {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* center the note (under 5 minutes…) */
  .hero-note {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* BUT keep hero card centered but not full width center alignment */
  .hero-card-wrap {
    justify-content: center !important;
  }

  /* ensure card stays normally aligned internally (no unwanted centering) */
  .hero-card {
    text-align: left !important;
  }
}
@media (max-width: 920px) {
  .hero-title {
    margin-top: 22px !important; /* Adjust this number (20–30px) */
  }
}




/* ---- Hero card slide-in (right -> left) ---- */
.hero-card {
  /* start slightly right and faint */
  opacity: 0;
  transform: translateX(36px) scale(.996);
  transform-origin: center right;
  transition: opacity 520ms cubic-bezier(.16,.82,.24,1),
              transform 520ms cubic-bezier(.16,.82,.24,1);
  will-change: transform, opacity;
}

/* visible state: slide into place */
.hero-card.slide-in,
.hero-card.is-visible.slide-in { /* compatible if you already add .is-visible */
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* small parallax-like shadow lift (optional, subtle) */
.hero-card.slide-in {
  box-shadow: 0 22px 64px rgba(6,20,16,0.18);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-card, .hero-card.slide-in {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}





/* MOBILE — make hero look like DevTools 80% zoom (compact) */
@media (max-width: 420px) {
  /* prefer actual viewport via safe-vh */
  .hero,
  .site-hero,
  #hero,
  .main-hero {
    /* 80% of viewport height (use safe-vh for mobile browser chrome correctness) */
    min-height: calc(var(--safe-vh, 1vh) * 80) !important;
    height: auto !important;
    padding-top: 28px !important;      /* reduce top breathing */
    padding-bottom: 18px !important;   /* tighten bottom so next section starts sooner */
    overflow: visible !important;
  }

  /* Slightly reduce headline size so it fits the compact look */
  .hero .hero-title,
  .site-hero .hero-title,
  #hero .hero-title {
    font-size: clamp(1.5rem, 6.5vw, 2.2rem) !important;
    line-height: 1.03 !important;
    max-width: 86% !important; /* narrow text width like in your 80% screenshot */
    margin-inline: auto !important;
  }

  /* tighten subtext and CTA spacing */
  .hero .hero-desc,
  .hero p {
    font-size: clamp(.9rem, 3.6vw, 1rem) !important;
    margin-bottom: 10px !important;
  }

  .hero .hero-cta,
  .site-hero .hero-cta,
  #hero .hero-cta {
    margin-top: 10px !important;
    transform: translateZ(0) !important;
    /* reduce vertical size if needed */
    padding: 10px 14px !important;
    font-size: .95rem !important;
  }

  /* ensure floating fab doesn't visually overlap CTA area too early */
  #sellify-fab-wrap { bottom: calc(var(--offset,18px)) !important; }

  /* if next-section has negative margin, neutralize it */
  .section, .after-hero, .next-section {
    margin-top: 0 !important;
    padding-top: 12px !important;
  }
}

/* =========================================
   FIX — hero-note bottom per (mobile only)
   ========================================= */
@media (max-width: 920px) {

  /* niche thodi extra space taake note aur next section clash na kare */
  .hero-band {
    padding-bottom: 88px !important;
  }

  .hero-note {
    position: absolute !important;
    left: 50% !important;
    bottom: 26px !important;
    transform: translateX(-50%) !important;

    width: calc(100% - 48px) !important;   /* dono sides se halka gutter */
    max-width: 480px !important;

    margin: 0 !important;
    text-align: center !important;
  }
}

/* =========================================
   FINAL FIX — hero-note bottom pe, visible
   (mobile only)
   ========================================= */
@media (max-width: 920px) {

  /* niche thori extra space taake note + wave comfortable lagain */
  .hero-band {
    padding-bottom: 120px !important;
  }

  .hero-note {
    position: absolute !important;
    left: 50% !important;
    bottom: 64px !important; /* wave se thora upar, gradient ke andar */
    transform: translateX(-50%) !important;

    width: min(480px, calc(100% - 40px)) !important;
    text-align: center !important;

    /* ensure waqai nazar aaye */
    color: rgba(255,255,255,0.96) !important;
    z-index: 5 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}



/* =========================================
   HERO NOTE — MOBILE FINAL PLACEMENT
   (card se neeche, wave se zara upar)
   ========================================= */
@media (max-width: 920px) {

  /* card ko thora upar uthao taake line ke liye space bane */
  .hero-card {
    margin-bottom: 52px !important;  /* space above note */
  }

  /* section ka bottom padding normal + note ka gap control */
  .hero-band {
    padding-bottom: 90px !important;
  }

  /* note ko section ke bilkul neeche center me laao */
  .hero-note {
    position: absolute !important;
    left: 50% !important;
    bottom: 20px !important;              /* wave se zara upar */
    transform: translateX(-50%) !important;

    width: min(480px, calc(100% - 40px)) !important;
    text-align: center !important;

    font-size: 13px !important;
    color: rgba(255,255,255,0.96) !important;

    z-index: 6 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;      /* click blocking na ho */
  }
}


/* FINAL MOBILE CENTER FIX — CTA BAND */
@media (max-width: 920px) {

  /* pura block exact center me lao */
  .hero-inner {
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* extra left padding hata do */
  .hero-left {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* heading + description ko full width allow + center */
  .hero-title,
  .hero-lead {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* “Response time…” line bhi proper center aligned rahe */
  .hero-note {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
    .hero-note {
    margin-top: 30px !important;   /* <-- yahan value adjust kar sakte ho (15–30px) */
  }
}

/* =====================================================
   MOBILE — FORCE PERFECT CENTER (no hidden offsets)
   ===================================================== */
@media (max-width: 920px) {

  /* Remove leftover padding that shifts heading */
  .hero-left {
    padding-left: 0 !important;
    padding-right: 0 !important;

    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;
  }

  /* Center heading container itself */
  .hero-title {
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* Center text block */
  .hero-lead {
    width: 100% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* Center the note also */
  .hero-note {
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}






















/* ===========================================================================
   FOOTER — ORGANIZED & COMMENTED (NO STYLE CHANGES)
   =========================================================================== */

/* ===========================================================================
   1) SCROLLBAR BEHAVIOR
   - hide scrollbars visually but keep scrolling functional
   =========================================================================== */
html, body {
  overflow-x: hidden;
  overflow-y: auto;            /* scroll allowed */
  -ms-overflow-style: none;    /* IE / Edge hide */
  scrollbar-width: none;       /* Firefox hide */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;               /* Chrome / Safari hide */
}

/* ===========================================================================
   2) WRAPPER + BACKDROP (gradient base + soft glows)
   - .footer-pro is the outer wrapper for the footer module
   =========================================================================== */
.footer-pro {
  position: relative;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  will-change: transform, opacity;
  transform: translateZ(0);
  animation: footerFadeIn 0.9s ease-in-out;
}

/* same gradient as hero & store setup */
.footer-pro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(135deg, #2CA04B 0%, #3CB8D9 100%) !important;
}

/* soft highlight blobs (reduced area) */
.footer-pro::after {
  content: "";
  position: absolute;
  inset: -4% -6% -8% -6%;
  z-index: -2;
  background:
    radial-gradient(60% 40% at 12% 10%, rgba(255, 255, 255, 0.12), transparent 60%),
    radial-gradient(45% 35% at 88% 70%, rgba(255, 255, 255, 0.08), transparent 60%);
  mix-blend-mode: soft-light;
  filter: blur(2px);
}

/* glassy film for depth (overlay inside wrapper) */
.footer-glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
}

/* ===========================================================================
   3) GRID LAYOUT (columns & responsive breakpoints)
   - .f-grid holds the main footer column layout
   =========================================================================== */
.f-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
}
@media (max-width: 920px) {
  .f-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .f-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   4) BRAND / TYPOGRAPHY
   - brand title, small tagline and section titles
   =========================================================================== */
/* BASE (desktop default) */
.f-brand > span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-left: 6px;

  background: #ffffff !important;
  border: 2px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10) !important;

  vertical-align: middle !important;
  transform: translateY(3px) !important;  /* Desktop — 3px down = perfect alignment */
}

/* MOBILE FIX — smaller font, dot needs LESS downward shift */
@media (max-width: 640px) {
  .f-brand > span {
    transform: translateY(1px) !important;  /* Mobile — 1px down = perfect */
  }
}

.f-tag {
  color: #ffffffcc;
  margin-top: 0.55rem;
  font-size: 0.98rem;
}

.f-title {
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-bottom: 1rem;
}

/* ===========================================================================
   5) LINK LISTS (navigation / resource links)
   =========================================================================== */
.f-list a {
  color: #ffffffd1;
  display: block;
  padding: 0.34rem 0;
  transition: transform 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.f-list a:hover {
  color: #fff;
  transform: translateX(3px);
  opacity: 1;
}

/* mini underline spacing for links */
.f-list a, .f-mini a { text-underline-offset: 3px; }

/* ===========================================================================
   6) SOCIAL ICONS (subtle card-like buttons)
   =========================================================================== */
.f-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.f-social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffffee;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.f-social a:hover {
  transform: translateY(-2px);
  border-color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

/* ===========================================================================
   7) CONTACT LINES (address, phone, email)
   =========================================================================== */
.f-contact li {
  color: #ffffffd9;
  padding: 0.32rem 0;
}
.f-contact a {
  color: #fff;
  font-weight: 700;
}



/* ===========================================================================
   9) TOPLINE / BOTTOM MINI BAR (separators & bottom area)
   =========================================================================== */
.f-topline {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent) 1;
}
.f-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.20));
  color: #ffffffc9;
}
.f-mini a {
  color: #ffffffc9;
  transition: color 0.2s ease;
}
.f-mini a:hover {
  color: #fff;
}

/* ===========================================================================
   10) ANIMATIONS / KEYFRAMES
   - footerFadeIn used on .footer-pro
   =========================================================================== */
@keyframes footerFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* FAQ Gradient Heading */
.faq-heading-gradient {
  background: linear-gradient(90deg, #1A2B3F 0%, #2CA04B 55%, #3CB8D9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

@media (max-width: 640px){
  .faq-heading-gradient {
    font-size: 2rem !important;
    line-height: 1.15 !important;
  }
}







/* ============================================================
   FOOTER (MINIMAL PRO FOOTER)
   ============================================================ */
.footer-min {
  position: relative; color:#fff;
}
.footer-min::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, var(--brandDark), var(--brand), var(--accent));
}
.f-grid{ display:grid; gap:28px; grid-template-columns: 1.2fr 1fr 1fr 1fr; }
.f-brand{ font-size:1.6rem; font-weight:800; }
.f-list a:hover{ transform:translateX(2px); }

.footer-pro *{
  color: #ffffff !important;
}


/* FIX: Footer bottom — mobile center properly */
@media (max-width: 640px){

  /* ye tumhara bottom bar container hai (jis pe f-mini bhi laga hai) */
  .f-bottom .max-w-7xl.f-mini{
    justify-content: center !important;   /* justify-between ko override */
    text-align: center !important;
    gap: 10px !important;
  }

  /* copyright line */
  .f-bottom .max-w-7xl.f-mini > p{
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
  }

  /* links row */
  .f-bottom .max-w-7xl.f-mini > div{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0 !important;
  }
}

/* /* =========================================================================== */
 















































/* ============================================
   GLOBAL RESPONSIVE GUARD (UI ko touch nahi karta)
   -> Paste at VERY END of style.css
   ============================================ */

/* 1) Kisi bhi device par horizontal scroll ko band karo */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2) Images / media container se bahar na niklein */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 3) Main wrappers ko safe width do (Tailwind ke sath friendly) */
main,
section,
header,
footer {
  position: relative;
}

/* 4) Chhoti screens (phones) par halka sa compact feel,
      bina UI change kiye (sirf text thora sa manageable) */
@media (max-width: 480px) {
  html {
    font-size: 15px; /* default 16 se sirf thora sa chhota → zoom jaisi feel */
  }

  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 5) Bohat bade desktops par content center me rakho 
      (design same, sirf side ki khali space control) */
@media (min-width: 1440px) {
  body {
    margin-left: auto;
    margin-right: auto;
  }
}



























/* ============================================================
   SELLIFY HERO — CLEAN FINAL VERSION
   (Mobile zoom-out, iPad Air fix, iPad Pro 2-column, Desktop)
   ============================================================ */

/* extra hero tokens (brand colors already upar defined hain) */
:root{
  --nav-h: 64px;
  --hero-img-max: 520px;
  --hero-safe-top: env(safe-area-inset-top, 0px);
}

/* ================= BASE (MOBILE-FIRST) ================= */

.hero-pro{
  position: relative;
  isolation: isolate;
  color: #fff;
  background: linear-gradient(135deg,#2CA04B,#3CB8D9);
  overflow: hidden;
}

/* dotted pattern – light but visible */
.hero-pro::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.22) 1.4px, transparent 1px);
  background-size: 18px 18px;
  mix-blend-mode: screen;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

/* layout: mobile & default tablets */
.hero-wrap{
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(72px + var(--hero-safe-top)) 18px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  box-sizing: border-box;
}

/* kicker badge */
.kicker-btn{
  padding: 11px 22px;
  font-size: 0.95rem;
  border-radius: 14px;
  background: linear-gradient(90deg,#2CA04B,#3CB8D9);
  font-weight: 700;
  color:#fff;
  margin-bottom: 8px;
  box-shadow:0 6px 16px rgba(16,24,32,0.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:none;
  cursor:pointer;
  z-index: 6;
}

/* headline */
.hero-title{
  font-weight: 900;
  font-size: clamp(1.9rem, 7.2vw, 2.6rem);
  line-height: 1.06;
  margin: 6px 0;
  max-width: 700px;
  color:#fff;
  position: relative;
  z-index: 6;
}

.hero-title .strong{
  font-weight: 800;
}

/* accent word SELLIFY */
.hero-title .accent{
  display:inline-block;
  margin-top: 4px;
  background: linear-gradient(90deg,#f2fff4 0%, #d0fbff 55%, #eafff4 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  font-weight:900;
  font-size: clamp(2.1rem, 8vw, 2.9rem);
  letter-spacing:-0.5px;
  text-shadow:
    0 4px 8px rgba(3,24,18,0.08),
    0 12px 24px rgba(6,26,20,0.06);
}

/* description */
.hero-lead{
  margin-top:8px;
  max-width: 92%;
  font-size:1.02rem;
  line-height:1.6;
  color:rgba(244,253,247,0.96);
  z-index:6;
}

/* CTA row */
.hero-cta{
  margin-top:18px;
  display:flex;
  flex-direction: column;
  gap:10px;
  width:100%;
  align-items:center;
  z-index:6;
}

.hero-btn{
  padding:12px 22px;
  border-radius:14px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
}

/* primary CTA button */
.primary-btn{
  width: 92%;
  max-width: 380px;
  background:#fff;
  color:#09121a;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.04);
  box-shadow:0 10px 26px rgba(16,24,32,0.10);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.primary-btn:hover{
  transform: translateY(-2px);
  box-shadow:0 18px 40px rgba(16,24,32,0.14);
  filter: brightness(1.02);
}

/* mobile / default: hero visual hidden */
.hero-visual{
  display:none;
}
.hero-img{ max-width:100%; height:auto; display:block; }

/* ============= VERY SMALL PHONES (zoom-out feel) ============= */
@media (max-width: 480px){

  section.hero-pro{
    height: auto !important;
    min-height: auto !important;
    padding-top: 50px !important;
    padding-bottom: 30px !important;
  }

  .hero-wrap{
    max-width: 360px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
  }

  .hero-title{
    font-size: clamp(1.45rem, 6vw, 1.9rem) !important;
    line-height: 1.15 !important;
    margin: 4px 0 !important;
  }

  .hero-title .accent{
    font-size: clamp(1.7rem, 7vw, 2.2rem) !important;
  }

  .hero-lead{
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .primary-btn{
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
    max-width: 260px !important;
    margin-top: 4px !important;
  }

  .primary-btn svg{
    width: 14px !important;
    height: 14px !important;
    margin-right: 6px !important;
  }

  .kicker-btn{
    padding: 8px 18px !important;
    font-size: 0.78rem !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    
  }

  .hero-visual,
  .hero-img{
    display:none !important;
  }
}



/* ============= LARGE DESKTOP (1100px +) ============= */
/* 2-column classic hero */
@media (min-width: 1100px){

  .hero-pro{
    min-height: calc(100vh - var(--nav-h));
    height: calc(100vh - var(--nav-h));
    display:flex;
    align-items:center;
    padding: 0;
  }

  .hero-wrap{
    height: 100%;
    display:grid;
    grid-template-columns: minmax(0,1.1fr) minmax(0,var(--hero-img-max));
    align-items:center;
    gap:40px;
    padding: 0 48px;
    text-align:left;
  }

  .hero-wrap > div:first-child{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:12px;
  }

  .hero-title{
    font-size: clamp(2.4rem, 3.8vw, 3.4rem);
    line-height:1.02;
    margin-bottom: 4px;
    max-width: 820px;
  }

  .hero-title .accent{
    font-size: clamp(2.6rem, 4.2vw, 3.6rem);
  }

  .hero-lead{
    max-width: 620px;
    font-size:1.08rem;
    line-height:1.65;
  }

  .hero-cta{
    margin-top:24px;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    gap:16px;
    width:auto;
  }

  .primary-btn{
    width:auto;
    min-width: 280px;
    padding: 16px 26px;
    font-size:1.02rem;
  }

  .hero-visual{
    display:flex;
    justify-content:center;
    align-items:center;
    pointer-events:none;
    z-index:4;
  }

  .hero-img{
    width:100%;
    max-width: var(--hero-img-max);
    height:auto;
    transform: rotate(-1deg);
    filter: drop-shadow(0 14px 28px rgba(0,0,0,0.14));
  }
}

/* motion preference respect */
@media (prefers-reduced-motion: reduce){
  .primary-btn,
  .hero-title .accent{
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================
   GLOBAL RESPONSIVE GUARD (safe, keep as-is)
   ============================================ */

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

img,
svg,
video,
canvas{
  max-width:100%;
  height:auto;
  display:block;
}

main,
section,
header,
footer{
  position:relative;
}

@media (max-width: 480px){
  html{
    font-size:15px;
  }

  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl{
    max-width:100%;
    margin-inline:auto;
    padding-inline:16px;
  }
}

@media (min-width:1440px){
  body{
    margin-left:auto;
    margin-right:auto;
  }
}

/* ============================================
   TABLET NAVBAR MINI FIX (iPad Air only)
   ============================================ */
@media (min-width:768px) and (max-width:900px){
  .nav-appointment-btn{ display:none !important; }

  header.nav-pro .max-w-7xl{
    padding-inline:20px !important;
    column-gap:12px !important;
  }

  .nav-pro img.nav-logo{
    height:42px !important;
  }

  header.nav-pro nav{
    gap:20px !important;
    font-size:14px !important;
  }
}




/* ==========================================
   SELLIFY HERO — MOBILE PREMIUM OVERRIDE
   (phones par normal zoom + 70–80vh height)
   ========================================== */
@media (max-width: 600px) {

  /* Hero height: screen ka ~70–80% */
  section.hero-pro {
    min-height: 72vh !important;
    height: auto !important;
    padding-top: 70px !important;      /* header + thori sa space */
    padding-bottom: 32px !important;
  }

  /* Content width: thora narrow, center → premium look */
  .hero-wrap {
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 14px !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Kicker (Nice To See You Here!) — normal size */
  .kicker-btn {
    font-size: 0.88rem !important;
    padding: 10px 22px !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
    
    margin-left: auto !important;
    margin-right: auto !important;
    width: fit-content !important;
  }

  /* Main heading — ab wapas thora bada */
  .hero-title {
    font-size: clamp(2rem, 7vw, 2.4rem) !important;
    line-height: 1.14 !important;
    margin: 6px 0 !important;
    max-width: 100% !important;
  }

  .hero-title .accent {
    font-size: clamp(2.3rem, 8vw, 2.7rem) !important;
  }

  /* Description — readable, na bohat bari na bohat choti */
  .hero-lead {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CTA button — proper size + width */
  .primary-btn {
    max-width: 320px !important;
    width: 100% !important;
    padding: 12px 22px !important;
    font-size: 0.92rem !important;
    margin-top: 10px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .primary-btn svg {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
  }

  /* Mobile par image hide hi rahe */
  .hero-visual,
  .hero-img {
    display: none !important;
    visibility: hidden !important;
  }
}


/* ======================================================
   MOBILE HERO TWEAK — badge gap + bigger heading
   ====================================================== */
@media (max-width: 600px) {

  /* Badge (Nice To See You Here!) ka neeche gap */
  .kicker-btn {
    margin-bottom: 24px !important;   /* pehle 6–8 tha → ab clean gap */
  }

  /* Main heading ko thora bada + premium spacing */
  .hero-title {
    font-size: clamp(2.1rem, 7.8vw, 2.55rem) !important;
    line-height: 1.12 !important;
    margin-top: 4px !important;
  }

  .hero-title .accent {
    font-size: clamp(2.4rem, 8.5vw, 2.9rem) !important;
  }
}

/* =========================================
   FINAL TOP-GAP FIX — BALANCED VERSION
   ========================================= */
@media (max-width: 600px) {

  /* Hero container — thoda space wapas */
  section.hero-pro {
    padding-top: 14px !important;   /* 0 se badha kar 14px — perfect balance */
    min-height: 68vh !important;    /* thodi si height zyada for premium spacing */
  }

  /* Content wrapper — balanced spacing */
  .hero-wrap {
    padding-top: 58px !important;   /* pehle 36px tha → ab better 48px */
    gap: 12px !important;
  }

  /* Kicker button slight spacing */
  .kicker-btn {
    margin-top: 2px !important;
  }
}








/* ============================================
   SELLIFY — FORCE DESKTOP HERO ON DESKTOP-MODE
   (mobile + request desktop site only)
   ============================================ */

html.sellify-force-desktop body .hero-pro {
  min-height: calc(100vh - var(--nav-h)) !important;
  height: calc(100vh - var(--nav-h)) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

html.sellify-force-desktop body .hero-wrap {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, var(--hero-img-max)) !important;
  align-items: center !important;
  gap: 32px !important;
  padding: 0 32px !important;
  text-align: left !important;
}

html.sellify-force-desktop body .hero-wrap > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

html.sellify-force-desktop body .hero-title {
  font-size: clamp(2rem, 3.4vw, 2.6rem) !important;
  line-height: 1.05 !important;
  max-width: 720px !important;
  text-align: left !important;
}

html.sellify-force-desktop body .hero-title .accent {
  font-size: clamp(2.2rem, 3.8vw, 2.8rem) !important;
}

html.sellify-force-desktop body .hero-lead {
  max-width: 620px !important;
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

html.sellify-force-desktop body .hero-cta {
  margin-top: 18px !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
  width: auto !important;
}

html.sellify-force-desktop body .primary-btn {
  width: auto !important;
  min-width: 240px !important;
  padding: 14px 22px !important;
  font-size: 0.9rem !important;
}

/* image ko bhi wapas dikhao */
html.sellify-force-desktop body .hero-visual {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  pointer-events: none !important;
}

html.sellify-force-desktop body .hero-img {
  width: 100% !important;
  max-width: var(--hero-img-max) !important;
  height: auto !important;
  transform: rotate(-1deg);
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.14));
}










/* ==========================================
   1) SMALL DESKTOPS + DESKTOP MODE ON PHONE
   (width ~900–1100: e.g. 980px desktop view)
   ========================================== */


/* ==========================================
   2) FORCE DESKTOP LAYOUT WHEN USER
      TAPS "REQUEST DESKTOP SITE" ON PHONE
   (HTML pe class: sellify-force-desktop)
   ========================================== */

html.sellify-force-desktop section.hero-pro {
  min-height: 78vh !important;
  height: auto !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  display: flex !important;
  align-items: center !important;
}

html.sellify-force-desktop .hero-wrap {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-inline: 40px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 520px) !important;
  align-items: center !important;
  text-align: left !important;
}

html.sellify-force-desktop .hero-wrap > div:first-child {
  justify-content: center !important;
  align-items: flex-start !important;
}

html.sellify-force-desktop .hero-visual {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}










/* ============================================
   FIX — Chrome Desktop-Site hero height (≈980px)
   ============================================ */
@media (min-width: 900px) and (max-width: 1100px) {

  /* Hero ko full-screen se normal content height par lao */
  body .hero-pro,
  section.hero-pro {
    min-height: auto !important;
    height: auto !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Andar ka wrapper jo already padding de raha hai,
     uski extra top/bottom padding hata do */
  .hero-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Image ko visible + normal size rakho */
  .hero-visual {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-img {
    max-width: 380px !important;
    width: 100% !important;
    height: auto !important;
  }
}






/* ============================================
   iPAD MINI / iPAD AIR (portrait 768–900)
   Clean 1-column hero — center & balanced
   ============================================ */
@media (min-width: 768px) and (max-width: 900px) {

  /* Hero ko flex bana ke vertical center */
  .hero-pro {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 72vh !important;   /* pehle 80vh se thora kam */
    height: auto !important;
    padding-top: 40px !important;   /* 70 → 40, upar ka gap kam */
    padding-bottom: 40px !important;
  }

  /* Content block – center, compact width */
  .hero-wrap {
    max-width: 640px !important;
    margin-inline: auto !important;
    padding-inline: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 16px !important;
  }

  .kicker-btn {
    font-size: 0.9rem !important;
    padding: 10px 24px !important;
    margin-bottom: 10px !important;
  }

  .hero-title {
    font-size: clamp(2.1rem, 3.2vw, 2.6rem) !important;
    line-height: 1.12 !important;
    max-width: 520px !important;
    margin: 4px 0 !important;
  }

  .hero-title .accent {
    font-size: clamp(2.3rem, 3.4vw, 2.9rem) !important;
  }

  .hero-lead {
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
    max-width: 520px !important;
    margin-inline: auto !important;
    margin-top: 4px !important;
    margin-bottom: 10px !important;
  }

  .hero-cta {
    margin-top: 10px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .primary-btn {
    padding: 14px 26px !important;
    font-size: 0.96rem !important;
    max-width: 340px !important;
    width: 100% !important;
  }

  /* iPad par hero image hide hi rakhen (1-column clean) */
  .hero-visual,
  .hero-img {
    display: none !important;
  }
}

/* ============================================
   iPad Mini / iPad Air — Text → Button Gap Fix
   ============================================ */
@media (min-width: 768px) and (max-width: 900px) {

  /* lead paragraph ke neeche zara sa zyada gap */
  .hero-lead {
    margin-bottom: 28px !important;  /* pehle ~10px tha */
  }

  /* CTA group bhi thora neeche aaye */
  .hero-cta {
    margin-top: 24px !important;     /* 10 → 14 */
    gap: 34px !important;            /* buttons ke darmiyan better spacing */
  }

  /* Button ko thori sa elegance */
  .primary-btn {
    padding: 15px 16px !important;
  }

  /* Kicker button ka neeche extra clean gap */
  .kicker-btn {
    margin-bottom: 28px !important;   /* pehle ~10px → ab airy */
  }

  /* Heading ke neeche controlled tight spacing */
  .hero-title {
    margin-bottom: 6px !important;
  }

  /* Paragraph ke neeche comfortable gap → CTA se separate */
  .hero-lead {
    margin-bottom: 20px !important;   /* premium spacing */
  }

  /* CTA group thoda aur neeche */
  .hero-cta {
    margin-top: 14px !important;
    gap: 14px !important;
  }

  .primary-btn {
    padding: 15px 26px !important;
  }
}



/* =========================================================
   iPad Pro Portrait (1024px) — Desktop Layout Hero Fix
   Text LEFT + Image RIGHT (2-column)
   ========================================================= */
@media (min-width: 1000px) and (max-width: 1100px) and (orientation: portrait) {

  /* Hero frame */
  .hero-pro {
    min-height: auto !important;
    height: auto !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 2-column desktop layout */
  .hero-wrap {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding-inline: 40px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1.1fr) minmax(0,520px) !important;
    align-items: center !important;
    column-gap: 32px !important;
    text-align: left !important;
  }

  /* TEXT LEFT */
  .hero-wrap > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 16px !important;
    text-align: left !important;
  }

  /* IMAGE RIGHT */
  .hero-visual {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-img {
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    transform: rotate(-1deg);
  }

   .primary-btn {
    padding: 18px 32px !important;   /* More height + wider */
    font-size: 1.05rem !important;   /* Desktop-style big text */
    min-width: 280px !important;     /* Not too narrow */
    border-radius: 16px !important;  /* Premium rounded */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.12) !important;
  }

  .primary-btn svg {
    width: 20px !important;
    height: 20px !important;
    /* margin-right: px !important; */
  }

  /* CTA Row spacing improve */
  .hero-cta {
    gap: 20px !important;
    margin-top: 16px !important;
  }
}








/* =========================================================
   Nest Hub / 1024×600 (landscape)
   Hero: 2-column — text LEFT, image RIGHT
   ========================================================= */
@media (min-width: 1000px) and (max-width: 1100px) and (orientation: landscape) {

  /* hero frame – choti height screens ke liye */
  .hero-pro {
    min-height: 70vh !important;
    height: auto !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 2-column layout */
  .hero-wrap {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding-inline: 40px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 480px) !important;
    align-items: center !important;
    column-gap: 32px !important;
    text-align: left !important;
  }

  /* text block LEFT */
  .hero-wrap > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 14px !important;
    text-align: left !important;
  }

  .hero-title {
    max-width: 640px !important;
    margin-bottom: 4px !important;
  }

  .hero-lead {
    max-width: 620px !important;
    margin-bottom: 12px !important;
    line-height: 1.55 !important;
  }
/* CTA container — left aligned + breathing space */
  .hero-cta {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 18px !important;
    margin-top: 10px !important;
    width: auto !important;
    margin-left: 0 !important;
  }

  /* PRIMARY BUTTON — not compressed, proper desktop size */
  .primary-btn {
    width: auto !important;          /* 92% / 100% sab hatao */
    min-width: 280px !important;
    max-width: none !important;
    padding: 16px 30px !important;   /* height + width balanced */
    font-size: 1rem !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.10) !important;
    margin: 0 !important;
    align-self: flex-start !important;
  }

  .primary-btn svg {
    width: 20px !important;
    height: 20px !important;
    margin-right: 6px !important;
  }

 

  /* image RIGHT */
  .hero-visual {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-img {
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    transform: rotate(-1deg);
  }
}



/* =======================================================
   FIX — Chrome Mobile "Desktop Site" 980px hero layout
   Force TRUE desktop 2-column layout at fake-desktop widths
   ======================================================= */
@media (min-width: 950px) and (max-width: 1050px) {

  /* Hero container becomes 2 columns */
  .hero-pro {
    min-height: calc(100vh - var(--nav-h)) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
  }

  .hero-wrap {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    align-items: center !important;
    text-align: left !important;
    gap: 32px !important;
    padding: 0 34px !important;
  }

  /* Left text column alignment */
  .hero-wrap > div:first-child {
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  /* Headings */
  .hero-title {
    text-align: left !important;
    font-size: clamp(2rem, 3.4vw, 2.6rem) !important;
    line-height: 1.05 !important;
    max-width: 620px !important;
  }

  /* Description */
  .hero-lead {
    max-width: 600px !important;
    text-align: left !important;
  }

  /* CTA buttons */
  .hero-cta {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .primary-btn {
    width: auto !important;
    min-width: 240px !important;
    padding: 14px 22px !important;
    border-radius: 14px !important;
  }

  /* Show hero image */
  .hero-visual {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-img {
    display: block !important;
    max-width: 360px !important;
    width: 100% !important;
    transform: rotate(-1deg);
  }
}




/* =========================================
   HERO CTA — Mobile button width fix
   (full bar → normal centered button)
   ========================================= */
@media (max-width: 600px) {

  .hero-cta {
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-cta .primary-btn {
    width: auto !important;           /* 100% hatao */
    max-width: 260px !important;      /* normal button width */
    padding: 12px 18px !important;    /* andar ka side padding normal */
    margin-left: auto !important;
    margin-right: auto !important;    /* center me */
  }
}



/* MOBILE — Hero top spacing fix (Android + iPhone both) */
@media (max-width: 920px) {
  .hero-band {
    padding-top: 70px !important;   /* ← isko 60–90px tak adjust kar sakti ho */
  }
}































/* ============================================================
   FOOTER — MOBILE RESPONSIVE FIX (INDEX)
   Paste at VERY END (last)
   UI same, sirf mobile layout/spacing fix
   ============================================================ */

/* HEAVY - commented */
/*
footer.footer-pro .f-grid{
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
}
*/

/* FIX: container padding mobile safe */
footer.footer-pro > .relative{
  padding-left: 22px !important;
  padding-right: 22px !important;
}
@media (max-width: 640px){
  footer.footer-pro > .relative{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* FIX: grid responsive (desktop 4 -> tablet 2 -> mobile 1) */
footer.footer-pro .f-grid{
  display: grid !important;
  gap: 28px !important;
  grid-template-columns: 1.2fr 1fr 1fr 1fr !important; /* desktop same */
}

@media (max-width: 920px){
  footer.footer-pro .f-grid{
    grid-template-columns: 1fr 1fr !important; /* tablet */
    gap: 22px !important;
  }
}

@media (max-width: 560px){
  footer.footer-pro .f-grid{
    grid-template-columns: 1fr !important;     /* mobile */
    gap: 18px !important;
  }

  /* mobile align */
  footer.footer-pro .f-title{ margin-bottom: 10px !important; }
  footer.footer-pro .f-tag{ max-width: 100% !important; }
}

/* FIX: prevent horizontal overflow on mobile */
footer.footer-pro,
footer.footer-pro *{
  max-width: 100%;
}
footer.footer-pro .f-brand,
footer.footer-pro .f-tag{
  overflow-wrap: anywhere;
}

/* FIX: socials wrap nicely on mobile (no cut) */
footer.footer-pro .f-social{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* FIX: bottom bar stack properly on small screens */
footer.footer-pro .f-bottom .f-mini{
  gap: 10px !important;
}
@media (max-width: 560px){
  footer.footer-pro .f-bottom .f-mini{
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  footer.footer-pro .f-bottom .f-mini > div{
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

/* FIX: if any link row is forcing width */
footer.footer-pro .f-list a,
footer.footer-pro .f-contact li{
  width: auto !important;
}





/* HOW WE WORK SCROLL BUTTON TO SECTION  */


html{
  scroll-behavior: smooth;
}

#services{
  scroll-margin-top: 50px; /* apne navbar ki height ke hisaab se 70-110px */
}






















/* ==========================================
   SELLIFY — FLOATING WHATSAPP BUTTON
   ========================================== */

/* wrapper */
#sellify-fab-wrap{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99999;
}

/* main button (anchor OR button both supported) */
.swy-wa-simple{
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #25D366;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 14px 32px rgba(37,211,102,0.35);
  cursor: pointer;

  border: none;
  outline: none;
  text-decoration: none;

  transition: transform .25s ease, box-shadow .25s ease;
}

/* hover effect */
.swy-wa-simple:hover{
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 20px 44px rgba(37,211,102,0.45);
}

/* white inner ring */
.swy-ring-white{
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
  z-index: 1;
}

/* whatsapp icon */
.swy-wa-simple svg{
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  fill: #25D366;
}

/* screen-reader text (hide visually) */
.swy-sr{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* mobile size */
@media (max-width: 640px){
  .swy-wa-simple{
    width: 56px;
    height: 56px;
  }

  .swy-wa-simple svg{
    width: 24px;
    height: 24px;
  }
}




/* FIX: <a> ko button jesa behave karwana */
.swy-wa-simple{
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}





/* ==============================
   FIX: WhatsApp FAB not showing on MOBILE
   ============================== */

@media (max-width: 768px){
  #sellify-fab-wrap{
    position: fixed !important;
    right: 16px !important;
    bottom: 16px !important;
    z-index: 2147483647 !important; /* max safe */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}