/* Rudra Association — Professional Pro Theme v7 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Devanagari:wght@400;600;700&display=swap');

:root {
  --bg: #050810;
  --bg2: #0a0f1e;
  --card: rgba(15, 23, 42, 0.65);
  --glass: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(124, 58, 237, 0.35);
  --text: #f1f5f9;
  --muted: #94a3b8;
  --purple: #a855f7;
  --purple2: #7c3aed;
  --blue: #3b82f6;
  --cyan: #06b6d4;
  --green: #25d366;
  --gold: #fbbf24;
  --grad: linear-gradient(135deg, #7c3aed, #3b82f6, #06b6d4);
  --grad-btn: linear-gradient(135deg, #7c3aed, #2563eb);
  --wa-grad: linear-gradient(135deg, #25d366, #128C7E);
  --radius: 16px;
  --nav-h: 72px;
  --topbar-h: 36px;
  --max: 1200px;
  --font: 'Inter', system-ui, sans-serif;
  --font-hi: 'Noto Sans Devanagari', var(--font);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(124,58,237,0.18), transparent),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(59,130,246,0.12), transparent),
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(6,182,212,0.08), transparent);
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
.container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; position: relative; z-index: 1; }

/* ── TOP BAR ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  height: var(--topbar-h);
  background: rgba(5, 8, 16, 0.95);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  font-size: 0.72rem; color: var(--muted);
}
.topbar-inner {
  width: min(var(--max), calc(100% - 32px)); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.topbar-inner span { display: flex; align-items: center; gap: 6px; }
.topbar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
.topbar-live {
  padding: 4px 12px; border-radius: 999px;
  background: var(--grad-btn); color: #fff; font-weight: 600; font-size: 0.7rem;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── NAV ── */
.nav {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  transition: background .3s, backdrop-filter .3s, border .3s;
}
.nav.scrolled {
  background: rgba(5, 8, 16, 0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 0.95rem; letter-spacing: .04em; }
.logo-img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--gold); }
.logo-text span { color: var(--gold); }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-size: 0.88rem; font-weight: 500; color: var(--muted); transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 12px; font-family: inherit;
  font-size: 0.88rem; font-weight: 600; border: none; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.btn:active { transform: scale(.98); }
.btn-wa { background: var(--wa-grad); color: #fff; box-shadow: 0 8px 32px rgba(37,211,102,.3); }
.btn-wa:hover { box-shadow: 0 12px 40px rgba(37,211,102,.45); }
.btn-grad { background: var(--grad-btn); color: #fff; box-shadow: 0 8px 32px rgba(124,58,237,.35); }
.btn-grad:hover { box-shadow: 0 12px 40px rgba(124,58,237,.5); }
.btn-outline {
  background: transparent; color: var(--text);
  border: 1px solid rgba(255,255,255,.2);
}
.btn-outline:hover { border-color: var(--purple); color: var(--purple); }
.btn-sm { padding: 10px 18px; font-size: 0.82rem; }
.btn-gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1200; font-weight: 700; }

/* ── HERO ── */
.hero {
  padding: calc(var(--topbar-h) + var(--nav-h) + 24px) 0 64px;
  min-height: auto;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(124,58,237,.15); border: 1px solid rgba(168,85,247,.35);
  font-size: 0.72rem; font-weight: 600; color: var(--purple); margin-bottom: 20px;
}
.hero h1 {
  font-family: var(--font-hi);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800; line-height: 1.15; margin-bottom: 16px;
}
.hero h1 .grad {
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub {
  font-size: 0.95rem; color: var(--muted); margin-bottom: 24px; max-width: 520px;
}
.hero-checks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px;
}
.hero-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--muted);
}
.hero-check::before {
  content: '✓'; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(37,211,102,.2); color: var(--green);
  display: grid; place-items: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.hero-rating {
  display: flex; align-items: center; gap: 12px; font-size: 0.82rem; color: var(--muted);
}
.hero-stars { color: var(--gold); letter-spacing: 2px; }

/* Hero Hub Graphic */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 380px; }
.hero-hub {
  position: relative; width: min(420px, 100%); aspect-ratio: 1;
}
.hub-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed rgba(124,58,237,.3);
  animation: spin 40s linear infinite;
}
.hub-ring-2 { inset: 8%; border-color: rgba(59,130,246,.25); animation-direction: reverse; animation-duration: 30s; }
.hub-ring-3 { inset: 16%; border-color: rgba(6,182,212,.2); animation-duration: 50s; }
@keyframes spin { to { transform: rotate(360deg); } }
.hub-center {
  position: absolute; inset: 28%; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.4), rgba(5,8,16,.9));
  border: 2px solid rgba(168,85,247,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 16px;
  box-shadow: 0 0 60px rgba(124,58,237,.35);
  animation: hubPulse 3s ease-in-out infinite;
}
@keyframes hubPulse {
  0%,100% { box-shadow: 0 0 40px rgba(124,58,237,.3); }
  50% { box-shadow: 0 0 80px rgba(124,58,237,.55); }
}
.hub-center strong { font-size: 0.75rem; color: var(--purple); letter-spacing: .1em; }
.hub-center span { font-size: 0.65rem; color: var(--muted); margin-top: 4px; }
.hub-node {
  position: absolute; width: 76px; padding: 10px 6px;
  background: rgba(8,12,24,.85); backdrop-filter: blur(16px);
  border: 1px solid rgba(124,58,237,.35); border-radius: 14px;
  text-align: center; font-size: 0.62rem; color: var(--muted);
  transition: transform .35s, border-color .35s, box-shadow .35s;
  z-index: 5;
}
.hub-node-label { display: block; font-weight: 600; letter-spacing: .04em; }
.hub-node:hover, .hub-node.active {
  transform: scale(1.1); border-color: var(--cyan);
  box-shadow: 0 0 30px rgba(6,182,212,.45), inset 0 0 20px rgba(124,58,237,.15);
}
.hub-node-icon { font-size: 1.3rem; display: block; margin-bottom: 4px; }
.hub-node[data-hub="wa"] { top: -2%; left: 50%; transform: translateX(-50%); }
.hub-node[data-hub="ai"] { top: 16%; right: -2%; }
.hub-node[data-hub="lead"] { bottom: 16%; right: -2%; }
.hub-node[data-hub="call"] { bottom: -2%; left: 50%; transform: translateX(-50%); }
.hub-node[data-hub="crm"] { bottom: 16%; left: -2%; }
.hub-node[data-hub="pay"] { top: 16%; left: -2%; }
.hub-node.active[data-hub="call"],
.hub-node.active[data-hub="wa"] { transform: translateX(-50%) scale(1.1); }

/* Mobile hero image fallback */
.hero-mobile-img { display: none; width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }

/* ── STATS STRIP ── */
.stats-strip {
  padding: 32px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: rgba(10,15,30,.6);
}
.stats-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; text-align: center;
}
.stat-num { font-size: 1.5rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-label { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }

/* ── SECTIONS ── */
section { padding: 72px 0; position: relative; z-index: 1; }
.section-head { text-align: center; margin-bottom: 48px; }
.section-tag {
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  background: rgba(124,58,237,.12); border: 1px solid rgba(168,85,247,.3);
  font-size: 0.72rem; font-weight: 600; color: var(--purple);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px;
}
.section-head h2 {
  font-family: var(--font-hi);
  font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 8px;
}
.section-head p { color: var(--muted); font-size: 0.92rem; max-width: 560px; margin: 0 auto; }

/* ── SERVICE GRID ── */
.services-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.svc-card {
  padding: 22px 18px; border-radius: var(--radius);
  background: var(--card); backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.svc-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow);
  box-shadow: 0 16px 48px rgba(124,58,237,.15);
}
.svc-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 14px;
}
.svc-icon--green { background: rgba(37,211,102,.15); }
.svc-icon--purple { background: rgba(168,85,247,.15); }
.svc-icon--blue { background: rgba(59,130,246,.15); }
.svc-icon--cyan { background: rgba(6,182,212,.15); }
.svc-icon--gold { background: rgba(251,191,36,.15); }
.svc-icon--pink { background: rgba(236,72,153,.15); }
.svc-card h3 { font-size: 0.92rem; font-weight: 700; margin-bottom: 6px; }
.svc-card p { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }

/* ── AI ASSISTANT BANNER ── */
.ai-banner {
  margin-top: 32px; padding: 28px;
  border-radius: var(--radius); border: 1px solid rgba(168,85,247,.3);
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(59,130,246,.08));
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
}
.ai-banner-robot { font-size: 4rem; filter: drop-shadow(0 0 20px rgba(168,85,247,.4)); }
.ai-banner h3 { font-family: var(--font-hi); font-size: 1.1rem; margin-bottom: 6px; }
.ai-banner p { font-size: 0.88rem; color: var(--muted); }

/* ── WHY US ── */
.why-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.why-item {
  text-align: center; padding: 20px 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .3s;
}
.why-item:hover { transform: translateY(-3px); }
.why-item-icon { font-size: 1.8rem; margin-bottom: 10px; }
.why-item strong { display: block; font-size: 0.82rem; margin-bottom: 4px; }
.why-item span { font-size: 0.72rem; color: var(--muted); }

/* ── INDUSTRIES ── */
.ind-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.ind-tile {
  padding: 20px 12px; text-align: center;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  transition: all .3s; cursor: pointer;
}
.ind-tile:hover { border-color: var(--cyan); background: rgba(6,182,212,.08); }
.ind-tile span { font-size: 2rem; display: block; margin-bottom: 8px; }
.ind-tile strong { font-size: 0.82rem; }

/* ── PRICING ── */
.pricing-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch;
}
.price-card {
  padding: 28px 22px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border);
  display: flex; flex-direction: column; transition: transform .3s;
}
.price-card:hover { transform: translateY(-4px); }
.price-card--featured {
  border-color: var(--purple);
  background: linear-gradient(180deg, rgba(124,58,237,.15), var(--card));
  position: relative;
}
.price-popular {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 4px 14px; border-radius: 999px;
  background: var(--grad-btn); font-size: 0.68rem; font-weight: 700; white-space: nowrap;
}
.price-card h3 { font-family: var(--font-hi); font-size: 1rem; margin-bottom: 8px; }
.price-amt { font-size: 1.75rem; font-weight: 800; color: var(--gold); margin-bottom: 4px; }
.price-note { font-size: 0.78rem; color: var(--muted); margin-bottom: 20px; }
.price-features { list-style: none; flex: 1; margin-bottom: 20px; }
.price-features li {
  font-size: 0.8rem; color: var(--muted); padding: 6px 0 6px 22px; position: relative;
}
.price-features li::before {
  content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700;
}

/* ── TRUST / CLIENTS ── */
.trust-section {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; align-items: center;
}
.trust-clients { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.trust-logo {
  padding: 10px 18px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border);
  font-size: 0.82rem; font-weight: 600; color: var(--muted);
}
.phone-mock {
  max-width: 220px; margin: 0 auto;
  border-radius: 24px; border: 3px solid rgba(255,255,255,.15);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.testimonial {
  padding: 24px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border);
}
.testimonial-stars { color: var(--gold); margin-bottom: 12px; }
.testimonial p { font-family: var(--font-hi); font-size: 0.9rem; color: var(--muted); font-style: italic; margin-bottom: 16px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-btn); display: grid; place-items: center; font-weight: 700;
}
.testimonial-author strong { display: block; font-size: 0.88rem; }
.testimonial-author span { font-size: 0.75rem; color: var(--muted); }

/* ── CONTACT ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-methods { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.contact-method {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  transition: border-color .2s;
}
.contact-method:hover { border-color: var(--purple); }
.contact-method-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(124,58,237,.2); display: grid; place-items: center; font-size: 1.2rem;
}
.contact-form {
  padding: 28px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border);
}
.contact-form h3 { margin-bottom: 20px; font-size: 1.1rem; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: rgba(0,0,0,.3); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-size: 0.88rem;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--purple);
}
.form-group textarea { min-height: 90px; resize: vertical; }

/* ── FOOTER ── */
.footer { padding: 56px 0 24px; border-top: 1px solid var(--border); background: var(--bg2); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.footer-brand p { font-size: 0.85rem; color: var(--muted); margin-top: 12px; line-height: 1.6; }
.footer-col h4 { font-size: 0.88rem; margin-bottom: 14px; color: var(--text); }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { font-size: 0.82rem; color: var(--muted); transition: color .2s; }
.footer-col a:hover { color: var(--purple); }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--glass); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 1rem;
}
.footer-bottom {
  padding-top: 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: 0.78rem; color: var(--muted);
}

/* ── FLOATING ── */
.wa-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 997;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wa-grad); color: #fff; font-size: 1.5rem;
  display: grid; place-items: center;
  box-shadow: 0 8px 32px rgba(37,211,102,.4);
  transition: transform .2s;
}
.wa-float:hover { transform: scale(1.08); }

.mobile-sticky-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 998;
  padding: 10px 12px; gap: 8px;
  background: rgba(5,8,16,.95); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
