/* ════════════════════════════════════════════════════════════════════
   WEBILAA.LK — LIQUID GLASS THEME
   Single external stylesheet for the whole homepage (header, hero, brands,
   modules showcase, features, how-it-works, benefits, stats, pricing, faq,
   cta, footer). Same content/structure as webilaa.com — Apple-style liquid
   glass skin: translucent frosted panels with backdrop blur, specular top
   highlights and soft refraction shadows, floating over a colorful mesh
   backdrop, instead of flat borders or neomorphic dual-shadows.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
    /* brand colors — unchanged from webilaa.com */
    --ink:        #0a1a0f;
    --forest:     #064e3b;
    --emerald:    #059669;
    --lime:       #16a34a;
    --glow:       #22c55e;
    --light-glow: #4ade80;
    --gold:       #d97706;
    --gold-lt:    #f59e0b;
    --cream:      #f0fdf4;
    --mist:       #f8fffe;
    --white:      #ffffff;
    --gray-1:     #f8fafc;
    --gray-2:     #e2e8f0;
    --gray-4:     #94a3b8;
    --gray-5:     #64748b;
    --gray-8:     #1e293b;
    --font-display: 'Sora', sans-serif;
    --font-body:    'DM Sans', sans-serif;
    --radius-sm: 12px; --radius-md: 20px; --radius-lg: 30px; --radius-xl: 42px;
    --transition:  0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── liquid glass surfaces ───────────────────────────────────────
       Every "raised"/"inset" token below is now a translucent glass
       fill + a soft ambient drop-shadow + an inset specular highlight
       along the top edge (the "light catching the rim of the glass"
       look) instead of a solid neomorphic base color. --glass-blur is
       applied as backdrop-filter on the same elements (see block 1b). */
    --glass-blur: blur(22px) saturate(1.7);
    --glass-surface-light:    rgba(255,255,255,.55);
    --glass-surface-light-2:  rgba(255,255,255,.68);
    --glass-ambient-d:  rgba(6, 78, 59, .16);
    --glass-ambient-l:  rgba(255, 255, 255, .8);
    --glass-shadow-light:     0 10px 30px rgba(6,78,59,.14), inset 0 1px 0 var(--glass-ambient-l), inset 0 0 0 1px rgba(255,255,255,.5);
    --glass-shadow-light-sm:  0 6px 16px rgba(6,78,59,.12), inset 0 1px 0 var(--glass-ambient-l), inset 0 0 0 1px rgba(255,255,255,.5);
    --glass-shadow-light-lg:  0 20px 46px rgba(6,78,59,.18), inset 0 1px 0 var(--glass-ambient-l), inset 0 0 0 1px rgba(255,255,255,.55);
    --glass-inset-light:      inset 0 2px 10px rgba(6,78,59,.14), inset 0 1px 0 rgba(255,255,255,.4);
    --glass-inset-light-sm:   inset 0 1px 6px rgba(6,78,59,.12), inset 0 1px 0 rgba(255,255,255,.4);
    --glass-shadow-flat:      0 3px 10px rgba(6,78,59,.10), inset 0 1px 0 var(--glass-ambient-l);

    /* Dark glass — every dark section (features, benefits, stats, cta,
       footer, brands ticker, panel) uses a translucent near-black fill so
       the colorful mesh + light-section glass behind it still shows through
       the blur, giving dark cards a tinted, layered depth. */
    --glass-surface-dark:      rgba(8, 22, 15, .58);
    --glass-surface-dark-2:    rgba(8, 22, 15, .72);
    --glass-ambient-dark-d: rgba(0, 0, 0, .5);
    --glass-ambient-dark-l: rgba(255, 255, 255, .07);
    --glass-shadow-dark:    0 10px 30px rgba(0,0,0,.4), inset 0 1px 0 var(--glass-ambient-dark-l), inset 0 0 0 1px rgba(255,255,255,.06);
    --glass-shadow-dark-lg: 0 22px 48px rgba(0,0,0,.5), inset 0 1px 0 var(--glass-ambient-dark-l), inset 0 0 0 1px rgba(255,255,255,.08);
    --glass-inset-dark:  inset 0 2px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);

    /* Colored (green) glass — primary buttons / active states, a glossy
       tinted-glass pill with a bright top sheen. */
    --glass-shadow-green:  0 10px 26px rgba(6,78,59,.45), inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(134,239,172,.4);
    --glass-inset-green:  inset 0 2px 8px rgba(4,50,38,.6), inset 0 1px 0 rgba(134,239,172,.3);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body); color: var(--gray-8); overflow-x: hidden; -webkit-font-smoothing: antialiased;
    background: #eaf5ef;
    position: relative;
}
/* ── 1a. Fixed colorful mesh backdrop ─────────────────────────────
   Liquid glass needs something varied behind it to refract — a flat
   background would make every blurred panel look like plain grey glass.
   This sits fixed behind the whole page so every glass surface (light
   or dark section) blurs a slice of the same colorful field. */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(circle at 12% 8%,  rgba(74,222,128,.40) 0%, transparent 38%),
        radial-gradient(circle at 88% 15%, rgba(217,119,6,.28)  0%, transparent 36%),
        radial-gradient(circle at 75% 78%, rgba(6,78,59,.35)    0%, transparent 42%),
        radial-gradient(circle at 15% 85%, rgba(96,165,250,.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 45%, rgba(252,211,77,.20) 0%, transparent 45%),
        linear-gradient(180deg, #eafaf1 0%, #dff3e8 45%, #e9f7ef 100%);
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); }

/* ── 1b. Backdrop-filter application ──────────────────────────────
   var() cannot inject a whole declaration, so every class that uses
   one of the translucent surface tokens above as its background also
   needs backdrop-filter set directly — consolidated here in one block
   rather than repeated on every rule below. */
