@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{--green:#25D366;--dark-green:#128C7E;--dark:#0f172a;--slate:#334155;--light:#f8fafc;--white:#ffffff;--gray:#64748b;--border:#e2e8f0;--radius:16px}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--white);color:var(--dark);overflow-x:hidden}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:16px 40px;display:flex;justify-content:space-between;align-items:center}
.nav-logo{font-size:18px;font-weight:800;color:var(--green)}
.nav-links{display:flex;gap:24px}
.nav-links a{color:var(--gray);text-decoration:none;font-size:13px;font-weight:600;transition:.2s}
.nav-links a:hover{color:var(--green)}
section{padding:80px 40px;max-width:1200px;margin:0 auto}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;padding:120px 40px 80px;max-width:100%}
.hero-bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 20% 50%,rgba(37,211,102,0.1) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(18,140,126,0.05) 0%,transparent 60%),var(--white)}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(37,211,102,0.1);border:1px solid rgba(37,211,102,0.3);color:var(--dark-green);padding:8px 20px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:32px;animation:fadeDown 0.6s ease}
.hero h1{font-size:clamp(36px,6vw,72px);font-weight:900;line-height:1.1;margin-bottom:24px;animation:fadeUp 0.7s ease 0.1s both;color:var(--dark)}
.hero h1 span{background:linear-gradient(135deg,var(--green),var(--dark-green));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:18px;color:var(--gray);max-width:600px;line-height:1.7;margin-bottom:40px;animation:fadeUp 0.7s ease 0.2s both}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer;transition:.3s;text-decoration:none;border:none}
.btn-primary{background:linear-gradient(135deg,var(--green),var(--dark-green));color:var(--white);box-shadow:0 8px 32px rgba(37,211,102,0.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(37,211,102,0.4)}
.btn-outline{background:var(--white);color:var(--dark);border:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.btn-outline:hover{border-color:var(--green);color:var(--green);box-shadow:0 4px 15px rgba(0,0,0,0.1)}
.stats{display:flex;gap:40px;justify-content:center;margin-top:60px;animation:fadeUp 0.7s ease 0.3s both}
.stat{text-align:center}
.stat-num{font-size:36px;font-weight:900;color:var(--green)}
.stat-label{font-size:13px;color:var(--gray);margin-top:4px;font-weight:600}
.section-label{font-size:12px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.section-title{font-size:clamp(28px,4vw,44px);font-weight:800;line-height:1.2;margin-bottom:16px;color:var(--dark)}
.section-desc{font-size:16px;color:var(--gray);line-height:1.7;max-width:600px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:.3s;position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.03)}
.card:hover{border-color:rgba(37,211,102,0.3);transform:translateY(-4px);box-shadow:0 12px 30px rgba(37,211,102,0.1)}
.card-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.card h3{font-size:18px;font-weight:800;margin-bottom:8px;color:var(--dark)}
.card p{font-size:14px;color:var(--gray);line-height:1.6}
.step-flow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:48px}
.step{text-align:center;flex:1;min-width:140px}
.step-num{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--dark-green));color:white;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;margin:0 auto 12px;box-shadow:0 4px 15px rgba(37,211,102,0.3)}
.step h4{font-size:14px;font-weight:700;margin-bottom:6px;color:var(--dark)}
.step p{font-size:12px;color:var(--gray)}
.step-arrow{font-size:24px;color:var(--gray);flex-shrink:0}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.comp-card{border-radius:var(--radius);padding:32px;background:var(--white);box-shadow:0 4px 20px rgba(0,0,0,0.03)}
.comp-card.green{border:1px solid rgba(37,211,102,0.3);background:rgba(37,211,102,0.02)}
.comp-card.blue{border:1px solid rgba(59,130,246,0.3);background:rgba(59,130,246,0.02)}
.comp-title{font-size:20px;font-weight:800;margin-bottom:20px;color:var(--dark)}
.comp-item{display:flex;align-items:start;gap:10px;margin-bottom:14px;font-size:14px;color:var(--slate);font-weight:500}
.comp-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.green .comp-dot{background:var(--green)}
.blue .comp-dot{background:#3b82f6}
.credit-visual{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:32px;margin-top:32px;box-shadow:0 4px 20px rgba(0,0,0,0.03)}
.credit-flow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;margin:24px 0}
.credit-box{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px 24px;text-align:center;min-width:140px;box-shadow:0 2px 10px rgba(0,0,0,0.02)}
.credit-box .emoji{font-size:28px;margin-bottom:8px}
.credit-box h4{font-size:13px;font-weight:800;color:var(--dark)}
.credit-box p{font-size:11px;color:var(--gray);margin-top:4px;font-weight:500}
.arrow-right{font-size:20px;color:var(--gray)}

