/* ════════════════════════════════════════════════════════════════════
   WEBILAA.COM — HOMEPAGE BASE STYLESHEET
   Extracted from the inline <style> blocks previously embedded in each of
   the 12 homepage/*.php include files (header, hero, brands,
   modules_showcase, features, how_it_works, benefits, stats, pricing, faq,
   cta, footer). This is the structural + "Current Style" visual layer —
   every layout, spacing, typography and animation rule the site has always
   used. It is ALWAYS loaded.

   Theme system: when an alternate homepage style is selected in
   admin/style_settings.php, a second stylesheet (homepage/theme-*.css) is
   loaded right after this one and overrides only the *visual* tokens
   (surface colors, shadows, borders, radii, backdrop-filter) on the same
   selectors — it never repeats layout rules. "Current Style" is simply
   this file with no override loaded on top.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
    --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: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-xl: 40px;
    --shadow-sm:   0 2px 8px rgba(6,78,59,.06);
    --shadow-card: 0 8px 32px rgba(6,78,59,.10);
    --shadow-lg:   0 20px 60px rgba(6,78,59,.15);
    --transition:  0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Theme-swappable surface tokens — "Current Style" default values below.
       Every theme-*.css override file redefines this block only. */
    --surf-card:        #ffffff;
    --surf-card-border:  1px solid var(--gray-2);
    --surf-card-shadow:  var(--shadow-sm);
    --surf-card-radius:  var(--radius-md);
    --surf-card-blur:    none;
    --surf-dark:         var(--ink);
    --surf-dark-card:    #0d1f15;
    --surf-dark-border:  1px solid rgba(74,222,128,.09);
    --surf-dark-shadow:  none;
    --surf-dark-blur:    none;
    --btn-primary-bg:    var(--lime);
    --btn-primary-shadow: 0 6px 20px rgba(22,163,74,.35);
    --nav-bg:            rgba(255,255,255,.82);
    --nav-blur:          blur(24px) saturate(1.6);
    --nav-border:        1px solid rgba(22,163,74,.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--page-bg, var(--white)); color: var(--gray-8); overflow-x: hidden; -webkit-font-smoothing: antialiased; position: relative; }
body::before { content: var(--page-mesh, none); position: fixed; inset: 0; z-index: -1; background: var(--page-mesh-bg, none); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); }
.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; }