.wb-nav-inner, .wb-nav-login, .wb-nav-register, .wb-nav-dashboard, .wb-hamburger, .wb-mobile-menu,
.wb-mobile-close, .wb-pill, .wb-btn-primary, .wb-btn-ghost,
.float-chip, .float-icon, .hero-eyebrow, .hero-impact,
.msh-ftab, .msh-card, .msh-panel, .msh-wa-box, .msh-bottom,
.bento-card, .bento-icon, .feature-tag, .flow-step-icon, .lang-badge-item, .pay-icon, .uptime-month,
.hiw-card, .hiw-icon-wrap, .hiw-mini-pill, .hiw-promo-strip,
.comparison-card, .wa-stat, .benefit-pill,
.stat-card-item, .stat-icon-wrap, .brands-section, .ticker-item,
.pc-pro, .pc-agency, .pc-badge, .pc-yearly-note, .pc-features li .ck, .pc-api-box, .pc-api-tag, .pc-btn-pro, .pc-btn-agency,
.billing-toggle, .toggle-btn.active,
.faq-item, .faq-icon, .faq-contact-strip,
.custom-card, .custom-form-wrap, .custom-field, .custom-submit,
.cta-pill, .cta-logo-item,
.wb-footer-wa-badge, .wb-footer-social, .footer-newsletter, .footer-newsletter input, .footer-newsletter button,
.poweredly-inner, .wa-float-btn, .wa-float-tooltip, .svc-dot, .phone-outer {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* ── shared pill / button / display utilities ────────────────────── */
.wb-pill {
    display:inline-flex; align-items:center; gap:7px;
    background: var(--glass-surface-light); box-shadow: var(--glass-inset-light-sm); border: none;
    color:var(--forest); font-family:var(--font-display);
    font-size:.72rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; padding:8px 18px; border-radius:100px; margin-bottom:20px;
}
.wb-display { font-family:var(--font-display); font-weight:800; line-height:1.06; letter-spacing:-.03em; }
.wb-display .accent { color:var(--lime); }
.wb-display .gold   { color:var(--gold); }

.wb-btn-primary {
    display:inline-flex; align-items:center; gap:10px;
    background: linear-gradient(145deg, #17b84c, var(--lime)); color:#fff;
    font-family:var(--font-display); font-weight:700; font-size:.92rem;
    padding:15px 30px; border-radius:100px; border:none; text-decoration:none;
    transition:var(--transition); box-shadow: var(--glass-shadow-green);
}
.wb-btn-primary:hover { transform:translateY(-2px); box-shadow: 0 14px 30px rgba(6,78,59,.4), inset 0 1px 0 rgba(255,255,255,.55); }
.wb-btn-primary:active { transform:translateY(0); box-shadow: var(--glass-inset-green); }
.wb-btn-ghost {
    display:inline-flex; align-items:center; gap:10px;
    background: var(--glass-surface-light); color:var(--gray-8);
    font-family:var(--font-display); font-weight:600; font-size:.92rem;
    padding:14px 28px; border-radius:100px;
    border:none; text-decoration:none; transition:var(--transition);
    box-shadow: var(--glass-shadow-light-sm);
}
.wb-btn-ghost:hover { color:var(--lime); box-shadow: var(--glass-shadow-light); transform:translateY(-1px); }
.wb-btn-ghost:active { box-shadow: var(--glass-inset-light-sm); transform:translateY(0); }

/* ── 2. NAV / HEADER ──────────────────────────────────────────────── */
.wb-nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:0 24px; }
.wb-nav-inner {
    max-width:1180px; margin:0 auto; margin-top:14px; padding:14px 28px;
    display:flex; align-items:center; justify-content:space-between;
    background: var(--glass-surface-light);
    border: none; border-radius:100px;
    box-shadow: var(--glass-shadow-light);
    transition:var(--transition);
}
.wb-nav.scrolled .wb-nav-inner { margin-top:8px; padding:11px 24px; box-shadow: var(--glass-shadow-light-lg); }
.wb-nav-logo { height:30px; object-fit:contain; }
.wb-nav-links { display:flex; align-items:center; gap:2px; }
.wb-nav-links a { font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--gray-5); text-decoration:none; padding:8px 15px; border-radius:100px; transition:var(--transition); }
.wb-nav-links a:hover { color:var(--forest); box-shadow: var(--glass-inset-light-sm); }
.wb-nav-cta { display:flex; align-items:center; gap:10px; }
.wb-nav-login { font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--gray-5); text-decoration:none; padding:9px 19px; border-radius:100px; transition:var(--transition); border:none; box-shadow: var(--glass-shadow-light-sm); }
.wb-nav-login:hover { color:var(--forest); box-shadow: var(--glass-inset-light-sm); }
.wb-nav-register { font-family:var(--font-display); font-weight:700; font-size:.85rem; background:linear-gradient(145deg,#17b84c,var(--lime)); color:#fff; text-decoration:none; padding:10px 23px; border-radius:100px; transition:var(--transition); box-shadow: var(--glass-shadow-green); border:none; }
.wb-nav-register:hover { transform:translateY(-1px); color:#fff; }
.wb-nav-dashboard { font-family:var(--font-display); font-weight:700; font-size:.85rem; background:var(--forest); color:#fff; text-decoration:none; padding:10px 23px; border-radius:100px; transition:var(--transition); display:inline-flex; align-items:center; gap:8px; box-shadow: 0 8px 22px rgba(6,78,59,.4), inset 0 1px 0 rgba(255,255,255,.3); border:none; }
.wb-nav-dashboard:hover { color:#fff; transform:translateY(-1px); }
.wb-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:10px; border-radius:12px; background:var(--glass-surface-light); box-shadow: var(--glass-shadow-light-sm); }
.wb-hamburger span { display:block; width:22px; height:2px; background:var(--gray-8); border-radius:2px; transition:var(--transition); }
.wb-mobile-menu { display:none; position:fixed; inset:0; background: var(--glass-surface-light); z-index:999; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.wb-mobile-menu.open { display:flex; }
.wb-mobile-menu a { font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--gray-8); text-decoration:none; padding:10px 0; transition:color .2s; }
.wb-mobile-menu a:hover { color:var(--lime); }
.wb-mobile-close { position:absolute; top:24px; right:28px; background:var(--glass-surface-light); box-shadow: var(--glass-shadow-light-sm); border:none; border-radius:50%; width:44px; height:44px; color:var(--gray-8); font-size:1.2rem; cursor:pointer; }
@media(max-width:900px){ .wb-nav-links,.wb-nav-cta{display:none;} .wb-hamburger{display:flex;} }

/* ── 3. HERO ──────────────────────────────────────────────────────── */
.hero-section {
    background: var(--glass-surface-light);
    min-height: 100vh;
    display: flex; align-items: center;
    padding: 130px 0 80px;
    position: relative; overflow: hidden;
}
.hero-section::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(22,163,74,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,163,74,.035) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}
.hero-blob-1 { position: absolute; width: 700px; height: 700px; background: radial-gradient(circle, rgba(22,163,74,.12) 0%, transparent 70%); top: -200px; left: -200px; pointer-events: none; }
.hero-blob-2 { position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(6,78,59,.08) 0%, transparent 70%); bottom: -150px; right: 10%; pointer-events: none; }
.hero-blob-3 { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(217,119,6,.06) 0%, transparent 70%); top: 30%; left: 40%; pointer-events: none; }

.float-chip {
    position: absolute; display: flex; align-items: center; gap: 8px;
    background: var(--glass-surface-light); border: none; border-radius: 100px; padding: 11px 19px;
    font-family: var(--font-display); font-size: .75rem; font-weight: 700; color: var(--gray-8);
    box-shadow: var(--glass-shadow-light-sm);
    pointer-events: none; z-index: 2;
}
.float-chip i { color: var(--lime); }
.float-chip .dot { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(22,163,74,.2); animation:pulse-dot 2s ease infinite; }
.float-icon {
    position: absolute; width: 54px; height: 54px;
    background: var(--glass-surface-light); border: none; border-radius: 18px;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    box-shadow: var(--glass-shadow-light-sm);
    pointer-events: none; z-index: 2;
}

@keyframes float-a { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-14px) rotate(2deg)} }
@keyframes float-b { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-10px) rotate(-3deg)} }
@keyframes float-c { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes float-d { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-8px) rotate(4deg)} }
@keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:.7} }
@keyframes badge-pop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes bar-shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.chip-orders     { top:18%; left:2%;  animation:float-a 4s ease-in-out infinite; }
.chip-open-rate  { top:35%; left:1%;  animation:float-b 5s ease-in-out infinite 0.5s; }
.chip-live       { bottom:28%; left:3%; animation:float-a 4.5s ease-in-out infinite 1s; }
.chip-lang       { top:15%; right:3%; animation:float-b 3.8s ease-in-out infinite 0.3s; }
.chip-orders-cnt { bottom:22%; right:2%; animation:float-c 4.2s ease-in-out infinite 0.7s; }
.icon-whatsapp { top:10%; left:12%; animation:float-a 5s ease-in-out infinite 0.2s; }
.icon-cart     { top:8%;  right:28%; animation:float-b 4.5s ease-in-out infinite 0.8s; }
.icon-globe    { bottom:20%; left:14%; animation:float-c 5.5s ease-in-out infinite 0.4s; }
.icon-star     { bottom:15%; right:30%; animation:float-d 4s ease-in-out infinite 1.2s; }
.icon-bolt     { top:55%; left:6%; animation:float-b 3.6s ease-in-out infinite 0.6s; }
.icon-check    { top:20%; right:18%; animation:float-a 4.8s ease-in-out infinite 0.9s; }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--glass-surface-light); box-shadow: var(--glass-inset-light-sm); border: none;
    border-radius: 100px; padding: 8px 19px;
    font-family: var(--font-display); font-size: .75rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--forest);
    margin-bottom: 22px;
}
.hero-eyebrow .live-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; animation:pulse-dot 2s ease infinite; }
.hero-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 5.5vw, 4.2rem); line-height: 1.04; letter-spacing: -.04em; color: var(--ink); margin-bottom: 22px; }
.hero-title .accent { color: var(--lime); }
.hero-title .underline-green { position: relative; display: inline-block; }
.hero-title .underline-green::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--lime), rgba(22,163,74,.3)); border-radius: 4px; }
.hero-desc { font-size: 1rem; color: var(--gray-5); line-height: 1.75; max-width: 490px; margin-bottom: 30px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.hero-trial-badge {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
    background: rgba(217,119,6,.14); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px; padding: 8px 18px 8px 8px;
    box-shadow: 0 6px 18px rgba(217,119,6,.14), inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(217,119,6,.22);
}
.hero-trial-badge .icon-wrap { width: 26px; height: 26px; border-radius: 50%; background: var(--gold-lt); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .68rem; flex-shrink: 0; animation: giftBounce 2.4s ease-in-out infinite; }
@keyframes giftBounce { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-3px) rotate(-8deg)} }
.hero-trial-badge span { font-family: var(--font-display); font-size: .78rem; font-weight: 700; color: var(--gold); }
.hero-trial-badge span b { color: var(--forest); }

