/* ============================================================
   QSEC DRYCLEAN STUDIO — Shared stylesheet
   White-led · neon accents · purple anchors only · liquid glass
   ============================================================ */
:root{
  --purple:#372772;
  --purple-light:#4a35a0;
  --purple-pale:#f0ecf9;
  --neon:#B5DA3C;
  --neon-hover:#9ec52e;
  --neon-deep:#5f8214;      /* legible neon-family text on white */
  --neon-pale:#f0f7d8;
  --red:#FC5130;
  --blue:#83EDFF;
  --dark:#2F2F2F;
  --white:#FFFFFC;
  --bg:#FAFAF8;
  --bg-alt:#F3F1ED;
  --text:#2F2F2F;
  --text-secondary:#6B6560;
  --border:#E8E4DE;
  --maxw:1200px;
  /* ---- Z-INDEX LADDER (v18, single source of truth) ---- */
  --z-fab:700;         /* Happy Bag + WhatsApp FABs */
  --z-totop:740;       /* back-to-top button */
  --z-cta:750;         /* mobile sticky CTA bar */
  --z-promo:800;       /* promo bar */
  --z-header:900;      /* fixed header */
  --z-backdrop:950;    /* mobile menu backdrop */
  --z-panel:960;       /* mobile menu panel */
  --z-toggle:970;      /* hamburger/close toggle */
  --z-popup:990;       /* Happy Bag popup overlay */
  --header-h:98px;     /* promo(36) + nav(62) */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* scroll-lock while mobile menu open */
html.menu-lock,body.menu-lock{overflow:hidden}
body{font-family:'General Sans',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);font-size:16px;font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Satoshi','General Sans',sans-serif;font-weight:600;line-height:1.15;letter-spacing:-0.02em}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover;border-radius:8px}
ul{list-style:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:52px 0;position:relative;background:var(--bg)}
.sec-white{background:var(--white)}
.sec-alt{background:var(--bg-alt)}
.sec-purple-pale{background:var(--purple-pale)}
.dotted::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(55,39,114,0.045) 1px,transparent 1px);background-size:22px 22px;pointer-events:none;z-index:0}
.dotted>.container{position:relative;z-index:1}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--neon-deep);margin-bottom:8px}
.section-head{max-width:640px;margin-bottom:26px}
.section-head h2{font-size:30px;margin-bottom:14px;text-wrap:balance}
.section-head.center h2{max-width:560px;margin-left:auto;margin-right:auto}
.section-head p{font-size:16px;color:var(--text-secondary)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---- Scroll progress bar ---- */
/* back-to-top button — stacked above the WhatsApp FAB, bottom-right */
.to-top{position:fixed;right:20px;bottom:88px;z-index:var(--z-totop);width:42px;height:42px;border-radius:50%;background:var(--purple);color:var(--white);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(55,39,114,0.3);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease,background .2s ease,color .2s ease;padding:0}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top svg,.to-top i{width:22px;height:22px}
.to-top:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
@media(hover:hover){.to-top:hover{background:var(--neon);color:var(--purple)}}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:none;border-radius:8px;font-family:'Satoshi',sans-serif;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;white-space:nowrap;position:relative;overflow:hidden}
.btn i{width:16px;height:16px}
.btn-primary{background:var(--neon);border:1px solid var(--neon);color:var(--dark);padding:11px 24px;font-size:13px;font-weight:600;box-shadow:0 2px 10px rgba(181,218,60,0.3)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(181,218,60,0.45)}
.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text);padding:11px 24px;font-size:13px;font-weight:500}
.btn-secondary:hover{transform:translateY(-1px);border-color:var(--neon-hover);box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.btn-dark{background:var(--purple);color:#fff;padding:11px 26px;font-size:13px;font-weight:600}
.btn-dark:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(55,39,114,0.4)}
.btn-block{width:100%;justify-content:center}
/* shine sweep */
.btn::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);transition:left .5s ease}
.btn:hover::after{left:100%}

/* ---- Cards + neon spotlight glow ---- */
.card{background:#fff;border-radius:14px;border:1px solid var(--border);box-shadow:0 2px 12px rgba(0,0,0,0.04);padding:24px;position:relative;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{border-color:rgba(181,218,60,0.5)}
.spotlight{position:relative;overflow:hidden}
.spotlight::before{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(181,218,60,0.18),transparent 60%);pointer-events:none;z-index:0}
.spotlight:hover::before{opacity:1}
.spotlight>*{position:relative;z-index:1}

/* ---- Promo bar (purple — allowed) ---- */
.promo-bar{position:fixed;top:0;left:0;width:100%;z-index:var(--z-promo);background:var(--purple);color:#fff;text-align:center;padding:0 24px;font-size:12px;font-weight:500;letter-spacing:.02em;overflow:hidden;height:36px}
.promo-ticker{position:relative;height:100%}
.promo-item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(100%);transition:all .5s ease;white-space:nowrap;padding:0 8px}
.promo-item.active{opacity:1;transform:translateY(0)}
.promo-item.exit{opacity:0;transform:translateY(-100%)}
.promo-item strong{color:var(--neon);font-weight:600}

/* ---- Navigation (white glass) ---- */
.nav{position:fixed;top:36px;left:0;width:100%;z-index:var(--z-header);height:62px;display:flex;align-items:center;transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
/* DEFAULT: dark text — readable on any light background (inner pages + scrolled) */
.nav .logo-text{color:var(--text)}
.nav .logo-text span{color:var(--text-secondary)}
.nav .nav-links>a,.nav .dd-trigger{color:var(--text)}
.nav .hamburger{color:var(--text)}
.nav .logo-mark{background:var(--neon);color:var(--purple)}
.nav .nav-links>a:hover,.nav .dd-trigger:hover{color:var(--neon-deep)}
/* scrolled = white liquid glass; nav is always dark text (light hero) */
.nav.scrolled{background:rgba(255,255,252,0.9);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid rgba(0,0,0,0.06);box-shadow:0 4px 30px rgba(0,0,0,0.05)}
body.inner .nav{background:rgba(255,255,252,0.9);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid rgba(0,0,0,0.06);box-shadow:0 4px 30px rgba(0,0,0,0.05)}
/* homepage dark-photo hero → WHITE nav text until scrolled */
body.has-dark-hero .nav:not(.scrolled) .nav-links>a,
body.has-dark-hero .nav:not(.scrolled) .dd-trigger,
body.has-dark-hero .nav:not(.scrolled) .hamburger{color:#fff}
body.has-dark-hero .nav:not(.scrolled) .nav-links>a:hover,
body.has-dark-hero .nav:not(.scrolled) .dd-trigger:hover{color:var(--neon)}
/* logo variant swap — color on light, white lockup on dark contexts */
.logo-img.logo-white-img{display:none}
body.has-dark-hero .nav:not(.scrolled) .logo-color,
.mobile-menu .logo-color,
.footer .logo-color{display:none}
body.has-dark-hero .nav:not(.scrolled) .logo-white-img,
.mobile-menu .logo-white-img,
.footer .logo-white-img{display:block}
/* fixed header offset so content clears promo(36)+nav(62) — homepage hero pads itself */
body.inner{padding-top:98px}
.nav .container{display:flex;align-items:center;justify-content:space-between;width:100%}
.logo{display:flex;align-items:center;gap:9px}
.logo-img{height:36px;width:auto;display:block;transition:filter .3s}
.logo-mark{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Satoshi';font-weight:700;font-size:20px;flex-shrink:0;transition:background .3s,color .3s}
.logo-text{font-family:'Satoshi';font-size:17px;font-weight:700;letter-spacing:-0.01em;transition:color .3s}
.logo-text span{font-weight:400;font-size:13px;display:block;line-height:1;margin-top:1px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links>a,.dd-trigger{font-size:14px;font-weight:500;transition:color .2s;cursor:pointer;background:none;border:none;font-family:'General Sans';display:inline-flex;align-items:center;gap:4px}
.dd{position:relative}
.dd-trigger i{width:14px;height:14px}
.dd-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);background:rgba(255,255,255,0.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,0.12);padding:8px;min-width:220px;opacity:0;visibility:hidden;transition:all .25s ease;z-index:120}
.dd:hover .dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd-menu a{display:block;padding:9px 14px;border-radius:9px;font-size:14px;color:var(--text);transition:background .15s,color .15s}
.dd-menu a:hover{background:var(--neon-pale);color:var(--neon-deep)}
.nav-cta{display:flex;align-items:center;gap:14px}
/* toggle: single <button>, two icon spans, swapped by aria-expanded — no innerHTML swap, no lucide re-init */
.hamburger{display:none;position:relative;z-index:var(--z-toggle);background:none;border:none;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center;padding:0;color:inherit}
.hamburger .ham-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s ease,transform .2s ease}
.hamburger .ham-icon i,.hamburger .ham-icon svg{width:26px;height:26px}
.hamburger .ham-close{opacity:0;transform:scale(.7) rotate(-90deg)}
.hamburger[aria-expanded="true"] .ham-open{opacity:0;transform:scale(.7) rotate(90deg)}
.hamburger[aria-expanded="true"] .ham-close{opacity:1;transform:none}

/* ---- Mobile menu (v18: single-logo side panel + dimmed backdrop, below the header) ---- */
.menu-backdrop{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:var(--z-backdrop);background:rgba(47,47,47,0.4);opacity:0;transition:opacity .3s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.menu-backdrop.show{opacity:1}
.menu-backdrop[hidden]{display:none}
.mobile-panel{position:fixed;top:var(--header-h);right:0;z-index:var(--z-panel);width:min(320px,85vw);height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));background:#fff;color:var(--text);box-shadow:-10px 0 44px rgba(0,0,0,0.20);transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:12px 20px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch;visibility:hidden}
.mobile-panel.open{transform:translateX(0);visibility:visible}
.mp-nav{display:flex;flex-direction:column;flex:1 0 auto}
.mp-nav>a,.mm-svc-head{font-family:'Satoshi';font-size:16px;font-weight:600;min-height:48px;padding:6px 0;border-bottom:1px solid var(--border);color:var(--text);display:flex;align-items:center}
.mp-nav>a:hover{color:var(--neon-deep)}
.mm-svc-head{justify-content:space-between;cursor:pointer}
.mm-svc-head i{width:20px;height:20px;transition:transform .3s}
.mm-svc-head.open i{transform:rotate(180deg)}
.mm-svc-list{max-height:0;overflow:hidden;transition:max-height .35s ease}
.mm-svc-list.open{max-height:560px}
.mm-svc-list a{display:flex;align-items:center;min-height:42px;font-size:15px;padding:4px 0 4px 14px;color:var(--text-secondary)}
.mm-svc-list a:hover{color:var(--neon-deep)}
.mp-cta{display:flex;flex-direction:column;gap:10px;flex-shrink:0;padding-top:16px;padding-bottom:env(safe-area-inset-bottom)}
.mp-cta .btn{width:100%;justify-content:center}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--neon);color:var(--neon-deep)}
/* menu open → force header to legible white-glass so logo + close icon read over the dark hero (!important beats has-dark-hero :not(.scrolled)) */
body.menu-lock .nav{background:rgba(255,255,252,0.98);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid rgba(0,0,0,0.06)}
body.menu-lock .nav .logo-color{display:block !important}
body.menu-lock .nav .logo-white-img{display:none !important}
body.menu-lock .nav .hamburger{color:var(--purple) !important}