.mobile-sticky-cta a {
  flex: 1; text-align: center; padding: 12px; border-radius: 10px;
  font-size: 0.82rem; font-weight: 700;
}
.mobile-sticky-cta .cta-ai { background: var(--grad-btn); color: #fff; }
.mobile-sticky-cta .cta-wa { background: var(--green); color: #fff; }

/* ── AI CHAT ── */
.ai-chat-toggle {
  position: fixed; bottom: 24px; right: 90px; z-index: 997;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px;
  background: var(--grad-btn); color: #fff; border: none;
  font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 32px rgba(124,58,237,.4);
}
.ai-chat-toggle.hidden { display: none; }
.ai-chat-panel {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  width: 380px; max-height: 520px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 24px 80px rgba(0,0,0,.6);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.ai-chat-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.ai-chat-head {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(124,58,237,.2), transparent);
}
.ai-chat-avatar { font-size: 1.8rem; }
.ai-chat-head-text h4 { font-size: 0.92rem; }
.ai-chat-head-text p { font-size: 0.75rem; color: var(--muted); }
.ai-chat-head-text .online { color: var(--green); }
.ai-chat-close {
  margin-left: auto; background: none; border: none;
  color: var(--muted); font-size: 1.2rem; cursor: pointer;
}
.ai-chat-messages {
  flex: 1; overflow-y: auto; padding: 16px; min-height: 200px; max-height: 320px;
}
.ai-chat-msg { margin-bottom: 12px; }
.ai-chat-msg--user { text-align: right; }
.ai-chat-msg--user .ai-chat-bubble {
  background: var(--grad-btn); color: #fff;
  display: inline-block; text-align: left;
}
.ai-chat-bubble {
  padding: 10px 14px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
  font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap;
}
.ai-chat-form {
  display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border);
}
.ai-chat-form input {
  flex: 1; padding: 10px 14px; border-radius: 10px;
  background: rgba(0,0,0,.3); border: 1px solid var(--border);
  color: var(--text); font-family: inherit;
}
.ai-chat-send {
  padding: 0 16px; border: none; border-radius: 10px;
  background: var(--purple); color: #fff; font-weight: 700; cursor: pointer;
}
.ai-chat-typing span {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted); margin: 0 2px; animation: aiDot 1.2s infinite;
}
.ai-chat-typing span:nth-child(2) { animation-delay: .2s; }
.ai-chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes aiDot {
  0%,80%,100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-4px); }
}

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid, .ind-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-section { grid-template-columns: 1fr; text-align: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --topbar-h: 0px; }
  .topbar { display: none; }
  .nav { top: 0; }
  .hero { padding-top: calc(var(--nav-h) + 24px); }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-visual { min-height: auto; order: -1; }
  .hero-hub { display: block; width: min(300px, 90vw); margin: 0 auto; }
  .hero-mobile-img { display: none; }
  .hero-checks { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.65rem; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .ai-banner { grid-template-columns: 1fr; text-align: center; }
  .ai-banner-robot { font-size: 3rem; }
  .nav-links { display: none; }
  .menu-toggle { display: block; }
  .nav.open .nav-links {
    display: flex; flex-direction: column;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--bg2); padding: 24px; border-bottom: 1px solid var(--border);
  }
  .ai-chat-toggle { display: none; }
  .wa-float { bottom: 72px; right: 16px; width: 48px; height: 48px; font-size: 1.3rem; }
  .mobile-sticky-cta { display: flex; }
  .ai-chat-panel {
    right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
    max-height: 100vh; border-radius: 0;
  }
  body { padding-bottom: 70px; }
  section { padding: 48px 0; }
}

@media (min-width: 769px) {
  .hero-mobile-img { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   v8 ULTRA — Preloader, Particles, Premium Industries, FX
   ═══════════════════════════════════════════════════════════ */

body:not(.loaded) { overflow: hidden; }

.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: #030508;
  display: grid; place-items: center;
  transition: opacity .8s ease, visibility .8s;
}
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { text-align: center; }
.preloader-logo-wrap { position: relative; width: 100px; height: 100px; margin: 0 auto 20px; }
.preloader-logo { position: relative; z-index: 2; width: 64px; height: 64px; margin: 18px; border-radius: 50%; animation: logoPop .8s ease; }
@keyframes logoPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.preloader-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--purple); border-right-color: var(--cyan);
  animation: spin 1.2s linear infinite;
}
.preloader-ring-2 { inset: 8px; animation-direction: reverse; animation-duration: 1.8s; border-top-color: var(--blue); }
.preloader-text { font-weight: 800; letter-spacing: .15em; font-size: .9rem; margin-bottom: 16px; animation: fadeUp .6s .3s both; }
.preloader-text span { color: var(--gold); }
.preloader-bar { width: 160px; height: 3px; background: rgba(255,255,255,.1); border-radius: 999px; margin: 0 auto; overflow: hidden; }
.preloader-bar-fill { height: 100%; background: var(--grad); border-radius: 999px; animation: loadBar 1.2s ease forwards; }
@keyframes loadBar { from { width: 0; } to { width: 100%; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.particles-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
}
.cursor-glow {
  position: fixed; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.12), transparent 70%);
  pointer-events: none; z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity .3s;
}
@media (pointer: coarse) { .cursor-glow { display: none; } }

.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35;
  animation: orbFloat 12s ease-in-out infinite;
}
.orb-1 { width: 400px; height: 400px; background: #7c3aed; top: -10%; left: -5%; }
.orb-2 { width: 350px; height: 350px; background: #3b82f6; top: 40%; right: -10%; animation-delay: -4s; }
.orb-3 { width: 300px; height: 300px; background: #06b6d4; bottom: -5%; left: 30%; animation-delay: -8s; }
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-20px) scale(1.05); }
  66% { transform: translate(-20px,30px) scale(.95); }
}

.marquee-wrap {
  position: relative; z-index: 1; overflow: hidden;
  padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: rgba(124,58,237,.06);
}
.marquee-track {
  display: flex; gap: 48px; width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-track span {
  font-size: .78rem; font-weight: 600; color: var(--muted);
  white-space: nowrap; letter-spacing: .04em;
}
@keyframes marquee { to { transform: translateX(-50%); } }

.logo-animated { position: relative; }
.logo-glow-ring {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  box-shadow: 0 0 20px rgba(251,191,36,.5);
  animation: logoGlow 2s ease-in-out infinite;
}
@keyframes logoGlow {
  0%,100% { box-shadow: 0 0 12px rgba(251,191,36,.4); }
  50% { box-shadow: 0 0 28px rgba(124,58,237,.6), 0 0 40px rgba(251,191,36,.3); }
}
.logo-animated .logo-img { position: relative; z-index: 1; }

.shimmer-text {
  background: linear-gradient(90deg, #a855f7, #3b82f6, #06b6d4, #a855f7);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { to { background-position: 300% center; } }

.section-tag--pulse { animation: tagPulse 2s ease-in-out infinite; }
@keyframes tagPulse {
  0%,100% { box-shadow: 0 0 0 rgba(168,85,247,0); }
  50% { box-shadow: 0 0 20px rgba(168,85,247,.25); }
}

.hub-node.active {
  border-color: var(--purple) !important;
  transform: scale(1.12);
  box-shadow: 0 0 24px rgba(124,58,237,.5);
}

.glow-card {
  position: relative; overflow: hidden;
  transition: transform .35s ease, box-shadow .35s, border-color .35s;
}
.glow-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(124,58,237,.4), transparent, rgba(6,182,212,.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s;
}
.glow-card:hover::before { opacity: 1; }
.glow-card:hover { box-shadow: 0 20px 60px rgba(124,58,237,.2); }

.btn-wa, .btn-grad { position: relative; overflow: hidden; }
.btn-wa::after, .btn-grad::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: btnShine 3s infinite;
}
@keyframes btnShine { to { left: 150%; } }

/* ── PREMIUM INDUSTRIES ── */
.industries-pro {
  background: linear-gradient(180deg, transparent, rgba(124,58,237,.05), transparent);
}
.ind-premium-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.ind-premium-card {
  position: relative; display: flex; flex-direction: column;
  padding: 22px 18px; border-radius: 18px;
  background: rgba(10,15,30,.8); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden; transition: transform .35s, border-color .35s, box-shadow .35s;
}
.ind-premium-card:hover {
  border-color: rgba(124,58,237,.45);
  box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 40px rgba(124,58,237,.12);
}
.ind-card-shine {
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,.04) 50%, transparent 60%);
  transform: rotate(25deg); transition: transform .6s;
  pointer-events: none;
}
.ind-premium-card:hover .ind-card-shine { transform: rotate(25deg) translate(20%, 20%); }