.hero-steps { display: flex; align-items: flex-start; gap: 0; margin-top: 34px; padding-top: 28px; border-top: 1px dashed rgba(22,163,74,.22); max-width: 520px; }
.hero-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; position: relative; }
.hero-step-num {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.6); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    color: var(--forest); font-family: var(--font-display); font-weight: 800; font-size: .8rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(6,78,59,.12), inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(22,163,74,.25);
    transition: transform .3s ease, background .3s ease, color .3s ease;
}
.hero-step:hover .hero-step-num { background: var(--lime); color: #fff; transform: scale(1.12); }
.hero-step-lbl { font-size: .68rem; font-weight: 700; color: var(--gray-5); line-height: 1.35; max-width: 84px; }
.hero-step-link { flex: 0 0 auto; align-self: center; margin-top: 17px; color: rgba(22,163,74,.35); font-size: .7rem; }
@media(max-width:480px) { .hero-step-lbl { font-size: .62rem; max-width: 68px; } .hero-step-num { width:28px; height:28px; font-size:.72rem; } }

.hero-trust-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 72px; }
.hero-trust-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--glass-surface-light-2); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px; padding: 8px 16px;
    font-family: var(--font-display); font-size: .72rem; font-weight: 700;
    color: var(--gray-8); box-shadow: var(--glass-shadow-light-sm);
}
.hero-trust-chip i { color: var(--lime); font-size: .72rem; }

