/* ===========================================================================
   SECTION: GLOBAL / BASE UTILITIES  + NAV + MOBILE MENU
   ACTION: heavy rules commented (kept for reference) + lightweight replacements
   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; }

/* ------------------------------------------------------------
   OLD (heavy) - transitions on ALL properties cause repaints:
   ⚠️ heavy rule — 'transition: all' can trigger many repaints/layouts
--------------------------------------------------------------- */
/*
a { transition: all .25s ease; }
*/

/* ------------------------------------------------------------
   REPLACEMENT (optimized)
   - only animate cheap properties (color, opacity, transform)
   - keeps UI behaviour but lowers paint cost
------------------------------------------------------------- */
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; }


/* ============================================================
   SCROLL REVEAL (GENERIC UTILITIES)
   ============================================================ */

/* ------------------------------------------------------------
   OLD (heavy): generic .reveal used long shorthand transition
   (not huge, but make it explicit and only animate transform/opacity)
--------------------------------------------------------------- */
/*
.reveal{
  opacity:0; transform: translateY(18px);
  transition:.6s cubic-bezier(.2,.7,.2,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)
   ============================================================ */
.infobar { background: linear-gradient(90deg,var(--brandDark) 0%,var(--accent) 100%); color: #fff; position: relative; }
.infobar-deco{
  position:absolute; left:0; top:0; bottom:0; width:80px;
  background: linear-gradient(135deg,var(--accent) 0%,var(--brand) 80%);
  clip-path: polygon(0 0,100% 0,75% 100%,0% 100%);
  opacity:.95;
  pointer-events: none;
}
/* keep underline offset behaviour */
header a, .infobar a { text-underline-offset:2px; }

/* Infobar responsive fix */
@media (max-width: 640px){
  .infobar .max-w-7xl{ justify-content:center; gap:12px; }
  .infobar a{ font-size:13px; font-weight:600; }
  .infobar svg{ width:15px; height:15px; }
  .infobar .opacity-50{ display:none; }
}
@media (max-width: 360px){
  .infobar .max-w-7xl{ flex-wrap:wrap; row-gap:6px; }
}


/* ============================================================
   NAVBAR CTA + HEADER BUTTONS
   ============================================================ */

/* 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;
  /* OLD heavy box-shadow (commented) */
  /*
  box-shadow:0 10px 24px rgba(60,184,217,.25);
  transition:filter .25s, transform .25s, box-shadow .25s;
  */
  /* REPLACEMENT: cheaper, visually similar */
  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: avoid transition: all & heavy shadow */
.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%);
  /* OLD heavy box-shadow + transition (commented) */
  /*
  box-shadow: 0 4px 16px rgba(60, 184, 217, 0.35);
  transition: all 0.3s ease;
  */
  /* REPLACEMENT: lighter shadow + specific transition */
  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 */
.nav-pro {
  background: #fff !important;
  /* OLD heavy subtle shadow (commented) */
  /*
  box-shadow: 0 4px 14px rgba(16,24,40,0.04);
  */
  /* REPLACEMENT: slightly cheaper but still soft */
  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; JS toggles .is-sticky */
  z-index: 11500;
  transition: box-shadow .18s ease, transform .12s ease;
}

/* 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;
}

/* Logo image (use <img class="nav-logo">) */
/* NOTE: originally set to 64px (fine), but reducing unnecessary huge max-height */
.nav-pro img.nav-logo {
  height: 64px !important; /* desktop default — preserved for UI */
  width: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-height: 120px;
}

/* smaller logo on mobile */
@media (max-width: 768px){
  .nav-pro img.nav-logo { height: 54px !important; }
}

/* header row sizing — ensure stable layout; reduced min-height for better viewport real-estate */
.nav-pro .max-w-7xl,
.nav-pro > .max-w-7xl,
.nav-pro .max-w-7xl > div {
  min-height: 84px;   /* kept same visually */
  align-items: center;
}

/* slim variants preserved (no visual change) */
.nav-pro.slim { /* add .slim when you want compact header */ }
.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;
}

/* slim-logo size */
.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; }
}

/* ===========================================
   SELLIFY NAV — compact height override (kept)
   =========================================== */