/* ---- Hero (full-bleed studio photograph + editorial overlay) ---- */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg-img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(20,14,40,0.86) 0%,rgba(20,14,40,0.66) 38%,rgba(20,14,40,0.3) 68%,rgba(20,14,40,0.08) 100%)}
.hero-content{position:relative;z-index:2;color:#fff;padding-top:40px;padding-bottom:40px;width:100%}
.hero-text-panel{max-width:520px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--neon);margin-bottom:20px}
.kicker-dot{width:7px;height:7px;border-radius:50%;background:var(--neon);animation:pulsedot 2s ease-in-out infinite}
@keyframes pulsedot{0%,100%{box-shadow:0 0 0 0 rgba(181,218,60,0.5)}50%{box-shadow:0 0 0 8px rgba(181,218,60,0)}}
.hero h1{font-size:46px;font-weight:700;line-height:1.08;letter-spacing:-0.02em;color:#fff;margin-bottom:20px}
.hero-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,0.74);margin-bottom:28px;max-width:400px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn-secondary{background:transparent;border-color:rgba(255,255,255,0.35);color:#fff}
.hero .btn-secondary:hover{border-color:var(--neon);color:var(--neon)}
/* glass stat chips floating at the bottom of the hero */
.hero-stats-row{position:relative;bottom:auto;left:auto;right:auto;display:flex;gap:12px;margin-top:32px;padding:0}
.hero-offers{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.hero-offer-chip{font-size:11px;font-weight:600;padding:6px 14px;border-radius:20px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.7);transition:all 0.3s;text-decoration:none}
.hero-offer-chip:hover{background:rgba(181,218,60,0.15);border-color:rgba(181,218,60,0.3);color:var(--neon)}
/* ---- Pickup Area Checker (hero, tinted glass) ---- */
.area-checker{margin-top:22px;max-width:410px;background:rgba(255,255,255,0.08);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,0.16);border-radius:14px;padding:16px 16px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)}
.ac-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--neon);margin-bottom:10px}
.ac-form{display:flex;gap:8px}
.ac-input{flex:1;min-width:0;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:8px;padding:10px 14px;font-family:'General Sans',sans-serif;font-size:14px;color:#fff;transition:border-color .2s,background .2s}
.ac-input::placeholder{color:rgba(255,255,255,0.5)}
.ac-input:focus{outline:none;border-color:var(--neon);background:rgba(255,255,255,0.14)}
.ac-btn{background:var(--neon);color:var(--dark);border:none;border-radius:8px;padding:10px 22px;font-family:'Satoshi',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;flex-shrink:0}
.ac-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(181,218,60,0.4)}
.ac-form.shake{animation:shake .3s ease}
.ac-result{max-height:0;overflow:hidden;opacity:0;transform:translateY(8px);transition:max-height .4s ease,opacity .4s ease,transform .4s ease,margin-top .4s ease}
.ac-result.show{margin-top:12px;max-height:200px;opacity:1;transform:none}
.ac-result p{font-size:13.5px;line-height:1.55;color:#fff;margin-bottom:10px}
.ac-result p strong{color:var(--neon)}
.ac-result.err p{color:#ffd2ca}
.ac-cta{display:inline-flex;align-items:center;gap:7px;background:var(--neon);color:var(--dark);padding:9px 16px;border-radius:8px;font-family:'Satoshi',sans-serif;font-size:12.5px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s}
.ac-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(181,218,60,0.4)}
.ac-cta svg{width:15px;height:15px;fill:currentColor}
@media(max-width:768px){.area-checker{max-width:100%}}
/* ---- Pickup checker: raised white card at hero seam ---- */
.hero-checker-strip{position:relative;z-index:6;margin-top:-42px;margin-bottom:6px;padding:0 24px}
.checker-card{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 16px 44px rgba(30,20,60,0.16)}
.checker-card .ac-label{margin-bottom:0;color:var(--purple);white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px}
.checker-card .ac-label i{width:15px;height:15px;color:var(--neon-deep)}
.checker-card .ac-form{flex:1;min-width:220px;gap:8px}
.checker-card .ac-input{background:var(--bg);border:1px solid var(--border);color:var(--text)}
.checker-card .ac-input::placeholder{color:var(--text-secondary)}
.checker-card .ac-input:focus{border-color:var(--neon);background:#fff}
.checker-card .ac-result{flex-basis:100%}
.checker-card .ac-result p{color:var(--text)}
.checker-card .ac-result p strong{color:var(--neon-deep)}
.checker-card .ac-result.err p{color:var(--red)}
@media(max-width:600px){
  .hero-checker-strip{margin-top:-34px}
  .checker-card{flex-direction:column;align-items:stretch;gap:10px}
  .checker-card .ac-label{white-space:normal;justify-content:center;text-align:center}
}
/* ---- Stats band (relocated hero counters) ---- */
.stats-band{padding:24px 0}
.stats-band-row{display:flex;justify-content:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:32px 0}
.sb-stat{flex:1;text-align:center;padding:0 20px}
.sb-stat+.sb-stat{border-left:1px solid var(--border)}
.sb-stat .stat-num{font-family:'Satoshi',sans-serif;font-size:40px;font-weight:800;color:var(--purple);line-height:1;display:block}
.sb-label{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-secondary);font-weight:600;margin-top:8px;display:block}
@media(max-width:600px){.sb-stat .stat-num{font-size:28px}.sb-label{font-size:10px}.sb-stat{padding:0 10px}}
@keyframes mascot-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
/* Hero Happy Bag (prominent) — float on the img so wrapper transform (scroll show/hide) is free */
.hero-happybag{position:absolute;right:6%;bottom:15%;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;transition:opacity .4s ease,transform .4s ease}
.hero-hb-img{width:190px;height:auto;object-fit:contain;filter:drop-shadow(0 12px 32px rgba(0,0,0,0.28));animation:mascot-float 3s ease-in-out infinite}
.hero-hb-callout{margin-top:14px;background:var(--purple);color:#fff;padding:12px 20px;border-radius:14px;font-size:13px;line-height:1.4;max-width:230px;box-shadow:0 6px 24px rgba(55,39,114,0.3)}
.hero-hb-callout strong{display:block;color:var(--neon);font-size:16px;margin-bottom:2px}
.hero-hb-callout span{color:rgba(255,255,255,0.72);font-size:12px}
.hero-stat-chip{padding:16px 24px;border-radius:12px;text-align:center;min-width:100px}
.glass-chip{background:rgba(255,255,255,0.1);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,0.18);box-shadow:inset 0 1px 0 rgba(255,255,255,0.12)}
.hero-stat-chip .stat-num{font-size:24px;font-weight:700;color:var(--neon);display:block;line-height:1}
.hero-stat-chip .stat-label{font-size:10px;color:rgba(255,255,255,0.68);text-transform:uppercase;letter-spacing:0.08em;font-weight:500;margin-top:4px;display:block}
.stat-num{font-family:'Satoshi';font-weight:700;display:block;line-height:1}
/* flip words */
.flip-container{display:inline-block;position:relative;height:1.15em;overflow:hidden;vertical-align:bottom}
.flip-word{display:block;color:var(--neon);position:absolute;left:0;top:0;width:max-content;opacity:0;transform:translateY(100%);transition:all .5s cubic-bezier(0.22,1,0.36,1)}
.flip-word.active{position:relative;opacity:1;transform:translateY(0)}
.flip-word.exit{opacity:0;transform:translateY(-100%)}
.section-head .flip-word{color:var(--neon-deep)}

@media(max-width:1024px){
  .hero-happybag{position:relative;right:auto;bottom:auto;margin:28px auto 0}
  .hero-hb-img{width:150px}
}

@media(max-width:768px){
  .hero{min-height:100vh;min-height:100dvh}
  .hero-content{padding-top:118px;padding-bottom:32px}
  .hero h1{font-size:32px}
  .hero-sub{font-size:15px;max-width:100%}
  .hero-text-panel{max-width:100%}
  .hero-overlay{background:linear-gradient(180deg,rgba(20,14,40,0.76) 0%,rgba(20,14,40,0.68) 40%,rgba(20,14,40,0.82) 100%)}
  .hero-stats-row{position:relative;bottom:auto;left:auto;right:auto;padding:0;margin-top:28px;flex-wrap:wrap}
  .hero-stat-chip{min-width:0;flex:1;padding:14px 12px}
  .hero-offers{justify-content:center}
}

/* ---- Marquee ---- */
.marquee{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-alt);padding:13px 0}
.marquee-track{display:flex;width:max-content;animation:marq 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track .grp{display:inline-flex;align-items:center;gap:32px;padding-right:32px}
.marquee-track .m-item{display:inline-flex;align-items:center;gap:9px;font-family:'Satoshi';font-weight:600;font-size:15px;color:var(--purple);white-space:nowrap}
.marquee-track .m-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---- Services ---- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card.svc{padding:20px 18px}
.svc{display:flex;flex-direction:column;gap:10px;color:var(--text)}
.svc:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(181,218,60,0.16)}
.icon-wrap{width:42px;height:42px;border-radius:12px;background:var(--neon-pale);border:1px solid rgba(181,218,60,0.35);display:flex;align-items:center;justify-content:center;color:var(--neon-deep);position:relative;overflow:hidden}
.icon-wrap i{width:20px;height:20px}
.svc.vis .icon-wrap{animation:icon-pop .5s cubic-bezier(0.34,1.56,0.64,1) forwards}
@keyframes icon-pop{0%{transform:scale(0.5);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.svc h3{font-size:16px}
.svc p{font-size:13.5px;color:var(--text-secondary);line-height:1.55}
.svc .more{font-size:13px;font-weight:600;font-family:'Satoshi';color:var(--neon-deep);display:inline-flex;align-items:center;gap:5px;margin-top:auto;transition:gap .2s}
.svc:hover .more{gap:9px}
.svc .more i{width:14px;height:14px}
/* ---- Services bento grid ---- */
.services-grid.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:168px;grid-auto-flow:row dense;gap:14px}
.svc-2x2{grid-column:span 2;grid-row:span 2}
.svc-2x1{grid-column:span 2;grid-row:span 1}
.svc-1x2{grid-column:span 1;grid-row:span 2}
.svc-b2{grid-column:span 2}
.svc-mini{justify-content:flex-start}
.svc-mini h3{font-size:15px;line-height:1.25}
.svc-mini .more{margin-top:auto}
.svc-feature{position:relative;overflow:hidden;border-radius:14px;display:flex;align-items:flex-end;color:#fff}
.svc-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;z-index:0;transition:transform .5s ease}
.svc-feature::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,20,60,0.1) 0%,rgba(30,20,60,0.35) 52%,rgba(30,20,60,0.86) 100%);z-index:1}
.svc-feature.spotlight::before{z-index:2}
.svc-feature:hover img{transform:scale(1.05)}
.svc-feat-body{position:relative;z-index:3;padding:18px}
.svc-feature .icon-wrap{background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.28);color:#fff;margin-bottom:10px}
.svc-feature h3{font-size:18px;color:#fff;margin-bottom:5px}
.svc-2x2 .svc-feat-body h3{font-size:23px}
.svc-feature p{font-size:13px;color:rgba(255,255,255,0.86);line-height:1.5;max-width:340px}
.svc-feature .more{color:#fff;margin-top:10px;font-size:13px;font-weight:600;font-family:'Satoshi',sans-serif;display:inline-flex;align-items:center;gap:5px;transition:gap .2s}
.svc-feature .more i{width:14px;height:14px}
.svc-feature:hover .more{gap:9px}
@media(max-width:980px){
  .services-grid.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:158px}
  .svc-2x2{grid-column:span 2;grid-row:span 2}
  .svc-2x1{grid-column:span 2;grid-row:span 1}
  .svc-1x2{grid-column:span 1;grid-row:span 2}
  .svc-b2{grid-column:span 1}
}
@media(max-width:560px){
  .services-grid.bento{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
  .svc-2x2,.svc-2x1,.svc-1x2,.svc-b2{grid-column:auto;grid-row:auto}
  .svc-feature{min-height:170px;aspect-ratio:16/10}
  .svc-mini{min-height:0}
}
/* <900px: 3 photo cards keep image treatment; the 6 icon-only tiles become compact rows */
@media(max-width:900px){
  .services-grid.bento{display:flex;flex-direction:column;gap:12px;grid-auto-rows:auto}
  .svc-2x2,.svc-2x1,.svc-1x2,.svc-b2{grid-column:auto;grid-row:auto}
  .svc-feature{min-height:0;aspect-ratio:16/9}
  .svc-mini{flex-direction:row;align-items:center;gap:14px;min-height:0;height:auto;padding:14px 16px;text-align:left}
  .svc-mini .icon-wrap{width:48px;height:48px;flex-shrink:0;margin:0}
  .svc-mini h3{flex:1;margin:0;font-size:15px;line-height:1.25}
  .svc-mini .more{margin:0;flex-shrink:0;font-size:0}
  .svc-mini .more i{width:20px;height:20px}
}
/* full-width flat-lay banner above the service cards */

/* ---- Qsec Happy Bag (mascot + scroll animation) ---- */
.happybag-section{padding:56px 0;background:var(--bg);position:relative;overflow:hidden}

/* Interactive fill-up game — purple anchor card, two-column (mascot | content) */
.hb-game{position:relative;display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center;background:var(--purple);color:#fff;border-radius:16px;padding:40px;text-align:center}
/* LEFT: transparent mascot floating on a neon glow — no frame, no card */
.hb-visual{display:flex;align-items:center;justify-content:center}
.hb-bag-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease}
.hb-bag-wrap.pop{transform:scale(1.04)}
.hb-bag-wrap::before{content:'';position:absolute;top:50%;left:50%;width:120%;height:120%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(181,218,60,0.18) 0%,transparent 68%);z-index:0;pointer-events:none}
.hb-bag-wrap::after{content:'';position:absolute;bottom:2%;left:50%;transform:translateX(-50%);width:52%;height:20px;background:rgba(0,0,0,0.25);filter:blur(12px);border-radius:50%;z-index:0;pointer-events:none}
.hb-mascot-hero{height:clamp(320px,36vw,440px);width:auto;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 14px 30px rgba(0,0,0,0.28));transition:opacity .3s ease}
.hb-mascot-full{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:auto;opacity:0;pointer-events:none}
.hb-bag-wrap.full .hb-mascot-pose{opacity:0}
.hb-bag-wrap.full .hb-mascot-full{opacity:1}
.hb-full-badge{position:absolute;top:-4px;left:50%;transform:translateX(-50%) scale(.6);background:#fff;color:var(--purple);font-family:'Satoshi',sans-serif;font-weight:700;font-size:13px;padding:7px 16px;border-radius:20px;white-space:nowrap;opacity:0;z-index:2;transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.hb-bag-wrap.full .hb-full-badge{opacity:1;transform:translateX(-50%) scale(1)}
/* RIGHT: content stack */
.hb-content{min-width:0}
.hb-kicker{display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--neon);margin-bottom:8px}
.hb-title{font-family:'Satoshi','General Sans',sans-serif;font-size:28px;font-weight:700;color:var(--white);margin-bottom:6px;line-height:1.1}
.hb-oneliner{font-size:15px;color:rgba(255,255,255,0.82);margin-bottom:20px}
.hb-oneliner strong{color:var(--neon)}
.hb-fly-layer{position:absolute;inset:0;pointer-events:none;z-index:5}
.hb-fly{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);transition:transform .5s cubic-bezier(.5,0,.3,1),opacity .5s ease}
.hb-fly svg{width:26px;height:26px;stroke:var(--neon);fill:none;stroke-width:1.6}
/* item grid: flex-wrap centered so the last (orphan) row is centered, not left-hung */
.hb-item-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:20px}
.hb-item-btn{flex:0 0 calc((100% - 30px)/4);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border:1px solid rgba(255,255,255,0.16);border-radius:12px;background:rgba(255,255,255,0.08);color:#fff;cursor:pointer;font-family:'General Sans',sans-serif;font-size:12px;font-weight:500;transition:transform .15s,border-color .2s,background .2s}
.hb-item-btn:hover{border-color:var(--neon);background:rgba(181,218,60,0.14);transform:translateY(-2px)}
.hb-item-btn:active{transform:translateY(0) scale(.96)}
.hb-item-btn i,.hb-item-btn svg{width:22px;height:22px;color:var(--neon)}
.hb-item-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;border-color:rgba(255,255,255,0.16)}
.hb-item-btn.cant-fit{opacity:.42}
.hb-item-btn.shake{animation:shake .3s ease}
.hb-fill{margin:0 auto;max-width:340px}
.hb-fill-track{height:9px;border-radius:6px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.2);overflow:hidden}
.hb-fill-bar{height:100%;width:0;background:linear-gradient(90deg,var(--neon),var(--neon-hover));border-radius:6px;transition:width .4s cubic-bezier(.22,1,.36,1)}
.hb-fill-label{text-align:center;font-size:12.5px;font-weight:600;font-family:'Satoshi',sans-serif;color:rgba(255,255,255,0.78);margin-top:9px}
.hb-bag-wrap.full .hb-fill-bar{background:linear-gradient(90deg,var(--neon),var(--neon-deep))}
.hb-tip{position:absolute;transform:translate(-50%,-100%);background:#fff;color:var(--purple);font-size:11.5px;font-weight:600;font-family:'Satoshi',sans-serif;padding:5px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;z-index:20;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.hb-tip.show{opacity:1}
.hb-compare{font-size:14px;color:rgba(255,255,255,0.72);margin:14px auto 0;line-height:1.5;min-height:42px;max-width:420px}
.hb-compare strong{color:var(--neon);font-weight:700}
.hb-compare.saving{color:var(--neon);font-weight:600;font-size:15px}
.hb-compare.saving strong{color:var(--neon)}
.hb-game-actions{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.hb-game-actions .btn{flex:1 1 auto;justify-content:center}
.hb-reset{background:none;border:none;color:rgba(255,255,255,0.7);font-family:'Satoshi',sans-serif;font-size:14px;font-weight:600;cursor:pointer;padding:8px 10px;min-height:44px;display:inline-flex;align-items:center;flex-shrink:0}
.hb-reset:hover{color:var(--neon)}
.hb-reset:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
/* <900px: mascot ~200px centered above the full-width content stack */
@media(max-width:900px){
  .hb-game{grid-template-columns:1fr;gap:18px;padding:24px 20px}
  .hb-mascot-hero{height:200px}
  .hb-title{font-size:24px}
  .hb-item-btn{flex:0 0 calc((100% - 20px)/3)}
}

/* Phase 3: Offer card (centered, contained) */
.hb-offer{padding:20px 0 56px}
.hb-offer-card{background:#fff;border-radius:20px;padding:40px 32px;max-width:640px;margin:0 auto;box-shadow:0 4px 32px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.04)}
.hb-offer-top{display:flex;align-items:center;gap:24px;margin-bottom:28px}
.hb-offer-mascot{width:120px;height:auto;flex-shrink:0;object-fit:contain}
.hb-offer-price-block{flex:1}
.hb-offer-price-block h2{font-size:26px;font-weight:700;line-height:1.12;letter-spacing:-.02em;color:var(--text)}
.hb-price-badge{background:var(--purple);border-radius:12px;padding:16px 24px;text-align:center;display:inline-block;box-shadow:0 12px 30px rgba(55,39,114,.28)}
.hb-price-amount{font-family:'Satoshi','General Sans',sans-serif;font-size:36px;font-weight:800;color:var(--neon);display:block;line-height:1}
.hb-price-note{font-size:13px;color:rgba(255,255,255,0.6);margin-top:4px;display:block}
.hb-offer-benefits{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hb-benefit-item{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--text);padding:8px 12px;background:#f8f7f3;border-radius:8px}
.hb-benefit-item i,.hb-benefit-item svg{width:16px;height:16px;color:var(--neon-deep);flex-shrink:0}
.hb-benefit-item:last-child{grid-column:1 / -1}

/* Mascot images must never be cropped by their container */
.mascot-img,.hb-offer-mascot,.hero-mascot-img{object-fit:contain !important;overflow:visible}

@media(max-width:768px){
  .hb-animation-stage{height:300px}
  .hb-bag-img{width:140px}
  .mascot-img{max-width:160px !important}
  .hb-headline{font-size:26px}
  .hb-offer-top{flex-direction:column;text-align:center}
  .hb-offer-mascot{width:100px}
  .hb-offer-price-block h2{text-align:center}
  .hb-offer-benefits{grid-template-columns:1fr}
  .hb-offer-card{padding:28px 20px}
}

/* Footer mascot */
.footer-mascot{text-align:center;margin-bottom:16px;position:relative;z-index:1}
.footer-mascot img{display:inline-block;height:60px;width:auto;border-radius:0;animation:mascot-bounce 2.5s ease-in-out infinite}

/* Happy Bag block inside Qsec27 modal */
.q27-modal-hb{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);text-align:center}
.q27-modal-hb img{display:inline-block;height:80px;width:auto;margin-bottom:8px}
.q27-modal-hb p{font-size:13px;color:var(--text-secondary);margin:0}
.q27-modal-hb strong{color:var(--neon-deep)}

/* ---- Lifestyle delivery ---- */
.lifestyle-section{padding:52px 0;background:var(--bg)}
.lifestyle-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.lifestyle-img{width:100%;border-radius:16px;aspect-ratio:4/3;object-fit:cover;box-shadow:0 8px 40px rgba(0,0,0,0.08)}
.lifestyle-content h2{font-size:30px;font-weight:700;margin-bottom:12px;line-height:1.12}
.lifestyle-content p{font-size:15px;line-height:1.7;color:var(--text-secondary);margin-bottom:24px;max-width:400px}
@media(max-width:768px){.lifestyle-grid{grid-template-columns:1fr;gap:28px}.lifestyle-content h2{font-size:24px}}

/* ---- Split sections ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split.rev .col-text{order:2}
.split .col-text h2{font-size:30px;margin-bottom:14px}
.split .col-text p{font-size:16px;color:var(--text-secondary);margin-bottom:18px}
.fact-card{position:relative;overflow:hidden;background:rgba(55,39,114,0.08);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(55,39,114,0.12);border-radius:16px;padding:24px 28px;font-size:14px;line-height:1.7;color:var(--text);box-shadow:0 4px 24px rgba(55,39,114,0.06),inset 0 1px 0 rgba(255,255,255,0.5)}
.fact-card::before{content:'';position:absolute;top:-20px;right:-20px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(181,218,60,0.25),transparent 70%)}
.fact-card strong{color:var(--purple);font-weight:700}

/* before/after slider */
.ba{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:3/4;border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(55,39,114,0.16);user-select:none;touch-action:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;pointer-events:none}
.ba .reveal-img{clip-path:inset(0 0 0 50%)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--neon);transform:translateX(-50%);z-index:3;box-shadow:0 0 14px rgba(181,218,60,0.8)}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:3px solid var(--neon);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,0.22);cursor:ew-resize}
.ba-knob i{width:20px;height:20px;color:var(--neon-deep)}
.ba-pill{position:absolute;bottom:14px;padding:5px 13px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;z-index:2}
.ba-pill.before{left:14px;background:var(--red);color:#fff}
.ba-pill.after{right:14px;background:var(--neon);color:var(--dark)}

/* shoe swap */
.shoe-box{position:relative;width:100%;aspect-ratio:1/1;max-width:460px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(55,39,114,0.16)}
.shoe-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;transition:opacity .8s ease}
.shoe-box .shoe-clean{opacity:0}
.shoe-box.shake{animation:shake .3s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.foam{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,0.85) 50%,transparent 100%);transform:translateX(-110%)}
.foam.sweep{animation:sweep 1s ease forwards}
@keyframes sweep{0%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
.shoe-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.shoe-pills span{font-size:12px;font-weight:500;padding:5px 14px;border-radius:20px;border:1px solid var(--border);color:var(--text-secondary)}
.btn.clean-done{background:var(--neon);border-color:var(--neon);color:var(--dark)}

/* ---- Process — horizontal timeline ---- */
.process-timeline{margin-top:10px}
.timeline-track{position:relative;margin:30px 0 36px}
.timeline-line{position:absolute;top:21px;left:21px;right:21px;height:3px;background:var(--border);border-radius:3px;z-index:0}
.timeline-progress{position:absolute;top:0;left:0;height:100%;width:0;background:var(--neon);border-radius:3px;transition:width .5s ease;box-shadow:0 0 10px rgba(181,218,60,0.6)}
.timeline-steps{position:relative;z-index:1;display:flex;justify-content:space-between;gap:8px}
.t-step{display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;flex:1;text-align:center}
.t-node{width:42px;height:42px;border-radius:50%;background:#fff;border:2px solid var(--border);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-family:'Satoshi';font-weight:700;font-size:16px;transition:all .35s cubic-bezier(0.34,1.56,0.64,1)}
.t-step.done .t-node{background:var(--neon);border-color:var(--neon);color:var(--dark);transform:scale(0.85)}
.t-step.active .t-node{background:var(--neon);border-color:var(--neon);color:var(--dark);transform:scale(1.15);box-shadow:0 6px 20px rgba(181,218,60,0.55)}
.t-label{font-size:12px;font-weight:500;color:var(--text-secondary);max-width:96px;transition:color .3s}
.t-step.active .t-label{color:var(--purple);font-weight:600}
.process-detail{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,0.05)}
.pd-image{position:relative;aspect-ratio:16/11;height:100%}
.pd-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;opacity:0;transition:opacity .5s ease}
.pd-image img.show{opacity:1}
.pd-text{padding:28px 32px 28px 0}
.pd-text .pd-step{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--neon-deep);margin-bottom:8px}
.pd-text h3{font-size:24px;margin-bottom:10px}
.pd-text p{font-size:15px;color:var(--text-secondary)}