.hero-impact {
    display: flex; align-items: center; gap: 20px; margin-top: 36px;
    background: var(--glass-surface-light); padding: 20px 26px; border-radius: 20px;
    border: none; box-shadow: var(--glass-shadow-light);
    max-width: 500px; position: relative; z-index: 3;
}
.impact-box { flex: 1; }
.impact-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; color: var(--gray-5); margin-bottom: 8px; letter-spacing: 0.06em; }
.impact-title.green { color: var(--forest); }
.impact-bar-wrap { height: 8px; background: transparent; box-shadow: var(--glass-inset-light-sm); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.impact-bar.before { width: 25%; height: 100%; background: #b6c4bd; border-radius: 4px; }
.impact-bar.after { width: 90%; height: 100%; background: linear-gradient(90deg,#17b84c,var(--lime)); border-radius: 4px; position: relative; overflow: hidden; }
.impact-bar.after::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: bar-shine 2s infinite; }
.impact-val { font-size: 0.85rem; font-weight: 800; color: var(--gray-8); }
.impact-val.green { color: var(--forest); }
.impact-divider { width: 1px; height: 40px; background: rgba(163,190,178,.4); }

/* iPhone mockup — kept photographic/glossy on purpose (a real phone frame
   isn't a "surface" to neumorphize), just softened to sit naturally in the
   new soft-UI scene via a neomorphic ambient shadow instead of a hard one. */
.phone-outer {
    width: 300px; height: 620px; background: #1c1c1e; border-radius: 48px; padding: 14px;
    box-shadow: 16px 16px 36px var(--glass-ambient-d), -16px -16px 36px var(--glass-ambient-l), 0 0 0 1.5px rgba(255,255,255,.15) inset, 0 0 0 6px rgba(255,255,255,.06) inset;
    position: relative; margin: 0 auto; flex-shrink: 0;
}
.phone-notch { width: 120px; height: 30px; background: #1c1c1e; border-radius: 0 0 22px 22px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; justify-content: center; gap: 6px; }
.phone-notch-cam { width:10px; height:10px; border-radius:50%; background:#2c2c2e; }
.phone-notch-speaker { width:40px; height:4px; border-radius:2px; background:#2c2c2e; }
.phone-screen { width: 100%; height: 100%; background: #e5ddd5; border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' fill='%23e5ddd5'/%3E%3C/svg%3E"); }
.wa-header { background: #075e54; padding: 10px 14px 10px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wa-status-bar { background: #075e54; padding: 6px 14px; display: flex; justify-content: space-between; font-size: .6rem; color: rgba(255,255,255,.8); flex-shrink: 0; }
.wa-avatar { width:36px; height:36px; border-radius:50%; background:#128c7e; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.wa-name { font-weight:700; font-size:.82rem; color:white; }
.wa-online { font-size:.65rem; color:rgba(255,255,255,.6); }
.wa-chat { flex:1; overflow:hidden; padding:10px 8px; display:flex; flex-direction:column; gap:6px; position:relative; }
.wa-chat::before { content:''; position:absolute; inset:0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ctext y='50' font-size='40' fill='rgba(0,0,0,.03)'%3E💬%3C/text%3E%3C/svg%3E"); pointer-events:none; }
.wa-msg { max-width: 82%; border-radius: 8px; padding: 6px 8px; font-size: .62rem; line-height: 1.45; position: relative; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; word-break: break-word; }
.wa-msg.visible { opacity:1; transform:translateY(0); }
.wa-msg.bot { background: white; align-self: flex-start; border-top-left-radius: 0; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.wa-msg.user { background: #dcf8c6; align-self: flex-end; border-top-right-radius: 0; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.wa-msg .ts { font-size:.55rem; color:rgba(0,0,0,.35); float:right; margin-left:8px; margin-top:2px; }
.wa-msg.user .ts { color:rgba(0,128,0,.5); }
.wa-typing { display: none; align-self: flex-start; background: white; border-radius: 8px; border-top-left-radius: 0; padding: 8px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.wa-typing.visible { display:flex; align-items:center; gap:4px; }
.wa-typing span { width:7px; height:7px; border-radius:50%; background:#999; animation:typing-dot 1.2s ease infinite; }
.wa-typing span:nth-child(2) { animation-delay:.2s; }
.wa-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes typing-dot { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }
.wa-service-label { text-align:center; font-size:.55rem; color:rgba(0,0,0,.4); background:rgba(0,0,0,.05); border-radius:100px; padding:3px 10px; margin:0 auto; font-weight:600; letter-spacing:.05em; display:none; }
.wa-service-label.visible { display:block; }

.phone-wrap { position: relative; display: flex; justify-content: center; }
.phone-glow { position: absolute; width: 350px; height: 350px; background: radial-gradient(circle, rgba(22,163,74,.18) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; animation: glow-pulse 3s ease-in-out infinite; }
@keyframes glow-pulse { 0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)} }
.service-indicator { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.svc-dot { width: 8px; height: 8px; border-radius:50%; background: var(--gray-2); box-shadow: var(--glass-inset-light-sm); transition: all .4s ease; }
.svc-dot.active { background: var(--lime); box-shadow:none; transform:scale(1.3); }

@media(max-width:768px) {
    .hero-section { padding: 120px 0 60px; }
    .phone-outer { width:260px; height:540px; }
    .float-chip, .float-icon { display:none; }
    .hero-impact { flex-direction: column; align-items: stretch; gap: 12px; }
    .impact-divider { width: 100%; height: 1px; }
    .hero-trust-row { margin-top: 56px; gap: 8px; }
    .hero-trust-chip { font-size: .68rem; padding: 7px 13px; }
}

/* ── 4. BRANDS TICKER (dark) ─────────────────────────────────────── */
.brands-section { background: var(--glass-surface-dark); border-top:none; border-bottom:none; box-shadow: inset 0 10px 24px rgba(0,0,0,.4), inset 0 -10px 24px rgba(0,0,0,.4); padding: 28px 0; overflow: hidden; }
.brands-label { text-align: center; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.22); margin-bottom: 22px; }
.ticker-wrap { position: relative; overflow: hidden; }
.ticker-wrap::before, .ticker-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none; }
.ticker-wrap::before { left: 0; background: linear-gradient(to right, var(--glass-surface-dark), transparent); }
.ticker-wrap::after { right: 0; background: linear-gradient(to left, var(--glass-surface-dark), transparent); }
.ticker-track { display: flex; align-items: center; gap: 0; animation: ticker 30s linear infinite; width: max-content; }
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item { display: flex; align-items: center; gap: 10px; padding: 0 36px; font-family: var(--font-display); font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.35); white-space: nowrap; transition: color .2s; border-right: 1px solid rgba(255,255,255,.06); }
.ticker-item i { font-size: 1rem; color: rgba(74,222,128,.4); }

/* ── 5. MODULES SHOWCASE ──────────────────────────────────────────── */
.msh-section { background: var(--glass-surface-light); padding: 110px 0 120px; position: relative; overflow: hidden; }
.msh-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(22,163,74,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(22,163,74,.025) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; }
.msh-blob-1 { position:absolute;width:700px;height:700px;background:radial-gradient(circle,rgba(22,163,74,.07) 0%,transparent 70%);top:-200px;left:-200px;pointer-events:none; }
.msh-blob-2 { position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(6,78,59,.05) 0%,transparent 70%);bottom:-150px;right:-150px;pointer-events:none; }

.msh-filters { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 48px; }
.msh-ftab { display: inline-flex; align-items: center; gap: 7px; border: none; border-radius: 100px; padding: 10px 21px; font-family: var(--font-display); font-size: .78rem; font-weight: 700; color: var(--gray-5); background: var(--glass-surface-light); box-shadow: var(--glass-shadow-light-sm); cursor: pointer; transition: var(--transition); outline: none; }
.msh-ftab:hover { color: var(--forest); }
.msh-ftab.on { color: var(--forest); box-shadow: var(--glass-inset-light-sm); }

.msh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 0; }
@media(max-width:1100px) { .msh-grid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:767px)  { .msh-grid { grid-template-columns: repeat(2,1fr); gap:14px; } }
@media(max-width:420px)  { .msh-grid { grid-template-columns: 1fr; } }

.msh-card {
    background: var(--glass-surface-light); border: none; border-radius: 24px; padding: 26px 22px 22px;
    position: relative; overflow: hidden; cursor: pointer;
    box-shadow: var(--glass-shadow-light-sm);
    transition: all .32s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; min-height: 268px; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.msh-card::before { content: ''; position: absolute; inset: 0; border-radius: 24px; opacity: 0; transition: opacity .32s; pointer-events: none; background: radial-gradient(circle at top left, var(--c-a) 0%, var(--c-b) 55%, transparent 80%); }
.msh-card:hover, .msh-card.sel { transform: translateY(-3px); box-shadow: var(--glass-shadow-light); }
.msh-card:hover::before, .msh-card.sel::before { opacity: .5; }

.msh-card-icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; margin-bottom: 16px; background: var(--c-a); box-shadow: var(--glass-shadow-light-sm); transition: transform .32s; position: relative; z-index: 1; flex-shrink: 0; }
.msh-card:hover .msh-card-icon, .msh-card.sel .msh-card-icon { transform: scale(1.08) rotate(-4deg); }
.msh-card-name { font-family: var(--font-display); font-weight: 800; font-size: .98rem; color: var(--ink); margin-bottom: 7px; line-height: 1.25; position: relative; z-index: 1; }
.msh-card-desc { font-size: .78rem; color: var(--gray-5); line-height: 1.6; margin-bottom: 14px; position: relative; z-index: 1; flex: 1; }
.msh-tags { display: flex; flex-wrap: wrap; align-content: flex-end; gap: 6px; position: relative; z-index: 1; margin-top: auto; }
.msh-tag { display: inline-flex; align-items: center; gap: 3px; background: var(--glass-surface-light); border: none; box-shadow: var(--glass-inset-light-sm); border-radius: 100px; padding: 4px 10px; font-size: .65rem; font-weight: 700; color: var(--gray-5); transition: var(--transition); }
.msh-card:hover .msh-tag, .msh-card.sel .msh-tag { color: var(--c-icon); }

.msh-panel { background: var(--glass-surface-dark); border-radius: 28px; overflow: hidden; margin-top: 20px; max-height: 0; opacity: 0; transform: translateY(16px); box-shadow: var(--glass-shadow-dark); transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .35s ease, transform .35s ease, margin .3s ease; pointer-events: none; }
.msh-panel.open { max-height: 600px; opacity: 1; transform: translateY(0); pointer-events: auto; }
.msh-panel-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px 44px; align-items: start; position: relative; overflow: hidden; }
@media(max-width:900px) { .msh-panel-inner { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; } }
.msh-panel-glow { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(74,222,128,.09) 0%, transparent 70%); top: -100px; right: -100px; pointer-events: none; }
.msh-panel-badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 100px; padding: 5px 15px; font-family: var(--font-display); font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 16px; }
.msh-panel-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem,3vw,2rem); color: white; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 12px; }
.msh-panel-desc { font-size: .87rem; color: rgba(255,255,255,.45); line-height: 1.78; margin-bottom: 22px; }
.msh-panel-feats { display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; }
.msh-pfeat { display: flex; align-items: flex-start; gap: 10px; font-size: .83rem; color: rgba(255,255,255,.65); line-height: 1.5; }
.msh-pfeat i { color: var(--light-glow); font-size: .65rem; margin-top: 4px; flex-shrink: 0; }
.msh-wa-box { background: var(--glass-surface-dark-2); border: none; box-shadow: var(--glass-inset-dark); border-radius: 20px; padding: 18px; position: relative; z-index: 1; }
.msh-wa-header { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 13px; }
.msh-wa-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.msh-wa-name   { font-family:var(--font-display); font-weight:700; font-size:.84rem; color:white; }
.msh-wa-online { font-size:.68rem; color:rgba(74,222,128,.8); font-weight:600; }
.msh-wa-msgs   { display:flex; flex-direction:column; gap:8px; }
.msh-wm { display: inline-block; border-radius: 12px; padding: 8px 11px; font-size: .73rem; line-height: 1.55; max-width: 88%; }
.msh-wm.bot  { background:rgba(255,255,255,.08); color:rgba(255,255,255,.78); align-self:flex-start; border-radius:4px 12px 12px 12px; }
.msh-wm.user { background:rgba(22,163,74,.25); color:rgba(255,255,255,.9); align-self:flex-end; text-align:right; border-radius:12px 4px 12px 12px; margin-left:auto; display:block; }
.msh-wm strong { color:white; }
.msh-wa-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; background: linear-gradient(145deg,#17b84c,var(--lime)); color: white; border-radius: 100px; padding: 11px 20px; font-family: var(--font-display); font-weight: 700; font-size: .8rem; text-decoration: none; transition: var(--transition); display: block; text-align: center; box-shadow: 0 8px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15); }
.msh-wa-cta:hover { transform: translateY(-1px); color: white; }

.msh-bottom {
    margin-top: 56px; border-radius: 26px; padding: 48px 40px; position: relative; overflow: hidden;
    text-align: center; display: flex; flex-direction: column; align-items: center;
    background: linear-gradient(160deg, rgba(6,78,59,.55) 0%, rgba(13,122,90,.5) 55%, rgba(5,150,105,.5) 100%);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow-dark-lg);
}
.msh-bottom::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 90% at 15% 20%, rgba(74,222,128,.20) 0%, transparent 60%), radial-gradient(ellipse 45% 70% at 85% 80%, rgba(245,158,11,.10) 0%, transparent 55%); pointer-events: none; }
.msh-bottom-icon { width: 58px; height: 58px; border-radius: 18px; background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--light-glow); margin-bottom: 18px; position: relative; z-index: 1; }
.msh-bottom-text { position: relative; z-index: 1; max-width: 560px; }
.msh-bottom-text h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: #fff; margin-bottom: 10px; letter-spacing: -.02em; }
.msh-bottom-text p { font-size: .92rem; color: rgba(255,255,255,.7); line-height: 1.7; margin: 0; }
.msh-bottom-text p strong { color: #fff; font-weight: 700; }
.msh-bottom-btns { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; margin-top: 28px; position: relative; z-index: 1; }
.msh-bottom-btns .wb-btn-primary { background: rgba(255,255,255,.92); color: var(--forest); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.msh-bottom-btns .wb-btn-ghost { color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
@media(max-width:767px) { .msh-bottom { padding: 36px 24px; } }

/* ── 6. FEATURES (dark bento) ─────────────────────────────────────── */
.features-section { background: var(--glass-surface-dark); padding: 110px 0; }
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 20px; }
@media (max-width: 992px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .bento-grid { grid-template-columns: 1fr; } }
.bento-card { background: var(--glass-surface-dark-2); border: none; border-radius: 26px; padding: 32px; position: relative; overflow: hidden; box-shadow: var(--glass-shadow-dark); transition: var(--transition); }
.bento-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(34,197,94,.06) 0%, transparent 60%); pointer-events: none; transition: opacity .3s; opacity: 0; }
.bento-card:hover { transform: translateY(-3px); }
.bento-card:hover::before { opacity: 1; }
.bento-wide { grid-column: span 2; }
.bento-tall { grid-row: span 2; }
@media (max-width: 992px) { .bento-wide { grid-column: span 1; } .bento-tall { grid-row: span 1; } }
.bento-icon { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 20px; box-shadow: var(--glass-shadow-dark); }
.bento-icon.green  { color: var(--lime); }
.bento-icon.gold   { color: var(--gold-lt); }
.bento-icon.blue   { color: #60a5fa; }
.bento-icon.purple { color: #a78bfa; }
.bento-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.bento-card p { font-size: .875rem; color: rgba(255,255,255,.45); line-height: 1.65; margin: 0; }
.mini-stat { display: flex; align-items: baseline; gap: 6px; margin-top: 24px; }
.mini-stat .num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--lime); }
.mini-stat .label { font-size: .78rem; color: rgba(255,255,255,.35); font-weight: 500; }
.feature-tag { display: inline-block; background: var(--glass-surface-dark); box-shadow: var(--glass-inset-dark); color: var(--lime); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; margin-bottom: 14px; }
.flow-graphic { display: flex; align-items: center; gap: 0; margin-top: 24px; overflow: hidden; }
.flow-step { flex: 1; text-align: center; position: relative; }
.flow-step-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--glass-surface-dark); box-shadow: var(--glass-shadow-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-size: .9rem; color: var(--lime); }
.flow-step-label { font-size: .65rem; color: rgba(255,255,255,.35); font-weight: 600; }
.flow-arrow { color: rgba(74,222,128,.25); font-size: .9rem; flex-shrink: 0; }
.lang-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.lang-badge-item { background: var(--glass-surface-dark); box-shadow: var(--glass-inset-dark); border-radius: 9px; padding: 6px 13px; font-size: .75rem; color: rgba(255,255,255,.55); font-weight: 500; }
.pay-icons { display: flex; gap: 10px; margin-top: 20px; }
.pay-icon { background: var(--glass-surface-dark); box-shadow: var(--glass-inset-dark); border-radius: 12px; padding: 9px 15px; font-size: .78rem; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 6px; }
.uptime-bar-wrap { margin-top: 20px; }
.uptime-months { display: flex; gap: 4px; }
.uptime-month { flex: 1; height: 28px; background: var(--glass-surface-dark); box-shadow: var(--glass-inset-dark); border-radius: 6px; position: relative; overflow: hidden; }
.uptime-month::after { content: ''; position: absolute; inset: 2px; background: var(--lime); border-radius: 4px; opacity:.85; }
.uptime-month.low::after { background: rgba(34,197,94,.35); }
.uptime-label { font-size: .7rem; color: rgba(255,255,255,.3); margin-top: 8px; display: flex; justify-content: space-between; }