/* Final compact header adjustments (preserve UI) */
.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;
}
.nav-pro img.nav-logo { height: 48px !important; }
@media (max-width: 768px){
  .nav-pro img.nav-logo { height: 42px !important; }
}

/* NAV CTA duplicate rules: keep single optimized version */
/* (Original duplicates were removed to reduce CSS size) */

/* Sticky state applied by JS: keeps visual look but cheaper shadow */
.nav-pro.is-sticky {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  /* OLD heavier shadow (commented) */
  /*
  box-shadow: 0 12px 36px rgba(16,24,40,0.09);
  */
  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)
   ============================================================ */

/* simple display toggles remain 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 panel */
.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);
  /* OLD heavy long shadow (commented) */
  /*
  box-shadow: -18px 0 40px rgba(0,0,0,.12);
  transition: right .32s cubic-bezier(.2,.7,.2,1);
  */
  /* REPLACEMENT: lighter shadow + same visual depth */
  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); }

/* CTA inside mobile menu */
.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%);
  /* OLD heavy shadow (commented) */
  /*
  box-shadow:0 6px 20px rgba(60,184,217,.35); transition:.3s;
  */
  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); }

/* ============================================================
   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 panel (right-side)
   ⚠️ heavy: very large box-shadow + big offset (causes large compositing)
   - Original shadow kept commented below for reference
   - Replacement uses smaller spread + cheaper alpha
   ----------------------------------------------------------- */
/*
#proMobileDrawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(92vw,420px); max-width:420px; height:100vh;
  background: linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow: -40px 24px 80px var(--drawer-shadow);
  border-left: 1px solid var(--drawer-border);
  border-radius: 20px 0 0 20px;
  transform: translateX(110%); opacity:0; visibility:hidden; pointer-events:none;
  transition: transform .36s cubic-bezier(.2,.8,.2), opacity .28s ease, visibility 0s linear .36s;
  z-index: 12050;
  padding: 18px; display:flex; flex-direction:column; gap:14px; overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
*/
#proMobileDrawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(92vw,420px); max-width:420px; height:100vh;
  background: linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  /* REPLACED: lighter shadow with smaller blur & spread for cheaper compositing */
  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;
  padding: 16px; 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:14px 18px; font-weight:800;
  border-radius:999px; background: linear-gradient(90deg,var(--brandDark),var(--accent));
  color:#fff; box-shadow: 0 12px 30px rgba(44,160,75,.14); transition: transform .14s ease, filter .14s;
}
*/
.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; }

/* 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%); }
}

/* -----------------------------------------------------------
   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 */



/* ============================================================
   HERO — Optimized (keep UI same, reduce heavy paints)
   Replace your original hero block with this.
   Heavy rules are COMMENTED and followed by lighter replacements.
   ============================================================ */

/* root tokens */
:root{
  --nav-h: 64px;
  --hero-img-max: 520px;
  --brandDark: #2CA04B;
  --accent: #3CB8D9;
  --safe-top: env(safe-area-inset-top, 0px);
}