/* ---- Instagram ---- */
.insta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.insta-card{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;display:block}
.insta-card img{width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .4s ease}
.insta-card:hover img{transform:scale(1.03)}
.insta-overlay{position:absolute;inset:0;background:rgba(55,39,114,0.15);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}
.insta-card:hover .insta-overlay{opacity:1}
.insta-overlay i{width:26px;height:26px;color:#fff}
.insta-foot{text-align:center;margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:14px}
.insta-foot p{font-size:15px;color:var(--text-secondary)}
.insta-foot p strong{color:var(--purple)}
/* ---- Instagram live grid ---- */
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ig-cell{position:relative;display:block;aspect-ratio:1/1;border-radius:8px;overflow:hidden}
.ig-cell img{width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .4s ease}
.ig-cell:hover img{transform:scale(1.05)}
.ig-cell .ig-overlay{position:absolute;inset:0;background:rgba(55,39,114,0.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}
.ig-cell:hover .ig-overlay{opacity:1}
.ig-cell .ig-overlay i,.ig-cell .ig-overlay svg{width:26px;height:26px;color:var(--white)}
.ig-cell .ig-play{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:6px;background:var(--neon);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.2)}
.ig-cell .ig-play i,.ig-cell .ig-play svg{width:14px;height:14px;color:var(--dark)}
.ig-skeleton{aspect-ratio:1/1;border-radius:8px;background:linear-gradient(100deg,var(--bg-alt) 30%,#ececec 50%,var(--bg-alt) 70%);background-size:200% 100%;animation:ig-shimmer 1.3s ease-in-out infinite}
@keyframes ig-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(max-width:768px){.ig-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- 30% offer ---- */
.offer{background:linear-gradient(120deg,var(--neon) 0%,#c8e64a 100%);border-radius:20px;position:relative;overflow:hidden}
.offer::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,0.25);filter:blur(40px);top:-100px;right:10%}
.offer-inner{display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center;padding:44px 40px;position:relative;z-index:1}
.offer h2{font-size:32px;color:var(--dark);margin-bottom:12px}
.offer p{font-size:16px;color:#33420a;margin-bottom:22px;max-width:440px}
.offer-circle{width:230px;height:230px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;margin-left:auto;box-shadow:0 16px 40px rgba(55,39,114,0.35)}
.offer-circle span{font-family:'Satoshi';font-size:62px;font-weight:700;color:var(--neon)}
@media(max-width:900px){
  /* 30% circle = corner badge; text reserves space (padding-right) so the badge never sits over it */
  .offer-inner{position:relative}
  .offer-circle{position:absolute;top:16px;right:16px;width:88px;height:88px;margin:0;box-shadow:none}
  .offer-circle span{font-size:26px}
  .offer-badged h2,.offer-badged p{padding-right:104px}
}
/* tightest screens: shrink badge + reserve so headings keep >=3 words/line */
@media(max-width:360px){
  .offer-circle{width:72px;height:72px}
  .offer-circle span{font-size:22px}
  .offer-badged h2,.offer-badged p{padding-right:88px}
}

/* ---- Qsec vs regular dhobi (editorial comparison) ---- */
.dhobi-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.dhobi-col{border-radius:16px;padding:8px 10px 14px}
.dhobi-them{background:#efece7;border:1px solid var(--border)}
.dhobi-us{background:#fff;border:1px solid rgba(181,218,60,0.5);border-left:4px solid var(--neon);box-shadow:0 8px 30px rgba(181,218,60,0.12)}
.dhobi-col-head{padding:14px 14px 10px}
.dc-tag{font-family:'Satoshi',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 14px;border-radius:20px;display:inline-block}
.dc-tag.them{background:#ddd8d0;color:#6b6560}
.dc-tag.us{background:var(--neon);color:var(--dark)}
.dhobi-row{display:flex;gap:12px;align-items:flex-start;padding:12px 14px}
.dhobi-row+.dhobi-row{border-top:1px solid rgba(0,0,0,0.05)}
.dhobi-row p{font-size:14px;line-height:1.5;color:var(--text)}
.dhobi-them .dhobi-row p{color:var(--text-secondary)}
.dc-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.dc-ic i,.dc-ic svg{width:15px;height:15px}
.dc-ic.x{background:#e2ded7;color:#9a938a}
.dc-ic.check{background:var(--neon-pale);color:var(--neon-deep)}
.dhobi-foot{text-align:center;margin-top:26px}
.dhobi-foot a{font-family:'Satoshi',sans-serif;font-size:14px;font-weight:600;color:var(--neon-deep);display:inline-flex;align-items:center;gap:6px}
.dhobi-foot a i{width:15px;height:15px}
.dhobi-foot a:hover{color:var(--purple)}
@media(max-width:760px){.dhobi-grid{grid-template-columns:1fr;gap:14px}}

/* ---- Qsec27 (purple card — allowed) ---- */
.q27-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.q27-dark{background:var(--purple);color:#fff;border-radius:18px;padding:34px;position:relative;overflow:hidden}
.q27-dark::before{content:'';position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(181,218,60,0.18);filter:blur(50px);bottom:-80px;left:-40px}
.q27-dark>*{position:relative;z-index:1}
.q27-badge{display:inline-block;background:var(--neon);color:var(--dark);font-family:'Satoshi';font-weight:700;font-size:12px;letter-spacing:.08em;padding:5px 14px;border-radius:20px;margin-bottom:16px}
.q27-dark h3{font-size:22px;color:#fff;margin-bottom:20px;line-height:1.25}
.q27-perks{display:flex;flex-direction:column;gap:13px;margin-bottom:26px}
.q27-perks li{display:flex;align-items:center;gap:11px;font-size:15px}
.q27-perks i{width:18px;height:18px;color:var(--neon);flex-shrink:0}
.q27-benefits{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.q27-benefit{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:12px;background:rgba(181,218,60,0.08);border:1px solid rgba(181,218,60,0.14);transition:background .3s,border-color .3s,transform .3s}
.q27-benefit:hover{background:rgba(181,218,60,0.16);border-color:rgba(181,218,60,0.3);transform:translateX(4px)}
.q27-benefit .benefit-icon{width:36px;height:36px;border-radius:9px;background:var(--neon);color:var(--dark);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.q27-benefit .benefit-icon i{width:18px;height:18px}
.q27-benefit .benefit-text{font-size:13.5px;color:rgba(255,255,255,0.85);line-height:1.35}
.q27-benefit .benefit-text strong{display:block;font-weight:700;color:#fff;font-size:14.5px}
.q27-feats{display:flex;flex-direction:column;gap:20px}
.q27-feat{display:flex;gap:14px;align-items:flex-start}
.q27-feat .fi{width:44px;height:44px;border-radius:12px;background:var(--neon-pale);border:1px solid rgba(181,218,60,0.35);display:flex;align-items:center;justify-content:center;color:var(--neon-deep);flex-shrink:0}
.q27-feat .fi i{width:20px;height:20px}
.q27-feat h4{font-size:17px;margin-bottom:3px}
.q27-feat p{font-size:14px;color:var(--text-secondary)}

/* ---- Pricing (compact; purple header) ---- */
.pricing-wrap{display:grid;grid-template-columns:.8fr 2.2fr;gap:32px;align-items:start}
.pricing-aside .kicker{margin-bottom:6px}
.pricing-aside h2{font-size:24px;margin-bottom:10px}
.pricing-aside p{font-size:14px;color:var(--text-secondary);margin-bottom:18px}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{font-family:'Satoshi';font-size:13px;font-weight:600;padding:8px 16px;border-radius:24px;border:1px solid var(--border);background:#fff;color:var(--text-secondary);cursor:pointer;transition:all .2s}
.tab:hover{border-color:var(--neon-hover)}
.tab.active{background:var(--neon);border-color:var(--neon);color:var(--dark)}
.price-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.04)}
.price-legend{display:grid;grid-template-columns:1fr 70px 70px;gap:8px;padding:11px 18px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:#fff;background:var(--purple)}
.price-legend span:not(:first-child){text-align:right}
.panel{display:none}
.panel.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.price-rows{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;padding:6px 18px 14px}
.price-row{display:grid;grid-template-columns:1fr 70px 70px;gap:8px;padding:9px 0;border-bottom:1px solid rgba(0,0,0,0.05);font-size:14px}
.price-row .pa{font-weight:500}
.price-row .pp{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.price-row .pp.lead{color:var(--purple);font-weight:600}
.price-note{font-size:12px;color:var(--text-secondary);margin-top:12px}
@media(max-width:760px){.price-rows{grid-template-columns:1fr}}
/* ---- Price Estimator ---- */
.est-wrap{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start}
.est-main{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,0.04)}
.est-toolbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:18px}
.est-tabs{display:flex;flex-wrap:wrap;gap:8px}
.est-tab{font-family:'Satoshi',sans-serif;font-size:13px;font-weight:600;padding:8px 15px;border-radius:24px;border:1px solid var(--border);background:#fff;color:var(--text-secondary);cursor:pointer;transition:all .2s}
.est-tab:hover{border-color:var(--neon-hover)}
.est-tab.active{background:var(--neon);border-color:var(--neon);color:var(--dark)}
.est-mode{display:inline-flex;background:var(--bg-alt);border-radius:24px;padding:3px}
.est-mode-btn{font-family:'Satoshi',sans-serif;font-size:12px;font-weight:600;padding:6px 14px;border-radius:20px;border:none;background:none;color:var(--text-secondary);cursor:pointer;transition:all .2s}
.est-mode-btn.active{background:var(--purple);color:#fff}
.est-items{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.est-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg);transition:border-color .2s,background .2s}
.est-item.has-qty{border-color:rgba(181,218,60,0.55);background:var(--neon-pale)}
.est-item-info{min-width:0}
.est-item-name{font-size:14px;font-weight:500;color:var(--text)}
.est-item-price{font-size:12.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.est-stepper{display:flex;align-items:center;gap:8px;flex-shrink:0}
.est-step{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--text);font-size:17px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .15s}
.est-step:hover:not(:disabled){border-color:var(--neon);color:var(--neon-deep)}
.est-step:disabled{opacity:.35;cursor:not-allowed}
.est-qty{min-width:18px;text-align:center;font-family:'Satoshi',sans-serif;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.est-summary{position:sticky;top:110px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:0 8px 30px rgba(0,0,0,0.06)}
.est-summary h3{font-size:18px;margin-bottom:14px}
.est-lines{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;max-height:220px;overflow-y:auto}
.est-empty{font-size:13.5px;color:var(--text-secondary)}
.est-line{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.est-line .el-name{color:var(--text)}
.est-line .el-amt{color:var(--text-secondary);font-variant-numeric:tabular-nums;flex-shrink:0}
.est-subtotal{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid var(--border);font-family:'Satoshi',sans-serif;font-weight:700}
.est-subtotal span:first-child{font-size:14px}
.est-subtotal #estSubtotal{font-size:22px;color:var(--purple)}
.est-nudges{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.est-nudges:empty{margin:0}
.est-nudge{font-size:12.5px;line-height:1.4;padding:9px 12px;border-radius:10px}
.est-nudge.free{background:var(--neon-pale);color:var(--neon-deep);font-weight:600}
.est-nudge.q27{background:var(--purple-pale);color:var(--purple)}
.est-nudge.q27 strong{font-weight:700}
.est-nudge.hb{background:rgba(252,81,48,0.08);color:#c23a1f}
.est-nudge.hb a{font-weight:700;text-decoration:underline;color:inherit}
/* estimator offers block */
.est-offers{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.est-offers:empty{margin:0}
.est-offers-title{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--text-secondary)}
.est-offer{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.35;padding:8px 10px;border-radius:9px;background:var(--bg-alt);color:var(--text);text-decoration:none}
.est-offer i,.est-offer svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:var(--text-secondary)}
.est-offer strong{font-weight:700;color:var(--purple)}
.est-offer.first{background:var(--neon-pale);color:var(--neon-deep)}
.est-offer.first i,.est-offer.first svg{color:var(--neon-deep)}
.est-offer.first strong{color:var(--neon-deep)}
.est-offer.hb{background:var(--purple-pale);color:var(--purple)}
.est-offer.hb i,.est-offer.hb svg{color:var(--purple)}
.est-offer.hb strong{color:var(--purple)}
.est-fineprint{font-size:11.5px;color:var(--text-secondary);margin:6px 0 14px}
@media(max-width:900px){.est-wrap{grid-template-columns:1fr}.est-summary{position:static}}
@media(max-width:520px){.est-items{grid-template-columns:1fr}}
/* inner service-page pricing table (full width) */
.price-table{width:100%;max-width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:0 2px 12px rgba(0,0,0,0.04)}
.price-table th,.price-table td{text-align:left;padding:11px 18px;font-size:14px}
.price-table thead th{background:var(--purple);color:#fff !important;font-family:'Satoshi';font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.price-table th:not(:first-child),.price-table td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.price-table tbody td:not(:first-child){color:var(--text-secondary)}
.price-table tbody tr{border-top:1px solid var(--border)}
.price-table tbody tr:hover{background:var(--neon-pale)}
.price-table td:first-child{font-weight:500;color:var(--text)}

/* ---- Testimonials (glass) ---- */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.tst{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:16px;background:rgba(255,255,255,0.65);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.5);box-shadow:0 4px 24px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.6)}
.tst::before{content:'\201C';position:absolute;top:14px;right:20px;font-size:54px;font-family:Georgia,serif;color:var(--neon);opacity:.18;line-height:1;z-index:0}
.tst>*{position:relative;z-index:1}
.tst.mid{transform:translateY(-16px)}
.stars{display:flex;gap:3px}
.stars i,.stars svg{width:16px;height:16px;color:var(--neon);fill:var(--neon);stroke:var(--neon)}
.tst q{font-size:15px;line-height:1.6;color:var(--text);font-style:normal}
.tst-who{display:flex;align-items:center;gap:11px}
.avatar{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--neon),var(--neon-hover));color:var(--dark);display:flex;align-items:center;justify-content:center;font-family:'Satoshi';font-weight:800;font-size:15px}
.tst-who .nm{font-size:14px;font-weight:600;font-family:'Satoshi'}
.tst-who .loc{font-size:12.5px;color:var(--text-secondary)}

/* ---- Locations (off-white, white cards) ---- */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.loc-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:0 2px 12px rgba(0,0,0,0.04);transition:transform .25s,box-shadow .25s,border-color .25s}
.loc-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(181,218,60,0.14);border-color:rgba(181,218,60,0.5)}
.loc-card .lc-icon{width:44px;height:44px;border-radius:12px;background:var(--neon-pale);border:1px solid rgba(181,218,60,0.35);display:flex;align-items:center;justify-content:center;color:var(--neon-deep);margin-bottom:14px}
.loc-card .lc-icon i{width:21px;height:21px}
.loc-card h3{font-size:20px;margin-bottom:8px}
.loc-card .addr{font-size:14px;color:var(--text-secondary);margin-bottom:12px;line-height:1.55}
.loc-hours{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text);margin-bottom:16px}
.loc-card a.dir{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;font-family:'Satoshi';color:var(--neon-deep)}
.loc-card a.dir i{width:15px;height:15px}

/* ---- Final CTA (neon gradient) ---- */
.final-cta{display:flex;justify-content:center}
.final-card{background:linear-gradient(120deg,var(--neon) 0%,#c8e64a 100%);border-radius:20px;padding:48px;text-align:center;max-width:760px;width:100%;position:relative;overflow:hidden}
.final-card::before{content:'';position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,0.28);filter:blur(50px);top:-130px;right:-40px;pointer-events:none}
.final-card>*{position:relative;z-index:1}
.final-card h2{font-size:30px;color:var(--dark);margin-bottom:14px}
.final-card p{font-size:16px;color:#33420a;margin:0 auto 26px;max-width:520px}

/* ---- Footer (purple) ---- */
.footer{background:var(--purple);color:rgba(255,255,255,0.7);padding:48px 0 24px;position:relative;overflow:hidden}
.footer::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23372772'/%3E%3Crect width='1' height='1' fill='%23ffffff' opacity='0.02'/%3E%3C/svg%3E");pointer-events:none}
.footer .container{position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:32px}
.footer .logo-text{color:#fff}
.footer .logo-mark{background:var(--neon);color:var(--purple)}
.footer .logo-text span{color:rgba(255,255,255,0.6)}
.footer p.desc{font-size:14px;color:rgba(255,255,255,0.7);margin-top:14px;line-height:1.6;max-width:300px}
.footer p.venture{font-size:12.5px;color:rgba(255,255,255,0.45);margin-top:10px}
.footer h4{font-family:'Satoshi';font-size:13px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.footer ul li{margin-bottom:9px}
.footer ul li a{font-size:14px;color:rgba(255,255,255,0.7);transition:color .2s}
.footer ul li a:hover{color:var(--neon)}
.footer .contact li{display:flex;align-items:center;gap:9px;font-size:14px;margin-bottom:11px}
.footer .contact i{width:16px;height:16px;color:var(--neon);flex-shrink:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(255,255,255,0.45)}
.footer-bottom a{margin-left:16px}
.footer-bottom a:hover{color:var(--neon)}

/* ---- WhatsApp FAB ---- */
.fab{position:fixed;bottom:22px;right:22px;z-index:var(--z-fab);width:54px;height:54px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(37,211,102,0.45);animation:bounce 2s ease-in-out infinite}
.fab i{width:26px;height:26px;color:#fff}
.fab svg{width:28px;height:28px;display:block}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.wa-inline{width:15px;height:15px;vertical-align:-2px;flex-shrink:0}

/* ---- Qsec27 modal ---- */
.q27-modal{display:none;position:fixed;inset:0;background:rgba(20,14,40,0.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10001;align-items:center;justify-content:center;padding:20px}
.q27-modal.show{display:flex}
.q27-modal-content{background:#fff;border-radius:18px;padding:40px 32px;max-width:420px;width:100%;position:relative;box-shadow:0 24px 80px rgba(0,0,0,0.25);animation:modalIn .3s ease;text-align:center}
@keyframes modalIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.q27-close{position:absolute;top:10px;right:14px;font-size:26px;line-height:1;background:none;border:none;color:#aaa;cursor:pointer;transition:color .2s}
.q27-close:hover{color:var(--text)}
.q27-modal .q27-badge{margin-bottom:16px}
.q27-modal h3{font-size:22px;font-weight:700;margin-bottom:8px}
.q27-modal p{font-size:14px;color:var(--text-secondary);margin-bottom:22px;line-height:1.6}

/* ---- Happy Bag popup (purple visual band + white body) ---- */
.hb-popup{display:none;position:fixed;inset:0;background:rgba(20,14,40,0.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:var(--z-popup);align-items:center;justify-content:center;padding:20px}
.hb-popup.show{display:flex}
.hb-popup-card{background:#fff;border-radius:18px;max-width:640px;width:100%;position:relative;box-shadow:0 24px 80px rgba(0,0,0,0.28);animation:modalIn .3s ease;overflow:hidden;display:grid;grid-template-columns:0.85fr 1fr}
.hb-popup-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;font-size:22px;line-height:1;background:rgba(0,0,0,0.28);border:none;color:#fff;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;transition:background .2s}
.hb-popup-close:hover{background:rgba(0,0,0,0.45)}
.hb-popup-visual{position:relative;background:rgba(55,39,114,0.08);display:flex;align-items:center;justify-content:center;padding:28px;overflow:hidden}
.hb-popup-visual::before{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(181,218,60,0.18);filter:blur(50px);bottom:-40px;left:-30px}
.hb-popup-bag{position:relative;width:100%;max-width:180px;height:auto;object-fit:contain;filter:drop-shadow(0 10px 26px rgba(0,0,0,0.3));border-radius:0}
.hb-popup-mascot{position:absolute;bottom:12px;right:6px;width:62px;height:auto;object-fit:contain;z-index:2;border-radius:0}
.hb-popup-body{padding:30px 28px}
.hb-popup-badge{display:inline-block;background:var(--neon);color:var(--dark);font-family:'Satoshi',sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:20px;margin-bottom:12px}
.hb-popup-body h3{font-size:26px;font-weight:700;margin-bottom:8px}
.hb-popup-body p{font-size:14px;color:var(--text-secondary);margin-bottom:10px;line-height:1.6}
.hb-popup-note{font-size:13px;color:var(--neon-deep);font-weight:600}
.hb-popup-body .btn{margin-top:6px}
.hb-popup-link{display:inline-block;margin-top:14px;margin-left:4px;font-size:13px;font-weight:600;font-family:'Satoshi',sans-serif;color:var(--text-secondary)}
.hb-popup-link:hover{color:var(--purple)}
@media(max-width:560px){
  .hb-popup-card{grid-template-columns:1fr;max-width:400px}
  .hb-popup-visual{padding:22px}
  .hb-popup-bag{max-width:120px}
  .hb-popup-mascot{width:50px}
  .hb-popup-body{padding:24px 22px 26px}
  .hb-popup-body h3{font-size:23px}
}

/* ---- Reveals ---- */
/* fail-visible reveal: visible by default; hidden ONLY when JS marked <html> js-reveal AND element is pre-reveal */
.reveal{transition:opacity .5s ease,transform .5s ease}
.js-reveal .reveal.pre-reveal{opacity:0;transform:translateY(20px)}
.reveal.revealed{opacity:1;transform:none}

/* ============================================================
   INNER PAGE TEMPLATE
   ============================================================ */
.svc-hero{position:relative;width:100%;aspect-ratio:21/9;max-height:340px;overflow:hidden;display:flex;align-items:flex-end}
.svc-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.svc-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,14,40,0.78) 0%,rgba(20,14,40,0.4) 60%,rgba(20,14,40,0.2) 100%);z-index:1}
.svc-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--neon),transparent);z-index:2}
.svc-hero .container{position:relative;z-index:2;padding-bottom:28px;width:100%}
.svc-hero h1{font-size:42px;color:#fff;margin-top:6px}
.breadcrumb{font-size:12.5px;color:rgba(255,255,255,0.85);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--neon)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--neon)}
.includes{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.includes li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--text)}
.includes i{width:18px;height:18px;color:var(--neon-deep);flex-shrink:0;margin-top:3px}
.inner-img{border-radius:16px;aspect-ratio:4/3;max-height:380px;box-shadow:0 14px 38px rgba(55,39,114,0.14)}
.mini-steps{display:flex;flex-direction:column;gap:0;max-width:680px}
.mini-step{position:relative;display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:start;padding:0 0 26px}
.mini-step:last-child{padding-bottom:0}
.mini-step:not(:last-child)::before{content:'';position:absolute;left:17px;top:38px;bottom:0;width:2px;background:var(--border)}
.mini-step .ms-num{grid-column:1;grid-row:1;position:relative;z-index:1;width:36px;height:36px;border-radius:50%;background:var(--neon);color:var(--dark);display:flex;align-items:center;justify-content:center;font-family:'Satoshi';font-weight:700;font-size:14px}
.mini-step h4{grid-column:2;font-size:15px;font-weight:600;margin-bottom:3px;padding-top:8px}
.mini-step p{grid-column:2;font-size:14px;color:var(--text-secondary);line-height:1.6}
.link-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;font-family:'Satoshi';color:var(--neon-deep);margin-top:14px}
.link-back i{width:15px;height:15px}

/* page hero (blog / locations) — purple banner */
.page-hero{padding:64px 0 56px;background:var(--purple);color:#fff;position:relative;overflow:hidden}
.page-hero::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23372772'/%3E%3Crect width='1' height='1' fill='%23ffffff' opacity='0.02'/%3E%3C/svg%3E");pointer-events:none}
.page-hero .container{position:relative;z-index:1}
.page-hero .kicker{color:var(--neon)}
.page-hero h1{font-size:44px;color:#fff;margin-top:6px}
.page-hero p{font-size:16px;color:rgba(255,255,255,0.8);margin-top:10px;max-width:520px}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.04);transition:transform .25s,box-shadow .25s}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(181,218,60,0.14)}
.blog-card img{aspect-ratio:16/10;border-radius:0;transition:transform .4s}
.blog-card:hover img{transform:scale(1.05)}
.blog-card .bc-body{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.blog-card .bc-date{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--neon-deep);font-weight:600}
.blog-card h3{font-size:18px;line-height:1.3}
.blog-card p{font-size:14px;color:var(--text-secondary);flex:1}
.blog-card .more{font-size:13px;font-weight:600;font-family:'Satoshi';color:var(--neon-deep);display:inline-flex;align-items:center;gap:5px}
.blog-card .more i{width:14px;height:14px}

/* service-page process: steps left, image right */
.service-process-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.service-process-grid .process-img{border-radius:16px;aspect-ratio:4/3;object-fit:cover;width:100%;box-shadow:0 14px 38px rgba(55,39,114,0.12)}
@media(max-width:768px){.service-process-grid{grid-template-columns:1fr;gap:24px}.service-process-grid .process-img{order:-1}}

/* blog post page */
.blog-post{padding:40px 0 56px}
.blogpost-grid{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.blog-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;font-family:'Satoshi';color:var(--neon-deep);margin-bottom:16px}
.blog-back i{width:15px;height:15px}
.blog-main h1{font-size:30px;font-weight:700;margin:6px 0 18px;letter-spacing:-0.02em;text-wrap:balance}
.blog-meta{display:flex;gap:10px;align-items:center;font-size:12px}
.blog-meta .blog-date{color:var(--text-secondary)}
.blog-meta .blog-cat{background:var(--neon-pale);color:var(--neon-deep);padding:3px 12px;border-radius:20px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.blog-hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin-bottom:24px}
.blog-body p{font-size:15px;line-height:1.8;color:var(--text);margin-bottom:16px}
.blog-body h2{font-size:20px;margin:24px 0 10px}
.blog-sidebar{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px}
.sidebar-offer,.sidebar-q27,.sidebar-contact{padding:24px;border-radius:14px}
.sidebar-hb{padding:24px;border-radius:14px;background:#fff;border:1px solid var(--border)}
.sidebar-hb-img{width:100%;max-width:120px;border-radius:10px;margin-bottom:12px;background:var(--purple);padding:12px}
.sidebar-hb h4{font-size:16px;margin-bottom:6px}
.sidebar-hb p{font-size:13.5px;color:var(--text-secondary);margin-bottom:14px;line-height:1.5}
.sidebar-hb p strong{color:var(--neon-deep)}
.blog-offers-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media(max-width:760px){.blog-offers-row{grid-template-columns:1fr}}
.sidebar-offer{background:linear-gradient(135deg,var(--neon),#c8e64a);color:var(--dark)}
.sidebar-q27{background:var(--purple);color:#fff;position:relative;overflow:hidden}
.sidebar-contact{background:var(--bg-alt)}
.blog-sidebar h4{font-size:16px;margin-bottom:6px}
.sidebar-q27 h4{color:#fff}
.blog-sidebar p{font-size:13.5px;margin-bottom:14px;line-height:1.5}
.sidebar-offer p{color:#33420a}.sidebar-offer p strong{font-weight:800}
.sidebar-q27 p{color:rgba(255,255,255,0.82)}
.sidebar-contact p{color:var(--text-secondary)}
.sidebar-q27 .q27-badge{margin-bottom:10px}
.blog-sidebar .btn{font-size:13px}
.sidebar-contact a{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-family:'Satoshi';color:var(--purple);font-size:14px}
@media(max-width:860px){.blogpost-grid{grid-template-columns:1fr}.blog-sidebar{position:static}}

/* locations page */
.locpage-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.locpage-card{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.05)}
.locpage-card iframe{width:100%;aspect-ratio:16/10;height:auto;border:0;display:block;border-radius:8px}
.locpage-card .lp-body{padding:26px}
.locpage-card h2{font-size:24px;margin-bottom:12px}
.locpage-card .row{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--text-secondary);margin-bottom:10px}
.locpage-card .row i{width:17px;height:17px;color:var(--neon-deep);flex-shrink:0;margin-top:3px}
.locpage-card .btn{margin-top:14px}

/* ---- Infinite moving testimonials ---- */
.testimonial-track{overflow:hidden;width:100%;padding:20px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.t-scroll{display:flex;gap:16px;width:max-content;animation:scroll-tst 30s linear infinite}
.t-scroll:hover{animation-play-state:paused}
@keyframes scroll-tst{to{transform:translateX(-50%)}}
.t-scroll .tst{min-width:340px;width:340px;flex-shrink:0;transform:none}

/* ---- Process tracing beam ---- */
.process-wrap{max-width:760px;margin:0 auto}
.process-tracer{display:grid;grid-template-columns:4px 1fr;gap:0;position:relative}
.tracer-steps{position:relative}
.tracer-line{position:relative;background:var(--border);border-radius:2px}
.tracer-glow{position:absolute;top:0;left:-3px;width:10px;height:48px;background:linear-gradient(to bottom,transparent,var(--neon),transparent);border-radius:5px;transition:top .6s cubic-bezier(0.22,1,0.36,1);box-shadow:0 0 12px rgba(181,218,60,0.45)}
.tr-step{padding:14px 0 14px 26px;position:relative;cursor:pointer;display:flex;gap:16px;align-items:flex-start}
.tr-thumb{width:120px;height:120px;flex-shrink:0;border-radius:8px;object-fit:cover;background:var(--bg-alt);border:2px solid transparent;transition:border-color .35s ease,box-shadow .35s ease}
.tr-step.active .tr-thumb{border-color:var(--neon);box-shadow:0 0 0 3px rgba(181,218,60,0.22),0 6px 18px rgba(181,218,60,0.22)}
.tr-content{flex:1;min-width:0}
.tr-dot{position:absolute;left:-23px;top:18px;width:10px;height:10px;border-radius:50%;background:var(--border);border:2px solid var(--border);transition:all .3s;z-index:2}
.tr-step.active .tr-dot{background:var(--neon);border-color:var(--neon);box-shadow:0 0 8px rgba(181,218,60,0.45)}
.tr-step h4{font-size:15px;font-weight:600;transition:color .3s}
.tr-step.active h4{color:var(--neon-deep)}
.tr-step p{font-size:13px;color:var(--text-secondary);line-height:1.6;max-height:0;overflow:hidden;opacity:0;transition:all .4s ease}
.tr-step.active p{max-height:90px;opacity:1;margin-top:4px}
.process-visual{position:relative;aspect-ratio:4/3;max-height:440px;border-radius:18px;overflow:hidden;box-shadow:0 14px 38px rgba(55,39,114,0.14)}
.process-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;opacity:0;transition:opacity .55s ease}
.process-visual img.show{opacity:1}
@media(max-width:768px){.tr-thumb{width:72px;height:72px}.tr-step{gap:12px}}
/* ============================================================
   PROCESS SHOWCASE (v16)
   ============================================================ */
.showcase{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:stretch}
.sc-list{display:flex;flex-direction:column;justify-content:center}
.sc-row{position:relative;display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--border);padding:14px 4px;cursor:pointer;font-family:'General Sans',sans-serif}
.sc-row:last-child{border-bottom:1px solid var(--border)}
.sc-num{font-family:'Satoshi',sans-serif;font-weight:700;font-size:22px;line-height:1;color:var(--purple);-webkit-text-fill-color:transparent;-webkit-text-stroke:1px var(--purple);flex-shrink:0;transition:-webkit-text-fill-color .3s}
.sc-row.active .sc-num{-webkit-text-fill-color:var(--purple)}
.sc-body{display:flex;flex-direction:column;min-width:0}
.sc-title{font-family:'Satoshi',sans-serif;font-size:16px;font-weight:600;color:var(--text);opacity:.7;transition:opacity .3s}
.sc-row:hover .sc-title,.sc-row.active .sc-title{opacity:1}
.sc-desc{font-size:14px;color:var(--text-secondary);line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .35s ease,margin-top .35s ease}
.sc-row.active .sc-desc{max-height:64px;opacity:1;margin-top:4px}
.sc-bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--neon);border-radius:2px}
.sc-row.active .sc-bar{animation:sc-fill var(--sc-int,3.5s) linear forwards}
.showcase.sc-paused .sc-row.active .sc-bar{animation-play-state:paused}
@keyframes sc-fill{from{width:0}to{width:100%}}
.sc-panel{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:0 14px 38px rgba(55,39,114,0.14);background:var(--bg-alt)}
.sc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;opacity:0;transition:opacity .5s ease}
.sc-img.show{opacity:1}
.sc-chip{position:absolute;bottom:14px;left:14px;z-index:2;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#fff;padding:7px 14px;border-radius:20px;background:rgba(20,14,40,0.42);-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);border:1px solid rgba(255,255,255,0.18)}
.sc-dots{position:absolute;bottom:16px;right:14px;z-index:2;display:flex;gap:8px}
.sc-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;background:rgba(255,255,255,0.55);transition:background .3s,transform .3s;box-shadow:0 1px 4px rgba(0,0,0,0.25)}
.sc-dot.active{background:var(--neon);transform:scale(1.4)}
.sc-carousel{display:none}
.sc-cdots{display:none}
@media(max-width:900px){
  .showcase{display:none}
  .sc-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 24px 8px;margin:0 -24px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sc-carousel::-webkit-scrollbar{display:none}
  .sc-card{flex:0 0 82vw;scroll-snap-align:start;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,0.05);overflow:hidden;padding-bottom:16px}
  .sc-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;margin-bottom:12px}
  .sc-card-head{display:flex;align-items:center;gap:10px;padding:0 16px;margin-bottom:6px}
  .sc-card-head .sc-num{font-size:20px}
  .sc-card-head h4{font-size:16px}
  .sc-card p{font-size:14px;color:var(--text-secondary);line-height:1.5;padding:0 16px}
  .sc-cdots{display:flex;justify-content:center;gap:8px;margin-top:16px}
  .sc-cdot{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;background:var(--border);transition:background .3s,transform .3s}
  .sc-cdot.active{background:var(--neon);transform:scale(1.35)}
}
@media(prefers-reduced-motion:reduce){
  .sc-img{transition:none}
  .sc-desc{transition:none}
  .sc-row.active .sc-bar{animation:none;width:100%}
}

/* ---- Qsec27 animated gradient bg ---- */
.qsec27-section{background:linear-gradient(-45deg,#f0ecf9,#e8f0d8,#f0ecf9,#e0e8f8);background-size:400% 400%;animation:gradient-shift 20s ease infinite;position:relative}
@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Sparkle particles removed (v12) — .sparkle-btn now inherits the .btn shine sweep. */

/* ---- Responsive ---- */
@media(max-width:980px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .tst-grid,.blog-grid{grid-template-columns:1fr 1fr}
  .tst.mid{transform:none}
  .mini-steps{grid-template-columns:repeat(2,1fr)}
  .pricing-wrap{grid-template-columns:1fr;gap:20px}
}
@media(max-width:860px){
  section{padding:38px 0}
  .nav-links,.nav-cta .btn{display:none}
  .hamburger{display:flex}
  .hero h1{font-size:32px}
  .split,.split.rev,.q27-grid,.offer-inner,.footer-grid,.loc-grid,.locpage-grid,.process-detail,.process-wrap{grid-template-columns:1fr;gap:24px}
  .process-wrap .process-visual{order:-1}
  .t-scroll .tst{min-width:280px;width:280px}
  .split.rev .col-text{order:0}
  .pd-image{aspect-ratio:16/10}
  .pd-text{padding:0 24px 26px}
  .section-head h2,.split .col-text h2,.offer h2,.final-card h2,.svc-hero h1,.page-hero h1{font-size:24px}
  .insta-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  /* mobile vertical timeline */
  .timeline-steps{flex-direction:column;align-items:flex-start;gap:16px}
  .timeline-line{display:none}
  .t-step{flex-direction:row;text-align:left;gap:12px;width:100%}
  .t-label{max-width:none}
}
@media(max-width:520px){
  .blog-grid,.footer-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card.svc{padding:16px 14px}
  .hero-stats{gap:10px}
  .hero-stats .stat{padding:12px 16px}
  .hero-stats .num{font-size:24px}
  .final-card{padding:32px 22px}
  .mini-steps{grid-template-columns:1fr}
}

/* ============================================================
   Happy Bag sticky floater · FAQ · Mobile CTA bar  (v14)
   ============================================================ */
.happybag-fab{position:fixed;bottom:28px;left:28px;z-index:var(--z-fab)}
.hbfab-trigger{width:64px;height:64px;cursor:pointer;position:relative;animation:mascot-float 3s ease-in-out infinite}
.hbfab-mascot{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.18))}
.hbfab-badge{position:absolute;top:-6px;right:-10px;background:var(--purple);color:var(--neon);font-size:10px;font-weight:800;padding:3px 8px;border-radius:10px;white-space:nowrap;font-family:'Satoshi',sans-serif}
.hbfab-pill{display:none}
/* Mobile (<900px): FAB de-escalates to a compact purple pill, no mascot */
@media(max-width:900px){
  .happybag-fab .hbfab-mascot,.happybag-fab .hbfab-badge{display:none}
  .hbfab-trigger{width:auto;height:40px;animation:none;display:inline-flex;align-items:center}
  .hbfab-pill{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;background:var(--purple);color:var(--neon);font-family:'Satoshi',sans-serif;font-weight:700;font-size:13px;border-radius:20px;box-shadow:0 6px 20px rgba(55,39,114,0.35);white-space:nowrap}
}
.hbfab-card{display:none;position:absolute;bottom:76px;left:0;width:300px;background:#fff;border-radius:16px;padding:24px;box-shadow:0 8px 40px rgba(0,0,0,0.16);border:1px solid rgba(0,0,0,0.06)}
.hbfab-card.open{display:block;animation:fab-card-in .3s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes fab-card-in{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.hbfab-close{position:absolute;top:8px;right:12px;background:none;border:none;font-size:22px;line-height:1;color:#999;cursor:pointer}
.hbfab-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.hbfab-header h4{font-size:15px;font-weight:700;color:var(--text)}
.hbfab-tagline{font-size:12px;color:var(--text-secondary);margin-top:2px}
.hbfab-price{background:var(--purple);border-radius:10px;padding:14px 18px;margin-bottom:14px;text-align:center}
.hbfab-amount{font-size:28px;font-weight:800;color:var(--neon);display:block;font-family:'Satoshi',sans-serif;line-height:1.1}
.hbfab-note{font-size:11px;color:rgba(255,255,255,0.6)}
.hbfab-perks{list-style:none;padding:0;margin:0 0 16px}
.hbfab-perks li{font-size:13px;color:var(--text);padding:5px 0 5px 20px;position:relative}
.hbfab-perks li::before{content:'\2713';position:absolute;left:0;color:var(--neon-deep);font-weight:700;font-size:12px}
.hbfab-cta{display:block;text-align:center;background:var(--neon);color:var(--dark);padding:10px 20px;border-radius:8px;font-size:13px;font-weight:700;font-family:'Satoshi',sans-serif;text-decoration:none;transition:background .25s,transform .25s}
.hbfab-cta:hover{background:var(--neon-hover);transform:translateY(-1px)}

/* Happy Bag section: compact tap-to-learn CTA */
.hb-tap-cta{padding:4px 0 48px;text-align:center}
.hb-tap-link{background:none;border:none;cursor:pointer;font-family:'Satoshi',sans-serif;font-size:15px;font-weight:600;color:var(--neon-deep);display:inline-flex;align-items:center;gap:6px;padding:8px 4px}
.hb-tap-link i{width:16px;height:16px}
.hb-tap-link:hover{color:var(--purple)}

/* FAQ accordion */
.faq-section{padding:48px 0;background:var(--bg-alt)}
.faq-list{max-width:680px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;text-align:left;padding:16px 0;font-size:15px;font-weight:600;color:var(--text);background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'Satoshi',sans-serif}
.faq-q::after{content:'+';font-size:22px;color:var(--neon-deep);font-weight:400;transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.open .faq-a{max-height:320px}
.faq-a p{font-size:14px;color:var(--text-secondary);line-height:1.7;padding-bottom:16px}

/* Mobile sticky CTA bar */
.mobile-cta-bar{display:none}
@media(max-width:768px){
  .mobile-cta-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:var(--z-cta);background:#fff;border-top:1px solid var(--border);padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px;box-shadow:0 -4px 20px rgba(0,0,0,0.06)}
  .mobile-cta-btn{flex:1;background:#25d366;color:#fff;padding:12px 16px;border-radius:8px;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Satoshi',sans-serif;min-height:44px}
  .mobile-cta-call{background:var(--bg-alt);color:var(--text);padding:12px 16px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:6px;font-family:'Satoshi',sans-serif;min-height:44px}
  /* FABs sit ABOVE the sticky CTA bar (bar ~60px + 12px gap + safe area) */
  .fab{bottom:calc(72px + env(safe-area-inset-bottom)) !important}
  /* back-to-top sits 12px above the WhatsApp FAB (fab top = 72+54) */
  .to-top{bottom:calc(138px + env(safe-area-inset-bottom))}
  .happybag-fab{bottom:calc(72px + env(safe-area-inset-bottom)) !important;left:16px}
  .hbfab-trigger{width:54px;height:54px}
  .hbfab-mascot{width:54px;height:54px}
  .hbfab-card{width:280px;bottom:64px}
  .footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ---- v18 mobile polish: type scale + spacing + table scroll ---- */
@media(max-width:768px){
  .hero h1{font-size:clamp(30px,8vw,48px)}
  .section-head h2,.split .col-text h2,.offer h2,.final-card h2,.svc-hero h1,.page-hero h1,.lifestyle-content h2,.dhobi-section h2,.hb-copy h2{font-size:clamp(24px,6vw,32px)}
  .flip-container{max-width:100%}
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:400px){
  .container{padding:0 20px}
  /* keep the full-bleed process carousel aligned to the narrower container padding (was -24px → 4px overflow) */
  .sc-carousel{margin:0 -20px;padding:4px 20px 8px}
}