.ind-label {
  display: inline-block; align-self: flex-start;
  padding: 4px 10px; border-radius: 6px;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; margin-bottom: 14px;
}
.ind-label--green { background: rgba(37,211,102,.15); color: #25d366; border: 1px solid rgba(37,211,102,.3); }
.ind-label--blue { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.ind-label--cyan { background: rgba(6,182,212,.15); color: #22d3ee; border: 1px solid rgba(6,182,212,.3); }
.ind-label--gold { background: rgba(251,191,36,.15); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
.ind-label--pink { background: rgba(236,72,153,.15); color: #f472b6; border: 1px solid rgba(236,72,153,.3); }
.ind-label--purple { background: rgba(168,85,247,.15); color: #c084fc; border: 1px solid rgba(168,85,247,.3); }

.ind-icon-ring {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.6rem;
  background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.1);
  margin-bottom: 14px; transition: transform .4s, box-shadow .4s;
}
.ind-premium-card:hover .ind-icon-ring {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 24px rgba(124,58,237,.35);
}
.ind-icon-ring--pulse { animation: iconPulse 2s ease-in-out infinite; }
@keyframes iconPulse {
  0%,100% { box-shadow: 0 0 0 rgba(168,85,247,0); }
  50% { box-shadow: 0 0 30px rgba(168,85,247,.5); transform: scale(1.05); }
}

.ind-premium-card strong {
  font-family: var(--font-hi); font-size: .95rem; margin-bottom: 6px; color: var(--text);
}
.ind-premium-card p { font-size: .78rem; color: var(--muted); line-height: 1.5; flex: 1; margin-bottom: 14px; }
.ind-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ind-price-tag {
  font-size: .82rem; font-weight: 800; color: var(--gold);
  padding: 4px 10px; border-radius: 6px; background: rgba(251,191,36,.1);
}
.ind-live { font-size: .68rem; font-weight: 600; color: var(--green); }
.ind-cta-btn {
  display: block; width: 100%; text-align: center; padding: 10px;
  border-radius: 10px; background: var(--grad-btn); color: #fff;
  font-size: .82rem; font-weight: 700;
}
.ind-premium-card--cta {
  border-color: rgba(168,85,247,.35);
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(59,130,246,.08));
}

.ai-banner-robot { animation: robotBounce 3s ease-in-out infinite; }
@keyframes robotBounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.wa-float { animation: waPulse 2.5s ease-in-out infinite; }
@keyframes waPulse {
  0%,100% { box-shadow: 0 8px 32px rgba(37,211,102,.4); }
  50% { box-shadow: 0 8px 48px rgba(37,211,102,.7), 0 0 0 8px rgba(37,211,102,.1); }
}

.reveal { transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1024px) {
  .ind-premium-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .ind-premium-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ind-premium-card { padding: 16px 14px; }
  .ind-icon-ring { width: 48px; height: 48px; font-size: 1.3rem; }
  .particles-canvas { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .preloader { display: none; }
  body { overflow: auto; }
}

/* ═══════════════════════════════════════════════════════════
   v9 HI-TECH HERO — Cyber grid, HUD, Neural hub
   ═══════════════════════════════════════════════════════════ */

.hero-hitech {
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  padding: calc(var(--topbar-h) + var(--nav-h) + 32px) 0 120px;
  min-height: min(92vh, 900px);
}

.hero-cyber-layer {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.hero-grid-floor {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(124,58,237,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black, transparent);
  animation: gridDrift 20s linear infinite;
}
@keyframes gridDrift {
  0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
  100% { transform: perspective(500px) rotateX(60deg) translateY(48px); }
}
.hero-hex-pattern {
  position: absolute; inset: 0; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23a855f7' stroke-width='1'%3E%3Cpath d='M14 1l13 7.5v15L14 31 1 23.5v-15z'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-grid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.hero-scanline {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px);
  pointer-events: none;
}
.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(5,8,16,.7) 100%);
}

.hero-hud-corner {
  position: absolute; z-index: 2; font-family: 'Courier New', monospace;
  font-size: .62rem; color: rgba(6,182,212,.7); letter-spacing: .12em;
  padding: 8px 12px; border: 1px solid rgba(6,182,212,.2);
  background: rgba(5,8,16,.5); backdrop-filter: blur(8px);
}
.hero-hud-tl { top: calc(var(--topbar-h) + var(--nav-h) + 12px); left: 16px; border-left: 2px solid var(--cyan); }
.hero-hud-tr { top: calc(var(--topbar-h) + var(--nav-h) + 12px); right: 16px; border-right: 2px solid var(--purple); }
.hero-hud-bl { bottom: 24px; left: 16px; border-left: 2px solid var(--purple); }
.hero-hud-br { bottom: 24px; right: 16px; border-right: 2px solid var(--cyan); }

.hero-glass-panel {
  position: relative; z-index: 2;
  padding: 28px; border-radius: 20px;
  background: rgba(8,12,24,.55); backdrop-filter: blur(20px);
  border: 1px solid rgba(124,58,237,.25);
  box-shadow: 0 24px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-glass-panel::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,.6), transparent);
}

.hero-badge--tech {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 8px;
  background: rgba(6,182,212,.08); border: 1px solid rgba(6,182,212,.35);
  font-family: 'Courier New', monospace; font-size: .68rem;
  color: var(--cyan); margin-bottom: 12px;
}
.badge-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 12px var(--green); animation: pulse 1.5s infinite;
}
.badge-sep { opacity: .4; }
.badge-loc { color: var(--muted); }

.hero-eyebrow-tech {
  font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  color: rgba(168,85,247,.8); margin-bottom: 14px;
  text-transform: uppercase;
}

.hero h1 .hero-line {
  display: block;
  animation: lineReveal .8s cubic-bezier(.22,1,.36,1) both;
}
.hero h1 .hero-line:nth-child(2) { animation-delay: .12s; }
.hero h1 .hero-line:nth-child(3) { animation-delay: .24s; }
@keyframes lineReveal {
  from { opacity: 0; transform: translateX(-20px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

.hero-checks--tech .hero-check::before { display: none; }
.hero-checks--tech .check-icon {
  color: var(--cyan); font-size: .7rem; flex-shrink: 0;
  text-shadow: 0 0 8px rgba(6,182,212,.6);
}

.hero-tech-chips {
  display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap;
}
.tech-chip {
  padding: 10px 16px; border-radius: 10px;
  background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.25);
  text-align: center; min-width: 72px;
  transition: transform .3s, box-shadow .3s;
}
.tech-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,.2); }
.tech-chip strong {
  display: block; font-size: 1.1rem; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.tech-chip span { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.btn-neon {
  box-shadow: 0 0 24px rgba(37,211,102,.4), 0 0 48px rgba(37,211,102,.15);
  border: 1px solid rgba(255,255,255,.15);
}
.btn-holo {
  border-color: rgba(6,182,212,.4) !important;
  background: rgba(6,182,212,.06) !important;
  position: relative;
}
.btn-holo:hover { box-shadow: 0 0 24px rgba(6,182,212,.3); color: var(--cyan) !important; }

.hero-hub-stage {
  position: relative; width: min(440px, 100%); margin: 0 auto;
  aspect-ratio: 1;
}
.hub-connections {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.hub-line {
  stroke-dasharray: 8 12;
  animation: lineFlow 2s linear infinite;
}
@keyframes lineFlow { to { stroke-dashoffset: -40; } }

.hub-radar-sweep {
  position: absolute; inset: 12%; border-radius: 50%; z-index: 2;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(6,182,212,.15) 30deg, transparent 60deg);
  animation: radarSweep 4s linear infinite;
  pointer-events: none;
}
@keyframes radarSweep { to { transform: rotate(360deg); } }

.hub-ring--glow {
  inset: -4%; border: none !important;
  box-shadow: 0 0 60px rgba(124,58,237,.25), inset 0 0 40px rgba(124,58,237,.08);
  animation: none !important;
}
.hub-ring-4 { inset: 22%; border-color: rgba(6,182,212,.15); animation-duration: 25s; }

.hub-core-icon {
  font-size: 1.4rem; margin-bottom: 4px;
  animation: corePulse 2s ease-in-out infinite;
}
@keyframes corePulse {
  0%,100% { filter: drop-shadow(0 0 4px rgba(251,191,36,.5)); }
  50% { filter: drop-shadow(0 0 16px rgba(251,191,36,.9)); }
}
.hub-status {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: .55rem; font-weight: 700; color: var(--green); letter-spacing: .1em;
}
.hub-status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: pulse 1s infinite;
}

.hero-data-feed {
  position: absolute; bottom: -20px; left: 0; right: 0; z-index: 6;
  padding: 12px; border-radius: 10px;
  background: rgba(5,8,16,.85); border: 1px solid rgba(6,182,212,.2);
  backdrop-filter: blur(12px); overflow: hidden;
}
.data-feed-line {
  font-family: 'Courier New', monospace; font-size: .62rem;
  color: rgba(148,163,184,.9); padding: 3px 0;
  animation: feedSlide 8s linear infinite;
  white-space: nowrap;
}
.data-feed-line:nth-child(2) { animation-delay: -2.5s; }
.data-feed-line:nth-child(3) { animation-delay: -5s; }
.data-tag {
  display: inline-block; padding: 1px 6px; margin-right: 8px;
  border-radius: 4px; background: rgba(124,58,237,.3);
  color: var(--purple); font-weight: 700; font-size: .58rem;
}
@keyframes feedSlide {
  0%,100% { opacity: .4; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(4px); }
}

.nav.scrolled {
  background: rgba(5, 8, 16, 0.92);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(124,58,237,.2);
  box-shadow: 0 4px 30px rgba(124,58,237,.08);
}

.marquee-wrap {
  background: linear-gradient(90deg, rgba(124,58,237,.08), rgba(6,182,212,.06), rgba(124,58,237,.08));
  border-top: 1px solid rgba(124,58,237,.2);
  border-bottom: 1px solid rgba(6,182,212,.15);
}
.marquee-track span {
  color: rgba(148,163,184,.85);
  text-shadow: 0 0 12px rgba(124,58,237,.3);
}

@media (max-width: 768px) {
  .hero-hitech { min-height: auto; padding-bottom: 100px; }
  .hero-hud-corner { display: none; }
  .hero-glass-panel { padding: 20px 16px; }
  .hero-hub-stage { width: min(320px, 92vw); }
  .hub-node { width: 64px; padding: 8px 4px; font-size: .55rem; }
  .hero-data-feed { bottom: -12px; font-size: .55rem; }
  .hero-grid-floor { opacity: .5; }
  .hero-tech-chips { gap: 8px; }
  .tech-chip { padding: 8px 12px; min-width: 60px; }
}

@media (min-width: 769px) {
  .hero-visual { min-height: 480px; }
}

/* ═══════════════════════════════════════════════════════════
   v10 BEAUTY — Superpowers, Compare, Live Demo Phone
   ═══════════════════════════════════════════════════════════ */

.section-tag--gold {
  background: rgba(251,191,36,.12) !important;
  border-color: rgba(251,191,36,.4) !important;
  color: var(--gold) !important;
}

.superpowers-section {
  padding: 88px 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(124,58,237,.12), transparent),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(6,182,212,.08), transparent);
  position: relative;
}
.superpowers-section::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l30 17.32v34.64L30 69.28 0 51.96V17.32z' fill='none' stroke='%23a855f7' stroke-opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