/* ===== HERO MAIN ===== */
.hero-pro{
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: 36px 0;
  color: #fff;
  background: linear-gradient(135deg,#2CA04B,#3CB8D9);
  overflow: hidden;
  /* NOTE: keep background gradient (cheap). heavy overlays and large shadows moved/softened below. */
}

/* dotted pattern
   ⚠️ heavy: mix-blend-mode + high-opacity radial + large area can be costly on mobile.
   Commented original and replaced with lower-opacity & smaller-size dots.
*/
 /*
.hero-pro::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.32) 1.4px, transparent 1px);
  background-size:18px 18px;
  mix-blend-mode:screen;
  opacity:0.55;
  pointer-events: none;
  z-index: 1;
}
*/
/* ===== HERO — Balanced Light Dotted Pattern (Recommended) ===== */
.hero-pro::before{
  content:"";
  position:absolute;
  inset:0;

  /* Same feeling as original but cleaner and slightly more visible */
  background-image: radial-gradient(circle, rgba(255,255,255,0.22) 1.4px, transparent 1px);
  background-size: 18px 18px;  /* same density as original */
  
  mix-blend-mode: screen;
  opacity: 0.50; /* original feeling restored (not too strong, not too faint) */

  pointer-events: none;
  z-index: 1;
  will-change: opacity;
}


/* wrapper (unchanged layout) */
.hero-wrap{
  position:relative;
  z-index:3;
  width:100%;
  max-width:1200px;
  margin:auto;
  padding:0 48px;
  display:grid;
  grid-template-columns:1fr 520px;
  gap:40px;
  align-items:center;
  box-sizing: border-box;
}

/* kicker badge
   ⚠️ heavy: big box-shadow reduced
*/
.kicker-btn{
  padding:12px 22px;
  font-size:1rem;
  border-radius:14px;
  background:linear-gradient(90deg,var(--brandDark),var(--accent));
  font-weight:700;
  color:#fff;
  margin-bottom:18px;
  /* box-shadow:0 10px 30px rgba(16,24,32,0.22);  <-- heavy (commented) */
  box-shadow:0 6px 16px rgba(16,24,32,0.12); /* lighter but visually similar */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border: none;
  cursor: pointer;
  z-index: 6;
}

/* headline — optimized for perfect fullscreen balance */
.hero-title{
  font-weight: 900;
  font-size: clamp(2.1rem, 3.6vw, 3.3rem); /* slightly smaller + smoother scale */
  line-height: 1.03;                     /* tighter, more pro look */
  max-width: 700px;                      /* 20px tighter width → better wrapping */
  margin: 6px 0 8px 0;                   /* smaller vertical margin */
  text-wrap: balance;
  z-index: 6;
  position: relative;
  color: #fff;
}


/* accent text (base) */
.hero-title .accent{
  background: linear-gradient(90deg,#e6ffed,#c9faff);
  -webkit-background-clip:text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight:900;
  font-size: clamp(2rem,4vw,3rem);
  display: inline-block;
  will-change: transform, opacity;
  /* keep transitions but avoid huge text-shadows below */
}

/* lead / description */
.hero-lead{
  margin-top:12px;
  max-width:580px;
  font-size:1.15rem;
  line-height:1.55;
  color:rgba(244,253,247,0.98);
  z-index: 6;
}

/* CTA container */
.hero-cta{
  margin-top:30px;
  display:flex;
  gap:14px;
  align-items:center;
  z-index: 6;
}

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

/* primary CTA */
.primary-btn{
  background:#fff;
  color:#09121a;
  /* heavy: box-shadow:0 10px 30px rgba(16,24,32,0.12); (commented) */
  box-shadow: 0 6px 18px rgba(16,24,32,0.08); /* softer, cheaper */
  display:inline-flex;
  align-items:center;
  gap:10px;
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}

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

/* hero image
   ⚠️ heavy: large drop-shadow and transform scale provoke expensive blur paints.
   Replace with smaller shadow & avoid continuous transforms.
*/
.hero-img{
  width:min(44vw,440px);
  max-width:440px;
  /* transform:scale(1.05) rotate(-1deg);  <-- scale 1.05 kept optional; big scales cause repaint */
  transform: rotate(-1deg);
  /* filter:drop-shadow(0 28px 60px rgba(0,0,0,0.22)); <-- heavy */
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.14)); /* lighter blur and alpha */
  display:block;
  height:auto;
  will-change: transform;
}

/* ================= GLOBAL ACCENT ANIMATIONS ================= */

/* visual polish for accent — reduce extremely large text-shadow values */
.hero-title .accent {
  font-weight: 900;
  letter-spacing: -1px;
  display: inline-block;
  line-height: 0.98;
  background: linear-gradient(90deg,#f2fff4 0%, #d0fbff 55%, #eafff4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* ORIGINAL had multiple large shadows — comment heavy ones */
  /*
  text-shadow:
    0 6px 18px rgba(3,24,18,0.12),
    0 18px 40px rgba(6,26,20,0.08);
  */
  /* CHEAPER: smaller, subtler shadow stack */
  text-shadow:
    0 4px 8px rgba(3,24,18,0.08),
    0 12px 24px rgba(6,26,20,0.06);
  transform-origin: center;
  will-change: transform, opacity;
  margin-top: 6px;
  padding-left: 2px;
  padding-right: 2px;
  transition: transform .22s cubic-bezier(.2,.9,.24,1), text-shadow .22s ease, filter .22s ease;
}

/* gentle idle breathe (very slow) — OK to keep but reduce composite pressure by animating transform only */
@keyframes accentBreathe {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-2px) scale(1.005); }
  100% { transform: translateY(0) scale(1); }
}
.hero-title .accent.animate-breathe-subtle {
  /* Keep long duration to reduce perceived CPU spikes */
  animation: accentBreathe 10s ease-in-out infinite;
  will-change: transform;
}