.wb-pill {
    display:inline-flex; align-items:center; gap:7px;
    background:rgba(22,163,74,.10); border:1px solid rgba(22,163,74,.25);
    color:var(--forest); font-family:var(--font-display);
    font-size:.72rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; padding:6px 16px; 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:var(--btn-primary-bg); color:#fff;
    font-family:var(--font-display); font-weight:700; font-size:.92rem;
    padding:14px 28px; border-radius:100px; border:none; text-decoration:none;
    transition:var(--transition); box-shadow:var(--btn-primary-shadow);
}
.wb-btn-primary:hover { background:var(--forest); color:#fff; transform:translateY(-2px); box-shadow:0 10px 28px rgba(22,163,74,.45); }
.wb-btn-ghost {
    display:inline-flex; align-items:center; gap:10px;
    background:transparent; color:var(--gray-8);
    font-family:var(--font-display); font-weight:600; font-size:.92rem;
    padding:13px 26px; border-radius:100px;
    border:1.5px solid var(--gray-2); text-decoration:none; transition:var(--transition);
}
.wb-btn-ghost:hover { border-color:var(--lime); color:var(--lime); background:rgba(22,163,74,.04); }

/* ── 2. NAV / HEADER ──────────────────────────────────────────────── */
.wb-nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:0 24px; opacity:0; transform:translateY(-16px); animation:navDrop .7s cubic-bezier(.16,1,.3,1) .1s forwards; }
@keyframes navDrop { to { opacity:1; transform:translateY(0); } }
.wb-nav-inner {
    max-width:1180px; margin:0 auto; margin-top:14px; padding:11px 14px 11px 26px;
    display:flex; align-items:center; justify-content:space-between;
    background:var(--nav-bg); backdrop-filter:var(--nav-blur); -webkit-backdrop-filter:var(--nav-blur);
    border:var(--nav-border);
    border-radius:100px;
    box-shadow: 0 4px 24px rgba(6,78,59,.08);
    transition:var(--transition);
    position:relative;
}
.wb-nav.scrolled .wb-nav-inner { margin-top:8px; padding:8px 12px 8px 22px; box-shadow:0 8px 36px rgba(6,78,59,.16); }
.wb-nav-logo { height:30px; object-fit:contain; }
.wb-nav-links { display:flex; align-items:center; gap:2px; position:relative; }
.wb-nav-links a {
    position:relative; font-family:var(--font-display); font-weight:600; font-size:.85rem;
    color:var(--gray-5); text-decoration:none; padding:9px 16px; border-radius:100px;
    transition:color .25s ease;
}
.wb-nav-links a::before {
    content:''; position:absolute; inset:0; border-radius:100px;
    background:rgba(22,163,74,.09);
    transform:scale(.6); opacity:0;
    transition:transform .28s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
    z-index:-1;
}
.wb-nav-links a:hover { color:var(--forest); }
.wb-nav-links a:hover::before { transform:scale(1); opacity:1; }
.wb-nav-cta { display:flex; align-items:center; gap:8px; }
.wb-nav-login {
    font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--gray-5);
    text-decoration:none; padding:9px 20px; border-radius:100px; transition:var(--transition);
    border:1px solid var(--gray-2); display:inline-flex; align-items:center; gap:7px;
}
.wb-nav-login i { font-size:.75rem; transition:transform .3s ease; }
.wb-nav-login:hover { color:var(--forest); border-color:var(--lime); background:rgba(22,163,74,.05); }
.wb-nav-login:hover i { transform:translateX(2px); }
.wb-nav-register {
    font-family:var(--font-display); font-weight:700; font-size:.85rem; color:#fff;
    text-decoration:none; padding:10px 22px; border-radius:100px; transition:var(--transition);
    background:linear-gradient(135deg,var(--lime),var(--forest)); background-size:160% 160%; background-position:0% 50%;
    box-shadow:0 4px 16px rgba(22,163,74,.35); position:relative; overflow:hidden;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.wb-nav-register::after {
    content:''; position:absolute; inset:0; border-radius:100px;
    box-shadow:0 0 0 0 rgba(74,222,128,.55);
    animation:regPulse 2.6s ease-out infinite;
}
@keyframes regPulse { 0%{ box-shadow:0 0 0 0 rgba(74,222,128,.45); } 70%{ box-shadow:0 0 0 10px rgba(74,222,128,0); } 100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); } }
.wb-nav-register:hover { background-position:100% 50%; transform:translateY(-1px); color:#fff; box-shadow:0 8px 22px rgba(22,163,74,.45); }
.wb-nav-dashboard { font-family:var(--font-display); font-weight:700; font-size:.85rem; background:var(--forest); color:#fff; text-decoration:none; padding:9px 22px; border-radius:100px; transition:var(--transition); display:inline-flex; align-items:center; gap:8px; }
.wb-nav-dashboard:hover { background:var(--lime); color:#fff; transform:translateY(-1px); }
.wb-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:10px; margin-right:-6px; }
.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; z-index:999; flex-direction:column;
    align-items:center; justify-content:center; gap:6px;
    background:linear-gradient(160deg,#f0fdf7 0%,#ffffff 55%,#f8fffe 100%);
}
.wb-mobile-menu.open { display:flex; }
.wb-mobile-menu a {
    font-family:var(--font-display); font-size:1.55rem; font-weight:800; color:var(--ink);
    text-decoration:none; padding:12px 0; transition:color .2s, transform .2s;
    opacity:0; transform:translateY(14px);
}
.wb-mobile-menu.open a { animation:mobileLinkIn .5s cubic-bezier(.16,1,.3,1) forwards; }
.wb-mobile-menu.open a:nth-child(2){animation-delay:.05s;}
.wb-mobile-menu.open a:nth-child(3){animation-delay:.1s;}
.wb-mobile-menu.open a:nth-child(4){animation-delay:.15s;}
.wb-mobile-menu.open a:nth-child(5){animation-delay:.2s;}
.wb-mobile-menu.open a:nth-child(6){animation-delay:.25s;}
.wb-mobile-menu.open a:nth-child(7){animation-delay:.3s;}
@keyframes mobileLinkIn { to { opacity:1; transform:translateY(0); } }
.wb-mobile-menu a:active { color:var(--lime); transform:scale(.97); }
.wb-mobile-menu a.wb-mobile-cta { color:#fff; background:var(--lime); padding:14px 34px; border-radius:100px; font-size:1.05rem; box-shadow:0 8px 24px rgba(22,163,74,.35); margin-top:10px; }
.wb-mobile-close {
    position:absolute; top:22px; right:24px; background:rgba(6,78,59,.06); border:1px solid rgba(6,78,59,.1);
    width:40px; height:40px; border-radius:50%; color:var(--gray-8); font-size:1.1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:var(--transition);
}
.wb-mobile-close:hover { background:rgba(22,163,74,.12); color:var(--forest); }
@media(max-width:900px){ .wb-nav-links,.wb-nav-cta{display:none;} .wb-hamburger{display:flex;} }
.wb-hamburger span:nth-child(1) { transform-origin: center; transition: transform .3s ease, opacity .2s ease; }
.wb-hamburger span:nth-child(2) { transition: opacity .2s ease; }
.wb-hamburger span:nth-child(3) { transform-origin: center; transition: transform .3s ease, opacity .2s ease; }
.wb-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wb-hamburger.open span:nth-child(2) { opacity: 0; }
.wb-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 3. HERO ──────────────────────────────────────────────────────── */
.hero-section { background: linear-gradient(160deg, #f0fdf7 0%, #e8fdf2 30%, #f8fff8 60%, #fff 100%); display: flex; align-items: center; padding: 148px 0 90px; position: relative; overflow: hidden; }
.hero-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(22,163,74,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(22,163,74,.04) 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: white; border: 1px solid rgba(22,163,74,.18); border-radius: 100px; padding: 10px 18px; font-family: var(--font-display); font-size: .75rem; font-weight: 700; color: var(--gray-8); box-shadow: 0 8px 24px rgba(6,78,59,.10); 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: 52px; height: 52px; background: white; border: 1px solid rgba(22,163,74,.14); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 6px 20px rgba(6,78,59,.08); 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: rgba(22,163,74,.10); border: 1px solid rgba(22,163,74,.25); border-radius: 100px; padding: 7px 18px; 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,.08); border: 1px solid rgba(217,119,6,.22); border-radius: 100px; padding: 8px 18px 8px 8px; }
.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: var(--white); border: 1.5px solid rgba(22,163,74,.3); 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,.08); 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-impact { display: flex; align-items: center; gap: 20px; margin-top: 36px; background: white; padding: 18px 24px; border-radius: 16px; border: 1px solid rgba(22,163,74,.2); box-shadow: 0 10px 30px rgba(6,78,59,.08); 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: #f1f5f9; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.impact-bar.before { width: 25%; height: 100%; background: #cbd5e1; border-radius: 4px; }
.impact-bar.after { width: 90%; height: 100%; background: #22c55e; 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: #e2e8f0; }
.phone-outer { width: 300px; height: 620px; background: #1c1c1e; border-radius: 48px; padding: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.28), 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); transition: all .4s ease; }
.svc-dot.active { background: var(--lime); transform:scale(1.3); }
.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: rgba(255,255,255,.7); border: 1px solid rgba(22,163,74,.16); backdrop-filter: blur(6px); border-radius: 100px; padding: 8px 16px; font-family: var(--font-display); font-size: .72rem; font-weight: 700; color: var(--gray-8); box-shadow: 0 4px 14px rgba(6,78,59,.06); }
.hero-trust-chip i { color: var(--lime); font-size: .72rem; }
@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(--surf-dark); border-top: 1px solid rgba(74,222,128,.07); border-bottom: 1px solid rgba(74,222,128,.07); 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,.2); 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(--surf-dark), transparent); }
.ticker-wrap::after { right: 0; background: linear-gradient(to left, var(--surf-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(--white); 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: 8px; flex-wrap: wrap; margin-bottom: 48px; }
.msh-ftab { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--gray-2); border-radius: 100px; padding: 9px 20px; font-family: var(--font-display); font-size: .78rem; font-weight: 700; color: var(--gray-5); background: white; cursor: pointer; transition: var(--transition); outline: none; }
.msh-ftab:hover { border-color: var(--lime); color: var(--forest); background: rgba(22,163,74,.04); }
.msh-ftab.on { background: var(--lime); color: white; border-color: var(--lime); box-shadow: 0 6px 18px rgba(22,163,74,.30); }
.msh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; 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:12px; } }
@media(max-width:420px)  { .msh-grid { grid-template-columns: 1fr; } }
.msh-card { background: var(--surf-card); border: var(--surf-card-border); border-radius: 22px; padding: 26px 22px 22px; position: relative; overflow: hidden; cursor: pointer; 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; box-shadow: var(--surf-card-shadow); backdrop-filter: var(--surf-card-blur); -webkit-backdrop-filter: var(--surf-card-blur); }
.msh-card::before { content: ''; position: absolute; inset: 0; border-radius: 22px; 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(-5px); border-color: var(--c-border); box-shadow: 0 18px 48px rgba(0,0,0,.09); }
.msh-card:hover::before, .msh-card.sel::before { opacity: 1; }
.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); 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.1) rotate(-5deg); }
.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: 5px; position: relative; z-index: 1; margin-top: auto; }
.msh-tag { display: inline-flex; align-items: center; gap: 3px; background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 100px; padding: 3px 9px; font-size: .65rem; font-weight: 700; color: var(--gray-5); transition: var(--transition); }
.msh-card:hover .msh-tag, .msh-card.sel .msh-tag { background: var(--c-a); border-color: var(--c-border); color: var(--c-icon); }
.msh-panel { background: var(--surf-dark); border-radius: 26px; overflow: hidden; margin-top: 20px; max-height: 0; opacity: 0; transform: translateY(16px); 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: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; 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,.2);    color:rgba(255,255,255,.85); 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: var(--lime); color: white; border-radius: 100px; padding: 10px 20px; font-family: var(--font-display); font-weight: 700; font-size: .8rem; text-decoration: none; transition: var(--transition); display: block; text-align: center; }
.msh-wa-cta:hover { background: var(--forest); color: white; }
.msh-bottom { margin-top: 56px; background: linear-gradient(160deg, var(--forest) 0%, #0d7a5a 55%, var(--emerald) 100%); border-radius: 26px; padding: 48px 40px; position: relative; overflow: hidden; text-align: center; display: flex; flex-direction: column; align-items: center; }
.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,.12); border: 1px solid rgba(255,255,255,.2); 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,.65); 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: #fff; color: var(--forest); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.msh-bottom-btns .wb-btn-primary:hover { background: var(--cream); color: var(--forest); }
.msh-bottom-btns .wb-btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.msh-bottom-btns .wb-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
@media(max-width:767px) { .msh-bottom { padding: 36px 24px; } }