/* ── 7. HOW IT WORKS ──────────────────────────────────────────────── */
.hiw-section { background: var(--glass-surface-light); padding:110px 0; }
.hiw-steps-row { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:start; gap:0; margin-top:60px; }
@media(max-width:1200px){ .hiw-steps-row { grid-template-columns:1fr 1fr; gap:22px; } .hiw-arrow-col { display:none; } }
@media(max-width:600px){ .hiw-steps-row { grid-template-columns:1fr; } }
.hiw-card { background: var(--glass-surface-light); border-radius:26px; padding:36px 28px 32px; position:relative; box-shadow: var(--glass-shadow-light-sm); border: none; overflow:hidden; transition:all .4s ease; cursor:default; }
.hiw-card:hover { transform:translateY(-6px); box-shadow: var(--glass-shadow-light); }
.hiw-bg-num { position:absolute; bottom:-15px; right:10px; font-family:var(--font-display); font-size:7rem; font-weight:800; color:var(--ink); opacity:.035; line-height:1; pointer-events:none; user-select:none; transition:opacity .4s; }
.hiw-card:hover .hiw-bg-num { opacity:.06; }
.hiw-icon-wrap { width:72px; height:72px; border-radius:22px; display:flex; align-items:center; justify-content:center; font-size:2rem; margin-bottom:24px; position:relative; box-shadow: var(--glass-shadow-light-sm); background: var(--glass-surface-light); transition:all .4s ease; }
.hiw-card:hover .hiw-icon-wrap { transform:scale(1.08) rotate(-3deg); }
.hiw-step-label { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px; }
.hiw-step-label.s1 { color:var(--emerald); }
.hiw-step-label.s2 { color:#a16207; }
.hiw-step-label.s3 { color:#1e40af; }
.hiw-step-label.s4 { color:#be185d; }
.hiw-card h4 { font-family:var(--font-display); font-weight:700; font-size:1.12rem; color:var(--ink); margin-bottom:11px; }
.hiw-card p  { font-size:.87rem; color:var(--gray-5); line-height:1.72; margin:0; }
.hiw-mini-pill { display:inline-flex; align-items:center; gap:5px; background: var(--glass-surface-light); box-shadow: var(--glass-inset-light-sm); border-radius:100px; padding:6px 12px; font-size:.72rem; color:var(--gray-5); font-weight:600; margin-top:16px; }
.hiw-mini-pill i { font-size:.65rem; }
.hiw-arrow-col { display:flex; align-items:center; justify-content:center; padding:0 8px; padding-top:80px; }
.hiw-arrow { display:flex; flex-direction:column; align-items:center; gap:4px; }
.hiw-arrow-line { display:flex; align-items:center; gap:4px; }
.hiw-arrow-dot { width:6px; height:6px; border-radius:50%; background:rgba(6,78,59,.25); animation:arrowDot 1.5s ease-in-out infinite; }
.hiw-arrow-dot:nth-child(2){ animation-delay:.2s; }
.hiw-arrow-dot:nth-child(3){ animation-delay:.4s; }
.hiw-arrow-tip { color:rgba(6,78,59,.35); font-size:.8rem; margin-left:2px; }
@keyframes arrowDot { 0%,100%{opacity:.2;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }
.hiw-promo-strip { margin-top:56px; background: var(--glass-surface-dark); box-shadow: var(--glass-shadow-dark); border-radius:24px; padding:32px 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
@media(max-width:767px){ .hiw-promo-strip{grid-template-columns:1fr;gap:24px;padding:28px 24px;} }
.hiw-promo-item { text-align:center; padding:0 24px; border-right:1px solid rgba(255,255,255,.07); }
.hiw-promo-item:last-child { border-right:none; }
.hiw-promo-icon { font-size:1.6rem; margin-bottom:10px; display:block; }
.hiw-promo-item h6 { font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--white); margin-bottom:6px; }
.hiw-promo-item p  { font-size:.8rem; color:rgba(255,255,255,.38); margin:0; line-height:1.6; }

/* ── 8. BENEFITS (dark) ───────────────────────────────────────────── */
.benefits-section { background: var(--glass-surface-dark); padding: 110px 0; overflow: hidden; }
.comparison-card { border-radius: var(--radius-lg); padding: 36px; border: none; background: var(--glass-surface-dark-2); box-shadow: var(--glass-inset-dark); }
.comparison-bad  { box-shadow: var(--glass-inset-dark); }
.comparison-good { box-shadow: var(--glass-shadow-dark); }
.comparison-card h5 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.comparison-bad  h5 { color: #f87171; }
.comparison-good h5 { color: var(--lime); }
.comparison-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.comparison-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .87rem; color: rgba(255,255,255,.5); line-height: 1.5; }
.comparison-list li i { font-size: .75rem; margin-top: 3px; flex-shrink: 0; }
.comparison-bad  li i { color: #f87171; }
.comparison-good li i { color: var(--lime); }
.wa-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--glass-surface-dark-2); box-shadow: var(--glass-shadow-dark); border-radius: var(--radius-lg); padding: 40px 24px; text-align: center; }
.wa-stat .big { font-family: var(--font-display); font-weight: 800; font-size: 4rem; line-height: 1; color: var(--lime); letter-spacing: -.04em; }
.wa-stat .label { font-size: .85rem; color: rgba(255,255,255,.45); margin-top: 8px; }
.benefit-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--glass-surface-dark); box-shadow: var(--glass-inset-dark); border-radius: 100px; padding: 9px 17px; font-size: .8rem; color: rgba(255,255,255,.55); font-weight: 500; }
.benefit-pill i { color: var(--lime); font-size: .8rem; }

/* ── 9. STATS ─────────────────────────────────────────────────────── */
.stats-section { background: var(--glass-surface-light); padding: 0; border:none; position: relative; overflow: hidden; }
.stats-inner-wrap { background: var(--glass-surface-dark); padding: 70px 0; position: relative; clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); padding-bottom: 110px; overflow: hidden; }
.stats-inner-wrap::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 80% at 20% 50%, rgba(74,222,128,.12) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 80% 30%, rgba(245,158,11,.06) 0%, transparent 50%); pointer-events: none; }
.stats-inner-wrap::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.stat-card-item { text-align: center; padding: 30px 20px; border-radius: 22px; background: var(--glass-surface-dark-2); border: none; box-shadow: var(--glass-shadow-dark); transition: all .3s ease; position: relative; z-index: 2; overflow: hidden; }
.stat-card-item::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity .3s; }
.stat-card-item:hover { transform: translateY(-4px); }
.stat-card-item:hover::before { opacity: 1; }
.stat-card-item.c1::before { background: linear-gradient(90deg, #4ade80, #22c55e); }
.stat-card-item.c2::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.stat-card-item.c3::before { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
.stat-card-item.c4::before { background: linear-gradient(90deg, #c084fc, #a855f7); }
.stat-icon-wrap { width: 54px; height: 54px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.3rem; position: relative; background: var(--glass-surface-dark); box-shadow: var(--glass-shadow-dark); }
.stat-icon-wrap.g { color: #4ade80; }
.stat-icon-wrap.y { color: #fbbf24; }
.stat-icon-wrap.b { color: #60a5fa; }
.stat-icon-wrap.p { color: #c084fc; }
.stat-number { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.8rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--white); display: block; margin-bottom: 8px; }
.stat-number .hi { color: var(--light-glow); }
.stat-number.gold  .hi { color: #fbbf24; }
.stat-number.blue  .hi { color: #60a5fa; }
.stat-number.purp  .hi { color: #c084fc; }
.stat-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); display: block; margin-bottom: 6px; }
.stat-sub { font-size: .72rem; color: rgba(255,255,255,.25); }

/* ── 10. PRICING ──────────────────────────────────────────────────── */
.pricing-section { background: var(--glass-surface-light); padding: 110px 0; }
.pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:900px; margin:0 auto; }
@media(max-width:767px){ .pricing-grid{grid-template-columns:1fr;max-width:440px;} }
.pc-pro { background: var(--glass-surface-light); border-radius: 30px; padding: 44px 40px; position: relative; overflow: hidden; border: none; box-shadow: var(--glass-shadow-light); transition: all .4s ease; }
.pc-pro::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--lime),var(--emerald)); }
.pc-pro:hover { transform:translateY(-5px); box-shadow: var(--glass-shadow-light-lg); }
.pc-agency { background: var(--glass-surface-dark); border-radius: 30px; padding: 44px 40px; position: relative; overflow: hidden; border: none; box-shadow: var(--glass-shadow-dark); transition: all .4s ease; }
.pc-agency::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#f59e0b,#fcd34d); }
.pc-agency:hover { transform:translateY(-5px); box-shadow: var(--glass-shadow-dark-lg); }
.pc-agency-glow { position:absolute; width:300px; height:300px; background:radial-gradient(circle,rgba(74,222,128,.10) 0%,transparent 70%); top:-80px; right:-80px; pointer-events:none; }
.pc-badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:6px 15px; border-radius:100px; margin-bottom:20px; }
.pc-badge.pro    { color:var(--forest); background: var(--glass-surface-light); box-shadow: var(--glass-inset-light-sm); }
.pc-badge.agency { color:#f59e0b; background: var(--glass-surface-dark); box-shadow: var(--glass-inset-dark); }
.pc-name { font-family:var(--font-display); font-weight:800; font-size:1.3rem; margin-bottom:6px; }
.pc-pro .pc-name    { color:var(--ink); }
.pc-agency .pc-name { color:#fff; }
.pc-desc { font-size:.83rem; margin-bottom:24px; }
.pc-pro .pc-desc    { color:var(--gray-5); }
.pc-agency .pc-desc { color:rgba(255,255,255,.45); }
.pc-price-wrap { margin-bottom:28px; }
.pc-price { display:flex; align-items:baseline; gap:3px; }
.pc-currency { font-family:var(--font-display); font-size:1.3rem; font-weight:700; }
.pc-pro .pc-currency    { color:var(--gray-5); }
.pc-agency .pc-currency { color:rgba(255,255,255,.5); }
.pc-amount { font-family:var(--font-display); font-size:3.6rem; font-weight:800; line-height:1; letter-spacing:-.04em; }
.pc-pro .pc-amount    { color:var(--ink); }
.pc-agency .pc-amount { color:#fff; }
.pc-period { font-family:var(--font-display); font-size:.9rem; font-weight:600; margin-bottom:4px; }
.pc-pro .pc-period    { color:var(--gray-5); }
.pc-agency .pc-period { color:rgba(255,255,255,.4); }
.pc-yearly-note { display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:600; margin-top:8px; padding:6px 13px; border-radius:100px; }
.pc-pro .pc-yearly-note    { background: var(--glass-surface-light); box-shadow: var(--glass-inset-light-sm); color:var(--emerald); }
.pc-agency .pc-yearly-note { background: var(--glass-surface-dark); box-shadow: var(--glass-inset-dark); color:#f59e0b; }
.pc-features { list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:11px; }
.pc-features li { display:flex; align-items:flex-start; gap:10px; font-size:.86rem; line-height:1.5; }
.pc-features li .ck { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.6rem; flex-shrink:0; margin-top:1px; }
.pc-pro .pc-features li .ck    { color:var(--lime); background: var(--glass-surface-light); box-shadow: var(--glass-shadow-light-sm); }
.pc-agency .pc-features li .ck { color:#f59e0b; background: var(--glass-surface-dark); box-shadow: var(--glass-shadow-dark); }
.pc-pro .pc-features li span    { color:var(--gray-8); }
.pc-agency .pc-features li span { color:rgba(255,255,255,.75); }
.pc-api-box { background: var(--glass-surface-dark-2); box-shadow: var(--glass-inset-dark); border: none; border-radius: 16px; padding: 16px 18px; margin-bottom: 24px; position: relative; overflow: hidden; }
.pc-api-box-title { font-family:var(--font-display); font-weight:800; font-size:.85rem; color:#f59e0b; margin-bottom:6px; display:flex; align-items:center; gap:7px; }
.pc-api-box p { font-size:.78rem; color:rgba(255,255,255,.45); margin:0; line-height:1.55; }
.pc-api-tag { display:inline-flex; align-items:center; gap:5px; background: var(--glass-surface-dark); box-shadow: var(--glass-shadow-dark); border-radius:8px; padding:3px 9px; font-size:.7rem; font-weight:700; color:#fcd34d; margin-top:8px; }
.pc-btn-pro { display:block; width:100%; text-align:center; background: linear-gradient(145deg,#0a5c46,var(--forest)); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.95rem; padding:16px; border-radius:100px; text-decoration:none; transition:var(--transition); box-shadow: var(--glass-shadow-green); }
.pc-btn-pro:hover { color:#fff; transform:translateY(-2px); }
.pc-btn-agency { display:block; width:100%; text-align:center; background:linear-gradient(135deg,#f59e0b,#fcd34d); color:var(--ink); font-family:var(--font-display); font-weight:800; font-size:.95rem; padding:16px; border-radius:100px; text-decoration:none; transition:var(--transition); box-shadow: 0 10px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.pc-btn-agency:hover { transform:translateY(-2px); color:var(--ink); }
.pc-note { text-align:center; font-size:.75rem; margin-top:12px; }
.pc-pro .pc-note    { color:var(--gray-4); }
.pc-agency .pc-note { color:rgba(255,255,255,.3); }
.billing-toggle-wrap { text-align:center; margin-bottom:44px; }
.billing-toggle { display:inline-flex; background: var(--glass-surface-light); box-shadow: var(--glass-inset-light); border-radius:100px; padding:6px; border: none; }
.toggle-btn { border-radius:100px; padding:10px 25px; font-family:var(--font-display); font-weight:700; font-size:.83rem; color:var(--gray-5); cursor:pointer; border:none; background:transparent; transition:var(--transition); }
.toggle-btn.active { background: var(--glass-surface-light); color:var(--forest); box-shadow: var(--glass-shadow-light-sm); }
.toggle-badge { display:inline-block; background:#ef4444; color:white; font-size:.6rem; font-weight:800; padding:2px 8px; border-radius:6px; margin-left:5px; vertical-align:middle; }
.pricing-note { text-align:center; margin-top:36px; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.pricing-note span { font-size:.8rem; color:var(--gray-5); display:flex; align-items:center; gap:6px; }
.pricing-note span i { color:var(--emerald); }

/* ── 11. FAQ ──────────────────────────────────────────────────────── */
.faq-section { background: var(--glass-surface-light); padding: 110px 0; }
.faq-wrap { max-width: 740px; margin: 0 auto; }
.faq-item { background: var(--glass-surface-light); border-radius: 18px; box-shadow: var(--glass-shadow-light-sm); margin-bottom: 14px; padding: 0 22px; transition: box-shadow .3s ease; }
.faq-item.open { box-shadow: var(--glass-inset-light); }
.faq-question { display:flex; justify-content:space-between; align-items:center; padding:22px 0; cursor:pointer; gap:20px; user-select:none; }
.faq-question h5 { font-family:var(--font-display); font-weight:700; font-size:.97rem; color:var(--ink); margin:0; transition:color .2s; }
.faq-question:hover h5 { color:var(--emerald); }
.faq-icon { width:36px; height:36px; border-radius:50%; background: var(--glass-surface-light); box-shadow: var(--glass-shadow-light-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--transition); color:var(--gray-5); font-size:.8rem; border:none; }
.faq-item.open .faq-icon { color: var(--lime); transform:rotate(45deg); box-shadow: var(--glass-inset-light-sm); }
.faq-item.open .faq-question h5 { color:var(--emerald); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s ease; padding-bottom:0; }
.faq-item.open .faq-answer { max-height:300px; padding-bottom:24px; }
.faq-answer p { color:var(--gray-5); font-size:.9rem; line-height:1.75; margin:0; padding:0; }
.faq-contact-strip { margin-top: 56px; background: var(--glass-surface-light); border: none; box-shadow: var(--glass-shadow-light); border-radius: 24px; padding: 32px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.faq-contact-strip h5 { font-family:var(--font-display); font-weight:700; color:var(--ink); margin-bottom:4px; }
.faq-contact-strip p  { font-size:.85rem; color:var(--gray-5); margin:0; }
.faq-contact-email { display:flex; align-items:center; gap:8px; color:var(--forest); font-weight:600; text-decoration:none; font-size:.9rem; margin-top:10px; }
.faq-contact-email:hover { color:var(--lime); }

/* ── 12. CTA + CUSTOM FORM (dark) ─────────────────────────────────── */
.custom-section { background: var(--glass-surface-dark); padding:110px 0; position:relative; overflow:hidden; }
.custom-glow-1 { position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(34,197,94,.07) 0%,transparent 70%);top:-150px;left:-100px;pointer-events:none; }
.custom-glow-2 { position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(245,158,11,.05) 0%,transparent 70%);bottom:-100px;right:-80px;pointer-events:none; }
.custom-card { background: var(--glass-surface-dark-2); border:none; box-shadow: var(--glass-shadow-dark); border-radius:22px; padding:24px; transition:all .35s ease; height:100%; }
.custom-card:hover { transform:translateY(-4px); }
.custom-card-icon { font-size:1.8rem;margin-bottom:14px;display:block; }
.custom-card h6 { font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--white);margin-bottom:8px; }
.custom-card p  { font-size:.82rem;color:rgba(255,255,255,.4);line-height:1.65;margin:0; }
.custom-form-wrap { background: var(--glass-surface-dark-2); border:none; box-shadow: var(--glass-shadow-dark); border-radius:28px; padding:36px; margin-top:48px; }
.custom-form-wrap h5 { font-family:var(--font-display);font-weight:700;color:var(--white);margin-bottom:6px; }
.custom-form-wrap .sub { color:rgba(255,255,255,.4);font-size:.84rem;margin-bottom:24px; }
.custom-field { width:100%; background: var(--glass-surface-dark); box-shadow: var(--glass-inset-dark); border:none; border-radius:14px;padding:14px 17px;font-size:.85rem;color:white; font-family:var(--font-body);outline:none;transition:box-shadow .2s;resize:none; }
.custom-field::placeholder { color:rgba(255,255,255,.22); }
.custom-field:focus { box-shadow: inset 0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 2px rgba(74,222,128,.4); }
.custom-submit { background:linear-gradient(145deg,#17b84c,var(--lime)); color:#fff;font-family:var(--font-display);font-weight:700;font-size:.9rem; padding:15px 34px;border-radius:100px;border:none;cursor:pointer; transition:var(--transition); box-shadow: var(--glass-shadow-green); display:inline-flex;align-items:center;gap:8px; }
.custom-submit:hover { transform:translateY(-2px); }

.cta-section { background: var(--glass-surface-dark); padding:100px 0; position:relative; overflow:hidden; }
.cta-bg-1 { position:absolute;width:700px;height:700px;background:radial-gradient(circle,rgba(34,197,94,.1) 0%,transparent 70%);top:-200px;right:-200px; }
.cta-bg-2 { position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(245,158,11,.06) 0%,transparent 70%);bottom:-150px;left:-100px; }
.cta-pill { display:inline-flex;align-items:center;gap:8px; background: var(--glass-surface-dark); box-shadow: var(--glass-inset-dark); border-radius:100px;padding:9px 21px;font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);margin-bottom:24px; }
.cta-section h2 { font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:1.05;letter-spacing:-.03em;color:var(--white);margin-bottom:20px; }
.cta-section h2 .accent { color:var(--lime); }
.cta-section p { color:rgba(255,255,255,.45);font-size:1rem;max-width:520px;margin:0 auto 40px;line-height:1.7; }
.cta-logos { display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:50px; }
.cta-logo-item { display:flex;align-items:center;gap:8px; background: var(--glass-surface-dark-2); box-shadow: var(--glass-shadow-dark); border:none; border-radius:100px;padding:11px 21px;font-size:.85rem;color:rgba(255,255,255,.75);font-weight:700; transition:all 0.3s ease;cursor:pointer; }
.cta-logo-item:hover { transform:translateY(-3px); }

/* ── 13. FOOTER ───────────────────────────────────────────────────── */
.wb-footer { background: var(--glass-surface-dark); padding: 80px 0 0; position: relative; overflow: hidden; }
.wb-footer::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(74,222,128,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(74,222,128,.02) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; }
.footer-blob-1 { position:absolute; width:400px; height:400px; background:radial-gradient(circle,rgba(22,163,74,.07) 0%,transparent 70%); top:-100px; left:-100px; pointer-events:none; }
.footer-blob-2 { position:absolute; width:300px; height:300px; background:radial-gradient(circle,rgba(245,158,11,.05) 0%,transparent 70%); bottom:100px; right:-80px; pointer-events:none; }
.wb-footer-logo { height:32px; object-fit:contain; filter:brightness(0) invert(1); }
.wb-footer-tagline { color:rgba(255,255,255,.35); font-size:.83rem; line-height:1.7; margin-top:14px; max-width:260px; }
.wb-footer-wa-badge { display:inline-flex; align-items:center; gap:7px; background: var(--glass-surface-dark); box-shadow: var(--glass-inset-dark); border-radius:100px; padding:7px 17px; font-family:var(--font-display); font-size:.72rem; font-weight:700; color:#25d366; margin-top:18px; }
.wb-footer-socials { display:flex; gap:10px; margin-top:20px; }
.wb-footer-social { width:40px; height:40px; border-radius:14px; background: var(--glass-surface-dark-2); box-shadow: var(--glass-shadow-dark); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.45); font-size:.85rem; text-decoration:none; transition:var(--transition); }
.wb-footer-social:hover { color:var(--light-glow); transform:translateY(-2px); }
.wb-footer-col h6 { font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.32); margin-bottom:18px; }
.wb-footer-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.wb-footer-col ul li a { font-size:.85rem; color:rgba(255,255,255,.48); text-decoration:none; font-weight:500; transition:color .2s; display:flex; align-items:center; gap:6px; }
.wb-footer-col ul li a:hover { color:var(--light-glow); }
.wb-footer-col ul li a i { font-size:.65rem; color:rgba(22,163,74,.5); }
.footer-newsletter { background: var(--glass-surface-dark); box-shadow: var(--glass-inset-dark); border: none; border-radius: 20px; padding: 22px 26px; margin-top: 24px; }
.footer-newsletter h6 { font-family:var(--font-display); font-weight:700; color:#fff; font-size:.85rem; margin-bottom:4px; }
.footer-newsletter p  { font-size:.75rem; color:rgba(255,255,255,.35); margin-bottom:14px; }
.footer-newsletter .fn-row { display:flex; gap:8px; }
.footer-newsletter input { flex:1; background: var(--glass-surface-dark-2); box-shadow: var(--glass-inset-dark); border:none; border-radius:100px; padding:11px 17px; font-size:.8rem; color:#fff; font-family:var(--font-body); outline:none; }
.footer-newsletter input::placeholder { color:rgba(255,255,255,.25); }
.footer-newsletter button { background:linear-gradient(145deg,#17b84c,var(--lime)); color:#fff; border:none; border-radius:100px; padding:11px 22px; font-family:var(--font-display); font-weight:700; font-size:.8rem; cursor:pointer; transition:var(--transition); white-space:nowrap; box-shadow: 0 8px 20px rgba(6,78,59,.45), inset 0 1px 0 rgba(255,255,255,.3); }
.footer-newsletter button:hover { transform: translateY(-1px); }
.footer-divider { border:none; border-top:1px solid rgba(255,255,255,.06); margin:52px 0 0; }
.footer-bottom { padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.footer-bottom-copy { font-size:.78rem; color:rgba(255,255,255,.22); }
.footer-bottom-links { display:flex; gap:18px; }
.footer-bottom-links a { font-size:.78rem; color:rgba(255,255,255,.28); text-decoration:none; transition:color .2s; }
.footer-bottom-links a:hover { color:var(--light-glow); }

.poweredly-bar { background: #060d09; border-top: 1px solid rgba(255,255,255,.04); padding: 16px 0; text-align: center; }
.poweredly-inner { display: inline-flex; align-items: center; gap: 10px; background: var(--glass-surface-dark); box-shadow: var(--glass-inset-dark); border-radius: 100px; padding: 9px 23px; }
.poweredly-text { font-size:.76rem; color:rgba(255,255,255,.3); font-family:var(--font-body); }
.poweredly-brand { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: .8rem; color: #ef4444; transition: color .2s; letter-spacing: -.01em; }
.poweredly-brand:hover { color: #f87171; }
.poweredly-brand .p-dot { width:7px; height:7px; border-radius:50%; background:#ef4444; box-shadow:0 0 6px rgba(239,68,68,.5); display:inline-block; flex-shrink:0; }
.poweredly-brand .pvt { color:rgba(239,68,68,.6); font-weight:600; font-size:.72rem; margin-left:2px; }

.wa-float-btn {
    position: fixed; width: 62px; height: 62px; bottom: 30px; right: 30px;
    background: var(--glass-surface-light); color: #25D366;
    border-radius: 50%; text-align: center; font-size: 30px;
    box-shadow: var(--glass-shadow-light);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all 0.3s ease-in-out; animation: wa-pulse 2.4s infinite;
}
.wa-float-btn:hover { color: #128C7E; transform: scale(1.06); animation: none; }
.wa-float-tooltip { position: absolute; right: 78px; background: var(--glass-surface-light); box-shadow: var(--glass-shadow-light-sm); color: #0f172a; padding: 7px 15px; border-radius: 10px; font-size: 0.85rem; font-family: var(--font-display, sans-serif); font-weight: 700; opacity: 0; visibility: hidden; transition: all 0.3s ease; white-space: nowrap; pointer-events: none; }
.wa-float-tooltip::after { content: ''; position: absolute; top: 50%; right: -5px; transform: translateY(-50%); border-width: 6px 0 6px 6px; border-style: solid; border-color: transparent transparent transparent var(--glass-surface-light); }
.wa-float-btn:hover .wa-float-tooltip { opacity: 1; visibility: visible; right: 82px; }
@keyframes wa-pulse { 0% { box-shadow: var(--glass-shadow-light), 0 0 0 0 rgba(37,211,102,.45); } 70% { box-shadow: var(--glass-shadow-light), 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: var(--glass-shadow-light), 0 0 0 0 rgba(37,211,102,0); } }
@media (max-width: 768px) {
    .wa-float-btn { width: 54px; height: 54px; bottom: 20px; right: 20px; font-size: 26px; }
    .wa-float-tooltip { display: none; }
}