/* sideways shake — keep, but smaller on small screens */
@keyframes sidewaysOnce {
  0%   { transform: translateX(0) translateZ(0); }
  10%  { transform: translateX(-14px) translateZ(0); } /* reduced from -18 to -14 */
  30%  { transform: translateX(12px) translateZ(0); }  /* reduced */
  50%  { transform: translateX(-8px) translateZ(0); }
  70%  { transform: translateX(5px) translateZ(0); }
  85%  { transform: translateX(-2px) translateZ(0); }
  100% { transform: translateX(0) translateZ(0); }
}
.hero-title .accent.animate-sideways-once {
  animation: sidewaysOnce 700ms cubic-bezier(.16,.9,.24,1) 1; /* shorter duration reduces overlapping repaints */
  text-shadow:
    0 8px 20px rgba(3,24,18,0.12),
    0 22px 48px rgba(6,26,20,0.10);
}

/* Hover / focus triggers (cheap transform only) */
.hero-title .accent:hover,
.hero-title .accent:focus {
  transform: translateY(-2px) scale(1.01);
  transition-duration: .18s;
}

/* Accessibility: respect reduced-motion preference (disable animations) */
@media (prefers-reduced-motion: reduce) {
  .hero-title .accent.animate-breathe-subtle,
  .hero-title .accent.animate-sideways-once {
    animation: none !important;
    transform: none !important;
  }
}

/* smaller/softer sideways animation for very small screens (unchanged but tuned) */
@keyframes sidewaysOnceSmall {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(-6px); }
  30%  { transform: translateX(6px); }
  50%  { transform: translateX(-4px); }
  70%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
@media (max-width: 480px) {
  .hero-title .accent.animate-sideways-once {
    animation: sidewaysOnceSmall 700ms cubic-bezier(.16,.9,.24,1) 1;
  }
}

/* ================= MOBILE + IPHONE SAFE ================= */
/* (media queries kept largely same; only changed where heavy filters were used) */
@media (max-width: 980px){
  section.hero-pro{
    min-height: 72vh;
    padding-top: calc(92px + var(--safe-top));
    padding-bottom: 22px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
  }

  .hero-wrap{
    padding:0 18px;
    width:100%;
    max-width:820px;
    display:flex;
    flex-direction:column;
    text-align:center;
    align-items:center;
    gap:10px;
    box-sizing: border-box;
  }

  .kicker-btn{
    margin-top:6px;
    padding:9px 14px;
    font-size:0.95rem;
  }

  .hero-title{
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height:1.05;
    margin:6px 0;
    width:100%;
    max-width:94%;
  }

  .hero-title .accent{
    font-size: clamp(2.2rem, 10vw, 3.4rem) !important;
    margin:6px 0;
    /* reduce heavy pseudo-elements on mobile */
  }

 .hero-lead {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 92% !important;
  }

  .hero-cta{
    margin-top:18px;
    flex-direction:column;
    width:100%;
    align-items:center;
  }

  .hero-btn,
  .primary-btn{
    width:92%;
    max-width:520px;
    padding:14px 20px;
  }

  /* hide visual on smaller mobile for best performance */
  .hero-visual,
  .hero-img{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    width:0 !important;
    opacity:0 !important;
  }
}

/* very small phones */
@media (max-width: 420px){
  section.hero-pro{
    min-height:78vh;
    padding-top: calc(68px + var(--safe-top));
  }

  .hero-title{ font-size:clamp(1.9rem, 10vw, 2.4rem); }

  .hero-title .accent{ font-size:clamp(2.1rem, 12vw, 3rem) !important; }

  .hero-lead{ max-width: 94% !important; line-height: 1.58 !important; }

  .primary-btn{ width:94%; padding:12px 16px; }
}