.role-tabs{display:flex;gap:12px;margin-bottom:32px}
.role-tab{padding:10px 24px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--white);color:var(--gray);transition:.2s;box-shadow:0 2px 5px rgba(0,0,0,0.02)}
.role-tab.active{background:var(--dark);color:var(--white);border-color:var(--dark)}
.role-content{display:none;grid-template-columns:1fr 1fr;gap:16px}
.role-content.active{display:grid}
.role-item{display:flex;align-items:center;gap:12px;padding:16px;background:var(--white);border:1px solid var(--border);border-radius:12px;font-size:14px;font-weight:600;color:var(--slate);box-shadow:0 2px 10px rgba(0,0,0,0.02)}
.tag{display:inline-block;padding:4px 12px;border-radius:100px;font-size:11px;font-weight:800;background:rgba(37,211,102,0.1);color:var(--dark-green);border:1px solid rgba(37,211,102,0.2)}
.divider{height:1px;background:var(--border);margin:0 40px}
.footer{text-align:center;padding:60px 40px;background:var(--light);border-top:1px solid var(--border)}
.footer-logo{font-size:28px;font-weight:900;color:var(--green);margin-bottom:16px}
.footer p{color:var(--gray);font-size:14px;margin-bottom:24px;font-weight:500}
.footer-links{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
.footer-links a{color:var(--slate);text-decoration:none;font-size:13px;font-weight:600;transition:.2s}
.footer-links a:hover{color:var(--green)}
.animate{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease}
.animate.visible{opacity:1;transform:none}
@keyframes fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
.dot-pulse{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;animation:pulse 2s infinite}
.meta-tier-table{width:100%;border-collapse:collapse;margin-top:24px}
.meta-tier-table th{padding:12px 16px;font-size:12px;font-weight:800;color:var(--dark);text-transform:uppercase;letter-spacing:1px;border-bottom:2px solid var(--border);text-align:left}
.meta-tier-table td{padding:12px 16px;font-size:14px;color:var(--slate);border-bottom:1px solid var(--border);font-weight:500}
.meta-tier-table tr:last-child td{border:none}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;animation:fadeUp 0.7s ease 0.3s both}