.super-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 56px;
}
.super-card {
  position: relative; padding: 26px 22px; border-radius: 20px;
  background: linear-gradient(145deg, rgba(15,23,42,.9), rgba(8,12,24,.95));
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  transition: transform .4s, border-color .4s, box-shadow .4s;
}
.super-card:hover {
  transform: translateY(-6px);
  border-color: rgba(168,85,247,.4);
  box-shadow: 0 24px 60px rgba(124,58,237,.2);
}
.super-card--hero {
  grid-column: span 1;
  border-color: rgba(251,191,36,.3);
  background: linear-gradient(145deg, rgba(124,58,237,.15), rgba(8,12,24,.95));
}
.super-glow {
  position: absolute; top: -40px; right: -40px; width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(168,85,247,.25), transparent 70%);
  pointer-events: none;
}
.super-icon {
  font-size: 2.2rem; margin-bottom: 14px;
  filter: drop-shadow(0 0 12px rgba(168,85,247,.5));
  animation: iconFloat 3s ease-in-out infinite;
}
.super-card:nth-child(2) .super-icon { animation-delay: -.5s; }
.super-card:nth-child(3) .super-icon { animation-delay: -1s; }
@keyframes iconFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.super-card h3 {
  font-family: var(--font-hi); font-size: 1.05rem; font-weight: 700;
  margin-bottom: 8px; color: var(--text);
}
.super-card p { font-size: .82rem; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.super-stat {
  padding: 8px 12px; border-radius: 8px;
  background: rgba(124,58,237,.15); border: 1px solid rgba(168,85,247,.25);
  font-size: .75rem; color: var(--muted);
}
.super-stat strong {
  font-size: 1.1rem; color: var(--gold); margin-right: 6px;
}
.super-vs { display: flex; flex-direction: column; gap: 6px; font-size: .72rem; }
.vs-bad { color: #f87171; opacity: .85; }
.vs-good { color: var(--green); font-weight: 700; }

/* Compare Before/After */
.compare-stage {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px;
  align-items: stretch; margin-bottom: 64px;
}
.compare-card {
  padding: 28px 24px; border-radius: 20px;
  backdrop-filter: blur(16px);
}
.compare-before {
  background: linear-gradient(135deg, rgba(248,113,113,.08), rgba(8,12,24,.9));
  border: 1px solid rgba(248,113,113,.25);
}
.compare-after {
  background: linear-gradient(135deg, rgba(37,211,102,.1), rgba(8,12,24,.9));
  border: 1px solid rgba(37,211,102,.3);
  box-shadow: 0 0 40px rgba(37,211,102,.08);
}
.compare-head {
  font-family: var(--font-hi); font-weight: 800; font-size: 1rem;
  margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.compare-before .compare-head { color: #fca5a5; }
.compare-after .compare-head { color: #86efac; }
.compare-card ul { list-style: none; margin-bottom: 20px; }
.compare-card li {
  display: flex; align-items: center; gap: 10px;
  font-size: .85rem; color: var(--muted); padding: 8px 0;
  font-family: var(--font-hi);
}
.compare-card li span:first-child { font-size: 1.1rem; }
.compare-meter {
  height: 8px; border-radius: 999px; background: rgba(0,0,0,.4);
  position: relative; overflow: hidden;
}
.compare-meter .meter-fill {
  height: 100%; border-radius: 999px;
  animation: meterGrow 2s ease forwards;
}
.compare-meter--low .meter-fill {
  width: 28%; background: linear-gradient(90deg, #f87171, #fca5a5);
}
.compare-meter--high .meter-fill {
  width: 92%; background: linear-gradient(90deg, #25d366, #06b6d4);
  box-shadow: 0 0 16px rgba(37,211,102,.5);
}
.compare-meter span {
  position: absolute; right: 0; top: -22px;
  font-size: .72rem; font-weight: 700;
}
.compare-meter--low span { color: #f87171; }
.compare-meter--high span { color: var(--green); }
@keyframes meterGrow { from { width: 0; } }

.compare-arrow {
  display: flex; align-items: center; justify-content: center;
}
.compare-arrow-inner {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--grad-btn); color: #fff;
  display: grid; place-items: center; text-align: center;
  font-size: .62rem; font-weight: 800; letter-spacing: .06em;
  box-shadow: 0 0 40px rgba(124,58,237,.5);
  animation: arrowPulse 2s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 30px rgba(124,58,237,.4); }
  50% { transform: scale(1.08); box-shadow: 0 0 50px rgba(124,58,237,.7); }
}

/* Demo Phone Showcase */
.demo-showcase {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center;
  padding: 40px; border-radius: 24px;
  background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(6,182,212,.06));
  border: 1px solid rgba(168,85,247,.25);
  box-shadow: 0 32px 80px rgba(0,0,0,.35);
}
.demo-phone-wrap {
  display: flex; justify-content: center;
  perspective: 800px;
}
.demo-phone {
  position: relative; width: 260px;
  background: #0a0f1a; border-radius: 32px;
  border: 3px solid rgba(255,255,255,.12);
  padding: 12px 10px 16px;
  box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 60px rgba(37,211,102,.15);
  animation: phoneFloat 4s ease-in-out infinite;
  transform: rotateY(-8deg) rotateX(4deg);
}
@keyframes phoneFloat {
  0%,100% { transform: rotateY(-8deg) rotateX(4deg) translateY(0); }
  50% { transform: rotateY(-8deg) rotateX(4deg) translateY(-10px); }
}
.demo-phone-notch {
  width: 80px; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.15); margin: 0 auto 10px;
}
.demo-wa-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #128C7E; border-radius: 12px 12px 0 0;
  margin-bottom: 0;
}
.demo-wa-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold); color: #1a1200;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
}
.demo-wa-header strong { display: block; font-size: .82rem; color: #fff; }
.demo-wa-header span { font-size: .65rem; color: #dcf8c6; }
.demo-chat {
  padding: 12px 10px; min-height: 220px;
  background: linear-gradient(180deg, #0e1628, #0a0f1a);
  border-radius: 0 0 12px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.demo-msg {
  max-width: 88%; padding: 8px 12px; border-radius: 10px;
  font-size: .72rem; line-height: 1.45; font-family: var(--font-hi);
  opacity: 0; transform: translateY(8px);
  animation: msgIn .5s ease forwards;
}
.demo-msg--in {
  align-self: flex-start; background: #1e3050; color: #e2e8f0;
  animation-delay: .5s;
}
.demo-msg--out {
  align-self: flex-end; background: #128C7E; color: #fff;
}
.demo-msg--in:nth-child(3) { animation-delay: 2s; }
.demo-msg--out:nth-child(2) { animation-delay: 1.2s; }
.demo-msg--out:nth-child(4) { animation-delay: 2.8s; }
.demo-msg--sys {
  align-self: center; background: rgba(124,58,237,.25);
  border: 1px solid rgba(168,85,247,.4); color: var(--cyan);
  font-size: .62rem; text-align: center; max-width: 100%;
  animation-delay: 3.6s;
}
@keyframes msgIn {
  to { opacity: 1; transform: none; }
}
.demo-phone-glow {
  position: absolute; inset: -20px; border-radius: 40px; z-index: -1;
  background: radial-gradient(circle, rgba(37,211,102,.2), transparent 70%);
  animation: phoneGlow 3s ease-in-out infinite;
}
@keyframes phoneGlow {
  0%,100% { opacity: .6; } 50% { opacity: 1; }
}
.demo-copy h3 {
  font-family: var(--font-hi); font-size: 1.35rem; font-weight: 800;
  margin: 12px 0 14px; line-height: 1.3;
}
.demo-copy p { font-size: .9rem; color: var(--muted); line-height: 1.65; margin-bottom: 20px; }
.demo-copy p strong { color: var(--text); }
.demo-features { list-style: none; margin-bottom: 24px; }
.demo-features li {
  font-size: .85rem; color: var(--muted); padding: 6px 0;
  font-family: var(--font-hi);
}
.demo-features li { color: var(--text); opacity: .9; }

.hero-sub strong { color: var(--cyan); font-weight: 600; }

.stats-strip {
  background: linear-gradient(90deg, rgba(124,58,237,.08), rgba(6,182,212,.06), rgba(124,58,237,.08));
}
.stat-num { font-size: 1.75rem; }

@media (max-width: 1024px) {
  .super-grid { grid-template-columns: repeat(2, 1fr); }
  .demo-showcase { grid-template-columns: 1fr; text-align: center; }
  .demo-features { text-align: left; }
}
@media (max-width: 768px) {
  .super-grid { grid-template-columns: 1fr; }
  .super-card--hero { grid-column: span 1; }
  .compare-stage { grid-template-columns: 1fr; gap: 16px; }
  .compare-arrow { padding: 8px 0; }
  .compare-arrow-inner { width: 52px; height: 52px; margin: 0 auto; }
  .demo-showcase { padding: 24px 16px; }
  .demo-phone { width: 240px; transform: none; animation: phoneFloatMobile 4s ease-in-out infinite; }
  @keyframes phoneFloatMobile {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
}

/* ═══════════════════════════════════════════════════════════
   v11 NEXUS COMMAND — Futuristic Hero Visual
   ═══════════════════════════════════════════════════════════ */

.nexus-stage {
  position: relative;
  width: min(480px, 100%);
  height: min(520px, 85vw);
  margin: 0 auto;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.nexus-neural {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.beam-line {
  stroke-dasharray: 8 12;
  animation: beamFlow 2s linear infinite;
}
@keyframes beamFlow { to { stroke-dashoffset: -40; } }

.nexus-orbit-ring {
  position: absolute; left: 50%; top: 42%;
  border-radius: 50%; border: 1px solid transparent;
  transform: translate(-50%, -50%) rotateX(72deg);
  pointer-events: none;
}
.nexus-orbit-1 {
  width: 340px; height: 340px;
  border-color: rgba(6,182,212,.25);
  animation: orbitSpin 12s linear infinite;
  box-shadow: 0 0 30px rgba(6,182,212,.1);
}
.nexus-orbit-2 {
  width: 280px; height: 280px;
  border-color: rgba(168,85,247,.3);
  animation: orbitSpin 8s linear infinite reverse;
}
.nexus-orbit-3 {
  width: 220px; height: 220px;
  border-color: rgba(59,130,246,.2);
  border-style: dashed;
  animation: orbitSpin 15s linear infinite;
}
@keyframes orbitSpin { to { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(360deg); } }

.nexus-core {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  z-index: 5; text-align: center;
}
.core-sphere {
  position: relative; width: 100px; height: 100px; margin: 0 auto 12px;
  transform-style: preserve-3d;
  animation: coreFloat 4s ease-in-out infinite;
}
@keyframes coreFloat {
  0%,100% { transform: translateY(0) rotateY(0); }
  50% { transform: translateY(-8px) rotateY(180deg); }
}
.core-layer {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(6,182,212,.4);
}
.core-layer-1 { animation: coreSpin 6s linear infinite; }
.core-layer-2 { inset: 8px; border-color: rgba(168,85,247,.5); animation: coreSpin 4s linear infinite reverse; }
.core-layer-3 { inset: 16px; border-color: rgba(251,191,36,.4); animation: coreSpin 8s linear infinite; }
@keyframes coreSpin { to { transform: rotate(360deg); } }
.core-center {
  position: absolute; inset: 22px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.6), rgba(5,8,16,.9));
  display: grid; place-items: center;
  box-shadow: 0 0 40px rgba(124,58,237,.6), inset 0 0 20px rgba(6,182,212,.3);
}
.core-logo-img { border-radius: 50%; filter: drop-shadow(0 0 8px rgba(251,191,36,.8)); }
.core-title {
  font-size: .72rem; font-weight: 800; letter-spacing: .25em;
  color: var(--cyan); text-shadow: 0 0 20px rgba(6,182,212,.8);
}
.core-version {
  font-size: .58rem; color: var(--green); letter-spacing: .15em; margin-top: 4px;
  font-family: 'Courier New', monospace;
}

.holo-float {
  position: absolute; z-index: 8;
  animation: holoDrift 5s ease-in-out infinite;
  transition: opacity .4s, transform .4s;
}
.holo-float-1 { top: 8%; left: 0; animation-delay: 0s; }
.holo-float-2 { top: 5%; right: 0; animation-delay: -1.2s; }
.holo-float-3 { bottom: 28%; left: -4%; animation-delay: -2.5s; }
.holo-float-4 { bottom: 25%; right: -4%; animation-delay: -3.8s; }
.holo-float.active { z-index: 10; }
.holo-float.active .holo-frame {
  border-color: rgba(6,182,212,.7);
  box-shadow: 0 0 30px rgba(6,182,212,.35);
}
@keyframes holoDrift {
  0%,100% { transform: translateY(0) translateZ(20px); }
  50% { transform: translateY(-10px) translateZ(30px); }
}
.holo-frame {
  padding: 10px 12px; border-radius: 12px; min-width: 118px;
  background: rgba(5,10,20,.75); backdrop-filter: blur(12px);
  border: 1px solid rgba(168,85,247,.35);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  transform: perspective(600px) rotateY(-8deg);
}
.holo-float-2 .holo-frame, .holo-float-4 .holo-frame { transform: perspective(600px) rotateY(8deg); }
.holo-tag {
  font-size: .5rem; font-weight: 800; letter-spacing: .12em;
  color: var(--purple); display: block; margin-bottom: 4px;
}
.holo-frame strong { display: block; font-size: .72rem; color: var(--text); margin-bottom: 2px; }
.holo-frame p { font-size: .58rem; color: var(--muted); margin-bottom: 6px; }
.holo-bar { height: 3px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.holo-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--purple), var(--cyan));
  border-radius: 999px; animation: barPulse 2s ease-in-out infinite;
}
@keyframes barPulse {
  0%,100% { opacity: .7; } 50% { opacity: 1; box-shadow: 0 0 8px var(--cyan); }
}

.nexus-holo-display {
  position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%);
  width: 92%; max-width: 340px; z-index: 12;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, rgba(8,15,30,.92), rgba(12,8,24,.95));
  border: 1px solid rgba(6,182,212,.35);
  box-shadow:
    0 0 0 1px rgba(168,85,247,.2),
    0 24px 60px rgba(0,0,0,.5),
    0 0 80px rgba(124,58,237,.15);
  animation: holoDisplayFloat 5s ease-in-out infinite;
}
@keyframes holoDisplayFloat {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}
.holo-display-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: rgba(124,58,237,.15);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: 'Courier New', monospace; font-size: .58rem;
  color: var(--cyan); letter-spacing: .08em;
}
.holo-display-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); animation: pulse 1s infinite;
}
.holo-display-time { margin-left: auto; color: var(--muted); }
.holo-display-body {
  position: relative; min-height: 148px; padding: 14px 16px;
}
.holo-slide {
  position: absolute; inset: 14px 16px;
  opacity: 0; transform: translateX(20px) scale(.96);
  transition: opacity .5s, transform .5s;
  pointer-events: none;
}
.holo-slide.active {
  opacity: 1; transform: none; pointer-events: auto; z-index: 2;
}
.holo-slide-icon { font-size: 1.8rem; margin-bottom: 8px; filter: drop-shadow(0 0 12px rgba(168,85,247,.5)); }
.holo-slide h4 {
  font-family: var(--font-hi); font-size: .88rem; font-weight: 700;
  color: var(--text); margin-bottom: 8px;
}
.holo-slide ul { list-style: none; margin-bottom: 10px; }
.holo-slide li {
  font-size: .68rem; color: var(--muted); padding: 3px 0 3px 14px;
  position: relative; font-family: var(--font-hi);
}
.holo-slide li::before {
  content: '▸'; position: absolute; left: 0; color: var(--cyan);
}
.holo-slide-badge {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  font-size: .62rem; font-weight: 700;
  background: rgba(37,211,102,.15); color: var(--green);
  border: 1px solid rgba(37,211,102,.3);
}
.holo-display-nav {
  display: flex; justify-content: center; gap: 6px; padding: 8px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.holo-nav-dot {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,.15); cursor: pointer;
  transition: background .3s, transform .3s, box-shadow .3s;
}
.holo-nav-dot.active {
  background: var(--cyan); transform: scale(1.2);
  box-shadow: 0 0 12px rgba(6,182,212,.6);
}

.nexus-scan-beam {
  position: absolute; left: 0; right: 0; top: 30%; height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,.6), transparent);
  animation: scanBeam 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scanBeam {
  0%,100% { top: 25%; opacity: 0; }
  10% { opacity: 1; }
  50% { top: 75%; opacity: .8; }
  90% { opacity: 0; }
}

.nexus-terminal {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 11;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(0,0,0,.6); border: 1px solid rgba(6,182,212,.2);
  backdrop-filter: blur(8px);
  font-family: 'Courier New', monospace; font-size: .58rem;
}
.term-line { color: rgba(148,163,184,.85); padding: 2px 0; }
.term-prompt { color: var(--cyan); margin-right: 6px; }
.term-line--blink span:last-child { animation: termBlink 1s step-end infinite; }
@keyframes termBlink { 50% { opacity: 0; } }

.hero-visual { min-height: 540px; }

@media (max-width: 768px) {
  .nexus-stage { height: 480px; width: 100%; }
  .holo-float { display: none; }
  .nexus-holo-display { width: 96%; bottom: 14%; }
  .nexus-core { top: 32%; }
  .core-sphere { width: 80px; height: 80px; }
  .nexus-orbit-1 { width: 260px; height: 260px; }
  .nexus-orbit-2 { width: 210px; height: 210px; }
  .nexus-orbit-3 { width: 160px; height: 160px; }
  .hero-visual { min-height: 460px; }
  .nexus-terminal { font-size: .52rem; }
}

@media (min-width: 769px) {
  .hero-visual { min-height: 560px; }
}

/* ═══════════════════════════════════════════════════════════
   v12 — Original Hub RESTORED + Enhanced (colors, logo, FX)
   ═══════════════════════════════════════════════════════════ */

.hero-hub-stage--pro {
  position: relative;
  width: min(440px, 100%);
  margin: 0 auto;
  padding-bottom: 130px;
}
.hub-aura {
  position: absolute; inset: 5% 0 15%;
  background: radial-gradient(circle at 50% 45%, rgba(124,58,237,.2), rgba(18,163,114,.08) 40%, transparent 70%);
  pointer-events: none; animation: auraPulse 4s ease-in-out infinite;
}
@keyframes auraPulse {
  0%,100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

.hub-ring--green {
  inset: 4%; border-color: rgba(18,163,114,.35) !important;
  border-style: solid !important;
  animation-duration: 35s !important;
}

.hub-center--logo {
  inset: 24% !important;
  background: radial-gradient(circle at 30% 30%, rgba(18,163,114,.45), rgba(10,15,30,.95)) !important;
  border: 2px solid rgba(232,197,71,.45) !important;
  box-shadow:
    0 0 50px rgba(18,163,114,.35),
    0 0 80px rgba(124,58,237,.25),
    inset 0 0 30px rgba(6,182,212,.1) !important;
  padding: 12px 8px !important;
}
.hub-logo-ring {
  position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid rgba(232,197,71,.5);
  animation: logoRingSpin 8s linear infinite;
}
.hub-logo-ring-2 {
  inset: -14px; border-color: rgba(18,163,114,.4);
  animation-direction: reverse; animation-duration: 12s;
}
@keyframes logoRingSpin { to { transform: rotate(360deg); } }
.hub-logo-img {
  width: 48px !important; height: 48px !important;
  border-radius: 14px; margin-bottom: 6px;
  filter: drop-shadow(0 0 12px rgba(232,197,71,.6));
  position: relative; z-index: 2;
  animation: logoHubPulse 3s ease-in-out infinite;
}
@keyframes logoHubPulse {
  0%,100% { filter: drop-shadow(0 0 8px rgba(232,197,71,.5)); }
  50% { filter: drop-shadow(0 0 20px rgba(18,163,114,.8)); transform: scale(1.05); }
}
.hub-center--logo strong {
  color: #e8c547 !important; font-size: .7rem !important;
  text-shadow: 0 0 12px rgba(232,197,71,.5);
}
.hub-center--logo span { font-size: .58rem !important; line-height: 1.35; }

/* Colored service nodes */
.hub-node {
  width: 80px !important; padding: 12px 8px !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(12,18,32,.95), rgba(8,12,24,.9)) !important;
  z-index: 8 !important;
}
.hub-node--wa { border-color: rgba(37,211,102,.45) !important; }
.hub-node--wa.active, .hub-node--wa:hover { box-shadow: 0 0 28px rgba(37,211,102,.45) !important; border-color: #25d366 !important; }
.hub-node--ai { border-color: rgba(168,85,247,.45) !important; }
.hub-node--ai.active, .hub-node--ai:hover { box-shadow: 0 0 28px rgba(168,85,247,.5) !important; border-color: #a855f7 !important; }
.hub-node--lead { border-color: rgba(59,130,246,.45) !important; }
.hub-node--lead.active, .hub-node--lead:hover { box-shadow: 0 0 28px rgba(59,130,246,.45) !important; }
.hub-node--call { border-color: rgba(236,72,153,.45) !important; }
.hub-node--call.active, .hub-node--call:hover { box-shadow: 0 0 28px rgba(236,72,153,.4) !important; }
.hub-node--crm { border-color: rgba(6,182,212,.45) !important; }
.hub-node--crm.active, .hub-node--crm:hover { box-shadow: 0 0 28px rgba(6,182,212,.45) !important; }
.hub-node--pay { border-color: rgba(251,191,36,.45) !important; }
.hub-node--pay.active, .hub-node--pay:hover { box-shadow: 0 0 28px rgba(251,191,36,.4) !important; }

.hub-node.active .hub-node-icon {
  animation: nodeIconPop .4s ease;
}
@keyframes nodeIconPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.hub-node-label { color: var(--text) !important; font-size: .65rem !important; }

.hero-data-feed--pro {
  bottom: -88px !important;
  left: 50%;
  transform: translateX(-50%);
  width: 96%;
  max-width: 400px;
  padding: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(160deg, rgba(6,10,22,.94), rgba(10,16,32,.88)) !important;
  border: 1px solid rgba(6,182,212,.25) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,.55),
    0 0 0 1px rgba(18,163,114,.12) inset,
    0 0 40px rgba(6,182,212,.08) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  overflow: hidden;
  z-index: 10 !important;
}

.data-feed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(90deg, rgba(18,163,114,.12), rgba(6,182,212,.06), rgba(124,58,237,.08));
  border-bottom: 1px solid rgba(6,182,212,.18);
  font-family: 'Courier New', Consolas, monospace;
}
.data-feed-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 8px #25d366;
  animation: feedPulseDot 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes feedPulseDot {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.85); }
}
.data-feed-title {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #22d3ee;
  text-shadow: 0 0 10px rgba(6,182,212,.4);
  flex: 1;
}
.data-feed-meta {
  font-size: .52rem;
  color: rgba(148,163,184,.55);
  letter-spacing: .08em;
}