/* ================= DESKTOP POLISH OVERRIDES ================= */
/* kept but softened certain heavy shadows used in primary-btn hover */
@media (min-width: 980px) {
 .hero-wrap {
  height: 100% !important;
  display: grid !important;
  align-items: center !important;
}

  .hero-wrap > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
    height: 100%;
    box-sizing: border-box;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .hero-title {
    font-size: clamp(2.6rem, 4.6vw, 4.2rem) !important;
    line-height: 1.02;
    margin: 0 0 6px 0;
    letter-spacing: -0.6px;
    text-align: left;
    max-width: 820px;
  }

  .hero-lead {
    margin: 6px 0 0 0;
    max-width: 620px;
    font-size: 1.15rem;
    line-height: 1.6;
    text-align: left;
    color: rgba(244,253,247,0.96);
    margin-right: 0;
  }

  .hero-cta { margin-top: 24px; display: flex; gap: 18px; justify-content: flex-start; align-items: center; }

  .primary-btn{
    padding: 18px 28px;
    border-radius: 16px;
    background: #fff;
    color: #09121a;
    font-size: 1.05rem;
    font-weight: 800;
    /* heavy hover shadow replaced with softer one */
    box-shadow: 0 18px 46px rgba(8,18,16,0.09), inset 0 -6px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(44,160,75,0.08);
    min-width: 320px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .primary-btn:hover{
    transform: translateY(-4px);
    box-shadow: 0 28px 70px rgba(8,18,16,0.10); /* softer than original */
    filter: saturate(1.02);
  }

  .primary-btn svg { width: 20px; height: 20px; flex: 0 0 20px; opacity: 0.95; }

  .hero-btn.secondary {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.95);
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 700;
  }

  .hero-visual {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

  .hero-img { max-width: min(46vw, 520px); width: auto; }
}



/* FIX — Make hero perfectly full screen like screenshot 2 */
.hero-pro {
  min-height: 100vh !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}



/* ===========================
   HERO FULLSCREEN FIX (FINAL)
   =========================== */

.hero-pro {
  min-height: 100vh !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.hero-wrap {
  height: 100% !important;
  display: grid !important;
  align-items: center !important;
}

.hero-visual {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* ========= Compact / Medium overrides (kept) ========= */
/* (no heavy filters introduced here; consistent with optimized values above) */

/* END HERO — Optimized */

/* ===== SELLIFY HERO PERFECT FULLSCREEN FIX (DO NOT EDIT UI) ===== */

.hero-pro {
  height: calc(100vh - 80px) !important; /* adjust below navbar */
  min-height: calc(100vh - 80px) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.hero-wrap {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
}

.hero-wrap > div:first-child {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.hero-visual {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}


/* === HERO TITLE SIZE FIX (Desktop) === */
@media (min-width: 980px) {
  .hero-title {
    font-size: clamp(2.2rem, 3.8vw, 3.4rem) !important;
    line-height: 1.08 !important;
  }

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


/* ==========================================
   MOBILE HERO BUTTONS (PERFECT WIDTH + CENTER)
   ========================================== */
@media (max-width: 576px) {

  /* Kicker Button (Nice To See You Here!) */
  .kicker-btn {
    width: fit-content !important;        /* shrink to content */
    max-width: 260px !important;          /* ensure not too wide */
    padding-left: 18px !important;
    padding-right: 18px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* Primary CTA Button (Let's Discuss Your Project) */
  .primary-btn {
    width: 92% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    
    display: flex !important;
    justify-content: center !important;   /* center text & icon */
    align-items: center !important;
    text-align: center !important;
  }

  /* Ensure SVG icon centers correctly */
  .primary-btn svg {
    margin-right: 8px !important;
  }
}

@media (max-width: 576px) {

  /* Nice To See You Here! — Medium Badge Size */
  .kicker-btn {
    width: fit-content !important;
    max-width: 300px !important;

    padding: 12px 26px !important; /* bigger + balanced */
    font-size: 0.95rem !important; /* slightly larger text */
    border-radius: 14px !important;

    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}
/* ==========================================
   FINAL MOBILE HERO FIX (Clean + Conflict-Free)
   ========================================== */
@media (max-width: 576px) {

  /* HERO HEIGHT + SPACING */
  section.hero-pro {
    height: 70vh !important;
    min-height: 60vh !important;
    padding-top: 58px !important;
    padding-bottom: 20px !important;
    overflow: hidden !important;
    background-attachment: scroll !important;
    position: relative !important;
  }

  /* HERO CONTENT LAYOUT */
  .hero-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    height: auto !important;
  }

  /* BUTTONS */
  .kicker-btn {
    width: fit-content !important;
    padding: 12px 26px !important;
    margin: 6px auto !important;
    display: block !important;
    text-align: center !important;
  }

  .primary-btn {
    width: 92% !important;
    max-width: 420px !important;
    margin: 6px auto 0 auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* TEXT FIX */
  .hero-title,
  .hero-lead {
    text-align: center !important;
  }

  .hero-title {
    font-size: clamp(1.8rem, 7.5vw, 2.8rem) !important;
    line-height: 1.06 !important;
    margin: 6px 0 !important;
  }

  /* HERO IMAGE (smaller + bottom-right) */
  .hero-visual {
    position: absolute !important;
    right: 12px !important;
    bottom: 18px !important;
    width: 44% !important;
    max-width: 180px !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

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

















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

/* ========================================================================
   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; }
}

/* ========================= NOTES (READ ME) =========================
1) HEAVY rules commented out:
   - backdrop-filter: blur(6px) on .stats-wrap  => commented (this was heavy on repaints)
   - large multi-layered box-shadows and huge text-shadows were simplified.

2) Kept visual identity intact: gradients, badge look, spacing — but used lighter shadows
   and avoided filters that trigger expensive GPU/CPU work on low-end devices.

3) If you still want the blur/gloss back, re-enable:
   .stats-wrap { backdrop-filter: blur(6px); }  /* HEAVY: may cause lag on mobiles */

/* =========================
   MOBILE FIX — STATS SECTION
   Paste at end of CSS (mobile-only overrides)
   Purpose: restore clean compact mobile layout without changing desktop UI
   ========================= */

/* =========================
   MOBILE FIX — STATS SECTION (MERGED & CLEAN)
   Paste at end of CSS
   ========================= */

/* ===========================
   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 */
  }
}

/* If you prefer to force visibility on ALL sizes (safer), uncomment this block:
.sellify-stats-pro2 .stat-value {
  background:none !important;
  -webkit-text-fill-color: unset !important;
  color: #0b3b33 !important;
}
*/

/* ========================= NOTES =========================
1) This is a non-destructive override — it only forces readable color + removes clipped-gradient
   fallback on small screens where gradient clipping sometimes leaves text transparent.

2) If numbers still read '0' (not "missing"), that's likely JS counter not running on mobile.
   - But if numbers are completely invisible (empty space), this CSS will force them visible.

3) Don't forget to clear caching (hard-refresh) on mobile after pasting:
   - Chrome: refresh + long-press reload -> "Cache disabled" or test in incognito.

4) Agar tum chaho, main yeh bhi add kar dunga ki JS counter runs on mobile (1-line check).
   Batado agar numbers show ho gaye to main JS debug step bhej dunga (agar JS issue hogi).
======================================================== */


: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));
}

/* HEAVY - commented
.reveal-x{
  opacity:0;
  transform:translateX(var(--dx,0));
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.6,.2,1);
}
.reveal-x.left{ --dx:-20px; }
.reveal-x.right{ --dx:20px; }
.reveal-x.is-visible{ opacity:1; transform:translateX(0); }
.reveal-delay-1{ transition-delay:.05s; }
.reveal-delay-2{ transition-delay:.12s; }
*/
/* 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;
}

/* HEAVY - commented
.services-main-card{
  border-radius:20px;
  padding:18px;
  color:#fff;
  box-shadow: 0 12px 34px rgba(0,0,0,0.08);
  transition:transform .18s ease, box-shadow .18s ease;
  border:1px solid rgba(255,255,255,0.06);
  background:var(--grad);
}
*/
/* 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; }

/* HEAVY - commented
.services-glass{
  border-radius:14px;
  padding:16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: transform .16s ease, box-shadow .16s ease, opacity .28s ease;
  will-change: transform, opacity;
}
*/
/* 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; }

/* HEAVY - commented
.services-main-card:hover,
.services-glass:hover { transform:translateY(-3px); box-shadow:0 20px 56px rgba(0,0,0,0.08); }
*/
/* 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;
}

/* HEAVY - commented
.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;
}
*/
/* 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;
  }
}




















/* =========================================================================== 
   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 .inner {
  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;
}

/* ========= STRONG FIX: FORCE ALL CTAs TO SAME BASELINE (DESKTOP) ========= */
/* Uses absolute positioning for CTAs on desktop so visual baseline is identical.
   Mobile reverts to normal flow. Paste at the end of your CSS. */

/* ========= STRONG FIX: FORCE ALL CTAs TO SAME BASELINE (DESKTOP) ========= */
/* Uses absolute positioning for CTAs on desktop so visual baseline is identical.
   Mobile reverts to normal flow. Paste at the end of your CSS. */

@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;
  }
}




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


                                /* 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: clamp(2.2rem, 3.5vw, 2.8rem) !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; }





/* ============================================================
   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); }



/* ===========================================================================
   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;
  }
}









/* ===========================================================================
   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;
}

/* ===========================================================================
   8) WHATSAPP / CTA PILL
   =========================================================================== */
.f-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 600;
  padding: 0.55rem 0.9rem;
  border-radius: 9999px;
  border: 1px dashed rgba(255, 255, 255, 0.38);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  transition: all 0.25s ease;
}
.f-wa:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

/* ===========================================================================
   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;
  }
}


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







    /* Scroll btm to top  */



  /* simple page so we can scroll */
  body{ font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; min-height:200vh; background: #f6fbfa; }
  main{ max-width:900px; margin:60px auto; padding:40px; background:rgba(255,255,255,0.7); border-radius:12px; box-shadow:0 8px 30px rgba(12,15,20,0.04); }
  h1{ color:#2b6b3a; }
  p{ color:#3b4a4a; line-height:1.5; }

  /* ===== Floating UI (self-contained, no external deps) ===== */
  :root{
    --wa-size:64px;
    --small-size:40px;
    --offset:28px;
    --brand-start:#2CA04B;
    --brand-end:#3CB8D9;
  }

  /* container */
  #sellify-fab-wrap{
    position: fixed;
    right: var(--offset);
    bottom: var(--offset);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    z-index: 2147483000;
    pointer-events: auto;
    transform: translateZ(0);
  }

  /* base for both buttons */
  .swy-btn{
    all: unset;
    box-sizing: border-box;
    width: var(--wa-size);
    height: var(--wa-size);
    border-radius:999px;
    display:grid;
    place-items:center;
    position:relative;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  /* small back-to-top (KEEP layout same) */
  .swy-small{
    width:var(--small-size); height:var(--small-size);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
    border-radius:999px;
    display:grid; place-items:center;
    border:1px solid rgba(255,255,255,0.6);
    box-shadow:0 8px 22px rgba(12,15,20,0.06);
    pointer-events:none; /* disabled until visible */
    opacity:0; transform:translateY(6px) scale(.98);
    transition: opacity .22s, transform .22s;
  }

  /* visible state toggled by JS */
  .swy-visible{ pointer-events:auto !important; opacity:1 !important; transform:translateY(0) scale(1) !important; }

  /* small icon */
  .swy-small svg{ width:56%; height:56%; color:var(--brand-start); filter:drop-shadow(0 2px 6px rgba(0,0,0,0.12)); }

  /* accessibility focus for floating items */
  .swy-btn:focus-visible{ outline:none; box-shadow: 0 0 0 6px rgba(99,204,116,0.12), 0 16px 30px rgba(12,15,20,0.08); }

  /* responsive */
  @media (max-width:640px){
    :root{ --wa-size:56px; --small-size:36px; --offset:18px; }
  }
  @media (max-width:380px){
    :root{ --wa-size:48px; --small-size:32px; --offset:12px; }
  }

  /* ====================== WHATSAPP BUTTON OVERRIDE (CLEAN) ====================== */
  /* This block ONLY changes #swy-whatsapp-btn. It intentionally does NOT alter .swy-small or scroll behaviour. */

/* ====================== WHATSAPP BUTTON — FIXED & CLEAN ====================== */
/* uses official WhatsApp glyph exactly like your sample */

#swy-whatsapp-btn{
  all: unset !important;
  box-sizing: border-box !important;

  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;

  border-radius: 999px !important;
  background: #25D366 !important;      /* WhatsApp green */
  border: 3px solid #ffffff !important;/* white ring */
  display: grid !important;
  place-items: center !important;

  cursor: pointer !important;
  position: relative !important;
  z-index: 6 !important;

  box-shadow: 0 12px 32px rgba(0,0,0,0.18) !important;
  transition: transform .18s cubic-bezier(.2,.9,.28,1),
              box-shadow .18s !important;

  -webkit-tap-highlight-color:transparent !important;
  pointer-events:auto !important;
  overflow:hidden !important;

  line-height:0 !important;
  text-indent:0 !important;  /* IMPORTANT — REMOVE text push bug */
  -webkit-user-select:none;
  user-select:none;
}

/* remove old elements */
#swy-whatsapp-btn .swy-ring,
#swy-whatsapp-btn .swy-glass,
#swy-whatsapp-btn .swy-ring-ovr,
#swy-whatsapp-btn .swy-glass-ovr{
  display:none!important;
  visibility:hidden!important;
}

/* official icon size */
#swy-whatsapp-btn svg{
  width: 60% !important;
  height: 60% !important;
  z-index: 2 !important;
  display: block !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18)) !important;
}

#swy-whatsapp-btn svg path{
  fill:#ffffff !important;
  stroke:none !important;
}