/* ── 6. FEATURES (dark bento) ─────────────────────────────────────── */
.features-section { background: var(--surf-dark); padding: 110px 0; }
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 16px; }
@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(--surf-dark-card); border: var(--surf-dark-border); border-radius: 24px; padding: 32px; position: relative; overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; box-shadow: var(--surf-dark-shadow); backdrop-filter: var(--surf-dark-blur); -webkit-backdrop-filter: var(--surf-dark-blur); }
.bento-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(34,197,94,.05) 0%, transparent 60%); pointer-events: none; transition: opacity .3s; opacity: 0; }
.bento-card:hover { border-color: rgba(74,222,128,.22); 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: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 20px; }
.bento-icon.green  { background: rgba(34,197,94,.12);  color: var(--lime); }
.bento-icon.gold   { background: rgba(245,158,11,.12);  color: var(--gold); }
.bento-icon.blue   { background: rgba(59,130,246,.12);  color: #60a5fa; }
.bento-icon.purple { background: rgba(139,92,246,.12);  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: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.18); color: var(--lime); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; 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: 40px; height: 40px; border-radius: 50%; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.2); 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: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 5px 12px; font-size: .75rem; color: rgba(255,255,255,.5); font-weight: 500; }
.pay-icons { display: flex; gap: 10px; margin-top: 20px; }
.pay-icon { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px 14px; font-size: .78rem; color: rgba(255,255,255,.5); display: flex; align-items: center; gap: 6px; }
.uptime-bar-wrap { margin-top: 20px; }
.uptime-months { display: flex; gap: 3px; }
.uptime-month { flex: 1; height: 28px; background: rgba(34,197,94,.25); border-radius: 4px; position: relative; overflow: hidden; }
.uptime-month::after { content: ''; position: absolute; inset: 0; background: var(--lime); border-radius: 4px; }
.uptime-month.low::after { background: rgba(34,197,94,.15); }
.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(--cream); 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(--surf-card); border-radius:24px; padding:36px 28px 32px; position:relative; box-shadow:var(--surf-card-shadow-2, 0 4px 24px rgba(6,78,59,.06)); border:var(--surf-card-border-3, 1px solid rgba(6,78,59,.06)); overflow:hidden; transition:all .4s ease; cursor:default; backdrop-filter: var(--surf-card-blur); -webkit-backdrop-filter: var(--surf-card-blur); }
.hiw-card:hover { transform:translateY(-8px); box-shadow:0 24px 60px rgba(6,78,59,.13); border-color:rgba(34,197,94,.25); }
.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:20px; display:flex; align-items:center; justify-content:center; font-size:2rem; margin-bottom:24px; position:relative; transition:all .4s ease; }
.hiw-card:hover .hiw-icon-wrap { transform:scale(1.1) rotate(-4deg); }
.hiw-icon-wrap.s1 { background:linear-gradient(135deg,#dcfce7,#bbf7d0); }
.hiw-icon-wrap.s2 { background:linear-gradient(135deg,#fef9c3,#fde68a); }
.hiw-icon-wrap.s3 { background:linear-gradient(135deg,#dbeafe,#bfdbfe); }
.hiw-icon-wrap.s4 { background:linear-gradient(135deg,#fce7f3,#fbcfe8); }
.hiw-icon-wrap::before { content:''; position:absolute; inset:-6px; border-radius:26px; border:2px solid transparent; transition:border-color .3s; }
.hiw-card:hover .hiw-icon-wrap.s1::before { border-color:rgba(34,197,94,.3); }
.hiw-card:hover .hiw-icon-wrap.s2::before { border-color:rgba(245,158,11,.3); }
.hiw-card:hover .hiw-icon-wrap.s3::before { border-color:rgba(59,130,246,.3); }
.hiw-card:hover .hiw-icon-wrap.s4::before { border-color:rgba(219,39,119,.3); }
.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(--gray-1); border-radius:100px; padding:5px 11px; 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,.2); 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(--surf-dark); border-radius:20px; 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(--surf-dark); padding: 110px 0; overflow: hidden; }
.comparison-card { border-radius: var(--radius-lg); padding: 36px; border: 1px solid; }
.comparison-bad { background: rgba(239,68,68,.04); border-color: rgba(239,68,68,.12); }
.comparison-good { background: rgba(34,197,94,.05); border-color: rgba(34,197,94,.15); }
.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: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.15); border-radius: var(--radius-lg); padding: 36px 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: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 100px; padding: 8px 16px; font-size: .8rem; color: rgba(255,255,255,.5); font-weight: 500; }
.benefit-pill i { color: var(--lime); font-size: .8rem; }

/* ── 9. STATS ─────────────────────────────────────────────────────── */
.stats-section { background: var(--white); padding: 0 0 0; border-top: 1px solid var(--gray-2); border-bottom: 1px solid var(--gray-2); position: relative; overflow: hidden; }
.stats-inner-wrap { background: linear-gradient(135deg, var(--forest) 0%, #0d7a5a 40%, #064e3b 100%); 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,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.stat-card-item { text-align: center; padding: 28px 20px; border-radius: 20px; background: var(--surf-stat, rgba(255,255,255,.06)); border: var(--surf-stat-border, 1px solid rgba(255,255,255,.1)); backdrop-filter: var(--surf-stat-blur, blur(10px)); -webkit-backdrop-filter: var(--surf-stat-blur, blur(10px)); 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 { background: rgba(255,255,255,.1); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.2); }
.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: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.3rem; position: relative; }
.stat-icon-wrap.g { background: rgba(74,222,128,.15); color: #4ade80; }
.stat-icon-wrap.y { background: rgba(251,191,36,.15); color: #fbbf24; }
.stat-icon-wrap.b { background: rgba(96,165,250,.15); color: #60a5fa; }
.stat-icon-wrap.p { background: rgba(192,132,252,.15); color: #c084fc; }
.stat-icon-wrap::after { content: ''; position: absolute; inset: -4px; border-radius: 20px; border: 1.5px solid transparent; transition: border-color .3s; }
.stat-card-item.c1:hover .stat-icon-wrap.g::after { border-color: rgba(74,222,128,.3); }
.stat-card-item.c2:hover .stat-icon-wrap.y::after { border-color: rgba(251,191,36,.3); }
.stat-card-item.c3:hover .stat-icon-wrap.b::after { border-color: rgba(96,165,250,.3); }
.stat-card-item.c4:hover .stat-icon-wrap.p::after { border-color: rgba(192,132,252,.3); }
.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(--mist); 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(--surf-card); border-radius: 28px; padding: 44px 40px; position: relative; overflow: hidden; border: var(--surf-card-border-2, 2px solid rgba(22,163,74,.15)); box-shadow: var(--surf-card-shadow, 0 16px 50px rgba(6,78,59,.09)); transition: all .4s ease; backdrop-filter: var(--surf-card-blur); -webkit-backdrop-filter: var(--surf-card-blur); }
.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(-6px); box-shadow:0 28px 70px rgba(6,78,59,.14); }
.pc-agency { background: var(--forest); border-radius: 28px; padding: 44px 40px; position: relative; overflow: hidden; border: 2px solid rgba(74,222,128,.2); box-shadow: 0 16px 50px rgba(0,0,0,.18); 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(-6px); box-shadow:0 28px 70px rgba(0,0,0,.25); }
.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:5px 14px; border-radius:100px; margin-bottom:20px; }
.pc-badge.pro    { background:rgba(22,163,74,.10); color:var(--forest); border:1px solid rgba(22,163,74,.2); }
.pc-badge.agency { background:rgba(245,158,11,.15); color:#f59e0b; }
.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:5px 12px; border-radius:100px; }
.pc-pro .pc-yearly-note    { background:#f0fdf4; color:var(--emerald); border:1px solid rgba(22,163,74,.2); }
.pc-agency .pc-yearly-note { background:rgba(245,158,11,.1); color:#f59e0b; border:1px solid rgba(245,158,11,.2); }
.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:20px; height:20px; 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    { background:rgba(22,163,74,.1); color:var(--lime); }
.pc-agency .pc-features li .ck { background:rgba(245,158,11,.15); color:#f59e0b; }
.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:rgba(245,158,11,.08) !important; border:1px solid rgba(245,158,11,.25) !important; border-radius:14px; padding:16px 18px; margin-bottom:24px; position:relative; overflow:hidden; }
.pc-api-box::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#f59e0b,#fcd34d) !important; }
.pc-api-box-title { font-family:var(--font-display); font-weight:800; font-size:.85rem; color:#f59e0b !important; margin-bottom:6px; display:flex; align-items:center; gap:7px; }
.pc-api-box p { font-size:.78rem; color:rgba(255,255,255,.65) !important; margin:0; line-height:1.55; }
.pc-api-tag { display:inline-flex; align-items:center; gap:5px; background:rgba(245,158,11,.12) !important; border:1px solid rgba(245,158,11,.2) !important; border-radius:6px; padding:2px 8px; font-size:.7rem; font-weight:700; color:#fcd34d !important; margin-top:8px; }
.pc-btn-pro    { display:block; width:100%; text-align:center; background:var(--forest); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.95rem; padding:15px; border-radius:100px; text-decoration:none; transition:var(--transition); }
.pc-btn-pro:hover { background:var(--lime); color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(22,163,74,.3); }
.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:15px; border-radius:100px; text-decoration:none; transition:var(--transition); box-shadow:0 8px 20px rgba(245,158,11,.3); }
.pc-btn-agency:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(245,158,11,.45); color:var(--ink); }
.pc-note { text-align:center; font-size:.75rem; margin-top:10px; }
.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(--gray-1); border-radius:100px; padding:5px; border:1px solid var(--gray-2); }
.toggle-btn { border-radius:100px; padding:9px 24px; 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(--white); color:var(--forest); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.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(--white); padding: 110px 0; }
.faq-wrap { max-width: 740px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--gray-2); }
.faq-item:first-child { border-top: 1px solid var(--gray-2); }
.faq-question { display:flex; justify-content:space-between; align-items:center; padding:22px 4px; 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:34px; height:34px; border-radius:50%; background:var(--gray-1); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--transition); color:var(--gray-5); font-size:.8rem; border:1px solid var(--gray-2); }
.faq-item.open .faq-icon { background:var(--lime); color:#fff; transform:rotate(45deg); border-color:var(--lime); }
.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 4px; }
.faq-contact-strip { margin-top: 56px; background: var(--cream); border: 1px solid rgba(22,163,74,.15); border-radius: 20px; 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(--surf-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:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:24px; transition:all .35s ease; height:100%; }
.custom-card:hover { background:rgba(74,222,128,.04); border-color:rgba(74,222,128,.15); 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:rgba(255,255,255,.04); border:1px solid rgba(74,222,128,.1); border-radius:24px; 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:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1); border-radius:12px;padding:13px 16px;font-size:.85rem;color:white; font-family:var(--font-body);outline:none;transition:border-color .2s;resize:none; }
.custom-field::placeholder { color:rgba(255,255,255,.2); }
.custom-field:focus { border-color:rgba(74,222,128,.4); }
.custom-submit { background:linear-gradient(135deg,var(--lime),var(--emerald)); color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:.9rem; padding:14px 32px;border-radius:100px;border:none;cursor:pointer; transition:var(--transition);box-shadow:0 8px 20px rgba(34,197,94,.25); display:inline-flex;align-items:center;gap:8px; }
.custom-submit:hover { transform:translateY(-2px);box-shadow:0 14px 30px rgba(34,197,94,.4); }
.cta-section { background:#020c07;padding:100px 0;position:relative;overflow:hidden; border-top:1px solid rgba(74,222,128,.06); }
.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:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);border-radius:100px;padding:8px 20px;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:10px;flex-wrap:wrap;margin-top:50px; }
.cta-logo-item { display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:100px;padding:8px 16px;font-size:.78rem;color:rgba(255,255,255,.35);font-weight:600; }

/* ── 13. FOOTER ───────────────────────────────────────────────────── */
.wb-footer { background: var(--surf-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,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(74,222,128,.025) 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:rgba(37,211,102,.1); border:1px solid rgba(37,211,102,.2); border-radius:100px; padding:6px 16px; font-family:var(--font-display); font-size:.72rem; font-weight:700; color:#25d366; margin-top:18px; }
.wb-footer-socials { display:flex; gap:8px; margin-top:20px; }
.wb-footer-social { width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.4); font-size:.85rem; text-decoration:none; transition:var(--transition); }
.wb-footer-social:hover { background:rgba(22,163,74,.15); color:var(--light-glow); border-color:rgba(22,163,74,.2); 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,.3); 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,.45); 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: rgba(22,163,74,.07); border: 1px solid rgba(22,163,74,.12); border-radius: 16px; padding: 20px 24px; 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:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:100px; padding:10px 16px; font-size:.8rem; color:#fff; font-family:var(--font-body); outline:none; }
.footer-newsletter input::placeholder { color:rgba(255,255,255,.25); }
.footer-newsletter input:focus { border-color:rgba(22,163,74,.4); }
.footer-newsletter button { background:var(--lime); color:#fff; border:none; border-radius:100px; padding:10px 20px; font-family:var(--font-display); font-weight:700; font-size:.8rem; cursor:pointer; transition:var(--transition); white-space:nowrap; }
.footer-newsletter button:hover { background:var(--emerald); }
.footer-divider { border:none; border-top:1px solid rgba(255,255,255,.07); 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: #0a0a0a; 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: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.15); border-radius: 100px; padding: 8px 22px; }
.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; }