.data-feed-body {
  padding: 10px 14px 12px;
  position: relative;
  z-index: 2;
}

.data-feed-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Courier New', Consolas, monospace;
  font-size: .64rem;
  color: rgba(148,163,184,.55);
  padding: 5px 0;
  border-left: 2px solid transparent;
  padding-left: 8px;
  margin-left: -2px;
  transition: color .35s, border-color .35s, opacity .35s;
  animation: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-feed-line--active {
  color: rgba(226,232,240,.95) !important;
  border-left-color: #12a372;
  text-shadow: 0 0 12px rgba(18,163,114,.25);
  animation: feedPulse .45s ease !important;
}
.data-feed-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.data-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  font-weight: 700;
  font-size: .54rem !important;
  letter-spacing: .06em;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.data-tag--green {
  background: rgba(37,211,102,.12) !important;
  color: #34d399 !important;
  border-color: rgba(37,211,102,.35) !important;
  box-shadow: 0 0 10px rgba(37,211,102,.15);
}
.data-tag--purple {
  background: rgba(168,85,247,.12) !important;
  color: #c084fc !important;
  border-color: rgba(168,85,247,.35) !important;
}
.data-tag--cyan {
  background: rgba(6,182,212,.12) !important;
  color: #22d3ee !important;
  border-color: rgba(6,182,212,.35) !important;
}
.data-tag--gold {
  background: rgba(251,191,36,.12) !important;
  color: #fbbf24 !important;
  border-color: rgba(251,191,36,.35) !important;
}

.live-dot {
  color: #25d366;
  font-weight: 700;
  animation: liveBlink 1.2s ease-in-out infinite;
}
.live-dot::after {
  content: ' ●';
  animation: liveBlink 1.2s ease-in-out infinite;
}
@keyframes liveBlink {
  0%,100% { opacity: 1; }
  50% { opacity: .45; }
}

.data-feed-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(6,182,212,.06) 50%, transparent 100%);
  height: 40%;
  animation: feedScan 3.5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes feedScan {
  0% { top: -40%; }
  100% { top: 100%; }
}

.data-feed-corner {
  position: absolute;
  width: 10px; height: 10px;
  border-color: rgba(6,182,212,.6);
  border-style: solid;
  pointer-events: none;
  z-index: 3;
}
.data-feed-corner-tl { top: 4px; left: 4px; border-width: 2px 0 0 2px; }
.data-feed-corner-tr { top: 4px; right: 4px; border-width: 2px 2px 0 0; }
.data-feed-corner-bl { bottom: 4px; left: 4px; border-width: 0 0 2px 2px; }
.data-feed-corner-br { bottom: 4px; right: 4px; border-width: 0 2px 2px 0; }


.logo-img {
  border: 2px solid rgba(232,197,71,.5) !important;
  box-shadow: 0 0 16px rgba(18,163,114,.35);
}
.logo-glow-ring {
  box-shadow: 0 0 20px rgba(18,163,114,.4), 0 0 40px rgba(232,197,71,.2) !important;
}

@media (max-width: 768px) {
  .hero-hub-stage--pro { width: min(340px, 92vw); padding-bottom: 110px; }
  .hub-node { width: 68px !important; padding: 10px 6px !important; }
  .hub-logo-img { width: 40px !important; height: 40px !important; }
  .hero-visual { min-height: 480px !important; }
  .hero-data-feed--pro { bottom: -72px !important; max-width: 100%; }
  .data-feed-line { font-size: .58rem; }
  .data-feed-title { font-size: .56rem; }
}

/* ═══════════════════════════════════════════════════════════
   v13 — Hub polish: richer colors, energy flow, logo glow
   ═══════════════════════════════════════════════════════════ */

.hub-line--active {
  stroke-width: 3 !important;
  filter: drop-shadow(0 0 6px rgba(6,182,212,.8));
  animation: lineFlowActive 1.2s linear infinite !important;
}
@keyframes lineFlowActive {
  to { stroke-dashoffset: -40; }
}

.hub-energy {
  filter: drop-shadow(0 0 6px currentColor);
  transition: opacity .4s ease;
}

.hub-node {
  animation: nodeFloat 4s ease-in-out infinite;
}
.hub-node[data-hub="wa"] { animation-delay: 0s; }
.hub-node[data-hub="ai"] { animation-delay: -.7s; }
.hub-node[data-hub="lead"] { animation-delay: -1.4s; }
.hub-node[data-hub="call"] { animation-delay: -2.1s; }
.hub-node[data-hub="crm"] { animation-delay: -2.8s; }
.hub-node[data-hub="pay"] { animation-delay: -3.5s; }
@keyframes nodeFloat {
  0%,100% { margin-top: 0; }
  50% { margin-top: -5px; }
}
.hub-node.active {
  animation: nodeActiveGlow .6s ease forwards, nodeFloat 4s ease-in-out infinite;
}
@keyframes nodeActiveGlow {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
  100% { filter: brightness(1.15); }
}

.hub-center--logo {
  background: radial-gradient(circle at 35% 25%, rgba(232,197,71,.15), rgba(18,163,114,.5) 35%, rgba(10,15,30,.98)) !important;
  border: 2px solid rgba(232,197,71,.6) !important;
  box-shadow:
    0 0 60px rgba(18,163,114,.45),
    0 0 100px rgba(124,58,237,.3),
    inset 0 0 40px rgba(6,182,212,.12) !important;
}
.hub-logo-img {
  width: 54px !important; height: 54px !important;
  border-radius: 16px !important;
  border: 2px solid rgba(232,197,71,.4);
  animation: logoHubPulse 2.5s ease-in-out infinite !important;
}
@keyframes logoHubPulse {
  0%,100% {
    filter: drop-shadow(0 0 10px rgba(232,197,71,.6));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 22px rgba(18,163,114,.9)) drop-shadow(0 0 8px rgba(232,197,71,.5));
    transform: scale(1.06);
  }
}

.hub-aura {
  background:
    radial-gradient(circle at 50% 45%, rgba(18,163,114,.22), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(124,58,237,.18), transparent 55%),
    radial-gradient(circle at 50% 55%, rgba(232,197,71,.08), transparent 60%) !important;
}

.hub-radar-sweep {
  background: conic-gradient(from 0deg, transparent 0deg, rgba(18,163,114,.12) 25deg, rgba(6,182,212,.2) 35deg, transparent 55deg) !important;
}

.hub-ring--green {
  box-shadow: 0 0 20px rgba(18,163,114,.2);
}