/* hover / focus */
#swy-whatsapp-btn:hover,
#swy-whatsapp-btn:focus{
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 44px rgba(0,0,0,0.24) !important;
}
#swy-whatsapp-btn:active{
  transform: translateY(-1px) scale(.98) !important;
}

#swy-whatsapp-btn:focus-visible{
  outline:none !important;
  box-shadow: 0 0 0 6px rgba(0,200,120,0.18),
              0 18px 38px rgba(0,0,0,0.20) !important;
}


/* force hide any text inside WA button */
#swy-whatsapp-btn span,
#swy-whatsapp-btn .swy-sr{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}





/* Hide floating buttons while mobile drawer is open (mobile only) */
@media (max-width: 920px) {
  /* when body gets mobile-open (your drawer toggles this) */
  body.mobile-open #sellify-fab-wrap,
  /* or when drawer element has open class (extra safety) */
  #proMobileDrawer.open ~ #sellify-fab-wrap,
  /* or when overlay visible */
  #drawerOverlay.show ~ #sellify-fab-wrap {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* if you use fixed z-index stacking issues, push it behind */
  body.mobile-open #sellify-fab-wrap { z-index: 0 !important; }
}




/* ALWAYS show back-to-top button */
.swy-small {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* HEAVY - commented
   Some themes add decorative rings/gradients under the WA fab via extra spans or pseudo-elements.
   Instead of removing the entire fab, we hide only the decorative layer(s) to keep the
   official green WA circle intact.
*/

/* FIX: remove decorative ring / gradient box under WhatsApp button */
#swy-whatsapp-btn,
#swy-whatsapp-btn * {
  /* keep button normal — no destructive resets here */
  box-shadow: none !important;       /* if the box was a shadow, remove it */
  background-image: none !important; /* remove any background gradients from children */
}

/* hide known extra decorative elements (safe selectors) */
#swy-whatsapp-btn .swy-ring,
#swy-whatsapp-btn .swy-glass,
#swy-whatsapp-btn .swy-ring-ovr,
#swy-whatsapp-btn .swy-glass-ovr,
#swy-whatsapp-btn .swy-ring-white,
#swy-whatsapp-btn::before,
#swy-whatsapp-btn::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Ensure WA main circle remains sharp and above any background */
#swy-whatsapp-btn {
  background: #25D366 !important;
  border: 3px solid #ffffff !important;
  z-index: 9999 !important;
}






  /* Safety note: .swy-small, #sellify-scroll-btn and .swy-visible styles intentionally preserved above. */