/* Marketing Animations & Visual Flows */
.marketing-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.anim-box { background: var(--white); border: 1px solid var(--border); border-radius: 24px; padding: 40px; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

/* ─── Engagement template cards ────────────────────── */
.eng-cards-wrap {
  flex: 1.5;
  display: flex;
  flex-direction: row;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.eng-card-item { flex: 0 0 auto; }

/* ─── System Architecture Flow ───────────────────── */
.arch-flow-box { background: var(--white); border: 1px solid var(--border); border-radius: 24px; padding: 40px; margin-top: 32px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.arch-flow { display: flex; justify-content: space-between; align-items: flex-start; position: relative; height: auto; padding: 20px 20px 0; margin-top: 20px; margin-bottom: 20px; }
.arch-node-wrap { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; gap: 8px; }
.arch-step-badge { width: 22px; height: 22px; background: var(--green); color: white; border-radius: 50%; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; position: absolute; top: -8px; right: -8px; z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.arch-node { width: 80px; height: 80px; border-radius: 20px; display: flex; align-items: center; justify-content: center; position: relative; border: 2px solid var(--border); background: var(--white); box-shadow: 0 8px 20px rgba(0,0,0,0.06); transition: transform 0.3s, box-shadow 0.3s; }
.arch-node:hover { transform: translateY(-6px) scale(1.05); }
.arch-node-label { font-size: 13px; font-weight: 700; color: var(--dark); text-align: center; white-space: nowrap; }
.arch-node-sub { font-size: 11px; color: var(--gray); text-align: center; font-weight: 500; }
.arch-node-customer { border-color: rgba(59,130,246,0.3); background: #f5f9fe; }
.arch-node-customer:hover { box-shadow: 0 12px 30px rgba(59,130,246,0.2); }
.arch-node-meta { border-color: rgba(24,119,242,0.3); background: #f5f9fe; }
.arch-node-meta:hover { box-shadow: 0 12px 30px rgba(24,119,242,0.2); }
.arch-node-platform { border-color: var(--dark); background: var(--dark); }
.arch-node-platform:hover { box-shadow: 0 12px 30px rgba(15,23,42,0.3); }
.arch-node-ai { border-color: rgba(139,92,246,0.3); background: #f5f3ff; }
.arch-node-ai:hover { box-shadow: 0 12px 30px rgba(139,92,246,0.2); }
.arch-node-crm { border-color: rgba(37,211,102,0.3); background: #ebfbf0; }
.arch-node-crm:hover { box-shadow: 0 12px 30px rgba(37,211,102,0.2); }
.arch-line { position: absolute; top: 60px; left: 60px; right: 60px; height: 3px; background: linear-gradient(90deg, rgba(59,130,246,0.3), rgba(24,119,242,0.3), rgba(15,23,42,0.3), rgba(139,92,246,0.3), rgba(37,211,102,0.3)); z-index: 1; border-radius: 2px; }
.arch-pulse { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; background: var(--green); border-radius: 50%; box-shadow: 0 0 12px var(--green), 0 0 24px var(--green); animation: archTravel 4s cubic-bezier(0.4,0,0.2,1) infinite; }
@keyframes archTravel { 0%{left:0%;opacity:0;} 5%{opacity:1;} 95%{opacity:1;} 100%{left:100%;opacity:0;} }

.phone-mockup { width: 280px; height: 520px; background: #efeae2; border-radius: 40px; border: 10px solid #0f172a; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; box-shadow: -15px 25px 50px rgba(15,23,42,0.2); position: relative; }
.phone-header { background: #008069; padding: 12px 16px; display: flex; align-items: center; gap: 12px; color: white; flex-shrink: 0; position: relative; z-index: 10; }
.phone-avatar { width: 32px; height: 32px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.phone-chat { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; position: relative; z-index: 1; }
.phone-input-bar { flex-shrink: 0; padding: 8px 12px; display: flex; align-items: center; gap: 8px; background: #f0f2f5; border-top: 1px solid rgba(0,0,0,0.06); position: relative; z-index: 10; }
.phone-input-bar .input-field { flex: 1; background: white; border-radius: 20px; padding: 8px 14px; font-size: 11px; color: #667781; border: none; }
.phone-input-bar .send-btn { width: 32px; height: 32px; background: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; }
.msg { animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 12px; line-height: 1.4; opacity: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.1); color: #111b21; position: relative; }
.msg-in { background: white; align-self: flex-start; border-top-left-radius: 4px; transform-origin: top left; }
.msg-out { background: #d9fdd3; align-self: flex-end; border-top-right-radius: 4px; transform-origin: top right; }
.msg-time { font-size: 9px; color: #667781; text-align: right; margin-top: 4px; display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.msg-time .read-tick { color: #53bdeb; font-size: 10px; }

/* ─── Typing Indicator ─────────────────────────── */
.typing-indicator { animation: popIn 0.3s ease both; background: white; align-self: flex-start; padding: 12px 18px; border-radius: 12px; border-top-left-radius: 4px; display: flex; gap: 4px; opacity: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.typing-dot { animation: typingBounce 1.4s ease-in-out infinite; width: 6px; height: 6px; background: #94a3b8; border-radius: 50%; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-6px); opacity: 1; } }

.sim-typing { animation: typeText 1.5s steps(8, end) infinite, blinkCursor 0.5s step-end infinite; animation-delay: 2s, 0s; display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; border-right: 2px solid #94a3b8; width: 0; }
@keyframes typeText { 0% { width: 0; } 20%, 100% { width: 42px; } }
@keyframes blinkCursor { 50% { border-color: transparent; } }

.wa-template-btn.sim-click { animation: simBtnClick 16s infinite; animation-delay: 3.4s; position: relative; overflow: hidden; }
.wa-template-btn.sim-click-2 { animation: simBtnClick 16s infinite; animation-delay: 6.9s; position: relative; overflow: hidden; }
@keyframes simBtnClick {
  0%, 2% { background: transparent; transform: scale(1); }
  3%, 5% { background: rgba(0,0,0,0.05); transform: scale(0.96); }
  6%, 100% { background: transparent; transform: scale(1); }
}

/* ─── Virtual Mouse Cursor ─────────────────────── */
.virtual-cursor { position: absolute; top: 0; left: 0; color: #1e293b; font-size: 20px; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.2)); z-index: 100; pointer-events: none; animation: moveCursor 16s ease-in-out infinite; transform: translate(140px, 500px); }
@keyframes moveCursor {
  0%, 15% { transform: translate(140px, 500px) scale(1); opacity: 0; }
  16% { transform: translate(140px, 500px) scale(1); opacity: 1; }
  20% { transform: translate(140px, 195px) scale(1); }
  22% { transform: translate(140px, 195px) scale(0.85); color: var(--green); } /* click View Plans */
  24% { transform: translate(140px, 195px) scale(1); color: #1e293b; }
  27% { transform: translate(250px, 350px) scale(1); }
  40% { transform: translate(250px, 350px) scale(1); }
  43% { transform: translate(140px, 220px) scale(1); }
  44.5% { transform: translate(140px, 220px) scale(0.85); color: var(--green); } /* click Pay Now */
  46% { transform: translate(140px, 220px) scale(1); color: #1e293b; }
  50%, 100% { transform: translate(250px, 500px) scale(1); opacity: 0; }
}

/* ─── WhatsApp Interactive Templates ─────────────── */
.wa-template { padding: 0; overflow: hidden; background: white; border-radius: 12px; border-top-left-radius: 4px; align-self: flex-start; max-width: 90%; }
.wa-template.msg-out { background: #d9fdd3; align-self: flex-end; border-top-left-radius: 12px; border-top-right-radius: 4px; }
.wa-template-body { padding: 10px 14px; }
.wa-template-footer { font-size: 10px; color: #667781; padding: 0 14px 8px; }
.wa-template-btn { padding: 10px 0; text-align: center; color: #00a884; font-weight: 600; border-top: 1px solid rgba(0,0,0,0.08); font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background 0.2s; }
.wa-template-btn:hover { background: rgba(0,0,0,0.03); }
.wa-template-btn i { font-size: 14px; }

.chat-scroll-wrapper { animation: scrollUpChat 16s ease-in-out infinite; display: flex; flex-direction: column; gap: 12px; width: 100%; transform: translateY(0); }
@keyframes scrollUpChat { 
  0%, 30% { transform: translateY(0); }
  40%, 55% { transform: translateY(-150px); }
  65%, 80% { transform: translateY(-320px); }
  90%, 100% { transform: translateY(-480px); }
}

.msg.d1 { animation-delay: 0.5s; }
.msg.d2 { animation-delay: 2s; }
.msg.d3 { animation-delay: 4s; }
.msg.d4 { animation-delay: 5.5s; }
.msg.d5 { animation-delay: 7.5s; }
.msg.d6 { animation-delay: 9s; }
.msg.d7 { animation-delay: 11s; }
.msg.d8 { animation-delay: 12.5s; }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.8) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

.flow-diagram { display: flex; justify-content: space-between; align-items: flex-start; position: relative; height: auto; margin-top: 40px; padding: 10px 20px 0; }
.flow-node-wrap { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; gap: 8px; }
.flow-node { width: 64px; height: 64px; background: var(--white); border-radius: 16px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; border: 2px solid var(--border); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.flow-node.active { border-color: var(--green); box-shadow: 0 0 30px rgba(37,211,102,0.2); animation: pulseGlow 2s infinite; }
.flow-line { position: absolute; top: 42px; left: 50px; right: 50px; height: 3px; background: linear-gradient(90deg, rgba(59,130,246,0.2), rgba(37,211,102,0.4), rgba(139,92,246,0.2)); z-index: 1; border-radius: 2px; }
.flow-pulse { position: absolute; top: -3px; left: 0; width: 9px; height: 9px; background: var(--green); border-radius: 50%; box-shadow: 0 0 10px var(--green), 0 0 20px var(--green); animation: travelLine 3s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.flow-label { font-size: 13px; font-weight: 700; color: var(--dark); text-align: center; white-space: nowrap; }
@keyframes pulseGlow { 0% { box-shadow: 0 0 10px rgba(37,211,102,0.1); } 50% { box-shadow: 0 0 30px rgba(37,211,102,0.3); } 100% { box-shadow: 0 0 10px rgba(37,211,102,0.1); } }
@keyframes travelLine { 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

@media(max-width:768px) {
  .marketing-section { grid-template-columns: 1fr; }
  
  .arch-flow { flex-direction: column; height: auto; padding: 20px 0; gap: 30px; align-items: center; }
  .arch-line { top: 60px; bottom: 60px; left: 50%; right: auto; width: 3px; height: auto; transform: translateX(-50%); background: linear-gradient(180deg, rgba(59,130,246,0.3), rgba(24,119,242,0.3), rgba(15,23,42,0.3), rgba(139,92,246,0.3), rgba(37,211,102,0.3)); }
  .arch-pulse { top: 0; left: -3px; animation: archTravelVert 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
  
  .flow-diagram { flex-direction: column; height: auto; padding: 20px 0; gap: 30px; align-items: center; }
  .flow-line { top: 52px; bottom: 52px; left: 50%; right: auto; width: 3px; height: auto; transform: translateX(-50%); background: linear-gradient(180deg, rgba(59,130,246,0.2), rgba(37,211,102,0.4), rgba(139,92,246,0.2)); }
  .flow-pulse { top: 0; left: -3px; animation: travelLineVert 3s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
}
@keyframes archTravelVert { 0% { top: 0%; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes travelLineVert { 0% { top: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* ─── 3D Card Effect ───────────────────────────────── */
.card-3d { transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.23,1,0.32,1), box-shadow 0.4s; }
.card-3d:hover { transform: translateY(-8px) rotateX(4deg) rotateY(-4deg); box-shadow: 0 24px 48px rgba(37,211,102,0.12), 0 8px 16px rgba(0,0,0,0.06); }
.card-3d .card-icon { transition: transform 0.4s; }
.card-3d:hover .card-icon { transform: scale(1.15) translateZ(20px); }

/* ─── FA Icon sizing inside card ──────────────────── */
.card-icon i { font-size: 22px; }

/* ─── Floating blobs hero bg ─────────────────────── */
.hero-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; animation: floatBlob 8s ease-in-out infinite; pointer-events: none; }
.hero-blob-1 { width: 500px; height: 500px; background: var(--green); top: -100px; left: -100px; animation-delay: 0s; }
.hero-blob-2 { width: 400px; height: 400px; background: #3b82f6; bottom: -80px; right: -80px; animation-delay: -4s; }
@keyframes floatBlob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,30px) scale(1.05); } }

/* ─── Shimmer stat numbers ───────────────────────── */
.stat-num { background: linear-gradient(90deg, var(--green) 0%, var(--dark-green) 40%, var(--green) 80%); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 3s linear infinite; }
@keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }

/* ─── Animated gradient section label ───────────── */
.section-label { background: linear-gradient(90deg, var(--green), var(--dark-green), var(--green)); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 4s linear infinite; }

/* ─── Hero SVG illustration ──────────────────────── */
.hero-illustration { margin-top: 40px; display: flex; justify-content: center; animation: fadeUp 0.8s ease 0.5s both; }
.hero-illustration svg { max-width: 480px; width: 100%; filter: drop-shadow(0 20px 40px rgba(37,211,102,0.15)); }

/* ─── Hero SVG Motion Graphics ───────────────────── */
.msg-bubble { animation: popInMsg 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
.msg-1 { animation-delay: 1.0s; }
.msg-2 { animation-delay: 1.6s; }
.msg-3 { animation-delay: 2.2s; }
.msg-4 { animation-delay: 2.8s; }

.float-card { animation: floatSvgCard 4s ease-in-out infinite; }
.float-card-left { animation-delay: 0s; transform-origin: 70px 154px; }
.float-card-right { animation-delay: 2s; transform-origin: 410px 154px; }

.pulse-line { stroke-dasharray: 6 4; animation: dashMove 1.5s linear infinite; }
.pulse-circle { animation: pulseCircle 4s ease-in-out infinite; }

@keyframes popInMsg { 0% { opacity: 0; transform: translateY(8px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes floatSvgCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes dashMove { to { stroke-dashoffset: -20; } }
@keyframes pulseCircle { 0%, 100% { transform: scale(1); opacity: 0.04; } 50% { transform: scale(1.15); opacity: 0.12; } }

/* ─── Floating step numbers ──────────────────────── */
.step-num { animation: floatNum 3s ease-in-out infinite; }
.step:nth-child(1) .step-num { animation-delay: 0s; }
.step:nth-child(3) .step-num { animation-delay: 0.5s; }
.step:nth-child(5) .step-num { animation-delay: 1s; }
.step:nth-child(7) .step-num { animation-delay: 1.5s; }
.step:nth-child(9) .step-num { animation-delay: 2s; }
@keyframes floatNum { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ─── Spin-in arch nodes ─────────────────────────── */
.arch-node { animation: spinIn 0.8s cubic-bezier(0.23,1,0.32,1) both; }
.arch-node:nth-child(2) { animation-delay: 0.1s; }
.arch-node:nth-child(3) { animation-delay: 0.2s; }
.arch-node:nth-child(4) { animation-delay: 0.3s; }
.arch-node:nth-child(5) { animation-delay: 0.4s; }
.arch-node:nth-child(6) { animation-delay: 0.5s; }
@keyframes spinIn { from { opacity:0; transform: scale(0.5) rotate(-20deg); } to { opacity:1; transform: scale(1) rotate(0); } }



/* ─── Enterprise card icons (FA) ─────────────────── */
.ent-icon { font-size: 28px; margin-bottom: 16px; display: block; }

@media(max-width:768px) { .hero-blob { display: none; } }

/* ─── Footer Social Icons ────────────────────────── */
.footer-social { display:flex;gap:16px;justify-content:center;margin:20px 0; }
.footer-social a { width:40px;height:40px;background:white;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gray);font-size:16px;transition:.3s;text-decoration:none; }
.footer-social a:hover { background:var(--green);color:white;border-color:var(--green);transform:translateY(-3px);box-shadow:0 8px 20px rgba(37,211,102,0.3); }

/* ─── Floating WA Button animation ──────────────── */
@keyframes floatBtn { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-8px) scale(1.05);} }
#wa-float:hover { transform:scale(1.1)!important;box-shadow:0 12px 32px rgba(37,211,102,0.5)!important; }

/* ─── Credit box icons ───────────────────────────── */
.credit-box .cb-icon { font-size:28px;margin-bottom:8px;color:var(--dark-green); }

/* ─── Regenerated Strategies (Native HTML) ───────── */
.text-center { text-align: center; }
.strategy-block h2 { font-weight: 800; }

/* Orbit container */
.orbit-container { position: relative; width: 500px; height: 500px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.orbit-circle { position: absolute; width: 400px; height: 400px; border: 2px dashed var(--border); border-radius: 50%; z-index: 1; }
.orbit-center { position: relative; z-index: 2; background: white; border-radius: 32px; }
.orbit-node { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; background: white; padding: 8px 16px; border-radius: 100px; border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.orbit-node .on-icon { width: 40px; height: 40px; background: #ebfbf0; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--green); color: var(--green); font-size: 16px; }
.orbit-node .on-label { font-weight: 700; color: var(--dark); font-size: 14px; }
.orbit-node.n1 { top: 80px; left: -40px; }
.orbit-node.n2 { top: 80px; right: -40px; flex-direction: row-reverse; }
.orbit-node.n3 { bottom: 80px; right: -40px; flex-direction: row-reverse; }
.orbit-node.n4 { bottom: 80px; left: -40px; }

/* Engagement Glow */
.engagement-glow { position: absolute; top: 50%; left: 50%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(37,211,102,0.15) 0%, rgba(37,211,102,0) 70%); transform: translate(-50%, -50%); z-index: 1; border-radius: 50%; }

/* Tree Diagram */
.tree-diagram { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.tree-top-line { width: 2px; height: 40px; background: var(--dark); position: relative; }
.tree-top-line::before { content: ''; position: absolute; top: 0; left: -4px; width: 10px; height: 10px; background: var(--dark); border-radius: 50%; }
.tree-horizontal-line { width: 75%; height: 2px; background: var(--dark); border-radius: 2px; }
.tree-nodes { display: flex; justify-content: space-between; width: 100%; margin-top: 0; }
.tree-node-wrap { display: flex; flex-direction: column; align-items: center; position: relative; width: 25%; }
.tree-vert-line { width: 2px; height: 30px; background: var(--dark); }

@media(max-width: 768px) {
  .orbit-container { width: 100%; height: auto; padding: 40px 0; flex-direction: column; gap: 16px; }
  .orbit-circle { display: none; }
  .orbit-node { position: relative; top: auto; left: auto; right: auto; bottom: auto; flex-direction: row!important; width: 80%; justify-content: center; }
  .mobile-eng-block { flex-direction: column; text-align: center; }
  .mobile-eng-block h2 { font-size: 32px!important; }
  .tree-horizontal-line { display: none; }
  .tree-nodes { flex-direction: column; align-items: center; gap: 24px; }
  .tree-top-line { display: none; }
  .tree-node-wrap { width: 100%; }
  .tree-vert-line { height: 20px; }
}

/* ─── Broadcast / Scheduled Workflow ─────────────── */
.bw-flow { display: flex; flex-direction: column; gap: 0; }

.bw-step {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 14px 0;
  animation: bwStepIn 0.5s cubic-bezier(0.23,1,0.32,1) both;
  animation-delay: var(--delay, 0s);
}
@keyframes bwStepIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

.bw-num {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--green); color: white; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(37,211,102,0.3);
}
.bw-title { font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 3px; }
.bw-desc { font-size: 12px; color: var(--gray); line-height: 1.5; font-weight: 500; }

.bw-connector {
  display: flex; align-items: center; padding-left: 15px; height: 20px;
}
.bw-connector span {
  display: block; width: 2px; height: 100%; background: var(--green);
  opacity: 0.3; border-radius: 2px;
  animation: connectorGrow 0.4s ease both;
}
@keyframes connectorGrow { from { height: 0; } to { height: 100%; } }

/* Delivery bubble badges */
.bw-bubble {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 700;
  animation: bubblePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.bw-bubble.sent    { background: rgba(37,211,102,0.12); color: var(--green); }
.bw-bubble.read    { background: rgba(99,102,241,0.12); color: #6366f1; }
.bw-bubble.failed  { background: rgba(239,68,68,0.1); color: #ef4444; }
@keyframes bubblePop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }

/* Scheduled queue list */
.sched-queue { display: flex; flex-direction: column; gap: 8px; }
.sq-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--white); border-radius: 10px; border: 1px solid var(--border);
  animation: sqSlide 0.4s ease both;
  animation-delay: var(--sq-delay, 0s);
}
.sq-item span:nth-child(2) { flex: 1; font-size: 13px; font-weight: 600; color: var(--dark); }
.sq-time { font-size: 11px; color: var(--gray); font-weight: 500; }
.sq-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 100px; }
@keyframes sqSlide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media(max-width: 768px) {
  #broadcast-workflow .animate > div:last-child { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVE — max-width: 768px
   ════════════════════════════════════════════════════ */
@media(max-width: 768px) {

  /* ── Nav ── */
  .nav { padding: 12px 20px; }
  .nav-links { display: none; }          /* hide text nav links on mobile */
  .nav-logo { font-size: 16px; }
  .nav .btn { padding: 8px 16px; font-size: 12px; }

  /* ── Sections ── */
  section { padding: 60px 20px; }
  .divider { margin: 0 20px; }

  /* ── Hero ── */
  .hero { padding: 100px 20px 60px; min-height: auto; }
  .hero h1 { font-size: clamp(28px, 8vw, 44px); }
  .hero p  { font-size: 15px; }
  .stats   { gap: 20px; flex-wrap: wrap; }
  .stat-num { font-size: 28px; }
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { width: 100%; max-width: 300px; justify-content: center; }
  .hero-blob-1 { width: 250px; height: 250px; }
  .hero-blob-2 { width: 200px; height: 200px; }

  /* ── Section headings ── */
  .section-title { font-size: clamp(22px, 6vw, 32px); }
  .section-desc  { font-size: 14px; }

  /* ── Grids → single column ── */
  .grid-2 { grid-template-columns: 1fr; gap: 24px; }
  .grid-3 { grid-template-columns: 1fr; gap: 16px; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* ── Cards ── */
  .card  { padding: 20px; }
  .card h3 { font-size: 16px; }
  .card-3d:hover { transform: none; box-shadow: none; }

  /* ── Step flow ── */
  .step-flow { flex-direction: column; align-items: center; gap: 12px; }
  .step-arrow { transform: rotate(90deg); }
  .step { min-width: unset; width: 100%; max-width: 320px; }

  /* ── Comparison cards ── */
  .comparison { grid-template-columns: 1fr; gap: 16px; }
  .comp-card { padding: 20px; }

  /* ── Credit flow ── */
  .credit-flow { flex-direction: column; align-items: center; gap: 12px; }
  .arrow-right { transform: rotate(90deg); }
  .credit-box { width: 100%; max-width: 300px; }
  .credit-visual { padding: 20px; }

  /* ── Meta table ── */
  .meta-tier-table { font-size: 12px; }
  .meta-tier-table th,
  .meta-tier-table td { padding: 8px 10px; }
  /* hide "Who Initiates" column on mobile */
  .meta-tier-table th:nth-child(2),
  .meta-tier-table td:nth-child(2) { display: none; }

  /* ── Role tabs ── */
  .role-tabs { flex-wrap: wrap; gap: 8px; }
  .role-tab { padding: 8px 16px; font-size: 12px; }
  .role-content { grid-template-columns: 1fr; gap: 10px; }
  .role-item { padding: 12px; }

  /* ── Onboarding cards ── */
  #onboarding .grid-3,
  #onboarding .grid-2 { grid-template-columns: 1fr; }

  /* ── Broadcast workflow ── */
  #broadcast-workflow .animate > div { grid-template-columns: 1fr !important; gap: 20px; }
  .bw-step { gap: 12px; }
  .bw-title { font-size: 13px; }
  .sq-item  { flex-wrap: wrap; gap: 6px; }
  .sq-time  { width: 100%; margin-left: 28px; }

  /* ── Integrations grid ── */
  #integrations .animate > div > div { padding: 20px; }

  /* ── Hero SVG ── */
  .hero-illustration svg { max-width: 320px; }
  .float-card { display: none; }       /* hide side cards on small screens */

  /* ── Footer ── */
  .footer { padding: 40px 20px; }
  .footer-logo { font-size: 22px; }
  .footer-links { gap: 14px; }
  .footer-links a { font-size: 12px; }

  /* ── Float WA button ── */
  #wa-float { width: 48px; height: 48px; font-size: 22px; bottom: 20px; right: 20px; }

  /* ── Scroll progress ── */
  #scroll-progress { height: 2px; }
}

/* ── Extra-small phones (360px) ── */
@media(max-width: 400px) {
  .hero h1 { font-size: 26px; }
  .grid-4  { grid-template-columns: 1fr; }
  .stats   { flex-direction: column; align-items: center; gap: 16px; }
  .nav-logo { font-size: 14px; }
  .btn     { padding: 12px 20px; font-size: 13px; }
}

/* ── Marketing / Phone mockup section ── */
@media(max-width: 768px) {

  /* AI comparison phones → stack vertically, shrink */
  .marketing-section { grid-template-columns: 1fr !important; gap: 20px; }
  
  /* The full-width chatbot comparison box */
  .anim-box { padding: 24px 16px !important; }
  .anim-box h3 { font-size: 20px !important; }
  .anim-box > div > div[style*="display:flex;justify-content:center;gap:60px"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
  }

  /* Phone mockups: scale down more aggressively */
  .phone-mockup { 
    width: 240px !important; 
    height: 440px !important; 
    transform: none !important; 
    margin: 0 auto !important;
  }

  /* Arch flow: horizontal → vertical stacking */
  .arch-flow-box { padding: 24px 16px; }
  .arch-flow { 
    flex-direction: column !important; 
    align-items: center !important; 
    gap: 20px !important; 
    height: auto !important;
    padding: 10px 0 !important;
  }
  .arch-line { display: none; }  /* hide the absolute-positioned connector line */
  .arch-node { width: 64px; height: 64px; }
  .arch-node-label { font-size: 12px; white-space: normal; text-align: center; max-width: 80px; }

  /* Orbit container → simple vertical list */
  .orbit-container { 
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 0 !important;
  }
  .orbit-circle { display: none !important; }
  .orbit-node { 
    position: relative !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    flex-direction: row !important;
    width: 90% !important;
    max-width: 320px !important;
    justify-content: flex-start !important;
  }
  .orbit-center { 
    position: relative !important;
    width: auto !important;
    margin: 0 auto 16px !important;
    padding: 20px !important;
    text-align: center !important;
  }
  .engagement-glow { display: none; }

  /* Inline grid inside marketing section panels */
  .mobile-eng-block { flex-direction: column !important; gap: 24px !important; }
  .mobile-eng-block h2 { font-size: 28px !important; }

  /* Engagement template cards — stack on mobile */
  .eng-cards-wrap { flex-direction: column !important; align-items: center !important; gap: 20px !important; }
  .eng-card-item { width: 100%; display: flex; flex-direction: column; align-items: center; }

  /* Tree diagram → vertical */
  .tree-diagram { padding: 0; }
  .tree-horizontal-line { display: none !important; }
  .tree-nodes { flex-direction: column !important; align-items: center !important; gap: 16px !important; }
  .tree-node-wrap { width: 100% !important; max-width: 260px !important; }
  .tree-top-line { display: none !important; }
  .tree-vert-line { height: 16px !important; }

  /* Campaign flow diagram */
  .flow-diagram { 
    flex-direction: column !important;
    height: auto !important;
    gap: 20px !important;
    padding: 10px 0 !important;
  }
  .flow-line { display: none; }
  .flow-label { font-size: 11px; }
  .flow-node { width: 56px; height: 56px; }
}