.data-tag--gold { background: rgba(251,191,36,.2) !important; color: #fbbf24 !important; }
.data-feed-line--active {
  animation: feedPulse .5s ease;
}
@keyframes feedPulse {
  0% { opacity: .5; transform: translateX(-4px); }
  100% { opacity: 1; transform: translateX(0); }
}

.logo-img {
  border-radius: 12px !important;
  border: 2px solid rgba(232,197,71,.55) !important;
  box-shadow: 0 0 20px rgba(18,163,114,.4), 0 0 8px rgba(232,197,71,.3) !important;
  animation: navLogoGlow 3s ease-in-out infinite;
}
@keyframes navLogoGlow {
  0%,100% { box-shadow: 0 0 16px rgba(18,163,114,.35); }
  50% { box-shadow: 0 0 28px rgba(232,197,71,.45); }
}

.preloader-ring { border-top-color: #12a372 !important; }
.preloader-ring-2 { border-top-color: #e8c547 !important; }

.hub-spark {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #e8c547; pointer-events: none; z-index: 3;
  animation: sparkDrift 3s ease-in-out infinite;
}
.hub-spark-1 { top: 18%; left: 22%; animation-delay: 0s; }
.hub-spark-2 { top: 12%; right: 20%; animation-delay: -1s; background: #12a372; }
.hub-spark-3 { bottom: 28%; left: 15%; animation-delay: -2s; background: #a855f7; width: 3px; height: 3px; }
@keyframes sparkDrift {
  0%,100% { opacity: .3; transform: translate(0,0) scale(1); }
  50% { opacity: 1; transform: translate(6px,-8px) scale(1.4); }
}

/* ═══════════════════════════════════════════════════════════
   v16 — Alien-tech hub + feed layout fix (AI Call visible)
   ═══════════════════════════════════════════════════════════ */

.hero-hub-stage--alien {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0 !important;
  width: min(420px, 100%);
}

.hub-orbit-zone {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: visible;
  padding-bottom: 36px;
  box-sizing: content-box;
}

.hero-hub--alien {
  transform: scale(0.94);
  transform-origin: center top;
}

.hub-alien-grid {
  position: absolute; inset: -4% -4% 8%;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(6,182,212,.06) 0%, transparent 55%),
    repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 28deg, rgba(168,85,247,.04) 28deg 30deg);
  mask-image: radial-gradient(circle at 50% 45%, black 30%, transparent 72%);
  animation: alienGridSpin 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes alienGridSpin { to { transform: rotate(360deg); } }

.hub-holo-ring {
  position: absolute; inset: 2% 2% 10%;
  border-radius: 50%;
  border: 1px solid rgba(6,182,212,.15);
  box-shadow: 0 0 40px rgba(124,58,237,.15), inset 0 0 60px rgba(18,163,114,.06);
  animation: holoRingPulse 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes holoRingPulse {
  0%,100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

.hub-pulse-ring {
  animation: svgPulse 3s ease-in-out infinite;
  transform-origin: 210px 210px;
}
.hub-spin-ring {
  animation: svgSpin 90s linear infinite;
  transform-origin: 210px 210px;
}
@keyframes svgPulse {
  0%,100% { opacity: .4; r: 200; }
  50% { opacity: .9; }
}
@keyframes svgSpin { to { transform: rotate(360deg); } }

.hub-radar-sweep--rev {
  animation-direction: reverse !important;
  animation-duration: 6s !important;
  background: conic-gradient(from 180deg, transparent 0deg, rgba(168,85,247,.1) 25deg, transparent 50deg) !important;
  opacity: .7;
}

.hub-spark-4 { top: 42%; right: 8%; background: #06b6d4; animation-delay: -.5s; width: 3px; height: 3px; }
.hub-spark-5 { bottom: 38%; right: 18%; background: #ec4899; animation-delay: -1.8s; }

.hub-center--holo {
  overflow: hidden;
}
.hub-holo-shimmer {
  position: absolute; inset: -50%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  animation: holoShimmer 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes holoShimmer {
  0% { transform: translateX(-60%) rotate(25deg); }
  100% { transform: translateX(60%) rotate(25deg); }
}

.hub-node--alien,
.hub-node {
  z-index: 20 !important;
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 4px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.hub-node.active {
  animation: nodeAlienGlow .5s ease forwards, nodeFloat 4s ease-in-out infinite !important;
}
@keyframes nodeAlienGlow {
  0% { filter: brightness(1) hue-rotate(0deg); }
  50% { filter: brightness(1.4) hue-rotate(15deg); }
  100% { filter: brightness(1.2) hue-rotate(0deg); }
}

/* Pull nodes inward — AI Call fully visible above feed */
.hub-node[data-hub="wa"] { top: 2% !important; }
.hub-node[data-hub="call"] { bottom: 4% !important; }
.hub-node[data-hub="ai"] { top: 18%; right: 2% !important; }
.hub-node[data-hub="pay"] { top: 18%; left: 2% !important; }
.hub-node[data-hub="lead"] { bottom: 18%; right: 2% !important; }
.hub-node[data-hub="crm"] { bottom: 18%; left: 2% !important; }

/* Feed: back near hub, NOT pushed far down — nodes sit above via z-index */
.hero-data-feed--alien {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100%;
  max-width: 390px;
  margin-top: -8px;
  z-index: 5 !important;
  border: 1px solid rgba(6,182,212,.3) !important;
  background:
    linear-gradient(160deg, rgba(4,8,18,.92), rgba(8,14,28,.88)),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(6,182,212,.02) 2px, rgba(6,182,212,.02) 4px) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,.5),
    0 0 0 1px rgba(168,85,247,.15) inset,
    0 0 50px rgba(6,182,212,.1) !important;
}
.hero-data-feed--alien::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,.8), rgba(168,85,247,.6), transparent);
  z-index: 4;
}

.data-feed-header {
  background: linear-gradient(90deg, rgba(18,163,114,.15), rgba(6,182,212,.08), rgba(168,85,247,.12)) !important;
}
.data-feed-title {
  background: linear-gradient(90deg, #22d3ee, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

.hub-center--logo {
  box-shadow:
    0 0 70px rgba(18,163,114,.5),
    0 0 120px rgba(124,58,237,.35),
    inset 0 0 50px rgba(6,182,212,.15) !important;
}

.hub-aura {
  background:
    radial-gradient(circle at 50% 42%, rgba(6,182,212,.18), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(168,85,247,.15), transparent 55%),
    radial-gradient(circle at 50% 58%, rgba(18,163,114,.1), transparent 60%) !important;
}

.hero-hitech {
  padding-bottom: 80px;
}

@media (max-width: 768px) {
  .hero-hub-stage--alien { width: min(320px, 92vw); }
  .hero-hub--alien { transform: scale(0.9); }
  .hub-orbit-zone { padding-bottom: 28px; }
  .hero-data-feed--alien { margin-top: -4px; max-width: 100%; }
  .hero-visual { min-height: auto !important; }
  .hero-hub-stage--pro { padding-bottom: 0 !important; }
  .hero-data-feed--pro { bottom: auto !important; }
}

@media (min-width: 769px) {
  .hero-visual { min-height: 520px; }
}

/* ═══════════════════════════════════════════════════════════
   v17 — Feed up + fast ticker + AI robot side panel
   ═══════════════════════════════════════════════════════════ */

.data-feed-wrap {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin-top: -28px;
  position: relative;
  z-index: 6;
}

.ai-bot-panel {
  position: relative;
  flex-shrink: 0;
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(6,10,22,.9), rgba(12,8,24,.85));
  border: 1px solid rgba(168,85,247,.35);
  box-shadow: 0 0 24px rgba(124,58,237,.2), inset 0 0 20px rgba(6,182,212,.06);
  overflow: hidden;
  animation: botPanelPulse 2s ease-in-out infinite;
}
@keyframes botPanelPulse {
  0%,100% { box-shadow: 0 0 20px rgba(124,58,237,.15); }
  50% { box-shadow: 0 0 36px rgba(6,182,212,.35); }
}

.ai-bot-glow {
  position: absolute; inset: -20%;
  background: radial-gradient(circle, rgba(6,182,212,.2), transparent 65%);
  animation: botGlowSpin 4s linear infinite;
  pointer-events: none;
}
@keyframes botGlowSpin {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(360deg) scale(1.1); }
}

.ai-bot-svg {
  width: 58px;
  height: auto;
  position: relative;
  z-index: 2;
  animation: botFloat 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(6,182,212,.5));
}
@keyframes botFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.bot-antenna { animation: antennaBlink 1s ease-in-out infinite; }
@keyframes antennaBlink {
  0%,100% { opacity: 1; fill: #25d366; }
  50% { opacity: .4; fill: #22d3ee; }
}

.bot-eye { animation: eyeScan .8s ease-in-out infinite alternate; }
.bot-eye-r { animation-delay: .4s; }
@keyframes eyeScan {
  0% { fill: #22d3ee; filter: drop-shadow(0 0 2px #22d3ee); }
  100% { fill: #a855f7; filter: drop-shadow(0 0 6px #a855f7); }
}

.bot-mouth { animation: mouthPulse .5s ease-in-out infinite; }
@keyframes mouthPulse {
  0%,100% { opacity: .5; width: 32px; }
  50% { opacity: 1; width: 36px; }
}

.bot-bar { transform-origin: bottom center; animation: barProcess .6s ease-in-out infinite; }
.b1 { animation-delay: 0s; }
.b2 { animation-delay: .15s; }
.b3 { animation-delay: .3s; }
.b4 { animation-delay: .45s; }
@keyframes barProcess {
  0%,100% { transform: scaleY(.4); opacity: .5; }
  50% { transform: scaleY(1); opacity: 1; }
}

.bot-arm { animation: armWork 1.2s ease-in-out infinite; }
.arm-l { animation-delay: 0s; }
.arm-r { animation-delay: .6s; }
@keyframes armWork {
  0%,100% { transform: rotate(0deg); transform-origin: center top; }
  50% { transform: rotate(8deg); }
}

.ai-bot-speed {
  margin-top: 4px;
  text-align: center;
  z-index: 2;
  font-family: 'Courier New', monospace;
}
.ai-bot-speed-val {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  color: #22d3ee;
  text-shadow: 0 0 10px rgba(6,182,212,.6);
  animation: speedFlicker .3s step-end infinite;
}
@keyframes speedFlicker {
  0%,100% { opacity: 1; }
  50% { opacity: .85; }
}
.ai-bot-speed-label {
  font-size: .45rem;
  color: rgba(148,163,184,.6);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ai-bot-status {
  margin-top: 3px;
  font-size: .42rem;
  font-weight: 700;
  color: #25d366;
  letter-spacing: .08em;
  animation: statusBlink 1s ease-in-out infinite;
  z-index: 2;
}
@keyframes statusBlink {
  0%,100% { opacity: 1; }
  50% { opacity: .5; }
}

.hero-data-feed--alien {
  flex: 1;
  min-width: 0;
  margin-top: 0 !important;
}

.data-feed-line--flash {
  animation: feedFlash .35s ease !important;
}
@keyframes feedFlash {
  0% { opacity: .3; transform: translateX(6px); }
  100% { opacity: 1; transform: translateX(0); }
}

.data-feed-meta {
  color: #fbbf24 !important;
  font-weight: 700;
  animation: speedMetaPulse 1.5s ease-in-out infinite;
}
@keyframes speedMetaPulse {
  0%,100% { text-shadow: 0 0 6px rgba(251,191,36,.3); }
  50% { text-shadow: 0 0 12px rgba(251,191,36,.7); }
}

.data-feed-scan {
  animation-duration: 1.8s !important;
}

@media (max-width: 768px) {
  .data-feed-wrap {
    margin-top: -20px;
    max-width: 100%;
    gap: 6px;
  }
  .ai-bot-panel { width: 62px; padding: 6px 2px; }
  .ai-bot-svg { width: 48px; }
  .ai-bot-speed-val { font-size: .65rem; }
  .ai-bot-status { font-size: .38rem; }
}

/* ═══════════════════════════════════════════════════════════
   v18 — Super card mini-anims + AI Action Theater
   ═══════════════════════════════════════════════════════════ */

.super-anim {
  height: 72px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(5,8,16,.6);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Night shift */
.super-anim--night { gap: 12px; }
.anim-clock {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  font-weight: 800;
  color: #a855f7;
  text-shadow: 0 0 12px rgba(168,85,247,.6);
  animation: clockTick 2s step-end infinite;
}
@keyframes clockTick {
  0%,49% { opacity: 1; }
  50%,100% { opacity: .7; }
}
.anim-moon { font-size: 1.6rem; animation: moonGlow 3s ease-in-out infinite; }
@keyframes moonGlow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(251,191,36,.4)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 16px rgba(251,191,36,.8)); transform: scale(1.1); }
}
.anim-badge--live {
  font-size: .55rem; font-weight: 800; letter-spacing: .1em;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(37,211,102,.2); color: #25d366;
  border: 1px solid rgba(37,211,102,.4);
  animation: liveBadge 1.2s ease-in-out infinite;
}
@keyframes liveBadge {
  0%,100% { box-shadow: 0 0 8px rgba(37,211,102,.3); }
  50% { box-shadow: 0 0 20px rgba(37,211,102,.6); }
}

/* Speed */
.super-anim--speed { flex-direction: column; gap: 4px; }
.anim-speed-ring {
  width: 48px; height: 48px; border-radius: 50%;
  border: 3px solid rgba(6,182,212,.2);
  border-top-color: #22d3ee;
  animation: speedSpin .6s linear infinite;
}
@keyframes speedSpin { to { transform: rotate(360deg); } }
.anim-speed-num {
  font-size: 1rem; font-weight: 800; color: #22d3ee;
  text-shadow: 0 0 10px rgba(6,182,212,.5);
  animation: speedPop .8s ease-in-out infinite;
}
@keyframes speedPop {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Neural brain */
.super-anim--brain { flex-direction: column; gap: 6px; }
.anim-neural {
  display: flex; gap: 6px; align-items: center;
}
.anim-neural span {
  width: 8px; height: 8px; border-radius: 50%;
  background: #a855f7;
  animation: neuralPulse .8s ease-in-out infinite;
}
.anim-neural span:nth-child(1) { animation-delay: 0s; }
.anim-neural span:nth-child(2) { animation-delay: .15s; background: #22d3ee; }
.anim-neural span:nth-child(3) { animation-delay: .3s; }
.anim-neural span:nth-child(4) { animation-delay: .45s; background: #12a372; }
.anim-neural span:nth-child(5) { animation-delay: .6s; background: #fbbf24; }
@keyframes neuralPulse {
  0%,100% { transform: scale(.6); opacity: .4; }
  50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 8px currentColor; }
}
.anim-faq-count {
  font-size: .65rem; font-weight: 700; color: var(--purple);
  font-family: 'Courier New', monospace;
}

/* Lead flow */
.anim-lead-flow {
  display: flex; align-items: center; gap: 6px;
}
.anim-wa, .anim-sheet, .anim-check {
  font-size: 1.2rem;
  animation: leadBounce 1.5s ease-in-out infinite;
}
.anim-sheet { animation-delay: .5s; }
.anim-check { color: #25d366; animation-delay: 1s; font-size: 1rem; font-weight: 800; }
@keyframes leadBounce {
  0%,100% { transform: translateY(0); opacity: .6; }
  50% { transform: translateY(-4px); opacity: 1; }
}
.anim-beam {
  width: 24px; height: 2px;
  background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  animation: beamFlow 1s linear infinite;
}
@keyframes beamFlow {
  0% { opacity: .3; transform: scaleX(.5); }
  50% { opacity: 1; transform: scaleX(1); }
  100% { opacity: .3; transform: scaleX(.5); }
}

/* AI Phone Call — unique call UI */
.super-card--call {
  border-color: rgba(236,72,153,.3) !important;
}
.super-card--call:hover {
  border-color: rgba(236,72,153,.55) !important;
  box-shadow: 0 24px 60px rgba(236,72,153,.15) !important;
}
.super-anim--call {
  flex-direction: column;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(236,72,153,.08), rgba(5,8,16,.8));
  border-color: rgba(236,72,153,.2);
}
.anim-call-ui { width: 100%; text-align: center; }
.anim-call-icon {
  font-size: 1.1rem;
  animation: callRing 1.5s ease-in-out infinite;
}
@keyframes callRing {
  0%,100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
.anim-waveform {
  display: flex; align-items: center; justify-content: center;
  gap: 3px; height: 28px; margin: 4px 0;
}
.anim-waveform span {
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #ec4899, #a855f7);
  animation: waveBar .5s ease-in-out infinite;
}
.anim-waveform span:nth-child(1) { animation-delay: 0s; }
.anim-waveform span:nth-child(2) { animation-delay: .07s; }
.anim-waveform span:nth-child(3) { animation-delay: .14s; }
.anim-waveform span:nth-child(4) { animation-delay: .21s; }
.anim-waveform span:nth-child(5) { animation-delay: .28s; }
.anim-waveform span:nth-child(6) { animation-delay: .21s; }
.anim-waveform span:nth-child(7) { animation-delay: .14s; }
@keyframes waveBar {
  0%,100% { height: 6px; opacity: .4; }
  50% { height: 22px; opacity: 1; }
}
.anim-call-transcript {
  font-size: .58rem;
  font-family: 'Courier New', monospace;
  color: #22d3ee;
  min-height: 1.2em;
  text-align: center;
  text-shadow: 0 0 8px rgba(6,182,212,.4);
  border-left: 2px solid #ec4899;
  padding-left: 6px;
  margin: 0 auto;
  max-width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.super-stat--live { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.call-live-dot {
  font-size: .55rem; font-weight: 800; color: #ef4444;
  animation: recBlink 1s step-end infinite;
}
@keyframes recBlink {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Money coins */
.super-anim--money { flex-direction: column; gap: 4px; }
.anim-coins {
  display: flex; gap: 8px;
}
.anim-coins span {
  font-size: 1.1rem; font-weight: 800; color: #fbbf24;
  animation: coinStack 1.2s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(251,191,36,.5);
}
.anim-coins span:nth-child(2) { animation-delay: .2s; }
.anim-coins span:nth-child(3) { animation-delay: .4s; }
@keyframes coinStack {
  0%,100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(-8px); opacity: 1; }
}
.anim-saved {
  font-size: .7rem; font-weight: 800; color: #25d366;
}

/* ── AI ACTION THEATER ── */
.ai-theater {
  margin-bottom: 64px;
  padding: 32px 28px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(8,12,24,.95), rgba(12,8,28,.9));
  border: 1px solid rgba(124,58,237,.3);
  box-shadow: 0 24px 80px rgba(0,0,0,.4), 0 0 60px rgba(124,58,237,.08);
  position: relative;
  overflow: hidden;
}
.ai-theater::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(6,182,212,.02) 3px, rgba(6,182,212,.02) 4px);
  pointer-events: none;
}
.ai-theater-head {
  text-align: center;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}
.ai-theater-head h3 {
  font-family: var(--font-hi);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 800;
  margin: 8px 0;
}
.ai-theater-head p { color: var(--muted); font-size: .88rem; }

.ai-theater-tabs {
  display: flex; justify-content: center; gap: 10px;
  margin-bottom: 28px; flex-wrap: wrap;
  position: relative; z-index: 2;
}
.ai-tab {
  padding: 8px 18px; border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted); font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: all .3s;
  font-family: inherit;
}
.ai-tab:hover { border-color: rgba(168,85,247,.4); color: var(--text); }
.ai-tab--active {
  background: rgba(124,58,237,.2);
  border-color: rgba(168,85,247,.5);
  color: #c084fc;
  box-shadow: 0 0 20px rgba(124,58,237,.25);
}

.ai-theater-stage { position: relative; z-index: 2; }

.ai-pipeline {
  display: grid;
  grid-template-columns: 1fr minmax(60px, 1.2fr) 1fr minmax(60px, 1.2fr) 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.ai-pipe-node {
  text-align: center;
  padding: 16px 10px;
  border-radius: 16px;
  background: rgba(5,8,16,.7);
  border: 1px solid rgba(255,255,255,.08);
  transition: border-color .4s, box-shadow .4s;
}
.ai-theater--pulse .ai-pipe-brain {
  border-color: rgba(168,85,247,.5);
  box-shadow: 0 0 30px rgba(124,58,237,.3);
  animation: brainFlash .5s ease;
}
@keyframes brainFlash {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.pipe-icon { font-size: 1.8rem; margin-bottom: 6px; }
.pipe-label {
  display: block;
  font-size: .65rem; font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.pipe-detail, .pipe-processing {
  font-size: .62rem;
  font-family: 'Courier New', monospace;
  color: #22d3ee;
  line-height: 1.4;
  min-height: 2.8em;
}
.pipe-processing { color: #a855f7; }

.pipe-brain-core {
  position: relative;
  width: 52px; height: 52px;
  margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.brain-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(168,85,247,.4);
  animation: brainRingSpin 3s linear infinite;
}
.brain-ring-2 {
  inset: -6px; border-color: rgba(6,182,212,.3);
  animation-direction: reverse; animation-duration: 5s;
}
@keyframes brainRingSpin { to { transform: rotate(360deg); } }

.ai-pipe-track {
  position: relative;
  height: 8px;
  display: flex; align-items: center;
  margin: 0 4px;
}
.pipe-line {
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,.4), transparent);
  border-radius: 999px;
  animation: linePulse 1.5s ease-in-out infinite;
}
.pipe-line--purple {
  background: linear-gradient(90deg, transparent, rgba(168,85,247,.4), rgba(37,211,102,.4), transparent);
}
@keyframes linePulse {
  0%,100% { opacity: .4; }
  50% { opacity: 1; }
}
.pipe-dot {
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  animation: dotTravel 1.8s linear infinite;
  box-shadow: 0 0 10px currentColor;
}
.pipe-dot--cyan { background: #22d3ee; color: #22d3ee; left: 0; }
.pipe-dot--purple { background: #a855f7; color: #a855f7; animation-delay: -.6s; left: 0; }
.pipe-dot--green { background: #25d366; color: #25d366; left: 0; }
@keyframes dotTravel {
  0% { left: 0; opacity: 0; transform: translateY(-50%) scale(.5); }
  8% { opacity: 1; transform: translateY(-50%) scale(1); }
  92% { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; transform: translateY(-50%) scale(.5); }
}

.ai-theater[data-scenario="call"] .ai-pipe-in { border-color: rgba(236,72,153,.35); }
.ai-theater[data-scenario="lead"] .ai-pipe-in { border-color: rgba(59,130,246,.35); }
.ai-theater[data-scenario="wa"] .ai-pipe-in { border-color: rgba(37,211,102,.35); }

.ai-theater-log {
  border-radius: 14px;
  background: rgba(3,6,14,.8);
  border: 1px solid rgba(6,182,212,.2);
  overflow: hidden;
}
.ai-log-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-size: .58rem; font-weight: 700;
  letter-spacing: .12em;
  color: #22d3ee;
  border-bottom: 1px solid rgba(6,182,212,.15);
  font-family: 'Courier New', monospace;
}
.ai-log-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #25d366;
  animation: feedPulseDot 1s infinite;
}
.ai-log-body { padding: 10px 14px; }
.ai-log-line {
  font-family: 'Courier New', monospace;
  font-size: .64rem;
  color: rgba(148,163,184,.5);
  padding: 4px 0;
  border-left: 2px solid transparent;
  padding-left: 8px;
  transition: color .3s, border-color .3s;
}
.ai-log-line--active {
  color: rgba(226,232,240,.95);
  border-left-color: #12a372;
  animation: logFlash .4s ease;
}
@keyframes logFlash {
  0% { opacity: .4; transform: translateX(4px); }
  100% { opacity: 1; transform: translateX(0); }
}

@media (max-width: 768px) {
  .ai-pipeline {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ai-pipe-track {
    width: 80%; margin: 0 auto;
    height: 8px;
    transform: none;
  }
  .ai-theater { padding: 24px 16px; }
  .super-anim { height: 64px; }
  .anim-call-transcript { font-size: .52rem; }
}

/* ═══════════════════════════════════════════════════════════
   v19 — Ultra creative animations upgrade
   ═══════════════════════════════════════════════════════════ */

/* Global super-anim holographic overlay */
.super-anim::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.04) 50%, transparent 58%);
  animation: holoSweep 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes holoSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Night — starfield + aurora */
.anim-stars { position: absolute; inset: 0; pointer-events: none; }
.anim-stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff; opacity: .6;
  animation: starTwinkle 2s ease-in-out infinite;
}
.anim-stars i:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
.anim-stars i:nth-child(2) { top: 25%; left: 75%; animation-delay: -.5s; }
.anim-stars i:nth-child(3) { top: 60%; left: 20%; animation-delay: -1s; }
.anim-stars i:nth-child(4) { top: 40%; left: 55%; animation-delay: -1.5s; width: 3px; height: 3px; }
.anim-stars i:nth-child(5) { top: 70%; left: 85%; animation-delay: -.8s; }
@keyframes starTwinkle {
  0%,100% { opacity: .2; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 6px #fff; }
}
.anim-aurora {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent, rgba(168,85,247,.12), rgba(6,182,212,.08), transparent);
  animation: auroraShift 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes auroraShift {
  0%,100% { opacity: .4; transform: skewX(-5deg); }
  50% { opacity: .8; transform: skewX(5deg); }
}
.super-anim--night .anim-clock {
  font-size: .85rem;
  z-index: 2;
  animation: clockGlow 2s ease-in-out infinite;
}
@keyframes clockGlow {
  0%,100% { text-shadow: 0 0 8px rgba(168,85,247,.5); }
  50% { text-shadow: 0 0 20px rgba(6,182,212,.8); color: #22d3ee; }
}

/* Speed — dual ring + lightning */
.super-anim--speed { position: relative; }
.super-anim--speed::before {
  content: '⚡';
  position: absolute; top: 8px; right: 12px;
  font-size: .9rem;
  animation: lightningFlash 1.5s ease-in-out infinite;
}
@keyframes lightningFlash {
  0%,100% { opacity: 0; transform: scale(.8); }
  10%,20% { opacity: 1; transform: scale(1.2); filter: drop-shadow(0 0 8px #fbbf24); }
}
.anim-speed-ring {
  position: relative;
  box-shadow: 0 0 20px rgba(6,182,212,.3), inset 0 0 12px rgba(6,182,212,.1);
}
.anim-speed-ring::after {
  content: '';
  position: absolute; inset: 6px; border-radius: 50%;
  border: 2px dashed rgba(168,85,247,.4);
  animation: speedSpin 2s linear infinite reverse;
}

/* Neural SVG network */
.anim-neural-svg { width: 100%; max-width: 110px; height: 36px; }
.n-node { fill: #a855f7; animation: nodeGlow 1.2s ease-in-out infinite; }
.n-node:nth-child(2) { animation-delay: .2s; fill: #22d3ee; }
.n-node:nth-child(3) { animation-delay: .4s; fill: #12a372; }
.n-out { fill: #fbbf24; animation-delay: .6s; }
@keyframes nodeGlow {
  0%,100% { r: 3; opacity: .5; }
  50% { r: 5; opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
}
.n-link {
  stroke: rgba(168,85,247,.35);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  animation: linkFlow 1s linear infinite;
}
@keyframes linkFlow { to { stroke-dashoffset: -16; } }

/* Lead — data packet */
.anim-lead-flow { position: relative; width: 100%; justify-content: center; }
.anim-lead-flow::after {
  content: '●';
  position: absolute;
  color: #22d3ee;
  font-size: .6rem;
  animation: packetTravel 2s linear infinite;
  text-shadow: 0 0 8px #22d3ee;
}
@keyframes packetTravel {
  0% { left: 15%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 85%; opacity: 0; }
}

/* Call — orbit rings + 3D waveform */
.anim-call-orbit {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.anim-call-orbit span {
  position: absolute;
  border: 1px solid rgba(236,72,153,.3);
  border-radius: 50%;
  animation: callOrbitExpand 2s ease-out infinite;
}
.anim-call-orbit span:nth-child(1) { width: 30px; height: 30px; animation-delay: 0s; }
.anim-call-orbit span:nth-child(2) { width: 30px; height: 30px; animation-delay: .6s; }
.anim-call-orbit span:nth-child(3) { width: 30px; height: 30px; animation-delay: 1.2s; }
@keyframes callOrbitExpand {
  0% { transform: scale(.5); opacity: .8; border-color: rgba(236,72,153,.6); }
  100% { transform: scale(2.5); opacity: 0; border-color: rgba(168,85,247,0); }
}
.anim-waveform--3d span {
  background: linear-gradient(180deg, #f472b6, #a855f7, #22d3ee) !important;
  box-shadow: 0 0 6px rgba(236,72,153,.4);
  transform-origin: bottom center;
}
.anim-waveform--3d span:nth-child(odd) {
  animation: waveBar3d .4s ease-in-out infinite !important;
}
@keyframes waveBar3d {
  0%,100% { height: 4px; transform: scaleY(1) rotateX(0deg); opacity: .5; }
  50% { height: 24px; transform: scaleY(1.1) rotateX(15deg); opacity: 1; }
}

/* Money — rising chart line */
.super-anim--money::before {
  content: '';
  position: absolute; bottom: 8px; left: 12px; right: 12px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cpath d='M0 20 L20 16 L35 18 L50 8 L65 10 L80 2' fill='none' stroke='%2325d366' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: contain;
  opacity: .5;
  animation: chartRise 2s ease-in-out infinite;
}
@keyframes chartRise {
  0%,100% { opacity: .3; transform: translateY(4px); }
  50% { opacity: .8; transform: translateY(0); }
}

/* ── AI THEATER v19 ── */
.ai-theater {
  isolation: isolate;
}
.ai-theater-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: .7;
}
.ai-theater-aurora {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(124,58,237,.15), transparent),
    radial-gradient(ellipse 50% 35% at 80% 70%, rgba(6,182,212,.12), transparent);
  animation: auroraShift 6s ease-in-out infinite;
  pointer-events: none;
}
.ai-theater-scan {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(6,182,212,.04) 50%, transparent);
  height: 30%;
  animation: feedScan 2.5s linear infinite;
  pointer-events: none;
}

.ai-phase-bar {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.ai-phase {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px;
  font-size: .58rem; font-weight: 700;
  letter-spacing: .1em;
  color: rgba(148,163,184,.5);
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(5,8,16,.5);
  transition: all .4s;
  font-family: 'Courier New', monospace;
}
.ai-phase span {
  font-size: .5rem; opacity: .6;
}
.ai-phase--active {
  color: #22d3ee;
  border-color: rgba(6,182,212,.4);
  background: rgba(6,182,212,.1);
  box-shadow: 0 0 20px rgba(6,182,212,.2);
  animation: phasePulse .8s ease;
}
@keyframes phasePulse {
  0% { transform: scale(.95); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.ai-pipeline--phase-0 .ai-pipe-in {
  border-color: rgba(37,211,102,.5);
  box-shadow: 0 0 30px rgba(37,211,102,.2);
  animation: nodeInGlow .8s ease;
}
.ai-pipeline--phase-1 .ai-pipe-brain {
  border-color: rgba(168,85,247,.6);
  box-shadow: 0 0 40px rgba(124,58,237,.35);
}
.ai-pipeline--phase-2 .ai-pipe-out {
  border-color: rgba(37,211,102,.5);
  box-shadow: 0 0 30px rgba(37,211,102,.25);
  animation: nodeInGlow .8s ease;
}
@keyframes nodeInGlow {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.brain-hex-field {
  position: absolute; inset: -20px;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1l9 5v8l-9 5-9-5V6z' fill='none' stroke='%23a855f7' stroke-opacity='0.15'/%3E%3C/svg%3E");
  animation: alienGridSpin 20s linear infinite;
  opacity: .6;
}
.brain-ring-3 {
  inset: -10px;
  border-color: rgba(37,211,102,.25) !important;
  animation-duration: 2s !important;
}
.brain-core-glow {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,.4), transparent 70%);
  animation: brainCorePulse 1s ease-in-out infinite;
}
@keyframes brainCorePulse {
  0%,100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
.brain-emoji { position: relative; z-index: 2; font-size: 1.5rem; }

.ai-pipe-brain--burst .brain-core-glow {
  animation: brainBurst .6s ease forwards;
}
@keyframes brainBurst {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.8); opacity: .8; box-shadow: 0 0 40px rgba(168,85,247,.8); }
  100% { transform: scale(1); opacity: .5; }
}

.pipe-processing--scramble {
  font-variant-numeric: tabular-nums;
  min-height: 2.8em;
  color: #c084fc !important;
  text-shadow: 0 0 8px rgba(168,85,247,.5);
}

.ai-pipe-in, .ai-pipe-out, .ai-pipe-brain {
  transition: border-color .5s, box-shadow .5s, transform .4s;
}

.pipe-dot {
  box-shadow: 0 0 12px currentColor, 0 0 24px currentColor;
}

.ai-theater-head, .ai-theater-tabs, .ai-theater-stage {
  position: relative; z-index: 2;
}

.super-card:hover .super-anim {
  border-color: rgba(168,85,247,.25);
  box-shadow: inset 0 0 30px rgba(124,58,237,.08);
}

@media (max-width: 768px) {
  .ai-phase { padding: 5px 10px; font-size: .52rem; }
  .brain-hex-field { inset: -10px; }
}

/* ═══════════════════════════════════════════════════════════
   v21 — AI Phone Call box: readable text + pro UI
   ═══════════════════════════════════════════════════════════ */

.super-card--call .super-anim--call {
  height: auto !important;
  min-height: 130px;
  padding: 0 !important;
  overflow: visible !important;
  background: linear-gradient(160deg, rgba(20,8,28,.95), rgba(8,10,22,.98)) !important;
  border: 1px solid rgba(236,72,153,.35) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 24px rgba(236,72,153,.12) !important;
}

.super-card--call .anim-call-ui {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.anim-call-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(90deg, rgba(236,72,153,.15), rgba(124,58,237,.08));
  border-bottom: 1px solid rgba(236,72,153,.2);
  font-family: 'Courier New', Consolas, monospace;
  font-size: .58rem;
}
.anim-call-rec {
  color: #ef4444;
  font-weight: 800;
  animation: recBlink 1s step-end infinite;
  text-shadow: 0 0 8px rgba(239,68,68,.6);
}
.anim-call-status {
  flex: 1;
  color: rgba(226,232,240,.85);
  font-weight: 700;
  letter-spacing: .06em;
}
.anim-call-timer {
  color: #22d3ee;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.anim-call-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px 6px;
  min-height: 44px;
}
.anim-call-visual .anim-call-icon {
  font-size: 1.25rem;
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(236,72,153,.6));
  animation: callRing 1.2s ease-in-out infinite;
}
.anim-call-visual .anim-waveform {
  flex: 1;
  max-width: 120px;
  height: 32px;
  margin: 0;
  z-index: 2;
}
.anim-call-visual .anim-call-orbit {
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  inset: auto;
  width: 40px;
  height: 40px;
}

.anim-call-transcript-box {
  margin: 0 8px 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(3,6,14,.85);
  border: 1px solid rgba(6,182,212,.25);
  box-shadow: inset 0 0 20px rgba(6,182,212,.06);
  position: relative;
}
.anim-call-transcript-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,.5), transparent);
}
.anim-call-label {
  display: block;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(168,85,247,.9);
  margin-bottom: 4px;
}

.anim-call-transcript {
  font-size: .72rem !important;
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  color: #f1f5f9 !important;
  line-height: 1.45 !important;
  min-height: 2.4em;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  text-shadow: none !important;
  word-break: break-word;
}
.anim-call-text {
  color: #f8fafc;
  font-weight: 500;
}
.anim-call-cursor {
  display: inline-block;
  color: #ec4899;
  font-weight: 300;
  margin-left: 1px;
  animation: cursorBlink .7s step-end infinite;
  text-shadow: 0 0 8px rgba(236,72,153,.8);
}
@keyframes cursorBlink {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}

.super-card--call:hover .anim-call-transcript-box {
  border-color: rgba(236,72,153,.4);
  box-shadow: inset 0 0 24px rgba(236,72,153,.08);
}

@media (max-width: 768px) {
  .super-card--call .super-anim--call { min-height: 120px; }
  .anim-call-transcript { font-size: .68rem !important; }
  .anim-call-visual .anim-waveform { max-width: 90px; }
}

/* ═══════════════════════════════════════════════════════════
   v22 — Smart Summary PDF + Excel animated demo
   ═══════════════════════════════════════════════════════════ */

.svc-card--featured {
  border-color: rgba(6,182,212,.35) !important;
  background: linear-gradient(145deg, rgba(6,182,212,.08), rgba(8,12,24,.95)) !important;
}
.svc-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  color: #22d3ee;
  background: rgba(6,182,212,.12);
  border: 1px solid rgba(6,182,212,.3);
}

/* ── Smart Summary Engine v2 — Compact Excel → AI → PDF ── */
.summary-engine {
  margin: 36px 0 32px;
  padding: 28px 24px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(8,14,28,.96), rgba(6,10,22,.98));
  border: 1px solid rgba(18,163,114,.25);
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 40px rgba(18,163,114,.05);
  position: relative;
  overflow: hidden;
}
.summary-engine::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(18,163,114,.07), transparent);
  pointer-events: none;
}

.sum-v2-head {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.sum-v2-head h3 {
  font-family: var(--font-hi);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 800;
  margin: 6px 0 8px;
  line-height: 1.35;
}
.sum-v2-tagline {
  color: var(--muted);
  font-size: .82rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.55;
}

.sum-v2-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.sum-v2-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(5,8,16,.7);
  min-width: 90px;
  text-align: center;
  transition: all .4s;
}
.sum-v2-node span { font-size: 1.3rem; }
.sum-v2-node strong {
  font-size: .68rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: .02em;
}
.sum-v2-node em {
  font-size: .55rem;
  color: rgba(148,163,184,.7);
  font-style: normal;
}
.sum-v2-node--excel { border-color: rgba(34,197,94,.3); }
.sum-v2-node--ai {
  border-color: rgba(6,182,212,.4);
  background: rgba(6,182,212,.08);
  box-shadow: 0 0 24px rgba(6,182,212,.15);
}
.sum-v2-node--ai.sum-ai--pulse {
  animation: sumAiPulse 1.2s ease;
  box-shadow: 0 0 32px rgba(6,182,212,.35);
}
@keyframes sumAiPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.sum-v2-node--pdf { border-color: rgba(18,163,114,.35); }
.sum-v2-node--pdf.sum-pdf--ready em { color: #34d399; }

.sum-v2-flow-line {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, rgba(34,197,94,.3), rgba(6,182,212,.5), rgba(18,163,114,.3));
  position: relative;
  flex-shrink: 0;
}
.sum-v2-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 8px #22d3ee;
  top: -2px;
  animation: sumParticleFlow 2s linear infinite;
}
.sum-v2-particle--2 { animation-delay: -.7s; background: #a855f7; box-shadow: 0 0 8px #a855f7; }
.sum-v2-particle--3 { animation-delay: -1.2s; background: #34d399; box-shadow: 0 0 8px #34d399; }
@keyframes sumParticleFlow {
  0% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: calc(100% - 6px); opacity: 0; }
}

.sum-v2-stage {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 16px;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
  align-items: stretch;
}

.sum-v2-excel {
  border-radius: 12px;
  background: rgba(3,6,14,.9);
  border: 1px solid rgba(34,197,94,.25);
  overflow: hidden;
  position: relative;
  min-height: 220px;
}
.sum-v2-excel-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  background: #1e293b;
  font-size: .58rem;
  color: #94a3b8;
  font-family: 'Courier New', monospace;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sum-x-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #64748b;
}
.sum-x-dot:nth-child(1) { background: #ef4444; }
.sum-x-dot:nth-child(2) { background: #fbbf24; }
.sum-x-dot:nth-child(3) { background: #22c55e; }

.sum-v2-excel-grid {
  font-size: .56rem;
  position: relative;
  z-index: 1;
}
.sum-x-row {
  display: grid;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.sum-x-row span {
  padding: 5px 4px;
  color: rgba(226,232,240,.75);
  border-right: 1px solid rgba(255,255,255,.04);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Courier New', monospace;
}
.sum-x-row--head {
  background: rgba(34,197,94,.12);
}
.sum-x-row--head span {
  color: #4ade80;
  font-weight: 700;
  font-size: .52rem;
}
.sum-x-row--live {
  background: rgba(34,197,94,.18);
  animation: sumRowScan 1.8s ease;
}
.sum-x-row--live span { color: #86efac; font-weight: 600; }
@keyframes sumRowScan {
  0% { background: rgba(34,197,94,.45); }
  100% { background: rgba(34,197,94,.18); }
}

.sum-v2-excel-scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  box-shadow: 0 0 12px #22d3ee;
  top: 30%;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.sum-v2-excel.sum-excel--scanning .sum-v2-excel-scan {
  opacity: 1;
  animation: excelScanLine 1.6s ease-in-out;
}
@keyframes excelScanLine {
  0% { top: 28%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 88%; opacity: 0; }
}

.sum-v2-report-wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  transition: box-shadow .4s;
}
.sum-v2-report-wrap.sum-report--build {
  box-shadow: 0 0 36px rgba(18,163,114,.3), 0 8px 32px rgba(0,0,0,.35);
}

.sum-v2-report {
  background: #fff;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  transition: opacity .35s;
}
.sum-v2-report.sum-report--fade {
  opacity: 0;
  transform: scale(.98);
}

.sum-rpt-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #084a36, #0d6b4f);
  color: #fff;
}
.sum-rpt-code {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  font-family: 'Courier New', monospace;
  flex-shrink: 0;
}
.sum-rpt-header strong {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.sum-rpt-header em {
  font-size: .52rem;
  opacity: .75;
  font-style: normal;
}

.sum-rpt-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px;
  background: #f8fafc;
}
.sum-rpt-kpi {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 4px;
  text-align: center;
}
.sum-rpt-kpi-val {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  color: #084a36;
  line-height: 1.2;
}
.sum-rpt-kpi-lbl {
  display: block;
  font-size: .42rem;
  color: #64748b;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sum-rpt-kpi-trend {
  display: block;
  font-size: .42rem;
  color: #16a34a;
  font-weight: 600;
  margin-top: 1px;
}

.sum-rpt-chart {
  flex: 1;
  padding: 8px 12px 6px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 56px;
  background: #fff;
}
.sum-rpt-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #12a372, #084a36);
  min-height: 8px;
  transform-origin: bottom;
  animation: sumBarGrow .8s ease both;
}
.sum-rpt-bar:nth-child(2) { animation-delay: .08s; background: linear-gradient(180deg, #22d3ee, #0891b2); }
.sum-rpt-bar:nth-child(3) { animation-delay: .16s; background: linear-gradient(180deg, #c9a227, #a16207); }
.sum-rpt-bar:nth-child(4) { animation-delay: .24s; }
.sum-rpt-bar:nth-child(5) { animation-delay: .32s; background: linear-gradient(180deg, #22d3ee, #0891b2); }
.sum-rpt-bar:nth-child(6) { animation-delay: .4s; }
.sum-rpt-bar:nth-child(7) { animation-delay: .48s; background: linear-gradient(180deg, #c9a227, #a16207); }
@keyframes sumBarGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.sum-rpt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
  font-size: .48rem;
  color: #64748b;
  font-family: 'Courier New', monospace;
}
.sum-rpt-badge {
  padding: 2px 6px;
  border-radius: 3px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  color: #084a36;
  font-weight: 800;
  font-size: .42rem;
  letter-spacing: .06em;
  border: 1px solid #12a372;
}

.sum-v2-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}
.sum-v2-chip {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(5,8,16,.5);
  color: rgba(148,163,184,.7);
  font-size: .58rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .3s;
  white-space: nowrap;
}
.sum-v2-chip--active {
  border-color: rgba(18,163,114,.5);
  background: rgba(18,163,114,.15);
  color: #34d399;
  box-shadow: 0 0 14px rgba(18,163,114,.2);
}

.sum-v2-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(3,6,14,.8);
  border: 1px solid rgba(6,182,212,.2);
  font-family: 'Courier New', monospace;
  font-size: .64rem;
  color: rgba(226,232,240,.9);
  position: relative;
  z-index: 2;
}
.sum-v2-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #25d366;
  animation: feedPulseDot 1s infinite;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .summary-engine { padding: 20px 14px; margin: 28px 0 24px; }
  .sum-v2-stage { grid-template-columns: 1fr; }
  .sum-rpt-kpis { grid-template-columns: repeat(2, 1fr); }
  .sum-v2-flow-line { width: 32px; }
  .sum-v2-node { min-width: 72px; padding: 8px 10px; }
  .sum-v2-node strong { font-size: .6rem; }
  .sum-v2-chip { font-size: .52rem; padding: 4px 8px; }
}