/* ════════════════════════════════════════════════════════════
   TWABOT v3 — Clean WhatsApp-native theme
   ════════════════════════════════════════════════════════════ */
:root{
  --wa-green:#25D366;
  --wa-green-dark:#128C7E;
  --wa-teal:#075E54;
  --wa-bg-chat:#ECE5DD;
  --wa-bubble-out:#DCF8C6;
  --wa-bubble-in:#ffffff;

  --brand:#075E54;
  --brand-2:#128C7E;
  --accent:#25D366;
  --accent-soft:#E7F8EE;
  --highlight:#FFF3B0;

  --bg:#ffffff;
  --bg-soft:#F6F9F8;
  --bg-section:#F2F7F5;
  --line:#E5EBE9;
  --line-soft:#EFF3F1;

  --text:#0B1F1A;
  --text-2:#3D4E48;
  --text-3:#6B7A75;
  --text-mute:#8FA09A;

  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --shadow-sm:0 1px 2px rgba(11,31,26,0.06);
  --shadow:0 4px 14px rgba(11,31,26,0.06),0 1px 2px rgba(11,31,26,0.04);
  --shadow-md:0 12px 30px rgba(11,31,26,0.08),0 2px 4px rgba(11,31,26,0.04);
  --shadow-lg:0 24px 60px rgba(11,31,26,0.12),0 4px 10px rgba(11,31,26,0.06);
  --ease:cubic-bezier(0.16,1,0.3,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{font-family:'Inter','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ═══════ TOP ANNOUNCEMENT STRIP ═══════ */
.top-strip{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;text-align:center;padding:9px 20px;font-size:13px;font-weight:500;letter-spacing:0.1px;position:relative;z-index:1001}
.top-strip strong{font-weight:700}
.top-strip a{color:#FFF3B0;border-bottom:1px solid rgba(255,243,176,0.4);margin-left:6px;padding-bottom:1px}
.top-strip a:hover{color:#fff;border-color:#fff}

/* ═══════ NAVBAR ═══════ */
.nav{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.nav-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:24px}
.nav-logo{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:800;font-size:20px;letter-spacing:-0.4px}
.nav-logo img{width:36px;height:36px;object-fit:contain}
.nav-logo-text{color:var(--text)}
.nav-logo-text span{color:var(--accent)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links > a,.nav-dropdown-trigger{color:var(--text-2);font-weight:500;font-size:15px;position:relative;padding:6px 0;transition:color 0.2s;display:inline-flex;align-items:center}
.nav-links > a:hover,.nav-dropdown-trigger:hover{color:var(--brand)}
.nav-links > a:hover::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);border-radius:2px}

/* ─── Mega menu dropdown ─── */
.nav-dropdown{position:static}
.nav-dropdown-trigger{cursor:pointer;background:none;border:none;font-family:inherit}
.nav-mega{position:fixed;top:88px;left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(11,31,26,0.15),0 4px 12px rgba(11,31,26,0.06);padding:24px;width:min(1100px,calc(100vw - 40px));opacity:0;visibility:hidden;transition:all 0.25s var(--ease);z-index:1001}
.nav-mega::before{content:'';position:absolute;top:-18px;left:0;right:0;height:18px;background:transparent}
.nav-dropdown:hover .nav-mega,.nav-dropdown:focus-within .nav-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dropdown:hover .nav-dropdown-trigger svg{transform:rotate(180deg)}
.nav-mega-inner{display:grid;grid-template-columns:repeat(3,1fr) 240px;gap:24px}
.nav-mega-col{display:flex;flex-direction:column;gap:6px}
.nav-mega-heading{font-size:11px;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:0.8px;padding:0 8px;margin-bottom:8px}
.nav-mega-item{display:flex;gap:11px;padding:10px;border-radius:10px;transition:background 0.15s;align-items:flex-start}
.nav-mega-item:hover{background:var(--bg-soft)}
.nav-mega-ico{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.nav-mega-title{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:2px;line-height:1.3}
.nav-mega-desc{font-size:12px;color:var(--text-3);line-height:1.4}
.nav-mega-promo{border-left:1px solid var(--line-soft);padding-left:24px}
.nav-mega-promo-card{background:linear-gradient(160deg,#E7F8EE,#D4F4DE);border-radius:14px;padding:20px;height:100%;display:flex;flex-direction:column}
.nav-mega-promo-eyebrow{font-size:10px;font-weight:800;color:#0E6D38;letter-spacing:0.8px;margin-bottom:8px}
.nav-mega-promo-title{font-size:18px;font-weight:800;color:var(--text);margin-bottom:6px;letter-spacing:-0.4px;line-height:1.2}
.nav-mega-promo-desc{font-size:12px;color:var(--text-2);line-height:1.5;margin-bottom:14px;flex:1}
.nav-mega-promo-cta{display:inline-block;background:var(--accent);color:#fff;padding:9px 16px;border-radius:9px;font-size:12.5px;font-weight:700;text-align:center;box-shadow:0 2px 0 #1ea758;transition:0.2s}
.nav-mega-promo-cta:hover{transform:translateY(-1px)}
.nav-mega-promo-meta{font-size:10.5px;color:var(--text-3);font-weight:600;margin-top:10px;text-align:center}

/* Mobile menu sections */
.mobile-menu-section{display:flex;flex-direction:column;gap:2px}
.mobile-menu-heading{font-size:11px;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:0.8px;padding:14px 0 4px}
.mobile-menu-divider{height:1px;background:var(--line);margin:8px 0}
.nav-cta{display:flex;gap:10px;align-items:center}
.btn-login{color:var(--text-2);font-weight:600;font-size:14px;padding:8px 16px;border-radius:var(--r);transition:0.2s}
.btn-login:hover{background:var(--bg-soft);color:var(--text)}
.btn-primary,.btn-trial{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:var(--r);background:var(--accent);color:#fff;font-weight:700;font-size:14px;transition:all 0.2s;box-shadow:0 2px 0 #1ea758,0 4px 12px rgba(37,211,102,0.25)}
.btn-primary:hover,.btn-trial:hover{transform:translateY(-1px);box-shadow:0 3px 0 #1ea758,0 6px 16px rgba(37,211,102,0.32);background:#1fbf5d}
.btn-secondary{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:var(--r);background:#fff;color:var(--text);font-weight:700;font-size:14px;border:1.5px solid var(--line);transition:0.2s}
.btn-secondary:hover{border-color:var(--brand);color:var(--brand)}
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;width:28px;height:28px;color:var(--text);align-items:center;justify-content:center}
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;background:#fff;padding:80px 24px 28px;flex-direction:column;gap:4px;z-index:998;transform:translateY(-100%);transition:transform 0.3s ease;box-shadow:0 20px 40px rgba(0,0,0,0.1)}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{padding:14px 0;font-size:16px;font-weight:600;color:var(--text);border-bottom:1px solid var(--line-soft)}
.mobile-menu-btns{display:flex;gap:10px;margin-top:16px}
.mobile-menu-btns a{flex:1;text-align:center;padding:13px;border-radius:var(--r);font-weight:700;font-size:14px;border:none}
.btn-mobile-login{background:var(--bg-soft);color:var(--text)}
.btn-mobile-signup{background:var(--accent);color:#fff}

/* ═══════ HERO ═══════ */
.hero{padding:64px 24px 80px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,rgba(37,211,102,0.08) 0%,transparent 50%),radial-gradient(ellipse at 20% 80%,rgba(7,94,84,0.06) 0%,transparent 50%);pointer-events:none}
.hero-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero-content{max-width:560px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;background:#fff;border:1px solid var(--line);border-radius:50px;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:22px;box-shadow:var(--shadow-sm)}
.hero-eyebrow-icon{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#1fbf5d);display:flex;align-items:center;justify-content:center;color:#fff}
.hero-eyebrow-icon svg{width:12px;height:12px}
.hero h1{font-size:56px;font-weight:800;line-height:1.05;letter-spacing:-1.6px;margin-bottom:20px;color:var(--text)}
.hero h1 .hl{position:relative;display:inline-block;color:var(--brand)}
.hero h1 .hl::before{content:'';position:absolute;bottom:4px;left:-2px;right:-2px;height:14px;background:var(--highlight);z-index:-1;border-radius:4px;opacity:0.85}
.hero h1 .wa{color:var(--accent)}
.hero-sub{font-size:18px;line-height:1.6;color:var(--text-2);margin-bottom:30px}
.hero-sub b{color:var(--text);font-weight:700}
.hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.btn-hero-primary{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:14px;background:var(--accent);color:#fff;font-weight:700;font-size:16px;transition:all 0.2s;box-shadow:0 3px 0 #1ea758,0 8px 20px rgba(37,211,102,0.3)}
.btn-hero-primary:hover{transform:translateY(-1px);box-shadow:0 4px 0 #1ea758,0 10px 24px rgba(37,211,102,0.35)}
.btn-hero-primary svg{width:16px;height:16px;transition:transform 0.2s}
.btn-hero-primary:hover svg{transform:translateX(3px)}
.btn-hero-secondary{display:inline-flex;align-items:center;gap:8px;padding:15px 24px;border-radius:14px;background:#fff;color:var(--text);font-weight:700;font-size:16px;border:1.5px solid var(--line);transition:0.2s}
.btn-hero-secondary:hover{border-color:var(--brand);background:var(--bg-soft)}
.btn-hero-secondary svg{width:16px;height:16px;color:var(--brand)}
.hero-trust{display:flex;gap:22px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--text-3)}
.hero-trust-item{display:flex;align-items:center;gap:6px;font-weight:500}
.hero-trust-item svg{width:14px;height:14px;color:var(--accent)}

/* Hero visual — character + phone mockup composition */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:600px}
.hero-character{position:absolute;left:0;top:30px;width:340px;height:520px;border-radius:30px;overflow:hidden;box-shadow:0 24px 60px rgba(11,31,26,0.18);z-index:1;background:linear-gradient(180deg,#E7F8EE,#fff)}
.hero-character::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(255,255,255,0.85) 100%);z-index:2;pointer-events:none}
.hero-character::after{content:'';position:absolute;inset:-20px;background:radial-gradient(ellipse at 30% 50%,rgba(37,211,102,0.18) 0%,transparent 50%);z-index:-1;filter:blur(20px)}
.hero-character img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-phone-mockup{position:relative;width:280px;height:560px;z-index:3;margin-left:160px}
.hero-phone-mockup::before{content:'';position:absolute;inset:-50px -30px;background:radial-gradient(ellipse at center,rgba(37,211,102,0.14) 0%,transparent 60%);filter:blur(20px);z-index:-1}
.phone-frame{position:relative;width:280px;height:560px;background:linear-gradient(145deg,#1f2933,#0f1419);border-radius:42px;padding:10px;box-shadow:0 30px 80px rgba(11,31,26,0.22),0 12px 24px rgba(11,31,26,0.12),inset 0 0 0 2px rgba(255,255,255,0.06);z-index:2}
.phone-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:104px;height:22px;background:#0a0e12;border-radius:14px;z-index:5}
.phone-screen{width:100%;height:100%;background:var(--wa-bg-chat);border-radius:34px;overflow:hidden;display:flex;flex-direction:column;position:relative}

/* WhatsApp header */
.wa-header{background:var(--wa-teal);color:#fff;padding:36px 12px 9px;display:flex;align-items:center;gap:9px;flex-shrink:0}
.wa-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;border:2px solid rgba(255,255,255,0.22);flex-shrink:0}
.wa-header-info{flex:1;min-width:0}
.wa-name{font-size:13.5px;font-weight:600;line-height:1.1}
.wa-status{font-size:10.5px;opacity:0.85;margin-top:2px;display:flex;align-items:center;gap:5px}
.wa-online-dot{width:6px;height:6px;border-radius:50%;background:#25D366;box-shadow:0 0 4px rgba(37,211,102,0.8)}

/* Chat */
.wa-chat{flex:1;padding:10px 8px 6px;display:flex;flex-direction:column;gap:5px;background-color:var(--wa-bg-chat);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%23ccc4b6' fill-opacity='0.35'%3E%3Cpath d='M30 15c2 0 3 2 3 4s-1 4-3 4-3-2-3-4 1-4 3-4zm-15 12c1.5 0 2 1 2 2s-0.5 2-2 2-2-1-2-2 0.5-2 2-2zm32 5c1 0 2 1 2 2s-1 2-2 2-2-1-2-2 1-2 2-2z'/%3E%3C/g%3E%3C/svg%3E");overflow:hidden}
.wa-day-badge{align-self:center;background:rgba(225,245,254,0.92);color:#54656f;font-size:9.5px;font-weight:600;padding:3px 11px;border-radius:8px;margin:2px 0 4px;letter-spacing:0.3px;box-shadow:0 1px 1px rgba(11,20,26,0.05)}
.wa-msg{display:flex;flex-direction:column;max-width:80%}
.wa-msg.wa-in{align-self:flex-start;align-items:flex-start}
.wa-msg.wa-out{align-self:flex-end;align-items:flex-end}
.wa-bubble{padding:6px 9px 5px;border-radius:7.5px;font-size:12px;line-height:1.4;color:#111b21;box-shadow:0 1px 0.5px rgba(11,20,26,0.13);position:relative;word-wrap:break-word}
.wa-msg.wa-in .wa-bubble{background:var(--wa-bubble-in);border-top-left-radius:0}
.wa-msg.wa-out .wa-bubble{background:var(--wa-bubble-out);border-top-right-radius:0}
.wa-bubble b{font-weight:700;color:#111b21}
.wa-time{font-size:9px;color:#667781;margin-top:1px;display:flex;align-items:center;justify-content:flex-end;gap:3px}
.wa-ticks{color:#53bdeb;font-size:10px;letter-spacing:-1.5px;font-weight:700}
.wa-ai-tag{font-size:9px;font-weight:700;color:#0E6D38;background:#D4F4DE;padding:2px 8px;border-radius:10px;margin-top:3px;display:inline-flex;align-items:center;gap:3px;align-self:flex-end;letter-spacing:0.2px}
.wa-product{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 5px;min-width:175px}
.wa-product-img{width:46px;height:46px;border-radius:6px;background:linear-gradient(135deg,#7BB6E0,#4A90C2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.wa-product-img svg{opacity:0.85}

/* Input bar */
.wa-input-bar{background:#F0F2F5;padding:6px 8px;display:flex;align-items:center;gap:6px;flex-shrink:0}
.wa-input-stub{flex:1;background:#fff;border-radius:18px;padding:7px 12px;font-size:10.5px;color:#9aa6a4;display:flex;align-items:center;gap:6px}
.wa-input-send{width:30px;height:30px;border-radius:50%;background:var(--wa-teal);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}

/* Floating hero chips around phone */
.hero-chip{position:absolute;display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:14px;background:#fff;box-shadow:0 14px 30px rgba(11,31,26,0.12),0 0 0 1px rgba(11,31,26,0.04);z-index:3;animation:chipFloat 5s ease-in-out infinite}
.hero-chip-icon{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-chip-icon svg{width:14px;height:14px}
.hero-chip-num{font-size:14px;font-weight:800;color:var(--text);line-height:1}
.hero-chip-lbl{font-size:10px;color:var(--text-3);font-weight:600;margin-top:2px}
.hero-chip-stat{top:10%;left:-55px;animation-delay:0s}
.hero-chip-ai{top:38%;right:-50px;animation-delay:1.5s}
.hero-chip-broadcast{bottom:18%;left:-60px;animation-delay:0.8s}
.hero-chip-meta{bottom:6%;right:-20px;padding:8px 14px;font-size:12px;font-weight:700;color:#0668E1;animation-delay:2.2s}
.hero-chip-meta svg{width:14px;height:14px;flex-shrink:0}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ═══════ LOGO STRIP — real partners only ═══════ */
.partners{padding:36px 24px 28px;background:#fff;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.partners-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:48px;flex-wrap:wrap;justify-content:center}
.partners-label{font-size:12px;font-weight:700;color:var(--text-3);letter-spacing:1.2px;text-transform:uppercase;flex-shrink:0}
.partners-logos{display:flex;gap:44px;align-items:center;flex-wrap:wrap;justify-content:center}
.partners-logos img{height:24px;width:auto;opacity:0.55;filter:grayscale(100%);transition:all 0.2s}
.partners-logos img:hover{opacity:1;filter:grayscale(0%)}

/* ═══════ SECTIONS COMMON ═══════ */
section{padding:80px 24px}
.section-inner{max-width:1240px;margin:0 auto}
.section-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:50px;background:var(--accent-soft);color:#0E6D38;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:14px}
.section-eyebrow svg{width:13px;height:13px}
.section-title{font-size:42px;font-weight:800;line-height:1.1;letter-spacing:-1.2px;margin-bottom:14px;color:var(--text)}
.section-title .hl{color:var(--brand)}
.section-title .wa-color{color:var(--accent)}
.section-sub{font-size:17px;line-height:1.6;color:var(--text-2);max-width:640px}
.center{text-align:center}
.center .section-sub{margin-left:auto;margin-right:auto}

/* ═══════ FLOW DIAGRAM SECTION ═══════ */
.flow-section{background:#fff;padding:80px 24px;position:relative}
.flow-section .center{margin-bottom:56px}
.flow-diagram{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:20px;align-items:center;max-width:1180px;margin:0 auto;padding:40px 30px;background:linear-gradient(180deg,#FCFFFD,#F4FAF7);border-radius:var(--r-xl);border:1px solid var(--accent-soft);box-shadow:var(--shadow-md)}
.flow-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px;position:relative}
.flow-step-center{background:#fff;border-radius:var(--r-lg);padding:24px 18px;border:1.5px dashed var(--accent);box-shadow:0 8px 20px rgba(37,211,102,0.12)}
.flow-icon{width:72px;height:72px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:#fff;box-shadow:0 8px 18px rgba(11,31,26,0.12)}
.flow-icon-customer{background:linear-gradient(135deg,#3B82F6,#1D4ED8)}
.flow-icon-ai{background:linear-gradient(135deg,#25D366,#075E54);position:relative}
.flow-icon-ai::after{content:'';position:absolute;inset:-6px;border:2px dashed rgba(37,211,102,0.4);border-radius:24px;animation:flowSpin 12s linear infinite}
@keyframes flowSpin{to{transform:rotate(360deg)}}
.flow-icon-sale{background:linear-gradient(135deg,#F59E0B,#D97706)}
.flow-bubble{background:#fff;border-radius:14px;padding:10px 14px;margin-bottom:14px;box-shadow:0 4px 12px rgba(11,31,26,0.08);border:1px solid var(--line);max-width:240px}
.flow-bubble-customer{border-top-left-radius:0;background:#fff}
.flow-bubble-sale{border-top-right-radius:0;background:var(--wa-bubble-out);border-color:#c5e8a8}
.flow-bubble-text{font-size:13.5px;color:var(--text);font-weight:500}
.flow-bubble-text b{color:#0E6D38;font-weight:800;font-size:16px}
.flow-bubble-sub{font-size:11px;color:var(--text-3);margin-top:3px;font-weight:600}
.flow-brand-stack{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;align-items:center}
.flow-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:50px;font-size:11.5px;font-weight:700}
.flow-tag-wa{background:#E7F8EE;color:#0E6D38}
.flow-tag-ai{background:#FFF3B0;color:#7A4F00}
.flow-label{font-size:15px;font-weight:800;color:var(--text);margin-bottom:6px}
.flow-meta{font-size:11.5px;color:var(--text-3);line-height:1.5;font-weight:500;max-width:200px}
.flow-arrow{display:flex;align-items:center;justify-content:center;padding-top:30px}
.flow-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px;max-width:1100px;margin-left:auto;margin-right:auto}
.flow-stat{text-align:center;padding:18px;background:#fff;border-radius:var(--r-lg);border:1px solid var(--line-soft);transition:0.2s}
.flow-stat:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-sm)}
.flow-stat-num{font-size:24px;font-weight:800;color:var(--brand);letter-spacing:-0.5px;line-height:1}
.flow-stat-lbl{font-size:12.5px;color:var(--text-3);margin-top:6px;font-weight:600;line-height:1.4}

/* ═══════ DASHBOARD PREVIEW SECTION ═══════ */
.dashboard-section{background:var(--bg-soft);padding:88px 24px;position:relative;overflow:hidden}
.dashboard-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(37,211,102,0.06) 0%,transparent 50%);pointer-events:none}
.dash-mockup{max-width:1180px;margin:56px auto 0;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(11,31,26,0.18),0 12px 30px rgba(11,31,26,0.08);border:1px solid var(--line);overflow:hidden;position:relative}
.dash-browser-bar{background:#F2F5F4;padding:10px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line-soft)}
.dash-dots{display:flex;gap:6px}
.dash-dots span{width:11px;height:11px;border-radius:50%}
.dash-dots span:nth-child(1){background:#FF5F57}.dash-dots span:nth-child(2){background:#FEBC2E}.dash-dots span:nth-child(3){background:#28C840}
.dash-url{flex:0 0 320px;text-align:center;font-size:11.5px;color:var(--text-3);background:#fff;padding:5px 14px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line-soft)}
.dash-url svg{color:var(--accent);flex-shrink:0}
.dash-bar-spacer{flex:1}
.dash-body{display:grid;grid-template-columns:200px 1fr;min-height:540px}

/* Sidebar */
.dash-sidebar{background:#FAFCFB;border-right:1px solid var(--line-soft);padding:18px 12px;display:flex;flex-direction:column;gap:3px}
.dash-sidebar-logo{display:flex;align-items:center;gap:8px;padding:6px 12px;margin-bottom:14px}
.dash-sidebar-logo img{flex-shrink:0}
.dash-sidebar-logo span{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-0.3px}
.dash-nav-item{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text-3);cursor:default;position:relative}
.dash-nav-item svg{flex-shrink:0;opacity:0.8}
.dash-nav-item.active{background:var(--accent-soft);color:#0E6D38}
.dash-nav-item.active svg{opacity:1}
.dash-badge{margin-left:auto;background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:50px}
.dash-nav-divider{height:1px;background:var(--line-soft);margin:14px 6px}
.dash-user{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-top:auto}
.dash-user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.dash-user-name{font-size:12px;font-weight:700;color:var(--text)}
.dash-user-plan{font-size:10px;color:var(--text-3);margin-top:1px}

/* Main */
.dash-main{padding:22px;background:#fff;display:flex;flex-direction:column;gap:18px}
.dash-top{display:flex;justify-content:space-between;align-items:center;gap:14px}
.dash-greeting{font-size:18px;font-weight:800;color:var(--text)}
.dash-date{font-size:12px;color:var(--text-3);margin-top:2px}
.dash-actions{display:flex;align-items:center;gap:10px}
.dash-search{display:flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line);border-radius:9px;font-size:12px;color:var(--text-3);background:#fff;min-width:200px}
.dash-search svg{flex-shrink:0;color:var(--text-3)}
.dash-cta-btn{display:flex;align-items:center;gap:6px;background:var(--accent);color:#fff;padding:8px 14px;border-radius:9px;font-size:12px;font-weight:700;border:none;cursor:default;box-shadow:0 2px 0 #1ea758}
.dash-cta-btn svg{flex-shrink:0}

.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dash-stat{background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px}
.dash-stat-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dash-stat-lbl{font-size:11px;color:var(--text-3);font-weight:600}
.dash-trend{font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px}
.dash-trend.up{background:#D4F4DE;color:#0E6D38}
.dash-trend.neutral{background:#F2F5F4;color:var(--text-3)}
.dash-stat-num{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-0.5px;line-height:1.1}
.dash-stat-num sup{font-size:14px;color:var(--text-3);margin-left:1px}
.dash-stat-num sub{font-size:12px;color:var(--text-3);vertical-align:baseline}
.dash-stat-mini-row{display:flex;align-items:center;font-size:10.5px;color:var(--text-3);font-weight:600;margin-top:6px;gap:5px;flex-wrap:wrap}
.dash-mini-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dash-spark{margin-top:6px;height:24px}
.dash-progress-mini{height:4px;background:var(--line);border-radius:2px;margin-top:8px;overflow:hidden}
.dash-progress-mini span{display:block;height:100%;border-radius:2px}

.dash-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}
.dash-card{background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px}
.dash-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.dash-card-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--text)}
.dash-card-title svg{color:var(--brand)}
.dash-live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:livePulse 1.5s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:0.5}}
.dash-card-link{font-size:11px;color:var(--brand);font-weight:700;cursor:default}
.dash-convo-list{display:flex;flex-direction:column;gap:6px}
.dash-convo{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;background:#FAFCFB;border:1px solid transparent;transition:0.2s}
.dash-convo:hover{border-color:var(--line)}
.dash-convo-avatar{width:30px;height:30px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.dash-convo-info{flex:1;min-width:0}
.dash-convo-name{font-size:12px;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:8px}
.dash-convo-time{font-size:10px;font-weight:500;color:var(--text-3)}
.dash-convo-msg{font-size:11px;color:var(--text-2);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-tag{font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:6px;flex-shrink:0}
.dash-tag.ai{background:#D4F4DE;color:#0E6D38}
.dash-tag.pending{background:#FFF3B0;color:#7A4F00}
.dash-tag.done{background:#DEEDFF;color:#1E5BD0}
.dash-bc-body{display:flex;flex-direction:column;gap:2px}
.dash-bc-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-3);padding-top:6px}
.dash-bc-row b{color:var(--text);font-weight:700}
.dash-bc-revenue{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:linear-gradient(90deg,#EAFBF1,#D4F4DE);border-radius:9px;margin-top:10px;font-size:12px;color:#0E6D38;font-weight:600}
.dash-bc-revenue b{font-size:18px;font-weight:800;color:#0E6D38}

/* ═══════ FEATURE BLOCKS — alternating with branded mockups ═══════ */
.features{background:var(--bg-soft);position:relative}
.features-head{text-align:center;margin-bottom:64px}
.feat-block{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:88px}
.feat-block:last-child{margin-bottom:0}
.feat-block.reverse{direction:rtl}
.feat-block.reverse>*{direction:ltr}
.feat-info .section-eyebrow{margin-bottom:14px}
.feat-info h3{font-size:34px;font-weight:800;letter-spacing:-1px;margin-bottom:14px;color:var(--text);line-height:1.1}
.feat-info p{font-size:16px;line-height:1.65;color:var(--text-2);margin-bottom:22px}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:24px}
.feat-list li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--text);font-weight:500;line-height:1.5}
.feat-list li::before{content:'';width:20px;height:20px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230E6D38' stroke-width='3.2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;flex-shrink:0;margin-top:1px}

/* Mockup container */
.feat-mock{border-radius:var(--r-xl);padding:30px;background:linear-gradient(145deg,#F8FBFA,#EDF3F1);box-shadow:var(--shadow-md);position:relative;min-height:380px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-soft)}
.feat-mock::before{content:'';position:absolute;inset:14px;border-radius:calc(var(--r-xl) - 14px);background:radial-gradient(circle at 30% 20%,rgba(37,211,102,0.06),transparent 60%);pointer-events:none}

/* ─── AI Auto-Reply mockup ─── */
.mock-ai{width:100%;max-width:380px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative;z-index:1;border:1px solid var(--line-soft)}
.mock-ai-header{background:var(--wa-teal);color:#fff;padding:11px 13px;display:flex;align-items:center;gap:10px}
.mock-ai-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;border:2px solid rgba(255,255,255,0.22)}
.mock-ai-name{font-size:13px;font-weight:600}
.mock-ai-meta{font-size:11px;opacity:0.85;display:flex;align-items:center;gap:5px;margin-top:1px}
.mock-online{width:7px;height:7px;border-radius:50%;background:#25D366;box-shadow:0 0 5px #25D366}
.mock-ai-langs{margin-left:auto;display:flex;gap:4px}
.mock-ai-langs span{padding:2px 6px;border-radius:6px;background:rgba(255,255,255,0.18);font-size:9.5px;font-weight:700}
.mock-ai-chat{padding:12px;background:var(--wa-bg-chat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%23ccc4b6' fill-opacity='0.35'%3E%3Cpath d='M30 15c2 0 3 2 3 4s-1 4-3 4-3-2-3-4 1-4 3-4zm-15 12c1.5 0 2 1 2 2s-0.5 2-2 2-2-1-2-2 0.5-2 2-2zm32 5c1 0 2 1 2 2s-1 2-2 2-2-1-2-2 1-2 2-2z'/%3E%3C/g%3E%3C/svg%3E");display:flex;flex-direction:column;gap:6px}
.mock-msg{max-width:82%}
.mock-msg.in{align-self:flex-start}
.mock-msg.out{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end}
.mock-bubble{padding:7px 10px;border-radius:8px;font-size:11.5px;line-height:1.4;color:#111b21;box-shadow:0 1px 0.5px rgba(11,20,26,0.13)}
.mock-msg.in .mock-bubble{background:#fff;border-top-left-radius:0}
.mock-msg.out .mock-bubble{background:var(--wa-bubble-out);border-top-right-radius:0}
.mock-ai-pill{margin-top:3px;font-size:9.5px;font-weight:700;color:#0E6D38;background:#D4F4DE;padding:3px 8px;border-radius:10px;display:inline-flex;align-items:center;gap:3px}
.mock-ai-footer{padding:12px 13px;background:#FAFCFB;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line-soft)}
.mock-confidence{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-3)}
.mock-confidence b{color:#0E6D38;font-weight:800}
.mock-bar{width:78px;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.mock-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#1ea758)}
.mock-escalate{font-size:10px;color:var(--text-3);font-weight:600;background:#fff;padding:4px 8px;border-radius:6px;border:1px solid var(--line)}

/* ─── Broadcast Campaign mockup ─── */
.mock-bc{width:100%;max-width:440px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative;z-index:1;border:1px solid var(--line-soft)}
.mock-bc-header{padding:13px 16px;background:#fff;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line-soft)}
.mock-bc-title{font-size:14px;font-weight:800;color:var(--text)}
.mock-bc-sub{font-size:11px;color:var(--text-3);margin-top:2px}
.mock-bc-status{font-size:10px;font-weight:800;color:#0E6D38;background:#D4F4DE;padding:4px 10px;border-radius:10px}
.mock-bc-template{padding:13px 16px;background:var(--wa-bg-chat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%23ccc4b6' fill-opacity='0.35'%3E%3Cpath d='M30 15c2 0 3 2 3 4s-1 4-3 4-3-2-3-4 1-4 3-4zm-15 12c1.5 0 2 1 2 2s-0.5 2-2 2-2-1-2-2 0.5-2 2-2zm32 5c1 0 2 1 2 2s-1 2-2 2-2-1-2-2 1-2 2-2z'/%3E%3C/g%3E%3C/svg%3E")}
.mock-bc-tpl-bubble{background:var(--wa-bubble-out);padding:9px 11px;border-radius:9px;border-top-right-radius:0;box-shadow:0 1px 0.5px rgba(11,20,26,0.13);max-width:90%;margin-left:auto}
.mock-bc-btn{padding:6px 10px;background:#fff;border-radius:6px;font-size:10.5px;font-weight:700;color:var(--wa-teal);text-align:center;flex:1;border:1px solid #d1f0e0}
.mock-bc-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:13px 16px;background:#fff}
.mock-bc-stat{background:var(--bg-soft);padding:10px 12px;border-radius:10px;border:1px solid var(--line-soft)}
.mock-bc-stat-num{font-size:18px;font-weight:800;color:var(--text);line-height:1}
.mock-bc-stat-lbl{font-size:10.5px;color:var(--text-3);font-weight:600;margin-top:3px}
.mock-bc-progress{height:4px;background:var(--line);border-radius:2px;margin-top:6px;overflow:hidden}
.mock-bc-progress span{display:block;height:100%;border-radius:2px}
.mock-bc-roi{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;background:linear-gradient(90deg,#EAFBF1,#D4F4DE);font-size:13px;color:#0E6D38;border-top:1px solid #d1f0e0;font-weight:600}
.mock-bc-roi b{font-size:16px;font-weight:800;color:#0E6D38}

/* ─── Team Inbox mockup ─── */
.mock-inbox{width:100%;max-width:440px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative;z-index:1;border:1px solid var(--line-soft)}
.mock-inbox-header{padding:13px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line-soft);background:#fff}
.mock-inbox-title{font-size:14px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px}
.mock-inbox-title::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 5px var(--accent)}
.mock-inbox-counters{display:flex;gap:6px}
.mock-counter{font-size:10px;font-weight:700;padding:4px 9px;border-radius:8px}
.mock-counter.green{background:#D4F4DE;color:#0E6D38}
.mock-counter.blue{background:#DEEDFF;color:#1E5BD0}
.mock-inbox-list{display:flex;flex-direction:column;max-height:280px;overflow:hidden}
.mock-inbox-row{padding:11px 14px;display:flex;gap:10px;align-items:flex-start;border-bottom:1px solid var(--line-soft);transition:background 0.2s}
.mock-inbox-row.active{background:linear-gradient(90deg,#EAFBF1,transparent);border-left:3px solid var(--accent);padding-left:11px}
.mock-inbox-avatar{width:32px;height:32px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.mock-inbox-info{flex:1;min-width:0}
.mock-inbox-name{font-size:12.5px;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:space-between}
.mock-inbox-time{font-size:10px;font-weight:500;color:var(--text-3)}
.mock-inbox-msg{font-size:11px;color:var(--text-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-note{font-size:10px;color:#7A4F00;background:#FFF3B0;padding:4px 8px;border-radius:6px;margin-top:5px;display:inline-block;font-weight:500}
.mock-assign{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.mock-agent-avatar{width:22px;height:22px;border-radius:50%;background:#6366f1;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.mock-tag-ai{font-size:9px;font-weight:800;padding:3px 7px;border-radius:6px;background:#D4F4DE;color:#0E6D38}
.mock-tag-pending{font-size:9px;font-weight:800;padding:3px 7px;border-radius:6px;background:#FFF3B0;color:#7A4F00}
.mock-tag-resolved{font-size:9px;font-weight:800;padding:3px 7px;border-radius:6px;background:#DEEDFF;color:#1E5BD0}
.mock-inbox-footer{padding:10px 14px;background:#FAFCFB;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-3);font-weight:600}
.mock-presence-dots{display:flex}
.mock-presence-dots span{width:16px;height:16px;border-radius:50%;border:2px solid #fff;margin-left:-5px}
.mock-presence-dots span:nth-child(1){background:#10b981;margin-left:0}
.mock-presence-dots span:nth-child(2){background:#f59e0b}
.mock-presence-dots span:nth-child(3){background:#6366f1}
.mock-presence-dots span:nth-child(4){background:#ec4899}

/* ═══════ FEATURE GRID ═══════ */
.features-grid-section{background:#fff;padding:88px 24px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.fc{padding:24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);transition:all 0.2s;position:relative}
.fc:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.fc-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--accent-soft);color:var(--brand)}
.fc-icon svg,.fc-icon .lucide{width:22px;height:22px}
.fc h3{font-size:16px;font-weight:800;margin-bottom:6px;color:var(--text)}
.fc p{font-size:13.5px;line-height:1.55;color:var(--text-2)}
.fc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
.fc-tags span{padding:3px 9px;border-radius:6px;background:var(--bg-soft);font-size:10.5px;font-weight:600;color:var(--text-3);border:1px solid var(--line-soft)}

/* ═══════ COMPARISON TABLE ═══════ */
.compare-section{background:var(--bg-soft);padding:88px 24px}
.compare-table-wrap{max-width:1100px;margin:48px auto 0;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-md)}
.compare-table{width:100%;border-collapse:collapse}
.compare-table th,.compare-table td{padding:14px 18px;text-align:center;font-size:14px;border-bottom:1px solid var(--line-soft)}
.compare-table th{background:#FAFCFB;font-weight:700;font-size:13px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.6px}
.compare-table th.us{background:var(--accent-soft);color:#0E6D38}
.compare-table td:first-child{text-align:left;font-weight:600;color:var(--text)}
.compare-table td.us{background:rgba(212,244,222,0.35);font-weight:700;color:#0E6D38}
.compare-table .check{color:var(--accent);font-weight:700}
.compare-table .cross{color:#CBD5D0}
.compare-table .price-cell{font-weight:800;font-size:15px}
.compare-table .price-cell.best{color:var(--accent);font-size:17px}

/* ═══════ PRICING ═══════ */
.pricing-section{background:#fff;padding:88px 24px}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:48px}
.pricing-card{padding:30px;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);transition:all 0.25s;position:relative}
.pricing-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.pricing-card.featured{border:2px solid var(--accent);background:linear-gradient(180deg,#fff,#FCFFFD);box-shadow:var(--shadow-md)}
.pricing-popular{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:5px 16px;border-radius:50px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:0.6px;box-shadow:0 4px 12px rgba(37,211,102,0.32)}
.pricing-name{font-size:13px;font-weight:800;color:var(--brand);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:4px}
.pricing-desc{font-size:13px;color:var(--text-3);margin-bottom:16px}
.pricing-amount{font-size:42px;font-weight:800;color:var(--text);letter-spacing:-1px}
.pricing-amount sup{font-size:18px;font-weight:700;vertical-align:super;color:var(--text-2)}
.pricing-meta-note{font-size:12px;color:var(--text-3);margin:4px 0}
.pricing-period{font-size:13px;color:var(--text-3);margin-bottom:20px}
.pricing-features{list-style:none;margin-bottom:24px}
.pricing-features li{padding:7px 0;font-size:13.5px;color:var(--text-2);display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line-soft)}
.pricing-features li::before{content:'';width:16px;height:16px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230E6D38' stroke-width='3.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;flex-shrink:0}
.btn-pricing{display:block;text-align:center;padding:13px;border-radius:var(--r);font-weight:700;font-size:14.5px;transition:all 0.2s}
.btn-pricing.primary{background:var(--accent);color:#fff;box-shadow:0 2px 0 #1ea758,0 4px 10px rgba(37,211,102,0.22)}
.btn-pricing.primary:hover{transform:translateY(-1px)}
.btn-pricing.outline{background:var(--bg-soft);color:var(--text);border:1px solid var(--line)}
.btn-pricing.outline:hover{background:#fff;border-color:var(--brand);color:var(--brand)}
.pricing-trial{text-align:center;margin-top:20px;font-size:14px;color:var(--text-3)}
.pricing-trial span{font-weight:700;color:var(--accent)}
.pricing-loading{text-align:center;padding:60px;color:var(--text-3);grid-column:1/-1}
.spinner{display:inline-block;width:24px;height:24px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:12px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════ CALCULATOR ═══════ */
.calc-section{background:var(--bg-soft);padding:88px 24px}
.calc-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:48px;max-width:1100px;margin-left:auto;margin-right:auto}
.calc-inputs{display:flex;flex-direction:column;gap:22px;background:#fff;border-radius:var(--r-xl);padding:28px;border:1px solid var(--line)}
.calc-meta-rates{padding:16px;border-radius:var(--r-lg);background:linear-gradient(135deg,#FCFFFD,#F4FAF7);border:1px solid var(--accent-soft)}
.calc-meta-title{font-size:13.5px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--text)}
.calc-meta-title .lucide{width:14px;height:14px;color:var(--brand)}
.calc-rates-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.calc-rate-row{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:8px;background:#fff;font-size:12px;border:1px solid var(--line-soft)}
.calc-rate-type{font-weight:700;padding:2px 7px;border-radius:6px;font-size:10.5px}
.calc-rate-type.marketing{background:#FFF3B0;color:#7A4F00}
.calc-rate-type.utility{background:#DEEDFF;color:#1E5BD0}
.calc-rate-type.auth{background:#F3E8FF;color:#6B21A8}
.calc-rate-type.service{background:#D4F4DE;color:#0E6D38}
.calc-rate-price{font-weight:700;color:var(--text-2);font-size:11.5px}
.calc-rate-price.free{color:var(--accent);font-weight:800}
.calc-field-label{font-size:13px;font-weight:800;margin-bottom:6px;color:var(--text);text-transform:uppercase;letter-spacing:0.5px}
.calc-plan-tabs{display:flex;gap:7px;flex-wrap:wrap}
.calc-plan-btn{padding:8px 14px;border-radius:9px;border:1.5px solid var(--line);background:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:0.2s;color:var(--text-2);font-family:inherit}
.calc-plan-btn:hover{border-color:var(--brand);color:var(--brand)}
.calc-plan-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.calc-sliders{display:flex;flex-direction:column;gap:12px}
.calc-slider-group{padding:14px 16px;border-radius:var(--r-lg);background:var(--bg-soft);border:1px solid var(--line-soft)}
.calc-slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.calc-slider-label{font-size:13px;font-weight:600;color:var(--text-2)}
.calc-slider-val{font-size:14px;font-weight:800;color:var(--brand);background:#fff;padding:3px 10px;border-radius:6px;border:1px solid var(--accent-soft)}
input[type="range"]{width:100%;height:6px;border-radius:3px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,var(--accent) 0%,var(--line) 0%);outline:none;cursor:pointer}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);box-shadow:0 2px 6px rgba(37,211,102,0.35);cursor:pointer;border:2px solid #fff}
.calc-slider-hints{display:flex;justify-content:space-between;font-size:11px;color:var(--text-3);margin-top:4px}
.calc-result{position:sticky;top:88px;background:#fff;border-radius:var(--r-xl);padding:28px;border:1px solid var(--line);box-shadow:var(--shadow-md);align-self:start}
.calc-result-title{font-size:13px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px;color:var(--text);text-transform:uppercase;letter-spacing:0.5px}
.calc-result-title .lucide{width:18px;height:18px;color:var(--brand)}
.calc-breakdown{display:flex;flex-direction:column;gap:4px}
.calc-row{display:flex;justify-content:space-between;font-size:14px;padding:9px 0;color:var(--text-2)}
.calc-row span:last-child{font-weight:700;color:var(--text)}
.calc-row.green span:last-child{color:var(--accent)}
.calc-divider{height:1px;background:var(--line);margin:14px 0}
.calc-row.total{font-size:16px;font-weight:800;padding:14px 18px;background:linear-gradient(90deg,#EAFBF1,#D4F4DE);border-radius:var(--r);margin-top:6px}
.calc-row.total span:last-child{color:#0E6D38;font-size:22px}
.calc-note{margin-top:14px;font-size:12px;color:var(--text-3);line-height:1.55}
.btn-calc-cta{display:block;text-align:center;padding:14px;border-radius:var(--r);background:var(--accent);color:#fff;font-weight:700;font-size:15px;margin-top:20px;transition:0.2s;box-shadow:0 2px 0 #1ea758,0 4px 12px rgba(37,211,102,0.22)}
.btn-calc-cta:hover{transform:translateY(-1px)}
.calc-compare{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft)}
.calc-compare-title{font-size:12px;font-weight:800;margin-bottom:12px;color:var(--text);text-transform:uppercase;letter-spacing:0.5px}
.calc-compare-row{display:flex;justify-content:space-between;padding:7px 0;font-size:13px;color:var(--text-2);border-bottom:1px dashed var(--line-soft)}
.calc-compare-row.highlight{font-weight:800;color:#0E6D38}
.comp-price{font-weight:700}
.comp-price.highlight{color:var(--accent)}
.calc-compare-note{font-size:11.5px;color:var(--text-3);margin-top:10px;font-style:italic}

/* ═══════ HOW IT WORKS ═══════ */
.how-section{background:#fff;padding:88px 24px}
.steps-container{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.step-item{background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:var(--r-xl);padding:30px;position:relative;transition:0.2s}
.step-item:hover{border-color:var(--accent);transform:translateY(-3px)}
.step-num{position:absolute;top:-16px;left:30px;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;box-shadow:0 4px 10px rgba(37,211,102,0.32)}
.step-item h3{font-size:18px;font-weight:800;margin:12px 0 8px;color:var(--text)}
.step-item p{font-size:14px;line-height:1.6;color:var(--text-2)}

/* ═══════ META PARTNER ═══════ */
.meta-section{background:var(--bg-soft);padding:60px 24px}
.meta-card{max-width:920px;margin:32px auto 0;padding:36px;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;box-shadow:var(--shadow)}
.meta-card-icon{width:88px;height:88px;border-radius:var(--r-lg);background:#FAFCFB;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.meta-card-icon img{width:60px;height:60px;object-fit:contain}
.meta-card-text h3{font-size:22px;font-weight:800;margin-bottom:6px;color:var(--text)}
.meta-card-text p{font-size:14.5px;color:var(--text-2);line-height:1.6;margin-bottom:14px}
.meta-badges{display:flex;gap:8px;flex-wrap:wrap}
.mb{padding:5px 12px;border-radius:8px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}
.mb .lucide{width:13px;height:13px}
.mb.green{background:#D4F4DE;color:#0E6D38}
.mb.blue{background:#DEEDFF;color:#1E5BD0}
.mb.purple{background:#F3E8FF;color:#6B21A8}

/* ═══════ INTEGRATIONS ═══════ */
.intg-section{background:#fff;padding:88px 24px}
.intg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-top:48px;max-width:900px;margin-left:auto;margin-right:auto}
.intg-card{padding:18px 16px;border-radius:var(--r);background:#fff;border:1px solid var(--line);display:flex;align-items:center;gap:11px;font-weight:700;font-size:14px;color:var(--text);transition:0.2s}
.intg-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.intg-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg-soft)}
.intg-ico .lucide{width:18px;height:18px}
.intg-ico img{width:18px;height:18px}

/* ═══════ FAQ ═══════ */
.faq-section{background:var(--bg-soft);padding:88px 24px}
.faq-list{max-width:820px;margin:48px auto 0;display:flex;flex-direction:column;gap:8px}
.faq-item{border-radius:var(--r-lg);background:#fff;border:1px solid var(--line-soft);transition:0.2s;overflow:hidden}
.faq-item.open{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.faq-q{width:100%;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;background:none;border:none;cursor:pointer;font-size:15px;font-weight:700;color:var(--text);text-align:left;gap:16px;font-family:inherit}
.faq-icon{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--brand);transition:transform 0.3s;flex-shrink:0}
.faq-icon .lucide{width:14px;height:14px}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--accent);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.4s ease;padding:0 22px;font-size:14.5px;line-height:1.65;color:var(--text-2)}
.faq-item.open .faq-a{max-height:500px;padding:0 22px 20px}

/* ═══════ CTA ═══════ */
.cta-section{padding:88px 24px;background:linear-gradient(135deg,var(--brand),var(--brand-2));position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M40 20c2 0 3 2 3 4s-1 4-3 4-3-2-3-4 1-4 3-4zm-20 16c1.5 0 2 1 2 2s-0.5 2-2 2-2-1-2-2 0.5-2 2-2zm42 7c1 0 2 1 2 2s-1 2-2 2-2-1-2-2 1-2 2-2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.cta-inner{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:1}
.cta-title{font-size:38px;font-weight:800;color:#fff;line-height:1.15;letter-spacing:-1px;margin-bottom:16px}
.cta-sub{font-size:17px;color:rgba(255,255,255,0.88);line-height:1.65;margin-bottom:28px}
.btn-cta{display:inline-flex;align-items:center;gap:8px;padding:16px 36px;border-radius:14px;background:#fff;color:var(--brand);font-weight:800;font-size:16px;box-shadow:0 12px 30px rgba(0,0,0,0.18);transition:0.2s}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,0.22)}
.btn-cta .lucide{width:16px;height:16px;transition:transform 0.2s}
.btn-cta:hover .lucide{transform:translateX(4px)}
.cta-note{margin-top:14px;font-size:13px;color:rgba(255,255,255,0.7)}

/* ═══════ FOOTER ═══════ */
footer{background:#0A1714;color:rgba(255,255,255,0.6);padding:64px 24px 28px;font-size:14px}
.footer-inner{max-width:1240px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,0.08)}
.footer-brand .footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-brand .footer-logo img{width:38px;height:38px;object-fit:contain}
.footer-brand .footer-logo-name{font-size:22px;font-weight:800;color:#fff;letter-spacing:-0.5px}
.footer-brand .footer-logo-name span{color:var(--accent)}
.footer-brand p{font-size:13.5px;line-height:1.65;margin-bottom:18px;color:rgba(255,255,255,0.55);max-width:300px}
.footer-social{display:flex;gap:8px;margin-bottom:18px}
.footer-social a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;transition:all 0.2s;color:rgba(255,255,255,0.6)}
.footer-social a:hover{transform:translateY(-2px);color:#fff}
.footer-social-fb:hover{background:#1877F2}
.footer-social-ig:hover{background:linear-gradient(135deg,#833AB4,#FD1D1D,#FCB045)}
.footer-social-yt:hover{background:#FF0000}
.footer-social-li:hover{background:#0A66C2}
.footer-social-wa:hover{background:#25D366}

/* Meta partner badge */
.footer-meta-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(6,104,225,0.1);border:1px solid rgba(6,104,225,0.25);border-radius:10px;margin-bottom:16px;transition:0.2s;color:#fff}
.footer-meta-badge:hover{background:rgba(6,104,225,0.18);transform:translateY(-1px)}
.footer-meta-badge strong{display:block;font-size:13px;font-weight:700;color:#fff}
.footer-meta-badge em{display:block;font-size:11px;font-style:normal;color:rgba(255,255,255,0.55);margin-top:1px;font-weight:500}
.footer-badges{display:flex;flex-direction:column;gap:6px}
.footer-badge{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,0.5);font-weight:500}
.footer-badge .lucide{width:13px;height:13px;color:var(--accent);flex-shrink:0}
.footer-col h4{color:#fff;font-size:13px;font-weight:800;margin-bottom:14px;text-transform:uppercase;letter-spacing:0.6px}
.footer-col a{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.55);font-size:13.5px;padding:5px 0;transition:0.2s}
.footer-col a:hover{color:var(--accent)}
.footer-col a .lucide{width:13px;height:13px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:12.5px;color:rgba(255,255,255,0.4);flex-wrap:wrap;gap:14px}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a{color:rgba(255,255,255,0.4);font-size:12.5px;transition:0.2s}
.footer-bottom-links a:hover{color:var(--accent)}

/* ═══════ VIDEO DEMO MODAL ═══════ */
.video-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity 0.25s ease,visibility 0.25s ease}
.video-modal[hidden]{display:none}
.video-modal.open{opacity:1;visibility:visible}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(11,31,26,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer}
.video-modal-content{position:relative;width:min(1100px,100%);max-height:90vh;background:#000;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.5);transform:scale(0.94);transition:transform 0.3s var(--ease)}
.video-modal.open .video-modal-content{transform:scale(1)}
.video-modal-close{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;z-index:2;backdrop-filter:blur(8px)}
.video-modal-close:hover{background:rgba(255,255,255,0.22);transform:rotate(90deg)}
.video-modal-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.video-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:720px){
  .video-modal{padding:12px}
  .video-modal-close{top:-42px;width:34px;height:34px}
}

/* ═══════ SCROLL REVEAL ═══════ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease)}
.reveal-left.visible,.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(0.95);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.reveal-child{opacity:0;transform:translateY(20px);transition:opacity 0.5s ease,transform 0.5s ease}
.stagger.visible .reveal-child{opacity:1;transform:translateY(0)}

/* ═══════ RESPONSIVE ═══════ */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;text-align:center;gap:50px}
  .hero-content{max-width:100%;margin:0 auto}
  .hero-actions,.hero-trust{justify-content:center}
  .hero-visual{margin-top:20px}
  .hero h1{font-size:46px}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .feat-block,.feat-block.reverse{grid-template-columns:1fr;direction:ltr;gap:36px}
  .feat-block.reverse>*{direction:ltr}
  .compare-table th,.compare-table td{padding:10px 12px;font-size:12.5px}
  .calc-wrapper{grid-template-columns:1fr}
  .calc-result{position:static}
  .steps-container{grid-template-columns:1fr;gap:32px}
  .meta-card{grid-template-columns:1fr;text-align:center;justify-items:center}
  .meta-badges{justify-content:center}
  .footer-top{grid-template-columns:repeat(2,1fr);gap:32px}
  .footer-brand{grid-column:1/-1}
  .flow-diagram{grid-template-columns:1fr;gap:14px;padding:30px 20px}
  .flow-arrow{transform:rotate(90deg);padding:8px 0}
  .flow-stats{grid-template-columns:repeat(2,1fr)}
  .dash-body{grid-template-columns:1fr}
  .dash-sidebar{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--line-soft);padding:12px}
  .dash-sidebar-logo,.dash-nav-divider,.dash-user{display:none}
  .dash-nav-item{padding:6px 10px;font-size:11.5px}
  .dash-stats{grid-template-columns:repeat(2,1fr)}
  .dash-grid{grid-template-columns:1fr}
  .hero-character{position:relative;left:auto;top:auto;width:280px;height:380px;margin-bottom:-200px}
  .hero-phone-mockup{margin-left:0}
}
@media(max-width:720px){
  .nav-links,.nav-cta{display:none}
  .nav-hamburger{display:flex}
  .mobile-menu{display:flex}
  section{padding:60px 20px}
  .calc-section,.compare-section,.features-grid-section,.how-section,.pricing-section,.intg-section,.faq-section,.cta-section{padding:60px 20px}
  .hero{padding:40px 20px 60px}
  .hero h1{font-size:34px;letter-spacing:-1px}
  .hero-sub{font-size:16px}
  .section-title{font-size:30px;letter-spacing:-0.6px}
  .features-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .partners-inner{gap:20px}
  .partners-logos{gap:24px}
  .partners-logos img{height:20px}
  .compare-table-wrap{overflow-x:auto}
  .footer-top{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column;text-align:center}
  .cta-title{font-size:28px}
  .hero-phone-mockup{width:270px;height:520px}
  .phone-frame{width:270px;height:520px}
  .hero-chip-stat{left:-30px;top:5%}
  .hero-chip-ai{right:-20px;top:32%}
  .hero-chip-broadcast{left:-30px;bottom:18%}
  .hero-chip-meta{right:-10px;bottom:4%}
  .hero-chip{padding:8px 12px;border-radius:12px}
  .hero-chip-num{font-size:12px}
  .hero-chip-lbl{font-size:9.5px}
  .top-strip{font-size:12px;padding:7px 16px}
}

/* ════════════════════════════════════════════════════════════
   COMPATIBILITY OVERRIDES — for pages still loading old
   clay-theme.css / landing.css / twabot.css alongside this.
   High-specificity rules so the new shared header/footer always
   wins over legacy CSS conflicts.
   ════════════════════════════════════════════════════════════ */

/* Reset legacy fixed/transparent .nav from landing.css */
body nav.nav{
  position:sticky !important;
  top:0 !important;
  left:auto !important;
  right:auto !important;
  height:auto !important;
  padding:0 !important;
  background:rgba(255,255,255,0.92) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  border-bottom:1px solid var(--line-soft) !important;
  z-index:1000 !important;
  display:block !important;
  box-shadow:none !important;
}
body nav.nav.scrolled{
  background:rgba(255,255,255,0.96) !important;
  box-shadow:0 1px 0 var(--line-soft) !important;
}
body nav.nav .nav-inner{
  max-width:1240px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:14px 24px !important;
  gap:24px !important;
  height:auto !important;
  background:transparent !important;
}
body nav.nav .nav-logo{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  color:var(--text) !important;
  font-weight:800 !important;
  font-size:20px !important;
  letter-spacing:-0.4px !important;
}
body nav.nav .nav-logo img{
  width:36px !important;
  height:36px !important;
  border-radius:0 !important;
  object-fit:contain !important;
}
body nav.nav .nav-logo-text{color:var(--text) !important;font-family:inherit !important}
body nav.nav .nav-logo-text span{color:var(--accent) !important}
body nav.nav .nav-links > a{color:var(--text-2) !important;font-weight:500 !important;font-size:15px !important;background:transparent !important;padding:6px 0 !important;border:0 !important}
body nav.nav .nav-links > a:hover{color:var(--brand) !important;background:transparent !important}
body nav.nav .btn-login{color:var(--text-2) !important;background:transparent !important;border:0 !important;font-weight:600 !important;padding:8px 16px !important}
body nav.nav .btn-login:hover{background:var(--bg-soft) !important;color:var(--text) !important}
body nav.nav .btn-trial,
body nav.nav .btn-primary{background:var(--accent) !important;color:#fff !important;border:0 !important;padding:10px 18px !important;border-radius:var(--r) !important;font-weight:700 !important;font-size:14px !important;box-shadow:0 2px 0 #1ea758,0 4px 12px rgba(37,211,102,0.25) !important}
body nav.nav .btn-trial:hover,
body nav.nav .btn-primary:hover{transform:translateY(-1px) !important;background:#1fbf5d !important}

/* Top strip must sit above nav (not under fixed nav) */
body .top-strip{
  position:relative !important;
  display:block !important;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)) !important;
  color:#fff !important;
  padding:9px 20px !important;
  font-size:13px !important;
  font-weight:500 !important;
  text-align:center !important;
  z-index:1001 !important;
}
body .top-strip strong{font-weight:700 !important;color:#fff !important}
body .top-strip a{color:#FFF3B0 !important;border-bottom:1px solid rgba(255,243,176,0.4) !important;margin-left:6px !important;padding-bottom:1px !important}

/* Reset body padding-top that legacy CSS adds for fixed nav */
body{padding-top:0 !important}

/* Mega menu always above other floating elements (e.g. legacy widgets) */
body .nav-mega{z-index:1100 !important}

/* Footer overrides: dark theme must win over legacy white footer */
body footer{
  background:#0A1714 !important;
  color:rgba(255,255,255,0.6) !important;
  padding:64px 24px 28px !important;
  font-size:14px !important;
}
body footer a{color:rgba(255,255,255,0.55) !important}
body footer a:hover{color:var(--accent) !important}
body footer .footer-col h4{color:#fff !important}
body footer .footer-logo-name,
body footer .footer-brand .footer-logo-name{color:#fff !important;font-family:inherit !important}
body footer .footer-brand .footer-logo-name span{color:var(--accent) !important}
body footer .footer-brand p{color:rgba(255,255,255,0.55) !important}
body footer .footer-social a{color:rgba(255,255,255,0.6) !important;background:rgba(255,255,255,0.06) !important}
body footer .footer-bottom{color:rgba(255,255,255,0.4) !important}

/* CTA section above footer keeps brand gradient */
body section.cta-section{background:linear-gradient(135deg,var(--brand),var(--brand-2)) !important;color:#fff !important}
body section.cta-section .cta-title{color:#fff !important}
body section.cta-section .cta-sub,
body section.cta-section .cta-note{color:rgba(255,255,255,0.85) !important}
body section.cta-section .btn-cta{background:#fff !important;color:var(--brand) !important}