:root {
  --bg-base: #0B1530;
  --bg-elevated: rgba(255, 255, 255, 0.04);
  --bg-elevated-hover: rgba(255, 255, 255, 0.065);
  --border: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(255, 255, 255, 0.22);
  --text-primary: #F4F6FA;
  --text-secondary: rgba(244, 246, 250, 0.62);
  --text-tertiary: rgba(244, 246, 250, 0.42);
  --brand-blue: #059669;
  --brand-cyan: #10B981;
  --brand-gradient: linear-gradient(135deg, #059669 0%, #10B981 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(5, 150, 105, 0.18) 0%, rgba(16, 185, 129, 0.18) 100%);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --container: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ===== Background layers ===== */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 75% 25%, rgba(5, 150, 105, 0.38), transparent 55%),
    radial-gradient(ellipse 50% 40% at 15% 5%, rgba(52, 211, 153, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 75%, rgba(16, 185, 129, 0.22), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(5, 150, 105, 0.12), transparent 70%);
}

.bg-vignette {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 80% at 0% 0%, rgba(0, 0, 0, 0.4), transparent 50%),
    radial-gradient(ellipse 100% 80% at 100% 100%, rgba(0, 0, 0, 0.3), transparent 50%);
}

.bg-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode: overlay;
}

.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 50% at 70% 30%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 70% 30%, black 20%, transparent 75%);
}

/* ===== Container ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ===== Nav ===== */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  background: rgba(10, 14, 27, 0.7);
  border-bottom: 0.5px solid var(--border);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.logo-mark {
  width: 32px;
  height: 32px;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(5, 150, 105, 0.35));
}

.logo-full {
  height: 60px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(5, 150, 105, 0.25));
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-menu a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.nav-menu a:hover { color: var(--text-primary); }

.nav-cta-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--brand-gradient);
  color: white;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  border: 0.5px solid var(--border);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--border-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
}

.btn-ghost:hover { background: rgba(255,255,255,0.06); }

/* ===== Hero ===== */
.hero {
  padding: 120px 0 80px;
  text-align: left;
  position: relative;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.05);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 32px;
  backdrop-filter: blur(8px);
  animation: fade-up 0.8s 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}

h1.hero-title {
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  max-width: 1100px;
  margin-bottom: 24px;
  animation: fade-up 0.9s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-title .grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

.hero-sub {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 760px;
  margin-bottom: 40px;
  animation: fade-up 0.9s 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 80px;
  animation: fade-up 0.9s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-ctas .btn { padding: 12px 22px; font-size: 15px; }

/* ===== Hero 2-col layout ===== */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
}

.hero-text {
  min-width: 0;
}

.hero-illustration {
  min-width: 0;
}

/* Copilot card cascade-in sequence — soft, overlapping reveal */
@keyframes copilot-reveal {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Initially hidden — opacity 0 until .playing class set by JS */
.copilot-card,
.copilot-card .copilot-card-header,
.copilot-card .copilot-msg,
.copilot-card .copilot-ai-suggest,
.copilot-card .copilot-ai-suggest > .ai-suggest-header,
.copilot-card .copilot-ai-suggest .evidence-item,
.copilot-card .copilot-ai-suggest .ai-recommendation,
.copilot-card .copilot-ai-suggest .ai-suggest-source,
.copilot-card .copilot-footer {
  opacity: 0;
}

/* When .playing class is set (by JS via IntersectionObserver) — animate cascade */
.copilot-card.playing,
.copilot-card.playing .copilot-card-header,
.copilot-card.playing .copilot-msg,
.copilot-card.playing .copilot-ai-suggest,
.copilot-card.playing .copilot-ai-suggest > .ai-suggest-header,
.copilot-card.playing .copilot-ai-suggest .evidence-item,
.copilot-card.playing .copilot-ai-suggest .ai-recommendation,
.copilot-card.playing .copilot-ai-suggest .ai-suggest-source,
.copilot-card.playing .copilot-footer {
  animation: copilot-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.copilot-card.playing                                                  { animation-delay: 0.15s; animation-duration: 0.6s; }
.copilot-card.playing .copilot-card-header                             { animation-delay: 0.45s; }
.copilot-card.playing .copilot-msg                                     { animation-delay: 0.75s; }
.copilot-card.playing .copilot-ai-suggest                              { animation-delay: 1.4s; animation-duration: 0.55s; }
.copilot-card.playing .copilot-ai-suggest > .ai-suggest-header         { animation-delay: 1.65s; }
.copilot-card.playing .copilot-ai-suggest .evidence-item:nth-child(1) { animation-delay: 1.85s; }
.copilot-card.playing .copilot-ai-suggest .evidence-item:nth-child(2) { animation-delay: 2.05s; }
.copilot-card.playing .copilot-ai-suggest .evidence-item:nth-child(3) { animation-delay: 2.25s; }
.copilot-card.playing .copilot-ai-suggest .ai-recommendation           { animation-delay: 2.55s; }
.copilot-card.playing .copilot-ai-suggest .ai-suggest-source           { animation-delay: 2.85s; }
.copilot-card.playing .copilot-footer                                  { animation-delay: 3.15s; }

@media (prefers-reduced-motion: reduce) {
  .copilot-card,
  .copilot-card * {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* Attention pulse on hero-sub — triggered by JS after each card cascade */
@keyframes attention-pulse {
  0% {
    color: var(--text-secondary);
    text-shadow: 0 0 0 transparent;
    transform: scale(1);
  }
  18% {
    color: var(--text-primary);
    text-shadow:
      0 0 22px rgba(16, 185, 129, 0.45),
      0 0 60px rgba(5, 150, 105, 0.22);
    transform: scale(1.012);
  }
  60% {
    color: var(--text-primary);
    text-shadow:
      0 0 18px rgba(16, 185, 129, 0.32),
      0 0 50px rgba(5, 150, 105, 0.16);
    transform: scale(1.012);
  }
  100% {
    color: var(--text-secondary);
    text-shadow: 0 0 0 transparent;
    transform: scale(1);
  }
}

.hero-sub.attention {
  animation: attention-pulse 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: left center;
}

/* Typewriter tagline below hero-sub */
.hero-tagline {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--brand-cyan);
  font-style: italic;
  font-weight: 500;
  margin-top: -28px;
  margin-bottom: 40px;
  min-height: 1.6em;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-tagline.typing,
.hero-tagline.done {
  opacity: 1;
}

.tagline-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--brand-cyan);
  margin-left: 3px;
  vertical-align: -2px;
  animation: cursor-blink 0.9s steps(1) infinite;
}

@keyframes cursor-blink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-sub.attention { animation: none; }
  .tagline-cursor { animation: none; opacity: 0; }
}

/* ===== Copilot illustration card ===== */
.copilot-card {
  position: relative;
  max-width: 510px;
  margin-left: auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.4),
    0 8px 24px rgba(5, 150, 105, 0.12);
  backdrop-filter: blur(8px);
}

.copilot-card::after {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 50%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(180deg, rgba(6,182,212,0.06), transparent);
  pointer-events: none;
  z-index: 0;
}

.copilot-card > * { position: relative; z-index: 1; }

.copilot-card-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 2px 11px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 13px;
  font-size: 15px;
  color: var(--text-secondary);
}

.copilot-card-header i { color: var(--brand-cyan); font-size: 18px; }
.copilot-card-title { flex: 1; font-weight: 500; color: var(--text-primary); }

.copilot-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: pulse-live 1.6s ease-in-out infinite;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.copilot-msg {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.copilot-msg .msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

.copilot-msg .msg-body { flex: 1; min-width: 0; }
.copilot-msg .msg-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.copilot-msg .msg-text {
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border);
  border-radius: 11px 11px 11px 4px;
  padding: 9px 13px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
}

/* AI suggestion block */
.copilot-ai-suggest {
  position: relative;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.08), rgba(16, 185, 129, 0.06));
  border: 0.5px solid rgba(16, 185, 129, 0.28);
  border-radius: 11px;
  padding: 14px 16px;
  margin: 4px 0 12px 46px;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.08);
}

.ai-suggest-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
  margin-bottom: 9px;
}

.ai-suggest-header i { font-size: 16px; }

.ai-confidence {
  margin-left: auto;
  background: rgba(16, 185, 129, 0.14);
  color: #10B981;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.ai-suggest-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 8px;
}

/* Warning variant of copilot-ai-suggest */
.copilot-ai-suggest.copilot-warning {
  background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(239,68,68,0.04));
  border-color: rgba(245,158,11,0.32);
  box-shadow: 0 4px 18px rgba(245,158,11,0.1);
}

.copilot-warning .ai-suggest-header,
.copilot-warning .ai-suggest-header i { color: #F59E0B; }

/* Evidence list (multi-channel signals) */
.ai-evidence {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 4px 0 12px;
}

.evidence-item {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.evidence-item i {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.evidence-item strong {
  color: var(--text-primary);
  font-weight: 600;
}

.evidence-text { flex: 1; min-width: 0; }

/* AI recommendation block */
.ai-recommendation {
  background: rgba(245,158,11,0.08);
  border-left: 3px solid #F59E0B;
  border-radius: 5px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.ai-rec-label {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #F59E0B;
  margin-bottom: 4px;
  font-weight: 600;
}

.ai-rec-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
}

.ai-rec-body strong { font-weight: 600; }

/* AI signals (sentiment + close probability + pending) */
.ai-signals {
  display: flex;
  gap: 6px;
  margin: 4px 0 10px;
  flex-wrap: wrap;
}

.ai-signal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 0.5px solid var(--border);
  font-size: 11px;
  line-height: 1.3;
}

.ai-signal i { font-size: 13px; }

.signal-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.signal-value { font-weight: 600; color: var(--text-primary); }

.signal-positive {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.32);
}
.signal-positive i, .signal-positive .signal-value { color: #10B981; }

.signal-confidence {
  background: rgba(6,182,212,0.08);
  border-color: rgba(6,182,212,0.32);
}
.signal-confidence i, .signal-confidence .signal-value { color: var(--brand-cyan); }

.signal-clear i { color: var(--text-secondary); }

.signal-pending {
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.32);
}
.signal-pending i, .signal-pending .signal-value { color: #F59E0B; }

.ai-context-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.ai-context-item {
  display: flex;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.025);
  border: 0.5px solid var(--border);
  border-radius: 8px;
}

.ai-context-item > i {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--brand-cyan);
  margin-top: 1px;
}

.ai-context-item .ctx-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 1px;
  line-height: 1.35;
}

.ai-context-item .ctx-sub {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.ai-suggest-source {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--text-tertiary);
  padding-bottom: 0;
  margin-bottom: 0;
}

.ai-suggest-source i { font-size: 14px; }

.ai-suggest-actions {
  display: flex;
  gap: 8px;
}

.ai-action-primary,
.ai-action-ghost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 0.5px solid transparent;
  transition: all 0.2s;
}

.ai-action-primary {
  background: var(--brand-gradient);
  color: white;
  box-shadow: 0 4px 14px rgba(37,99,235,0.3);
}

.ai-action-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37,99,235,0.4);
}

.ai-action-ghost {
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
  color: var(--text-secondary);
}

.ai-action-ghost:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}

.copilot-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 2px 2px;
  border-top: 0.5px solid var(--border);
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.copilot-footer .emp-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #059669, #10B981);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: white;
}

.copilot-footer-text strong { color: var(--text-secondary); font-weight: 500; }

/* Responsive: stack hero 2-col on smaller screens */
@media (max-width: 968px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .copilot-card { margin-left: 0; max-width: 520px; }
}

/* Hero product preview */
.hero-preview {
  position: relative;
  margin-top: 24px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  border: 0.5px solid var(--border);
  padding: 12px;
  animation: fade-up 1.2s 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.preview-window {
  background: #0F1322;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.preview-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}

.preview-titlebar .dots { display: flex; gap: 6px; }
.preview-titlebar .dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.preview-titlebar .url {
  flex: 1;
  text-align: center;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--text-tertiary);
}

.preview-body {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  min-height: 420px;
}

.preview-sidebar {
  padding: 16px 12px;
  border-right: 0.5px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.15);
}

.sidebar-section {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: 8px 8px 4px;
  margin-top: 8px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.sidebar-item.active {
  background: rgba(5, 150, 105, 0.15);
  color: var(--text-primary);
  border-left: 2px solid var(--brand-cyan);
  padding-left: 8px;
}

.sidebar-item i { font-size: 16px; }
.sidebar-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--brand-gradient);
  color: white;
}

.preview-main {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.call-card {
  background: rgba(255,255,255,0.03);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: white;
  flex-shrink: 0;
}

.call-info { flex: 1; min-width: 0; }
.call-info .name { font-size: 14px; font-weight: 500; }
.call-info .meta { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

.call-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

.status-live {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.status-live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10B981;
  animation: pulse-dot 1.5s infinite;
}

.preview-rightpanel {
  padding: 20px;
  border-left: 0.5px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.15);
}

.right-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
  font-size: 13px;
}

.metric-row:last-child { border-bottom: none; }
.metric-row .label { color: var(--text-secondary); }
.metric-row .value { font-family: 'Geist Mono', monospace; font-size: 12px; }

.chart-mini {
  margin-top: 16px;
  height: 60px;
  position: relative;
}

/* ===== Preview window interactive hover (signal: live UI mockup) ===== */
.sidebar-item,
.call-card,
.metric-row,
.preview-titlebar .url {
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.sidebar-item:not(.active):hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  transform: translateX(2px);
}

.sidebar-item:not(.active):hover i { color: var(--brand-cyan); }

.call-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(16, 185, 129, 0.32);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(16, 185, 129, 0.12);
}

.metric-row {
  padding-left: 6px;
  padding-right: 6px;
  margin-left: -6px;
  margin-right: -6px;
  border-radius: 6px;
}

.metric-row:hover {
  background: rgba(16, 185, 129, 0.06);
}

.metric-row:hover .label { color: var(--text-primary); }
.metric-row:hover .value { color: var(--brand-cyan); }

.preview-titlebar .url:hover { color: var(--text-primary); }

/* ===== Section common ===== */
section { position: relative; padding: 96px 0; }

.section-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-cyan);
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin-bottom: 20px;
  max-width: 700px;
}

.section-sub {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 560px;
  margin-bottom: 60px;
  line-height: 1.6;
}

/* ===== Bento grid ===== */
.bento {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.bento-card-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 36px;
  align-items: center;
}

.bento-card-wide .ticket-preview { margin-top: 0; }

@media (max-width: 968px) {
  .bento-card-wide {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.bento-card {
  position: relative;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 0.5px;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 60%);
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.bento-card:hover {
  background: var(--bg-elevated-hover);
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.bento-card:hover::before { opacity: 1; }

.bento-card-large {
  grid-column: 1;
  background:
    var(--brand-gradient-soft),
    var(--bg-elevated);
  display: flex;
  flex-direction: column;
}

.bento-card-large::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 80%;
  height: 100%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.18), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.bento-card > * { position: relative; z-index: 1; }

.bento-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.bento-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bento-icon i { font-size: 24px; color: var(--text-primary); }

.bento-card-large .bento-icon {
  background: var(--brand-gradient);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.4);
}

.bento-card-large .bento-icon i { color: white; }

.bento-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.bento-head .bento-title { margin-bottom: 0; }

.bento-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.2;
}

.bento-card-large .bento-title { font-size: 36px; }

.bento-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
}

.bento-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bento-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
}

.bento-features li i {
  font-size: 18px;
  color: var(--brand-cyan);
}

/* Small bento row */
.bento-small {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bento-card-mini {
  padding: 24px;
}

.bento-card-mini .bento-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
}

.bento-card-mini .bento-icon i { font-size: 20px; }
.bento-card-mini .bento-title { font-size: 18px; margin-bottom: 8px; }
.bento-card-mini .bento-desc { font-size: 14px; margin-bottom: 0; }

/* ===== Section break between main pillars and differentiator cards ===== */
.bento-break {
  margin-top: 48px;
  margin-bottom: 24px;
  text-align: center;
}

.bento-break-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 8px;
  position: relative;
  display: inline-block;
}

.bento-break-title::before,
.bento-break-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(40px, 8vw, 100px);
  height: 0.5px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}

.bento-break-title::before { right: calc(100% + 24px); }
.bento-break-title::after  { left: calc(100% + 24px); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); }

.bento-break-sub {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ===== Differentiator cards (themed mini cards) ===== */
.bento-card-mini.differ-deploy,
.bento-card-mini.differ-api,
.bento-card-mini.differ-vn {
  position: relative;
  overflow: hidden;
}

.differ-deco {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 76px;
  height: 76px;
  opacity: 0.22;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card-mini:hover .differ-deco {
  opacity: 0.45;
  transform: rotate(-4deg) scale(1.05);
}

/* Color theme: deployment (cyan) */
.differ-deploy .differ-deco { color: var(--brand-cyan); }
.differ-deploy .bento-icon {
  background: linear-gradient(135deg, rgba(6,182,212,0.2), rgba(6,182,212,0.06));
  border-color: rgba(6,182,212,0.35);
  box-shadow: 0 4px 14px rgba(6,182,212,0.18);
}
.differ-deploy .bento-icon i { color: var(--brand-cyan); }

/* Color theme: API (purple) */
.differ-api .differ-deco { color: #A78BFA; }
.differ-api .bento-icon {
  background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(139,92,246,0.06));
  border-color: rgba(139,92,246,0.35);
  box-shadow: 0 4px 14px rgba(139,92,246,0.18);
}
.differ-api .bento-icon i { color: #C4B5FD; }

/* Color theme: Vietnam (red/amber) */
.differ-vn .differ-deco { color: #EF4444; }
.differ-vn .bento-icon {
  background: linear-gradient(135deg, rgba(239,68,68,0.2), rgba(245,158,11,0.06));
  border-color: rgba(239,68,68,0.35);
  box-shadow: 0 4px 14px rgba(239,68,68,0.18);
}
.differ-vn .bento-icon i { color: #FCA5A5; }

@media (max-width: 540px) {
  .bento-break-title::before,
  .bento-break-title::after { display: none; }
  .differ-deco { width: 60px; height: 60px; opacity: 0.2; }
}

/* ===== PBX dashboard mockup (inside Trụ cột 01 bento-card-large) ===== */
.pbx-preview {
  position: relative;
  margin-top: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.34));
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 24px 56px rgba(0, 0, 0, 0.38),
    0 8px 22px rgba(16, 185, 129, 0.1),
    0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

.pbx-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: var(--text-secondary);
}

.pbx-preview-bar i { color: var(--brand-cyan); font-size: 14px; }

.pbx-live-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pbx-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px #10B981;
  animation: pulse-live 1.6s ease-in-out infinite;
}

.pbx-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px;
}

.pbx-kpi {
  background: rgba(255, 255, 255, 0.03);
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 10px;
}

.pbx-kpi-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  white-space: nowrap;
}

.pbx-kpi-value {
  font-family: 'Geist Mono', monospace;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.pbx-kpi-warn { color: #F59E0B; }

.pbx-extensions {
  padding: 4px 10px 12px;
}

.pbx-ext-title {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pbx-ext-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.pbx-ext {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.03);
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.pbx-ext-status {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}

.pbx-ext-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pbx-ext-dot.online  { background: #10B981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.6); }
.pbx-ext-dot.busy    { background: #F59E0B; box-shadow: 0 0 6px rgba(245, 158, 11, 0.6); }
.pbx-ext-dot.offline { background: rgba(255, 255, 255, 0.2); }

/* Shared gradient border ring for all UI mockup cards */
.pbx-preview::before,
.pbx-routing::before,
.chat-preview::before,
.ticket-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.55) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0.02) 65%,
    rgba(5, 150, 105, 0.4) 100%);
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
}

/* ===== PBX routing mockup (config view) ===== */
.pbx-routing {
  position: relative;
  margin-top: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.34));
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 24px 56px rgba(0, 0, 0, 0.38),
    0 8px 22px rgba(16, 185, 129, 0.1),
    0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

.pbx-routing-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: var(--text-secondary);
}

.pbx-routing-bar i { color: var(--brand-cyan); font-size: 14px; }
.pbx-routing-bar span:nth-child(2) { flex: 1; color: var(--text-primary); font-weight: 500; }

.pbx-routing-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pbx-routing-list {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pbx-route {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 0.5px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
}

.route-from {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
}

.route-did {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.route-arrow {
  color: var(--text-tertiary);
  font-size: 12px;
  opacity: 0.6;
}

.route-to {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-to i { font-size: 12px; }

.route-to.route-time  { background: rgba(245, 158, 11, 0.16); color: #F59E0B; }
.route-to.route-queue { background: rgba(16, 185, 129, 0.16); color: var(--brand-cyan); }
.route-to.route-ivr   { background: rgba(139, 92, 246, 0.16); color: #A78BFA; }

/* ===== Chat preview (Trụ cột 02 — Omnichannel) ===== */
.chat-preview {
  position: relative;
  margin-top: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.34));
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 24px 56px rgba(0, 0, 0, 0.38),
    0 8px 22px rgba(16, 185, 129, 0.1),
    0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

.chat-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 8px 6px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  scrollbar-width: none;
}
.chat-tabs::-webkit-scrollbar { display: none; }

.chat-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.02);
  border: 0.5px solid transparent;
}

.chat-tab i { font-size: 12px; }

.chat-tab.active {
  color: var(--text-primary);
  background: rgba(5, 150, 105, 0.18);
  border-color: rgba(16, 185, 129, 0.3);
}

.chat-list {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  transition: background 0.15s ease;
}

.chat-row:first-child { background: rgba(255, 255, 255, 0.035); }

.chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

.chat-info { flex: 1; min-width: 0; }

.chat-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.chat-channel {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chat-channel.z-zalo { background: rgba(16, 185, 129, 0.16); color: var(--brand-cyan); }
.chat-channel.z-web  { background: rgba(139, 92, 246, 0.16); color: #A78BFA; }
.chat-channel.z-fb   { background: rgba(5, 150, 105, 0.16); color: #34D399; }

.chat-msg {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-unread {
  background: var(--brand-gradient);
  color: white;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* ===== Ticket preview (Trụ cột 03 — CSKH & Ticketing) ===== */
.ticket-preview {
  position: relative;
  margin-top: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.34));
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 24px 56px rgba(0, 0, 0, 0.38),
    0 8px 22px rgba(16, 185, 129, 0.1),
    0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

.ticket-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 8px 6px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  scrollbar-width: none;
}
.ticket-tabs::-webkit-scrollbar { display: none; }

.ticket-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.02);
  border: 0.5px solid transparent;
}

.ticket-tab.active {
  color: var(--text-primary);
  background: rgba(5, 150, 105, 0.18);
  border-color: rgba(16, 185, 129, 0.3);
}

.ticket-tab.warn { color: #F59E0B; }
.ticket-tab.warn .ticket-count {
  background: rgba(245, 158, 11, 0.18);
  color: #F59E0B;
}

.ticket-count {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.ticket-tab.active .ticket-count {
  background: rgba(16, 185, 129, 0.22);
  color: var(--brand-cyan);
}

.ticket-list {
  padding: 4px 6px 8px;
  display: flex;
  flex-direction: column;
}

.ticket-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.04);
  font-size: 12px;
}

.ticket-row:last-child { border-bottom: none; }

.ticket-id {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}

.ticket-title {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket-status {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ticket-status.status-done     { background: rgba(255, 255, 255, 0.06); color: var(--text-tertiary); }
.ticket-status.status-open     { background: rgba(245, 158, 11, 0.16); color: #F59E0B; }
.ticket-status.status-progress { background: rgba(16, 185, 129, 0.16); color: var(--brand-cyan); }

/* ===== AI insight section (sentiment + summary mockups) ===== */
.ai-insight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 56px;
}

.insight-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.32));
  border-radius: 16px;
  padding: 26px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 24px 56px rgba(0, 0, 0, 0.32),
    0 8px 22px rgba(16, 185, 129, 0.08),
    0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

.insight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.5) 0%,
    rgba(255, 255, 255, 0.06) 30%,
    rgba(255, 255, 255, 0.02) 65%,
    rgba(5, 150, 105, 0.4) 100%);
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.insight-card > * { position: relative; }

.insight-channel-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  margin-bottom: 20px;
}

.insight-channel-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.3);
}

.insight-channel-icon i { font-size: 19px; }

.insight-channel-info { flex: 1; min-width: 0; }
.insight-channel-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.insight-channel-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

.insight-mood {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.insight-mood.mood-positive { background: rgba(16, 185, 129, 0.14); color: #10B981; }
.insight-mood.mood-neutral  { background: rgba(100, 116, 139, 0.18); color: #94A3B8; }
.insight-mood.mood-negative { background: rgba(239, 68, 68, 0.14); color: #EF4444; }

.insight-block { margin-bottom: 20px; }
.insight-block:last-of-type { margin-bottom: 16px; }

.insight-block-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.insight-block-label i { font-size: 13px; color: var(--brand-cyan); }

/* Segmented sentiment bar */
.sentiment-bar {
  display: flex;
  height: 26px;
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.sentiment-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: white;
  min-width: 28px;
}

.seg-positive { background: linear-gradient(180deg, #10B981, #059669); }
.seg-neutral  { background: linear-gradient(180deg, #64748B, #475569); }
.seg-negative { background: linear-gradient(180deg, #EF4444, #DC2626); }

.sentiment-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.sentiment-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dot {
  width: 8px; height: 8px; border-radius: 50%;
}

.dot.dot-positive { background: #10B981; }
.dot.dot-neutral  { background: #64748B; }
.dot.dot-negative { background: #EF4444; }

/* Sentiment trend (line chart for chat sessions) */
.sentiment-trend { padding: 4px 0 0; }
.trend-svg {
  width: 100%;
  height: 44px;
  display: block;
}
.trend-labels {
  display: flex;
  justify-content: space-between;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 8px;
}

/* AI summary block */
.insight-summary {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.025);
  border-left: 2px solid var(--brand-cyan);
  padding: 12px 14px;
  border-radius: 0 7px 7px 0;
}

.insight-summary strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Topic tags extracted by AI */
.insight-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.insight-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border);
  color: var(--text-secondary);
}

.insight-tag.tag-hot {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.3);
  color: #F59E0B;
}

@media (max-width: 968px) {
  .ai-insight-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ===== Stats ===== */
.stats {
  padding: 80px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 48px;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}

.stats-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(5, 150, 105, 0.08), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.08), transparent 50%);
  pointer-events: none;
}

.stat {
  position: relative;
  z-index: 1;
}

.stat-value {
  font-size: clamp(40px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
  font-feature-settings: 'tnum';
}

.stat-value .unit { font-size: 0.5em; color: var(--text-secondary); -webkit-text-fill-color: var(--text-secondary); margin-left: 4px; }

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ===== Differentiators ===== */
.differ-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.differ-card {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all 0.3s ease;
  position: relative;
}

.differ-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.differ-versus {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.differ-headline {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.25;
}

.differ-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 16px;
}

.differ-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 16px;
  border-top: 0.5px solid var(--border);
}

.differ-stat-num {
  font-family: 'Geist Mono', monospace;
  font-size: 22px;
  font-weight: 500;
  color: var(--brand-cyan);
}

.differ-stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ===== Integrations marquee ===== */
.integrations { padding: 60px 0 40px; }

.integrations-label {
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 32px;
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.logo-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 48px;
  flex-wrap: wrap;
}

.logo-item {
  font-family: 'Geist Mono', monospace;
  font-size: 18px;
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}

.logo-item:hover { color: var(--text-primary); }

.logo-item i { font-size: 22px; }

/* ===== Pricing ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pricing-card {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all 0.3s ease;
  position: relative;
}

.pricing-card.featured {
  background: var(--brand-gradient-soft);
  border: 1px solid rgba(16, 185, 129, 0.35);
  transform: scale(1.02);
}

.pricing-card.featured::before {
  content: 'Phổ biến nhất';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-gradient);
  color: white;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.pricing-name {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  font-family: 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}

.pricing-amount {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.pricing-unit { font-size: 14px; color: var(--text-tertiary); }

.pricing-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
  min-height: 42px;
}

.pricing-features {
  list-style: none;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.pricing-features i {
  color: var(--brand-cyan);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.pricing-card .btn {
  width: 100%;
  justify-content: center;
}

/* ===== Big CTA ===== */
.cta-section {
  padding: 120px 0;
}

.cta-card {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 80px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(5, 150, 105, 0.2), transparent 60%),
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(16, 185, 129, 0.15), transparent 60%);
  pointer-events: none;
}

.cta-card > * { position: relative; z-index: 1; }

.cta-card h2 {
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin-bottom: 20px;
}

.cta-card p {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-buttons .btn { padding: 14px 28px; font-size: 15px; }

/* ===== Footer ===== */
footer {
  border-top: 0.5px solid var(--border);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand .logo { margin-bottom: 16px; }

.footer-brand p {
  color: var(--text-secondary);
  font-size: 14px;
  max-width: 320px;
  line-height: 1.6;
}

.footer-col h4 {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 16px;
  font-family: 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.footer-col a:hover { color: var(--text-primary); }

.footer-bottom {
  padding-top: 32px;
  border-top: 0.5px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ===== Animations ===== */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > *.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.24s; }

/* ===== Responsive ===== */
@media (max-width: 968px) {
  .container { padding: 0 20px; }
  .hero { padding: 80px 0 60px; }
  .hero-ctas { flex-wrap: wrap; margin-bottom: 48px; }
  .preview-body { grid-template-columns: 1fr; min-height: auto; }
  .preview-sidebar, .preview-rightpanel { display: none; }

  .bento {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .bento-card-large { grid-column: 1; grid-row: auto; }
  .bento-small { grid-template-columns: 1fr; }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 32px;
  }

  .differ-grid, .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card.featured { transform: none; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  section { padding: 64px 0; }
  .cta-card { padding: 48px 24px; }
}

@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ===== Mobile header logo sizing ===== */
@media (max-width: 768px) { header .logo-full { height: 44px; } }
@media (max-width: 420px) { header .logo-full { height: 40px; } }

/* ===========================================================
   ADDITIONAL STYLES FOR SUB-PAGES
   =========================================================== */

/* Active menu link */
.nav-menu a.active {
  color: var(--text-primary);
  position: relative;
}

.nav-menu a.active::after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-gradient);
  border-radius: 2px;
}

/* ===== Product menu dropdown ===== */
.nav-dropdown { position: relative; }

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  padding: 0;
  transition: color 0.2s;
}

.nav-dropdown-trigger:hover { color: var(--text-primary); }

.nav-dropdown-trigger.active {
  color: var(--text-primary);
  position: relative;
}

.nav-dropdown-trigger.active::after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 16px;
  height: 2px;
  background: var(--brand-gradient);
  border-radius: 2px;
}

.nav-dropdown-trigger i {
  font-size: 14px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.7;
}

.nav-dropdown.open .nav-dropdown-trigger i {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--brand-cyan);
}

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 380px;
  padding: 8px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18)),
    #131C36;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 24px 56px rgba(0,0,0,0.55),
    0 8px 24px rgba(6,182,212,0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 100;
}

.nav-dropdown-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(6,182,212,0.55), rgba(255,255,255,0.06) 45%, rgba(37,99,235,0.4));
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Pointer arrow at top of dropdown */
.nav-dropdown-panel::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #131C36;
  border-top: 0.5px solid rgba(6,182,212,0.4);
  border-left: 0.5px solid rgba(6,182,212,0.4);
  z-index: -1;
}

.nav-dropdown.open .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s;
}

.nav-dropdown-item:hover { background: rgba(255,255,255,0.06); }
.nav-dropdown-item:hover .nav-dropdown-title { color: var(--brand-cyan); }

.nav-dropdown-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gradient);
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}

.nav-dropdown-icon i { font-size: 17px; }

.nav-dropdown-icon-chat {
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  box-shadow: 0 4px 12px rgba(139,92,246,0.3);
}

.nav-dropdown-icon-cskh {
  background: linear-gradient(135deg, #F59E0B, #EF4444);
  box-shadow: 0 4px 12px rgba(245,158,11,0.3);
}

.nav-dropdown-text { flex: 1; min-width: 0; }

.nav-dropdown-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  transition: color 0.15s;
}

.nav-dropdown-desc {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-dropdown-footer {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 0.5px solid rgba(255,255,255,0.06);
}

.nav-dropdown-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--brand-cyan);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}

.nav-dropdown-all:hover { background: rgba(6,182,212,0.08); }
.nav-dropdown-all i { font-size: 15px; transition: transform 0.2s; }
.nav-dropdown-all:hover i { transform: translateX(3px); }

/* Page hero (smaller than landing hero) */
.page-hero {
  padding: 120px 0 60px;
  position: relative;
}

.page-hero-title {
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
  max-width: 780px;
  margin-bottom: 24px;
  margin-top: 12px;
  animation: fade-up 0.9s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.page-hero-sub {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 620px;
  margin-bottom: 36px;
  animation: fade-up 0.9s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.page-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  animation: fade-up 0.9s 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.page-hero-ctas .btn { padding: 12px 22px; font-size: 15px; }

/* ===== Product detail sections ===== */
.product-detail {
  padding: 80px 0;
  border-top: 0.5px solid var(--border);
}

.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.product-detail-grid.reverse .product-detail-content { order: 2; }
.product-detail-grid.reverse .product-detail-visual { order: 1; }

.product-detail-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.35);
}

.product-detail-icon i { font-size: 28px; color: white; }

.product-detail-title {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin-bottom: 16px;
}

.product-detail-desc {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.feature-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-bottom: 32px;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.feature-list li i {
  color: var(--brand-cyan);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.product-detail-visual {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.product-detail-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(5, 150, 105, 0.12), transparent 60%);
  pointer-events: none;
}

/* Tech specs grid */
.tech-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.spec-item {
  padding: 16px;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
}

.spec-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.spec-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

/* ===== Page hero gradient inline span ===== */
.page-hero-title .grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

/* ===== Pillar quick-nav strip (3 anchor cards) ===== */
.pillar-nav { padding: 20px 0 40px; }

.pillar-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.pillar-nav-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18));
  border: 0.5px solid var(--border);
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.pillar-nav-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(6,182,212,0.4), rgba(255,255,255,0.04) 60%, rgba(37,99,235,0.3));
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.25s;
}

.pillar-nav-card:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.2));
}
.pillar-nav-card:hover::before { opacity: 1; }
.pillar-nav-card:hover .pillar-nav-arrow { transform: translate(2px, 2px); color: var(--brand-cyan); }

.pillar-nav-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(37,99,235,0.32);
}
.pillar-nav-icon i { font-size: 20px; }

.pillar-nav-chat .pillar-nav-icon {
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.32);
}
.pillar-nav-cskh .pillar-nav-icon {
  background: linear-gradient(135deg, #F59E0B, #EF4444);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.32);
}

.pillar-nav-body { flex: 1; min-width: 0; }
.pillar-nav-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.pillar-nav-title { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.pillar-nav-desc { font-size: 12px; color: var(--text-secondary); font-family: 'Geist Mono', monospace; }

.pillar-nav-arrow {
  font-size: 18px;
  color: var(--text-tertiary);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

/* ===== Product detail enhancements ===== */
.product-detail-eyebrow {
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-cyan);
  margin-bottom: 12px;
}

/* Feature groups (replaces flat feature-list) */
.feature-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 28px;
  margin-bottom: 32px;
}

.feature-group h4 {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-cyan);
  font-weight: 600;
  margin-bottom: 12px;
}

.feature-group ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature-group li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.feature-group li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-cyan);
  margin-top: 9px;
  flex-shrink: 0;
}

/* Key numbers strip (replaces tech-specs grid) */
.key-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding-top: 24px;
  border-top: 0.5px solid var(--border);
}

.key-num {
  padding: 4px 16px;
  border-right: 0.5px solid var(--border);
}
.key-num:first-child { padding-left: 0; }
.key-num:last-child  { border-right: none; padding-right: 0; }

.key-num-value {
  font-family: 'Geist Mono', monospace;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}

.key-num-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

/* Product detail visual switched to mockup container */
.product-detail-mockup {
  background: transparent;
  border: none;
  padding: 0;
  min-height: auto;
  display: block;
}
.product-detail-mockup::before { display: none; }

/* ===== AI Copilot layer section ===== */
.ai-layer {
  padding: 96px 0;
  border-top: 0.5px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(37,99,235,0.04), transparent);
}

.ai-layer-header { text-align: center; margin-bottom: 56px; }

.ai-layer-eyebrow {
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(37,99,235,0.12));
  border: 0.5px solid rgba(6,182,212,0.3);
  color: var(--brand-cyan);
  margin-bottom: 20px;
}

.ai-layer-title {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: 760px;
  margin: 0 auto 16px;
}

.ai-layer-sub {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}

.ai-layer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ai-cap {
  position: relative;
  padding: 24px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18));
  border: 0.5px solid var(--border);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-cap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(6,182,212,0.4), rgba(255,255,255,0.04) 50%, rgba(37,99,235,0.3));
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.45;
  transition: opacity 0.3s;
}

.ai-cap:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.2));
}
.ai-cap:hover::before { opacity: 1; }

.ai-cap-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(6,182,212,0.16), rgba(37,99,235,0.1));
  border: 0.5px solid rgba(6,182,212,0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.ai-cap-icon i { font-size: 22px; color: var(--brand-cyan); }

.ai-cap-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.ai-cap-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}

@media (max-width: 968px) {
  .pillar-nav-grid { grid-template-columns: 1fr; }
  .feature-groups { grid-template-columns: 1fr; gap: 20px; }
  .key-numbers { grid-template-columns: 1fr 1fr; }
  .key-num:nth-child(2) { border-right: none; padding-right: 0; }
  .ai-layer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .ai-layer-grid { grid-template-columns: 1fr; }
  .key-numbers { grid-template-columns: 1fr; }
  .key-num { border-right: none; border-bottom: 0.5px solid var(--border); padding: 12px 0; }
  .key-num:last-child { border-bottom: none; }
}

/* ===== AI Philosophy section (ha-tang-ai page) ===== */
.ai-philosophy {
  padding: 96px 0;
  border-top: 0.5px solid var(--border);
}

.ai-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ai-role-card {
  position: relative;
  padding: 28px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2));
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-role-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(6,182,212,0.5), rgba(255,255,255,0.05) 45%, rgba(37,99,235,0.4));
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.ai-role-card:hover { transform: translateY(-3px); }
.ai-role-card:hover::before { opacity: 1; }

.ai-role-num {
  font-family: 'Geist Mono', monospace;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.04em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
  line-height: 1;
}

.ai-role-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.ai-role-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.ai-role-tag {
  display: inline-flex;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  border: 0.5px solid rgba(16, 185, 129, 0.3);
  color: var(--brand-cyan);
}

/* ===== AI vs AI Agent comparison ===== */
.ai-vs {
  padding: 96px 0;
  border-top: 0.5px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(245, 158, 11, 0.03), transparent);
}

.ai-vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}

.ai-vs-card {
  position: relative;
  padding: 28px;
  border-radius: 16px;
  overflow: hidden;
}

.ai-vs-against {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.06), rgba(0,0,0,0.2));
  border: 0.5px solid rgba(239, 68, 68, 0.18);
}

.ai-vs-zorio {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.04));
  border: 0.5px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.12);
}

.ai-vs-tag {
  display: inline-flex;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.ai-vs-against .ai-vs-tag {
  background: rgba(239, 68, 68, 0.14);
  color: #F87171;
}

.ai-vs-zorio .ai-vs-tag {
  background: rgba(16, 185, 129, 0.18);
  color: var(--brand-cyan);
}

.ai-vs-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.ai-vs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-vs-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.ai-vs-against .ai-vs-list li::before {
  content: '✗';
  color: #F87171;
  font-weight: 600;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.35;
}

.ai-vs-zorio .ai-vs-list li::before {
  content: '✓';
  color: var(--brand-cyan);
  font-weight: 600;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.35;
}

@media (max-width: 968px) {
  .ai-roles-grid { grid-template-columns: 1fr; }
  .ai-vs-grid { grid-template-columns: 1fr; }
}

/* ===== Pricing comparison table ===== */
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 32px;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.compare-table th,
.compare-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 0.5px solid var(--border);
  font-size: 14px;
}

.compare-table th {
  background: rgba(255,255,255,0.02);
  color: var(--text-primary);
  font-weight: 500;
  font-family: 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}

.compare-table th:not(:first-child) { text-align: center; }
.compare-table td:not(:first-child) { text-align: center; }

.compare-table td:first-child { color: var(--text-secondary); }

.compare-table tr:last-child td { border-bottom: none; }

.compare-table td.featured-col {
  background: rgba(5, 150, 105, 0.06);
}

.compare-table i.ti-check { color: var(--brand-cyan); font-size: 18px; }
.compare-table i.ti-minus { color: var(--text-tertiary); font-size: 18px; }

/* ===== FAQ ===== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s;
}

.faq-item:hover { border-color: var(--border-hover); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  user-select: none;
}

.faq-q i { color: var(--text-secondary); transition: transform 0.2s; flex-shrink: 0; }
.faq-item.open .faq-q i { transform: rotate(180deg); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.faq-item.open .faq-a {
  max-height: 400px;
}

.faq-a-inner {
  padding: 0 24px 20px;
}

/* ===== Customer logos grid ===== */
.customer-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 64px;
}

.customer-logo {
  aspect-ratio: 2 / 1;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s;
}

.customer-logo:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* ===== Case study card ===== */
.case-studies {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.case-card {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  position: relative;
  overflow: hidden;
}

.case-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(5, 150, 105, 0.08), transparent 50%);
  pointer-events: none;
}

.case-card > * { position: relative; z-index: 1; }

.case-tag {
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-cyan);
  margin-bottom: 16px;
}

.case-name {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.2;
}

.case-quote {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  font-style: italic;
}

.case-author {
  font-size: 13px;
  color: var(--text-tertiary);
}

.case-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.case-metric {
  padding: 20px;
  background: rgba(255,255,255,0.02);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
}

.case-metric-value {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
  font-feature-settings: 'tnum';
  line-height: 1;
}

.case-metric-label {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ===== Industries ===== */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.industry-card {
  padding: 24px;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  transition: all 0.2s;
}

.industry-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-elevated-hover);
}

.industry-card i {
  font-size: 28px;
  color: var(--brand-cyan);
  margin-bottom: 12px;
  display: block;
}

.industry-card .name {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}

.industry-card .count {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ===== Docs layout ===== */
.docs-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding: 60px 0;
}

.docs-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
  height: fit-content;
}

.docs-sidebar h4 {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: 12px;
  margin-top: 24px;
}

.docs-sidebar h4:first-child { margin-top: 0; }

.docs-sidebar ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.docs-sidebar a {
  display: block;
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 14px;
  text-decoration: none;
  transition: all 0.15s;
}

.docs-sidebar a:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.docs-sidebar a.active {
  background: rgba(5, 150, 105, 0.12);
  color: var(--text-primary);
  border-left: 2px solid var(--brand-cyan);
  padding-left: 10px;
}

.docs-content h2 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  margin-top: 48px;
}

.docs-content h2:first-child { margin-top: 0; }

.docs-content p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
}

.docs-content code {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--brand-cyan);
}

.code-block {
  background: #0A0F1F;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  overflow-x: auto;
  margin: 16px 0;
}

.code-block .key { color: #FF7B72; }
.code-block .str { color: #A5D6A7; }
.code-block .num { color: #79C0FF; }
.code-block .com { color: var(--text-tertiary); }

.docs-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.doc-card {
  display: block;
  padding: 20px;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.2s;
}

.doc-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-elevated-hover);
  transform: translateY(-2px);
}

.doc-card i {
  font-size: 22px;
  color: var(--brand-cyan);
  margin-bottom: 12px;
  display: block;
}

.doc-card-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.doc-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Docs search */
.docs-search {
  margin: 24px 0 32px;
  position: relative;
}

.docs-search input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
}

.docs-search input:focus {
  outline: none;
  border-color: var(--brand-cyan);
}

.docs-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 18px;
}

/* ===== Blog grid ===== */
.blog-featured {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  margin-bottom: 64px;
  position: relative;
}

.blog-featured-cover {
  background: var(--brand-gradient-soft), var(--bg-elevated);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.blog-featured-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(16, 185, 129, 0.25), transparent 70%);
}

.blog-featured-cover i {
  font-size: 96px;
  color: rgba(255,255,255,0.4);
  position: relative;
}

.blog-featured-content {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-cat {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-cyan);
  margin-bottom: 12px;
}

.blog-featured-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 16px;
}

.blog-excerpt {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 24px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.blog-card {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.blog-cover {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.blog-cover.c1 { background: linear-gradient(135deg, rgba(5, 150, 105, 0.3), rgba(16, 185, 129, 0.15)); }
.blog-cover.c2 { background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(236, 72, 153, 0.15)); }
.blog-cover.c3 { background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(239, 68, 68, 0.15)); }
.blog-cover.c4 { background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.15)); }
.blog-cover.c5 { background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(5, 150, 105, 0.15)); }
.blog-cover.c6 { background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(168, 85, 247, 0.15)); }

.blog-cover i {
  font-size: 56px;
  color: rgba(255,255,255,0.5);
}

.blog-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 12px;
}

.blog-card-meta {
  margin-top: auto;
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  gap: 12px;
}

/* ===== Newsletter ===== */
.newsletter-card {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 60px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-top: 80px;
}

.newsletter-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(16, 185, 129, 0.12), transparent 60%);
  pointer-events: none;
}

.newsletter-card > * { position: relative; z-index: 1; }

.newsletter-card h3 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.newsletter-card p {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.newsletter-form {
  display: flex;
  gap: 8px;
  max-width: 440px;
  margin: 0 auto;
}

.newsletter-form input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
}

.newsletter-form input:focus {
  outline: none;
  border-color: var(--brand-cyan);
}

/* ===== Responsive overrides for sub-pages ===== */
@media (max-width: 968px) {
  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .product-detail-grid.reverse .product-detail-content { order: 1; }
  .product-detail-grid.reverse .product-detail-visual { order: 2; }
  .feature-list { grid-template-columns: 1fr; }
  .tech-specs { grid-template-columns: repeat(2, 1fr); }
  .customer-logos { grid-template-columns: repeat(3, 1fr); }
  .case-card { grid-template-columns: 1fr; padding: 28px; }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .docs-layout { grid-template-columns: 1fr; gap: 24px; }
  .docs-sidebar { position: static; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-content { padding: 28px; }
  .blog-grid { grid-template-columns: 1fr; }
  .docs-cards-grid { grid-template-columns: 1fr; }
  .newsletter-form { flex-direction: column; }
  .compare-table { font-size: 12px; }
  .compare-table th, .compare-table td { padding: 12px 8px; }
}

@media (max-width: 540px) {
  .customer-logos { grid-template-columns: repeat(2, 1fr); }
  .industries-grid { grid-template-columns: 1fr; }
}

/* Reduce hero padding on landing only (override default page-hero) */
.hero { padding: 80px 0 60px; }

/* ============================================================
   Tổng đài PBX product page — scoped styles
============================================================ */

/* Common section helpers for PBX page */
.pbx-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-cyan);
  margin-bottom: 18px;
}

.pbx-section-title {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin-bottom: 20px;
  max-width: 860px;
}

.pbx-section-title .grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pbx-section-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 720px;
  margin-bottom: 24px;
}

.pbx-section { padding: 96px 0; border-top: 0.5px solid var(--border); }
.pbx-spotlight {
  padding: 120px 0;
  border-top: 0.5px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(37,99,235,0.04), transparent);
}

/* Hero */
.pbx-hero { padding: 80px 0 56px; }

.pbx-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}

.pbx-hero-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-cyan);
  margin-bottom: 18px;
}

.pbx-hero-title {
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin-bottom: 22px;
}

.pbx-hero-title .grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pbx-hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 580px;
  margin-bottom: 32px;
}

.pbx-hero-badges {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 8px 14px;
  margin-top: 28px;
}

.pbx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  color: var(--text-secondary);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 0.5px solid var(--border);
}

.pbx-badge i { color: var(--brand-cyan); font-size: 13px; }

/* Hero floating stage */
.pbx-hero-stage {
  position: relative;
  height: 540px;
  perspective: 1200px;
}

.hero-card-back, .hero-card-front {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 32px 80px rgba(0,0,0,0.55),
    0 16px 36px rgba(6,182,212,0.16),
    0 0 0 1px rgba(6,182,212,0.12);
  background: #0F1A36;
}

/* Gradient ring border for hero dashboard card */
.hero-card-back::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg,
    rgba(6,182,212,0.7) 0%,
    rgba(255,255,255,0.1) 40%,
    rgba(255,255,255,0.04) 65%,
    rgba(37,99,235,0.6) 100%);
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 10;
}

.hero-card-back {
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  height: 92%;
  transform: translateY(-50%) rotateY(-2deg);
  animation: floatY-back 8s ease-in-out infinite;
}

.hero-card-front {
  bottom: 4%;
  left: 0;
  width: 52%;
  transform: rotateY(2deg);
  animation: floatY-front 8s ease-in-out infinite 1s;
  z-index: 2;
}

.hero-card-back img, .hero-card-front img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== PBX dashboard HTML mockup (hero back card) ===== */
.pbx-dash {
  display: flex;
  width: 100%;
  height: 100%;
  background: #0B1124;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-primary);
}

.pbx-dash-side {
  width: 116px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.02);
  border-right: 0.5px solid rgba(255,255,255,0.06);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.pbx-dash-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 2px 6px 10px;
  margin-bottom: 4px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.pbx-dash-brand i { color: var(--brand-cyan); font-size: 14px; }

.pbx-dash-navgroup {
  font-family: 'Geist Mono', monospace;
  font-size: 7.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: 8px 6px 4px;
}

.pbx-dash-navitem {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 5px;
  font-size: 9.5px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.pbx-dash-navitem i { font-size: 12px; flex-shrink: 0; opacity: 0.8; }

.pbx-dash-navitem.active {
  background: rgba(37,99,235,0.16);
  color: var(--text-primary);
  border-left: 1.5px solid var(--brand-cyan);
  padding-left: 4.5px;
}
.pbx-dash-navitem.active i { color: var(--brand-cyan); opacity: 1; }

.pbx-dash-main {
  flex: 1;
  min-width: 0;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.pbx-dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pbx-dash-crumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
}
.pbx-dash-crumb i { color: var(--brand-cyan); font-size: 13px; }

.pbx-dash-realtime {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8.5px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(16,185,129,0.12);
  color: #10B981;
}
.pbx-dash-rt-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 5px #10B981;
}

.pbx-dash-subtitle {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: -4px;
}

.pbx-dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.pbx-dash-kpi {
  background: rgba(255,255,255,0.025);
  border: 0.5px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 7px 8px;
  border-top: 1.5px solid;
}
.pbx-dash-kpi.kpi-cyan  { border-top-color: var(--brand-cyan); }
.pbx-dash-kpi.kpi-green { border-top-color: #10B981; }
.pbx-dash-kpi.kpi-amber { border-top-color: #F59E0B; }
.pbx-dash-kpi.kpi-blue  { border-top-color: var(--brand-blue); }

.pbx-dash-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.pbx-dash-kpi-top span {
  font-family: 'Geist Mono', monospace;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.pbx-dash-kpi-top i { font-size: 11px; color: var(--text-tertiary); }

.pbx-dash-kpi-val {
  font-family: 'Geist Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.pbx-dash-kpi.kpi-cyan  .pbx-dash-kpi-val { color: var(--brand-cyan); }
.pbx-dash-kpi.kpi-green .pbx-dash-kpi-val { color: #10B981; }
.pbx-dash-kpi.kpi-amber .pbx-dash-kpi-val { color: #F59E0B; }

.pbx-dash-kpi-sub {
  font-size: 7px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.pbx-dash-panels {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 7px;
  flex: 1;
  min-height: 0;
}

.pbx-dash-panel {
  background: rgba(255,255,255,0.025);
  border: 0.5px solid rgba(255,255,255,0.07);
  border-radius: 7px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pbx-dash-panel-wide { grid-column: 1; }
.pbx-dash-panels > .pbx-dash-panel:nth-child(2),
.pbx-dash-panels > .pbx-dash-panel:nth-child(4) { grid-column: 2; }

.pbx-dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pbx-dash-panel-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 7px;
  font-weight: 400;
  color: var(--text-tertiary);
}

.pbx-dash-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--text-tertiary);
  text-align: center;
}
.pbx-dash-empty i { font-size: 20px; opacity: 0.4; }
.pbx-dash-empty span { font-size: 8px; }

.pbx-dash-summary { display: flex; flex-direction: column; gap: 6px; }
.pbx-dash-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 8.5px;
  color: var(--text-secondary);
}
.pbx-dash-sum-row b {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  color: var(--brand-cyan);
}
.pbx-dash-sum-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.pbx-dash-sum-bar span {
  display: block;
  width: 4%;
  height: 100%;
  background: var(--brand-gradient);
}
.pbx-dash-sum-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 2px;
}
.pbx-dash-sum-mini > div {
  background: rgba(255,255,255,0.025);
  border: 0.5px solid rgba(255,255,255,0.06);
  border-radius: 5px;
  padding: 5px 7px;
}
.pbx-dash-sum-mini span {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 6.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.pbx-dash-sum-mini b {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--text-primary);
}

.pbx-dash-ext-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.pbx-dash-ext {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  background: rgba(255,255,255,0.025);
  border: 0.5px solid rgba(255,255,255,0.06);
  border-radius: 5px;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
}
.pbx-dash-ext b { font-weight: 600; color: var(--text-primary); }
.pbx-dash-ext em {
  margin-left: auto;
  font-style: normal;
  font-size: 7px;
  color: var(--text-tertiary);
}
.pbx-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pbx-dot.online  { background: #10B981; box-shadow: 0 0 4px rgba(16,185,129,0.7); }
.pbx-dot.offline { background: rgba(255,255,255,0.22); }
.pbx-dot.busy    { background: #F59E0B; box-shadow: 0 0 4px rgba(245,158,11,0.7); }
.pbx-dot.ringing {
  background: var(--brand-cyan);
  box-shadow: 0 0 4px rgba(6,182,212,0.8);
  animation: pulse-live 1.2s ease-in-out infinite;
}

/* Active call rows — compact single-line, fits many */
.pbx-dash-calls {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pbx-dash-call {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
  border-radius: 4px;
}
.pbx-dash-call:nth-child(odd) { background: rgba(255,255,255,0.022); }

.pbx-dash-call-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 4px rgba(16,185,129,0.7);
  flex-shrink: 0;
  animation: pulse-live 1.5s ease-in-out infinite;
}

.pbx-dash-call-name {
  flex: 1;
  min-width: 0;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pbx-dash-call-dur {
  font-family: 'Geist Mono', monospace;
  font-size: 7.5px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* Recent activity timeline */
.pbx-dash-activity {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pbx-dash-act {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 8.5px;
  line-height: 1.4;
}

.pbx-dash-act-time {
  font-family: 'Geist Mono', monospace;
  font-size: 7.5px;
  color: var(--brand-cyan);
  flex-shrink: 0;
}

.pbx-dash-act-text { color: var(--text-secondary); }
.pbx-dash-act-text b { color: var(--text-primary); font-weight: 600; }

@keyframes floatY-back {
  0%, 100% { transform: translateY(-50%) rotateY(-2deg); }
  50%      { transform: translateY(calc(-50% - 8px)) rotateY(-2deg); }
}
@keyframes floatY-front {
  0%, 100% { transform: rotateY(2deg) translateY(0); }
  50%      { transform: rotateY(2deg) translateY(8px); }
}

.hero-ai-badge {
  position: absolute;
  top: -6px;
  left: 14%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(6,182,212,0.2), rgba(37,99,235,0.18));
  border: 0.5px solid rgba(6,182,212,0.4);
  box-shadow: 0 8px 22px rgba(6,182,212,0.18);
  backdrop-filter: blur(10px);
}

.hero-ai-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: pulse-live 1.8s ease-in-out infinite;
}

.hero-stat-badge {
  position: absolute;
  bottom: 3%;
  left: -3%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(6,182,212,0.16));
  border: 0.5px solid rgba(16,185,129,0.4);
  box-shadow: 0 8px 22px rgba(16,185,129,0.2);
  backdrop-filter: blur(10px);
}

.hero-stat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: pulse-live 1.4s ease-in-out infinite;
}

/* Pain section */
.pbx-pain { padding: 96px 0; border-top: 0.5px solid var(--border); }

.pain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 48px;
}

.pain-card {
  position: relative;
  padding: 26px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2));
  border: 0.5px solid var(--border);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pain-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245,158,11,0.32);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22));
}

.pain-card-wide { grid-column: 1 / -1; }

.pain-headline {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.4;
  position: relative;
  padding-left: 22px;
}

.pain-headline::before {
  content: '!';
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: rgba(245,158,11,0.18);
  color: #F59E0B;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pain-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.pain-closer {
  margin-top: 48px;
  text-align: center;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pain-closer .grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Spotlight visual (large screenshot wrapper) */
.spotlight-visual {
  margin: 48px 0;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.22));
  border: 0.5px solid var(--border);
  box-shadow:
    0 32px 72px rgba(0,0,0,0.4),
    0 12px 32px rgba(6,182,212,0.08);
}

.spotlight-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.spotlight-visual figcaption {
  text-align: center;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
  padding: 12px 8px 4px;
}

.screenshot-pending {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-tertiary);
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 20px);
  border-radius: 10px;
  border: 0.5px dashed rgba(255,255,255,0.12);
}

.screenshot-pending i { font-size: 32px; opacity: 0.5; }

/* IVR capability grid */
.ivr-capability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin: 48px 0;
}

.ivr-cap-col h4 {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-cyan);
  margin-bottom: 14px;
}

.ivr-cap-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ivr-cap-col li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.ivr-cap-col li i { color: var(--brand-cyan); font-size: 16px; margin-top: 3px; flex-shrink: 0; }

/* IVR code-style examples */
.ivr-examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 48px 0;
}

.ivr-example {
  background: rgba(0,0,0,0.32);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  overflow: hidden;
}

.ivr-example-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.ivr-example pre {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
  overflow-x: auto;
}

.ivr-key { color: var(--brand-cyan); font-weight: 600; }
.ivr-str { color: #F59E0B; }
.ivr-ai  { color: #A78BFA; font-weight: 500; }
.ivr-num { color: #10B981; font-weight: 500; }

/* ===== AI-flavored variant of IVR example card ===== */
.ivr-example.ivr-example-ai {
  position: relative;
  background:
    linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, rgba(0, 0, 0, 0.35) 100%);
  border-color: rgba(139, 92, 246, 0.28);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.04) inset;
}
.ivr-example.ivr-example-ai::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.55), rgba(16, 185, 129, 0.35) 60%, transparent);
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}
.ivr-example.ivr-example-ai .ivr-example-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ivr-title-icon { font-size: 14px; }
.ivr-ai-badge {
  margin-left: auto;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.22), rgba(16, 185, 129, 0.18));
  border: 0.5px solid rgba(167, 139, 250, 0.4);
  color: #C4B5FD;
}

/* ===== Visual IVR Builder mockup ===== */
.ivr-builder {
  background: #0B1124;
  border-radius: 12px;
  overflow: hidden;
}

.ivr-builder-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}

.ivr-builder-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.ivr-builder-title i { color: var(--brand-cyan); font-size: 16px; }

.ivr-builder-tabs { display: flex; gap: 4px; margin-left: auto; }

.ivr-tab {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--text-tertiary);
}
.ivr-tab.active {
  background: rgba(37,99,235,0.18);
  color: var(--text-primary);
  border: 0.5px solid rgba(6,182,212,0.3);
}

.ivr-builder-test {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-cyan);
}
.ivr-builder-test i { font-size: 14px; }

.ivr-palette {
  display: flex;
  gap: 7px;
  padding: 12px 16px;
  background: rgba(0,0,0,0.2);
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  overflow-x: auto;
  scrollbar-width: none;
}
.ivr-palette::-webkit-scrollbar { display: none; }

.ivr-palette-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 11px;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: grab;
}
.ivr-palette-chip i { font-size: 14px; color: var(--brand-cyan); }

.ivr-canvas-scroll { overflow-x: auto; scrollbar-width: none; }
.ivr-canvas-scroll::-webkit-scrollbar { display: none; }

.ivr-canvas {
  position: relative;
  height: 420px;
  min-width: 640px;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 22px 22px;
}

.ivr-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ivr-svg path {
  fill: none;
  stroke: rgba(6,182,212,0.5);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.ivr-svg-dot { fill: var(--brand-cyan); }

.ivr-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 9px;
  width: 158px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.3)), #131C36;
  border: 0.5px solid var(--border);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  z-index: 2;
}

.ivr-node-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(6,182,212,0.14);
  color: var(--brand-cyan);
}
.ivr-node-icon i { font-size: 16px; }

.ivr-node-body { min-width: 0; }

.ivr-node-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ivr-node-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ivr-node-entry .ivr-node-icon { background: rgba(6,182,212,0.16); color: var(--brand-cyan); }
.ivr-node-play  .ivr-node-icon { background: rgba(37,99,235,0.16); color: #34D399; }

.ivr-node-menu {
  border-color: rgba(6,182,212,0.42);
  box-shadow: 0 8px 26px rgba(6,182,212,0.2);
}
.ivr-node-menu .ivr-node-icon { background: var(--brand-gradient); color: #fff; }

.ivr-node-end .ivr-node-icon { background: rgba(255,255,255,0.06); color: var(--text-secondary); }

@media (max-width: 540px) {
  .ivr-canvas { height: 360px; }
  .ivr-node { width: 138px; padding: 8px 10px; }
}

/* Callout box */
.pbx-callout {
  margin: 48px 0 0;
  padding: 22px 26px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(37,99,235,0.12), rgba(6,182,212,0.08)),
    rgba(255,255,255,0.02);
  border: 0.5px solid rgba(6,182,212,0.28);
  box-shadow: 0 8px 24px rgba(6,182,212,0.08);
}

.pbx-callout-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.pbx-callout-title i { font-size: 18px; color: var(--brand-cyan); }
.pbx-callout p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }
.pbx-callout code {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.32);
  color: var(--brand-cyan);
}

.pbx-callout-success {
  background:
    linear-gradient(135deg, rgba(16,185,129,0.1), rgba(6,182,212,0.06)),
    rgba(255,255,255,0.02);
  border-color: rgba(16,185,129,0.28);
}

/* Why grid */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}

.why-card {
  padding: 24px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2));
  border: 0.5px solid var(--border);
}

.why-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(37,99,235,0.1));
  border: 0.5px solid rgba(6,182,212,0.3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.why-icon i { color: var(--brand-cyan); font-size: 20px; }

.why-card h4 { font-size: 16px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }
.why-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

/* Wallboard 2-shot row + monitoring grid */
.wallboard-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 48px 0;
}
.wallboard-shots .spotlight-visual { margin: 0; }

.monitoring-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.monitoring-card {
  padding: 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2));
  border: 0.5px solid var(--border);
}

.mon-tag {
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.mon-blue   .mon-tag { background: rgba(37,99,235,0.16);  color: #6EE7B7; }
.mon-green  .mon-tag { background: rgba(16,185,129,0.16); color: #6EE7B7; }
.mon-orange .mon-tag { background: rgba(245,158,11,0.16); color: #FCD34D; }

.monitoring-card p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.55; }

/* 4-column capability grid */
.capability-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.cap-col {
  padding: 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2));
  border: 0.5px solid var(--border);
}

.cap-col-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(37,99,235,0.1));
  border: 0.5px solid rgba(6,182,212,0.3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.cap-col-icon i { color: var(--brand-cyan); font-size: 20px; }

.cap-col h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.cap-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cap-col li {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}

.cap-col li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand-cyan);
}

/* Report table */
.report-table-wrap {
  margin: 40px 0;
  border-radius: 12px;
  border: 0.5px solid var(--border);
  overflow: hidden;
  background: rgba(0,0,0,0.18);
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.report-table th, .report-table td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 0.5px solid var(--border);
}

.report-table thead th {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-cyan);
  background: rgba(6,182,212,0.04);
}

.report-table tbody td:first-child { font-weight: 600; color: var(--text-primary); }
.report-table tbody td:last-child { color: var(--text-secondary); }
.report-table tbody tr:last-child td { border-bottom: none; }
.report-table tbody tr:hover { background: rgba(255,255,255,0.025); }

.report-deep {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 28px;
}

.report-deep-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 0.5px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.report-deep-item i { color: var(--brand-cyan); font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.report-deep-item strong { color: var(--text-primary); font-weight: 600; }

/* Architecture stack */
.arch-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 48px 0;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.arch-layer {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.22));
  border: 0.5px solid var(--border);
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}

.arch-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--brand-gradient);
  display: flex; align-items: center; justify-content: center;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(37,99,235,0.32);
}
.arch-icon i { font-size: 22px; }

.arch-text h4 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.arch-text p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }

.arch-arrow {
  display: flex;
  justify-content: center;
  padding: 8px 0;
  color: var(--brand-cyan);
  opacity: 0.6;
}
.arch-arrow i { font-size: 20px; }

.arch-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 48px 0;
}

.arch-spec {
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 0.5px solid var(--border);
}

.arch-spec-label {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.arch-spec-value {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Deployment options */
.deploy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}

.deploy-card {
  padding: 28px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2));
  border: 0.5px solid var(--border);
}

.deploy-card-featured {
  background: linear-gradient(180deg, rgba(6,182,212,0.1), rgba(37,99,235,0.06));
  border-color: rgba(6,182,212,0.36);
  box-shadow: 0 12px 28px rgba(6,182,212,0.12);
}

.deploy-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(37,99,235,0.1));
  border: 0.5px solid rgba(6,182,212,0.3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.deploy-icon i { font-size: 22px; color: var(--brand-cyan); }

.deploy-card h4 { font-size: 18px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em; }
.deploy-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

/* Competitor comparison table */
.compare-wrap {
  margin: 48px 0;
  border-radius: 14px;
  border: 0.5px solid var(--border);
  overflow: hidden;
  background: rgba(0,0,0,0.18);
}

.pbx-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.pbx-compare th, .pbx-compare td {
  text-align: center;
  padding: 14px 12px;
  border-bottom: 0.5px solid var(--border);
}

.pbx-compare th:first-child, .pbx-compare td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--text-primary);
}

.pbx-compare thead th {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  background: rgba(255,255,255,0.02);
  font-weight: 500;
}

.pbx-compare thead th.col-zorio,
.pbx-compare tbody td.col-zorio {
  background: rgba(6,182,212,0.06);
  color: var(--brand-cyan);
  font-weight: 600;
}

.pbx-compare thead th.col-zorio { color: var(--brand-cyan); }

.pbx-compare td.v { color: #10B981; font-weight: 600; }
.pbx-compare td.x { color: rgba(239,68,68,0.6); }

.pbx-compare tbody tr:last-child td { border-bottom: none; }
.pbx-compare tbody tr:hover { background: rgba(255,255,255,0.02); }

.pbx-positioning {
  margin-top: 32px;
  text-align: center;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.pbx-positioning .grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Use case 2x2 grid */
.usecase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  grid-auto-rows: 1fr;
  margin-top: 48px;
}

.usecase-card {
  padding: 28px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2));
  border: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
}

.usecase-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--brand-gradient);
  display: flex; align-items: center; justify-content: center;
  color: white;
  margin-bottom: 16px;
  box-shadow: 0 6px 16px rgba(37,99,235,0.3);
}
.usecase-icon i { font-size: 22px; }

.usecase-card h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.usecase-card > p {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 18px;
}

.usecase-feats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.usecase-feats li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.usecase-feats li i { color: var(--brand-cyan); font-size: 16px; margin-top: 1px; flex-shrink: 0; }

.usecase-fit {
  margin-top: auto;
  padding-top: 16px;
  border-top: 0.5px dashed rgba(255,255,255,0.14);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.usecase-fit-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.usecase-fit-text {
  font-size: 13.5px;
  color: var(--text-primary);
  font-weight: 500;
}

/* FAQ accordion (scoped reuse) */
.faq-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.faq-list .faq-item {
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 0.5px solid var(--border);
  overflow: hidden;
}

.faq-list .faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}

.faq-list .faq-q i {
  font-size: 18px;
  color: var(--text-tertiary);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-list .faq-item.open .faq-q i { transform: rotate(180deg); color: var(--brand-cyan); }

.faq-list .faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-list .faq-item.open .faq-a { max-height: 600px; }

.faq-list .faq-a p {
  padding: 0 20px 18px;
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* CTA trust signals */
.cta-trust {
  margin-top: 20px;
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  opacity: 0.7;
}

/* Responsive — PBX page */
@media (max-width: 968px) {
  .pbx-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .pbx-hero-stage { height: 420px; }
  .pain-grid { grid-template-columns: 1fr; }
  .ivr-capability-grid { grid-template-columns: 1fr; gap: 28px; }
  .ivr-examples { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .wallboard-shots { grid-template-columns: 1fr; }
  .monitoring-grid { grid-template-columns: 1fr; }
  .capability-4col { grid-template-columns: 1fr 1fr; }
  .arch-specs { grid-template-columns: 1fr 1fr; }
  .deploy-grid { grid-template-columns: 1fr; }
  .usecase-grid { grid-template-columns: 1fr; }
  .report-deep { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .hero-card-back, .hero-card-front { animation: none; transform: none; }
  .hero-card-back { position: relative; width: 100%; height: 380px; top: 0; right: auto; margin-bottom: 12px; }
  .hero-card-front { position: relative; width: 100%; bottom: auto; left: auto; }
  .hero-ai-badge { left: 50%; transform: translateX(-50%); }
  .hero-stat-badge { left: 50%; transform: translateX(-50%); bottom: -6px; }
  .pbx-hero-stage { height: auto; }
  .pbx-dash { font-size: 9px; }
  .pbx-dash-side { width: 100px; }
  .capability-4col { grid-template-columns: 1fr; }
  .arch-specs { grid-template-columns: 1fr; }
  .pbx-compare { font-size: 12px; }
  .pbx-compare th, .pbx-compare td { padding: 8px 6px; }
}

/* ============================================================
   PBX page — remaining mockups (Call Flow / Wallboard / Audio Studio / Report)
============================================================ */

/* ---- Call Flow Visualizer (read-only trace) ---- */
.cfv { background: #0B1124; border-radius: 12px; overflow: hidden; }

.cfv-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}
.cfv-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.cfv-title i { color: var(--brand-cyan); font-size: 16px; }
.cfv-readonly {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Geist Mono', monospace; font-size: 10px;
  color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em;
}

.cfv-flow {
  padding: 28px 20px;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0);
  background-size: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cfv-flow::-webkit-scrollbar { display: none; }

.cfv-track, .cfv-branch {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cfv-branches {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 36px;
  border-left: 1.5px dashed rgba(6,182,212,0.32);
  margin-left: 86px;
}

.cfv-node {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.3)), #131C36;
  border: 0.5px solid var(--border);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  flex-shrink: 0;
  white-space: nowrap;
}
.cfv-node i { font-size: 17px; color: var(--brand-cyan); flex-shrink: 0; }
.cfv-node b { display: block; font-size: 12px; font-weight: 600; color: var(--text-primary); }
.cfv-node span { display: block; font-family: 'Geist Mono', monospace; font-size: 8.5px; color: var(--text-tertiary); margin-top: 1px; }

.cfv-in i { color: #10B981; }
.cfv-ivr { border-color: rgba(6,182,212,0.4); box-shadow: 0 6px 18px rgba(6,182,212,0.16); }
.cfv-ivr i { color: var(--brand-cyan); }
.cfv-end i { color: #F59E0B; }

.cfv-arrow { color: rgba(6,182,212,0.55); font-size: 16px; flex-shrink: 0; }

.cfv-key {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-cyan);
  background: rgba(6,182,212,0.12);
  border: 0.5px solid rgba(6,182,212,0.3);
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* ---- Wallboard ---- */
.wboard { background: #0B1124; border-radius: 12px; overflow: hidden; height: 100%; }

.wboard-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  background: rgba(255,255,255,0.025);
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}
.wboard-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.wboard-title i { color: var(--brand-cyan); font-size: 15px; }
.wboard-live {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Geist Mono', monospace; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #10B981;
}
.wboard-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10B981; box-shadow: 0 0 6px #10B981;
  animation: pulse-live 1.6s ease-in-out infinite;
}

.wboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
}
.wboard-stat {
  background: #0B1124;
  padding: 16px 12px;
  text-align: center;
}
.wboard-num {
  font-family: 'Geist Mono', monospace;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.wboard-num.wb-amber { color: #F59E0B; }
.wboard-num.wb-green { color: #10B981; }
.wboard-num.wb-cyan  { color: var(--brand-cyan); }
.wboard-lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-top: 8px;
}

.wboard-agents-head {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: 14px 14px 8px;
}
.wboard-agents {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0 14px 16px;
}
.wb-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 4px;
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  border: 0.5px solid var(--border);
}
.wb-agent-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 9px; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #059669, #10B981);
}
.wb-agent em {
  font-style: normal;
  font-size: 8px;
  font-family: 'Geist Mono', monospace;
  color: var(--text-tertiary);
}
.wb-agent.wb-busy .wb-agent-av { background: linear-gradient(135deg,#F59E0B,#EF4444); }
.wb-agent.wb-busy em { color: #F59E0B; }
.wb-agent.wb-idle em { color: #10B981; }
.wb-agent.wb-ring .wb-agent-av { background: linear-gradient(135deg,#10B981,#059669); }
.wb-agent.wb-ring em { color: var(--brand-cyan); }
.wb-agent.wb-off { opacity: 0.45; }

.qboard { width: 100%; border-collapse: collapse; font-size: 11px; }
.qboard th, .qboard td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.qboard th {
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-weight: 500;
}
.qboard td:first-child { font-weight: 600; color: var(--text-primary); }
.qboard td { color: var(--text-secondary); font-family: 'Geist Mono', monospace; }
.qboard tbody tr:last-child td { border-bottom: none; }
.qboard .qb-ok { color: #10B981; }
.qboard .qb-warn { color: #F59E0B; }
.qboard-foot {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-size: 9px;
  color: var(--text-tertiary);
  border-top: 0.5px solid rgba(255,255,255,0.06);
}
.qboard-foot i { color: var(--brand-cyan); font-size: 12px; }

/* ---- Audio Studio ---- */
.astudio { background: #0B1124; border-radius: 12px; overflow: hidden; }
.astudio-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}
.astudio-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.astudio-title i { color: var(--brand-cyan); font-size: 16px; }
.astudio-save {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--brand-cyan);
}
.astudio-save i { font-size: 14px; }

.astudio-body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0;
}
.astudio-tracks {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 0.5px solid rgba(255,255,255,0.06);
}
.atrack {
  background: rgba(255,255,255,0.025);
  border: 0.5px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
}
.atrack-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.atrack-name { font-size: 11px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
.atrack-name b {
  width: 16px; height: 16px; border-radius: 4px;
  background: rgba(6,182,212,0.16); color: var(--brand-cyan);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace; font-size: 9px;
}
.atrack-src {
  font-family: 'Geist Mono', monospace; font-size: 9px; color: var(--text-tertiary);
}
.atrack-play {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; color: var(--brand-cyan);
}
.atrack-play i { font-size: 12px; }

.awave { display: block; width: 100%; height: 36px; }
.awave rect { fill: rgba(6,182,212,0.55); }
.awave-music rect { fill: rgba(139,92,246,0.5); }
.awave-out rect { fill: rgba(16,185,129,0.6); }
.atrack-preview { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.05); }

.astudio-panel { padding: 16px; }
.apanel-title { font-size: 12px; font-weight: 600; margin-bottom: 12px; }
.apanel-group {
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin: 12px 0 8px;
}
.apanel-group:first-of-type { margin-top: 0; }
.aslider {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 9px;
}
.aslider > span {
  font-size: 10px; color: var(--text-secondary);
  width: 70px; flex-shrink: 0;
}
.aslider-track {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  position: relative;
}
.aslider-track i {
  position: absolute;
  top: 50%;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--brand-cyan);
  box-shadow: 0 0 6px rgba(6,182,212,0.6);
  transform: translate(-50%, -50%);
}
.aslider > b {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--text-primary);
  width: 38px; text-align: right; flex-shrink: 0;
}

/* ---- Report ---- */
.rpt { background: #0B1124; border-radius: 12px; overflow: hidden; }
.rpt-bar-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}
.rpt-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.rpt-title i { color: var(--brand-cyan); font-size: 16px; }
.rpt-dims { display: flex; gap: 5px; flex-wrap: wrap; }
.rpt-dim {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border);
  color: var(--text-tertiary);
}
.rpt-dim.active {
  background: rgba(37,99,235,0.18);
  border-color: rgba(6,182,212,0.3);
  color: var(--text-primary);
}

.rpt-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
  padding: 20px 16px 8px;
}
.rpt-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.rpt-bar-fill {
  width: 100%;
  max-width: 26px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--brand-cyan), var(--brand-blue));
  min-height: 4px;
}
.rpt-bar-col span {
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  color: var(--text-tertiary);
}

.rpt-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.rpt-table th, .rpt-table td {
  padding: 8px 14px;
  text-align: left;
  border-top: 0.5px solid rgba(255,255,255,0.06);
}
.rpt-table th {
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-weight: 500;
  background: rgba(255,255,255,0.02);
}
.rpt-table td { color: var(--text-secondary); }
.rpt-table td:first-child { font-family: 'Geist Mono', monospace; font-size: 9px; color: var(--text-tertiary); }
.rpt-table td:nth-child(2) { color: var(--text-primary); font-weight: 600; }
.rpt-table .rpt-hl { color: #10B981; font-family: 'Geist Mono', monospace; font-weight: 600; }
.rpt-foot {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 16px;
  font-size: 9.5px;
  color: var(--text-tertiary);
  border-top: 0.5px solid rgba(255,255,255,0.06);
}
.rpt-foot i { color: var(--brand-cyan); font-size: 12px; }

@media (max-width: 968px) {
  .astudio-body { grid-template-columns: 1fr; }
  .astudio-tracks { border-right: none; border-bottom: 0.5px solid rgba(255,255,255,0.06); }
}
@media (max-width: 540px) {
  .cfv-branches { margin-left: 0; padding-left: 18px; }
  .wboard-num { font-size: 24px; }
  .wboard-agents { grid-template-columns: repeat(2, 1fr); }
  .rpt-chart { height: 130px; }
}

/* ============================================================
   Chat & CSKH product page mockups
============================================================ */

/* ---- Chat inbox mockup (Chat hero) ---- */
.chat-inbox {
  background: #0B1124;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chat-inbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: rgba(255,255,255,0.025);
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}
.chat-inbox-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
}
.chat-inbox-title i { color: var(--brand-cyan); font-size: 15px; }
.chat-inbox-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chat-inbox-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
}

.chat-inbox-list {
  border-right: 0.5px solid rgba(255,255,255,0.06);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.chat-inbox-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.chat-inbox-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--text-tertiary);
  background: rgba(255,255,255,0.03);
}
.chat-inbox-tab em {
  font-style: normal;
  font-size: 8.5px;
  color: var(--text-tertiary);
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
}
.chat-inbox-tab.active {
  color: var(--text-primary);
  background: rgba(37,99,235,0.18);
  border: 0.5px solid rgba(6,182,212,0.32);
}
.chat-inbox-tab.active em { color: var(--brand-cyan); background: rgba(6,182,212,0.18); }

.chat-inbox-thread {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
}
.chat-inbox-thread.active { background: rgba(37,99,235,0.1); }

.chat-inbox-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.chat-inbox-info { flex: 1; min-width: 0; }
.chat-inbox-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 1px;
}

.chat-inbox-ch {
  font-family: 'Geist Mono', monospace;
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chat-inbox-ch.z-zalo { background: rgba(6,182,212,0.16); color: var(--brand-cyan); }
.chat-inbox-ch.z-web  { background: rgba(139,92,246,0.16); color: #A78BFA; }
.chat-inbox-ch.z-fb   { background: rgba(37,99,235,0.16); color: #34D399; }
.chat-inbox-ch.z-tg   { background: rgba(16,185,129,0.16); color: #6EE7B7; }

.chat-inbox-snip {
  font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-inbox-unread {
  background: var(--brand-gradient);
  color: white;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

.chat-inbox-side {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.chat-inbox-side-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.chat-inbox-side-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}
.chat-inbox-side-name { font-size: 12px; font-weight: 600; }
.chat-inbox-side-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.chat-inbox-side-block { display: flex; flex-direction: column; gap: 5px; }

.chat-inbox-side-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-inbox-side-label i { color: var(--brand-cyan); font-size: 11px; }

.chat-inbox-sentiment {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cs-pill {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.cs-pill.cs-neg { background: rgba(239,68,68,0.16); color: #FCA5A5; }
.cs-pill.cs-pos { background: rgba(16,185,129,0.16); color: #6EE7B7; }

.cs-ai-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 8px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(139,92,246,0.16);
  color: #C4B5FD;
}

.chat-inbox-side-sum {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: rgba(6,182,212,0.06);
  border-left: 2px solid var(--brand-cyan);
  padding: 7px 10px;
  border-radius: 0 6px 6px 0;
}

.chat-inbox-side-ticket {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.025);
  border: 0.5px solid rgba(255,255,255,0.06);
  border-radius: 7px;
}
.chat-inbox-side-ticket > i { color: #F59E0B; font-size: 14px; flex-shrink: 0; }
.chat-inbox-side-ticket b { display: block; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-primary); font-weight: 600; }
.chat-inbox-side-ticket span { display: block; font-size: 9.5px; color: var(--text-secondary); margin-top: 1px; }
.chat-inbox-side-ticket em {
  font-style: normal;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  color: #F59E0B;
  margin-left: auto;
  flex-shrink: 0;
}

/* ---- Customer 360 mockup (CSKH hero) ---- */
.cust-360 {
  background: #0B1124;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cust-360-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: rgba(255,255,255,0.025);
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}
.cust-360-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.cust-360-title i { color: var(--brand-cyan); font-size: 15px; }
.cust-360-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cust-360-body {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  flex: 1;
  min-height: 0;
}

.cust-360-side {
  padding: 14px 12px;
  border-right: 0.5px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.cust-360-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6, #10B981);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0 auto 4px;
}

.cust-360-name { font-size: 14px; font-weight: 600; text-align: center; }
.cust-360-id {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--text-tertiary);
  text-align: center;
  margin-bottom: 6px;
}

.cust-360-tags { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.cust-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 500;
}
.cust-tag.tag-active { background: rgba(16,185,129,0.16); color: #6EE7B7; }
.cust-tag.tag-vip { background: rgba(245,158,11,0.16); color: #FCD34D; }

.cust-360-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 0.5px solid rgba(255,255,255,0.06);
}
.cust-field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 9.5px;
}
.cust-field span { color: var(--text-tertiary); font-family: 'Geist Mono', monospace; font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.cust-field b { color: var(--text-primary); font-weight: 500; font-size: 10px; }
.cust-field b.cust-stage { background: rgba(245,158,11,0.16); color: #FCD34D; padding: 1px 7px; border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 9px; }

.cust-360-action {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 7px;
  background: var(--brand-gradient);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.cust-360-action i { font-size: 13px; }

.cust-360-feed {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.cust-360-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.cust-tab {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,0.03);
  color: var(--text-tertiary);
}
.cust-tab.active {
  background: rgba(37,99,235,0.18);
  color: var(--text-primary);
  border: 0.5px solid rgba(6,182,212,0.32);
}

.cust-360-section {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.cust-event {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.025);
  border: 0.5px solid rgba(255,255,255,0.06);
  border-radius: 7px;
  position: relative;
}
.cust-event > i { font-size: 13px; color: var(--text-tertiary); flex-shrink: 0; margin-top: 2px; }
.cust-event.ev-ticket > i { color: #F59E0B; }
.cust-event-body { flex: 1; min-width: 0; }
.cust-event-head {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.cust-event-head b { font-size: 10.5px; font-weight: 600; color: var(--text-primary); }
.cust-event-text {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-event-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.cust-event-time {
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.ev-pri, .ev-status {
  font-family: 'Geist Mono', monospace;
  font-size: 8px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ev-pri-hi { background: rgba(239,68,68,0.16); color: #FCA5A5; }
.ev-open  { background: rgba(245,158,11,0.16); color: #FCD34D; }
.ev-warn  { background: rgba(245,158,11,0.16); color: #FCD34D; }
.ev-sent  { background: rgba(16,185,129,0.16); color: #6EE7B7; }

/* ---- 6-cell use case grid (Chat & CSKH pages) ---- */
.usecase-grid-6 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 968px) {
  .usecase-grid-6 { grid-template-columns: 1fr 1fr; }
  .chat-inbox-body { grid-template-columns: 1fr; }
  .chat-inbox-list { border-right: none; border-bottom: 0.5px solid rgba(255,255,255,0.06); max-height: 220px; }
  .cust-360-body { grid-template-columns: 1fr; }
  .cust-360-side { border-right: none; border-bottom: 0.5px solid rgba(255,255,255,0.06); }
}
@media (max-width: 540px) {
  .usecase-grid-6 { grid-template-columns: 1fr; }
}

/* ============================================================
   Chat & CSKH — section spotlight mockups
============================================================ */

/* ---- Chat: Focused conversation thread ---- */
.chat-thread {
  background: #0B1124;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-thread-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.025);
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}

.chat-thread-av {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #fff;
  flex-shrink: 0;
}

.chat-thread-info { flex: 1; min-width: 0; }
.chat-thread-name {
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 2px;
}
.chat-thread-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
}

.chat-thread-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245,158,11,0.14);
  color: #FCD34D;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.chat-thread-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.035) 1px, transparent 0);
  background-size: 24px 24px;
  min-height: 220px;
}

.cmsg {
  max-width: 70%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cmsg-from { align-self: flex-start; }
.cmsg-to   { align-self: flex-end; align-items: flex-end; }

.cmsg-text {
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}
.cmsg-from .cmsg-text { border-radius: 14px 14px 14px 4px; }
.cmsg-to   .cmsg-text {
  background: var(--brand-gradient);
  color: white;
  border-radius: 14px 14px 4px 14px;
}

.cmsg-time {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--text-tertiary);
  padding: 0 4px;
}

.chat-thread-foot {
  padding: 12px 18px 14px;
  border-top: 0.5px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.18);
}

.chat-thread-quick {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.qr-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  padding: 4px 9px;
  border-radius: 5px;
  background: rgba(6,182,212,0.1);
  border: 0.5px solid rgba(6,182,212,0.25);
  color: var(--brand-cyan);
}
.qr-chip i { font-size: 11px; }

.chat-thread-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.chat-thread-input > i { color: var(--text-tertiary); font-size: 16px; }
.cthread-placeholder { flex: 1; font-size: 12px; color: var(--text-tertiary); }
.cthread-send {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-gradient);
  border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.cthread-send i { font-size: 14px; }

/* ---- Chat: AI insight card ---- */
.chat-ai-insight {
  background: #0B1124;
  border-radius: 12px;
  overflow: hidden;
}

.cai-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}
.cai-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.cai-title i { color: var(--brand-cyan); font-size: 16px; }
.cai-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--text-tertiary);
}

.cai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.05);
}
.cai-block {
  background: #0B1124;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cai-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 5px;
}
.cai-label i { color: var(--brand-cyan); font-size: 12px; }

.cai-trend { width: 100%; height: 50px; display: block; }
.cai-trend-labels {
  display: flex;
  justify-content: space-between;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--text-tertiary);
}

.cai-summary {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  background: rgba(6,182,212,0.06);
  border-left: 2px solid var(--brand-cyan);
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
}
.cai-summary strong { color: var(--text-primary); font-weight: 600; }

.cai-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cai-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border);
  color: var(--text-secondary);
}
.cai-tag.cai-tag-hot {
  background: rgba(245,158,11,0.14);
  border-color: rgba(245,158,11,0.3);
  color: #F59E0B;
}

.cai-suggest {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  background: linear-gradient(135deg, rgba(6,182,212,0.08), rgba(37,99,235,0.06));
  border: 0.5px solid rgba(6,182,212,0.28);
  padding: 10px 12px;
  border-radius: 7px;
  font-style: italic;
}

/* ---- CSKH: Customer list ---- */
.cust-list {
  background: #0B1124;
  border-radius: 12px;
  overflow: hidden;
}

.cust-list-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}
.cust-list-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.cust-list-title i { color: var(--brand-cyan); font-size: 16px; }
.cust-list-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--text-tertiary);
}

.cust-list-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  overflow-x: auto;
  scrollbar-width: none;
}
.cust-list-tabs::-webkit-scrollbar { display: none; }

.cl-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 11.5px;
  background: rgba(255,255,255,0.03);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.cl-tab em {
  font-style: normal;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
}
.cl-tab.active {
  background: rgba(37,99,235,0.18);
  color: var(--text-primary);
  border: 0.5px solid rgba(6,182,212,0.32);
}
.cl-tab.active em { background: rgba(6,182,212,0.22); color: var(--brand-cyan); }
.cl-tab.cl-tab-vip { color: #FCD34D; }
.cl-tab.cl-tab-vip em { background: rgba(245,158,11,0.18); color: #FCD34D; }
.cl-tab.cl-tab-churn { color: #FCA5A5; }
.cl-tab.cl-tab-churn em { background: rgba(239,68,68,0.18); color: #FCA5A5; }

.cust-list-table-wrap { overflow-x: auto; scrollbar-width: none; }
.cust-list-table-wrap::-webkit-scrollbar { display: none; }
.cust-list-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 720px; }
.cust-list-table th, .cust-list-table td {
  padding: 11px 16px;
  text-align: left;
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
}
.cust-list-table th {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-weight: 500;
  background: rgba(255,255,255,0.02);
}
.cust-list-table td { color: var(--text-secondary); }
.cust-list-table td:first-child { color: var(--brand-cyan); font-weight: 500; display: flex; align-items: center; gap: 9px; }
.cust-list-table td:nth-child(2),
.cust-list-table td:nth-child(3) { font-family: 'Geist Mono', monospace; font-size: 11.5px; color: var(--text-tertiary); }
.cust-list-table tbody tr:last-child td { border-bottom: none; }
.cust-list-table tbody tr:hover { background: rgba(255,255,255,0.025); }

.cl-av {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px; font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.cl-src {
  display: inline-flex; align-items: center;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border);
  color: var(--text-secondary);
}
.cl-src.cl-src-web  { background: rgba(139,92,246,0.14); border-color: rgba(139,92,246,0.32); color: #C4B5FD; }
.cl-src.cl-src-ref  { background: rgba(236,72,153,0.14); border-color: rgba(236,72,153,0.32); color: #F9A8D4; }
.cl-src.cl-src-form { background: rgba(6,182,212,0.14); border-color: rgba(6,182,212,0.32); color: var(--brand-cyan); }
.cl-src.cl-src-fb   { background: rgba(37,99,235,0.14); border-color: rgba(37,99,235,0.32); color: #6EE7B7; }

/* ---- CSKH: Ticket detail with SLA panel ---- */
.tkt-detail {
  background: #0B1124;
  border-radius: 12px;
  overflow: hidden;
}

.tkt-detail-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.025);
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
  flex-wrap: wrap;
}
.tkt-id {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.06);
  padding: 3px 10px;
  border-radius: 5px;
}
.tkt-pri {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tkt-pri.tkt-pri-urgent {
  background: rgba(239,68,68,0.16);
  color: #FCA5A5;
}
.tkt-detail-title { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; }

.tkt-detail-body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
}
.tkt-thread {
  padding: 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 0.5px solid rgba(255,255,255,0.06);
}
.tkt-msg { display: flex; gap: 10px; align-items: flex-start; }
.tkt-msg-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #059669, #10B981);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff;
  flex-shrink: 0;
}
.tkt-msg-card { flex: 1; min-width: 0; background: rgba(255,255,255,0.03); border: 0.5px solid var(--border); border-radius: 8px; padding: 10px 13px; }
.tkt-msg-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-primary); font-weight: 600;
  margin-bottom: 5px;
}
.tkt-msg-ch {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(6,182,212,0.16);
  color: var(--brand-cyan);
  font-weight: 500;
}
.tkt-msg-head em {
  font-style: normal;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--text-tertiary);
  margin-left: auto;
  font-weight: 400;
}
.tkt-msg-text { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }

.tkt-side {
  padding: 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(0,0,0,0.18);
}
.tkt-side-block { display: flex; flex-direction: column; gap: 5px; }
.tkt-side-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.tkt-side-val {
  font-size: 12px; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tkt-status {
  display: inline-flex; align-items: center;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  padding: 4px 11px;
  border-radius: 999px;
  font-weight: 600;
}
.tkt-status.tkt-status-closed { background: rgba(16,185,129,0.16); color: #6EE7B7; }
.tkt-asg {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981, #10B981);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 9px; font-weight: 600; color: #fff;
}
.tkt-chip {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  border: 0.5px solid var(--border);
}

.tkt-sla { gap: 7px; }
.tkt-sla-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
  color: var(--text-secondary);
}
.tkt-sla-row b { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--text-primary); font-weight: 600; }

.tkt-sla-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.tkt-sla-bar span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #F59E0B 0%, #EF4444 100%);
}

.tkt-sla-warn {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: #FCA5A5;
  margin-top: 2px;
}
.tkt-sla-warn i { color: #EF4444; font-size: 12px; }

/* ---- CSKH: Marketing campaign ---- */
.mkt-campaign {
  background: #0B1124;
  border-radius: 12px;
  overflow: hidden;
}

.mkt-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}
.mkt-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.mkt-title i { color: var(--brand-cyan); font-size: 16px; }
.mkt-status {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: #6EE7B7;
}

.mkt-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; }

.mkt-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mkt-ch {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  border: 0.5px solid var(--border);
}
.mkt-ch i { font-size: 16px; color: var(--text-tertiary); }
.mkt-ch span { flex: 1; font-size: 12px; color: var(--text-primary); font-weight: 500; }
.mkt-ch b {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-tertiary);
}
.mkt-ch.mkt-ch-active {
  background: rgba(6,182,212,0.08);
  border-color: rgba(6,182,212,0.32);
}
.mkt-ch.mkt-ch-active i { color: var(--brand-cyan); }
.mkt-ch.mkt-ch-active b { background: rgba(16,185,129,0.18); color: #6EE7B7; }

.mkt-target {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px;
  background: rgba(255,255,255,0.025);
  border: 0.5px solid var(--border);
  border-radius: 8px;
}
.mkt-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.mkt-row > span {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.mkt-row b { color: var(--text-primary); font-weight: 500; }
.mkt-row em {
  font-style: normal;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
}
.mkt-row.mkt-row-final {
  padding-top: 8px; margin-top: 4px;
  border-top: 0.5px dashed rgba(255,255,255,0.12);
}
.mkt-row.mkt-row-final b.mkt-final { color: var(--brand-cyan); font-weight: 700; font-size: 14px; }

.mkt-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mkt-result {
  padding: 12px;
  background: rgba(255,255,255,0.025);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  text-align: center;
}
.mkt-result-num {
  font-family: 'Geist Mono', monospace;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1;
}
.mkt-result-num.mkt-green { color: #10B981; }
.mkt-result-num.mkt-cyan  { color: var(--brand-cyan); }
.mkt-result-num.mkt-amber { color: #F59E0B; }
.mkt-result-lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-top: 6px;
}

@media (max-width: 968px) {
  .cai-grid { grid-template-columns: 1fr; }
  .tkt-detail-body { grid-template-columns: 1fr; }
  .tkt-thread { border-right: none; border-bottom: 0.5px solid rgba(255,255,255,0.06); }
  .mkt-channels { grid-template-columns: 1fr; }
  .mkt-results { grid-template-columns: 1fr 1fr; }
  .mkt-row { grid-template-columns: 1fr; gap: 4px; }
  .mkt-row em { justify-self: start; }
}
@media (max-width: 540px) {
  .cmsg { max-width: 88%; }
  .chat-thread-quick { display: none; }
}

/* ============================================================
   Hạ tầng AI — Call analysis pipeline mockup
============================================================ */
.call-ai {
  background: #0B1124;
  border-radius: 12px;
  overflow: hidden;
}

.call-ai-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
  flex-wrap: wrap;
  gap: 8px;
}
.call-ai-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
}
.call-ai-title i { color: var(--brand-cyan); font-size: 16px; }
.call-ai-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
}

.call-ai-wave {
  padding: 14px 18px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.18);
}
.call-ai-wave-svg {
  width: 100%;
  height: 36px;
  display: block;
}
.call-ai-wave-svg rect { fill: rgba(16, 185, 129, 0.55); }
.call-ai-wave-time {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--text-tertiary);
}

.call-ai-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.call-ai-block {
  padding: 16px 18px;
}
.call-ai-block:first-child {
  border-right: 0.5px solid rgba(255,255,255,0.06);
}

.call-ai-label {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.call-ai-label i { color: var(--brand-cyan); font-size: 12px; }

.call-ai-transcript {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  line-height: 1.55;
}
.cat-line {
  display: grid;
  grid-template-columns: 38px 50px 1fr;
  gap: 8px;
  align-items: baseline;
}
.cat-time {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--text-tertiary);
}
.cat-spk {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  text-align: center;
}
.cat-spk.cat-cust { background: rgba(139, 92, 246, 0.16); color: #C4B5FD; }
.cat-spk.cat-agent { background: rgba(16, 185, 129, 0.16); color: #6EE7B7; }
.cat-text { color: var(--text-secondary); }

.call-ai-summary {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  background: rgba(16, 185, 129, 0.06);
  border-left: 2px solid var(--brand-cyan);
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
}
.call-ai-summary strong { color: var(--text-primary); font-weight: 600; }

.call-ai-actions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.call-ai-actions li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.5;
}
.call-ai-actions li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-cyan);
  margin-top: 8px;
  flex-shrink: 0;
}
.call-ai-actions em {
  font-style: normal;
  color: #FCD34D;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
}

.call-ai-insights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.02);
}
.cai-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border);
  color: var(--text-secondary);
}
.cai-pill i { font-size: 13px; }
.cai-pill b { color: var(--text-primary); font-weight: 600; }

.cai-pill-pos    { background: rgba(16, 185, 129, 0.1);  border-color: rgba(16, 185, 129, 0.32); color: #6EE7B7; }
.cai-pill-pos b  { color: #34D399; }
.cai-pill-cyan   { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.28); color: var(--brand-cyan); }
.cai-pill-cyan b { color: #6EE7B7; }
.cai-pill-amber  { background: rgba(245, 158, 11, 0.1);  border-color: rgba(245, 158, 11, 0.32); color: #FCD34D; }
.cai-pill-amber b{ color: #F59E0B; }
.cai-pill-purple { background: rgba(139, 92, 246, 0.1);  border-color: rgba(139, 92, 246, 0.32); color: #C4B5FD; }
.cai-pill-purple b{ color: #A78BFA; }

@media (max-width: 968px) {
  .call-ai-row { grid-template-columns: 1fr; }
  .call-ai-block:first-child { border-right: none; border-bottom: 0.5px solid rgba(255,255,255,0.06); }
  .cat-line { grid-template-columns: 36px 44px 1fr; gap: 6px; font-size: 11px; }
}

/* ===========================================================
   MOBILE NAV — Hamburger drawer
   =========================================================== */
.nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  margin-left: 6px;
}
.nav-burger span {
  position: absolute;
  left: 9px; right: 9px;
  height: 1.5px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, top 0.25s ease;
}
.nav-burger span:nth-child(1) { top: 13px; }
.nav-burger span:nth-child(2) { top: 19px; }
.nav-burger span:nth-child(3) { top: 25px; }

.nav-burger.is-active span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-burger.is-active span:nth-child(2) { opacity: 0; }
.nav-burger.is-active span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

body.nav-open { overflow: hidden; }

/* Mobile-only drawer CTA group — hidden on desktop, shown only inside open drawer */
.nav-menu-cta { display: none; }

@media (max-width: 968px) {
  .nav-burger { display: block; }

  /* Hide nav cta buttons on mobile — drawer has its own CTA */
  header .nav-cta-group { display: none; }

  nav { position: relative; }

  /* Convert nav-menu into a slide-down drawer */
  .nav-menu {
    display: flex !important;
    position: fixed;
    top: 70px;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px;
    background:
      linear-gradient(180deg, rgba(11, 21, 48, 0.96) 0%, rgba(7, 9, 26, 0.98) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-top: 0.5px solid var(--border);
    border-bottom: 0.5px solid var(--border);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    z-index: 999;
  }
  .nav-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-menu > a,
  .nav-menu .nav-dropdown {
    width: 100%;
    padding: 14px 10px;
    border-radius: 10px;
    font-size: 16px;
    color: var(--text-primary);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  }
  .nav-menu > a:last-of-type { border-bottom: none; }
  .nav-menu > a:hover,
  .nav-menu > a.active { background: rgba(16, 185, 129, 0.08); }
  .nav-menu a.active::after,
  .nav-menu .nav-dropdown-trigger.active::after { display: none !important; }

  /* Expand product dropdown inline */
  .nav-menu .nav-dropdown {
    padding: 0;
    border: none;
  }
  .nav-menu .nav-dropdown-trigger {
    width: 100%;
    text-align: left;
    padding: 14px 10px;
    font-size: 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default;
  }
  .nav-menu .nav-dropdown-trigger i { display: none; }
  .nav-menu .nav-dropdown-panel {
    position: static;
    transform: none !important;
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 8px 0;
    padding: 4px 0 4px 12px;
    min-width: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-left: 1px solid rgba(16, 185, 129, 0.2);
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  .nav-menu .nav-dropdown-item {
    padding: 10px 12px;
    border-radius: 8px;
  }
  .nav-menu .nav-dropdown-title { font-size: 14px; }
  .nav-menu .nav-dropdown-desc { font-size: 12px; }

  /* Mobile CTA group inside drawer (clone behavior via JS not needed — we append) */
  .nav-menu .nav-menu-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 0 4px 0;
    margin-top: 8px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  }
  .nav-menu .nav-menu-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
  }
}

/* ===========================================================
   COMPREHENSIVE SMARTPHONE RESPONSIVE
   =========================================================== */

/* Global safety net — prevent horizontal scroll on any page */
html, body { overflow-x: hidden; max-width: 100vw; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* ===== Tablet & smaller (<=968px) ===== */
@media (max-width: 968px) {
  .container { padding: 0 18px; }
  section { padding: 56px 0; }

  /* Hero typography */
  .hero-title, h1.hero-title, .page-hero-title, .pbx-hero-title {
    font-size: clamp(28px, 6vw, 40px) !important;
    line-height: 1.15 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .hero-sub, .page-hero-sub, .pbx-hero-sub { font-size: 15px !important; line-height: 1.55 !important; }
  h2, h2.section-title { font-size: clamp(22px, 4.5vw, 32px) !important; line-height: 1.2 !important; word-break: break-word; }

  /* Hero CTAs stack & full-width */
  .hero-ctas, .page-hero-ctas, .pbx-hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
  .hero-ctas .btn, .page-hero-ctas .btn, .pbx-hero-ctas .btn { width: 100% !important; justify-content: center; padding: 12px 18px !important; font-size: 14px !important; }
  .btn { font-size: 14px !important; padding: 11px 18px !important; }

  /* Dropdown panel — fit small screens */
  .nav-dropdown-panel { min-width: min(380px, calc(100vw - 36px)); left: auto; right: 0; transform: translateY(-8px); }

  /* Common grids — force single column with min-width 0 to prevent intrinsic overflow */
  .hero-layout, .pbx-hero-grid, .ai-vs-grid, .ai-roles-grid,
  .pillar-nav-grid, .feature-groups, .ai-layer-grid,
  .compare-grid, .pricing-grid, .differ-grid, .case-card,
  .docs-layout, .industries-grid, .feature-list,
  .pain-grid, .ivr-capability-grid, .why-grid,
  .wallboard-shots, .monitoring-grid, .deploy-grid,
  .usecase-grid, .report-deep, .capability-4col, .arch-specs,
  .chat-inbox-body, .cust-360-body, .cai-grid,
  .tkt-detail-body, .mkt-row, .call-ai-row,
  .ai-insight-grid, .key-numbers,
  .insight-grid, .compare-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
  }
  .hero-layout > *, .pbx-hero-grid > *, .ai-vs-grid > *, .ai-roles-grid > *,
  .pillar-nav-grid > *, .feature-groups > *, .ai-layer-grid > *,
  .case-card > *, .chat-inbox-body > *, .cust-360-body > *,
  .tkt-detail-body > * { min-width: 0; }

  /* PBX hero stage on mobile — let mockup shrink, contain overflow */
  .pbx-hero-stage { height: auto !important; perspective: none; min-width: 0; }
  .pbx-hero-stage .hero-card-back,
  .pbx-hero-stage .hero-card-front {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    top: auto; bottom: auto; left: auto; right: auto;
    transform: none !important;
    animation: none !important;
    margin-bottom: 10px;
  }
  .pbx-hero-stage .hero-card-front { display: none; } /* simplify */
  .pbx-hero-stage .hero-ai-badge,
  .pbx-hero-stage .hero-stat-badge { display: none; } /* hide floating badges on mobile */
  .pbx-dash { font-size: 9px; flex-direction: column; }
  .pbx-dash-side { display: none; } /* sidebar hidden — main only */
  .pbx-dash-main { padding: 12px 14px; gap: 10px; min-width: 0; overflow: hidden; }
  .pbx-dash-panels { grid-template-columns: 1fr !important; gap: 8px; }
  .pbx-dash-panel-wide,
  .pbx-dash-panels > .pbx-dash-panel:nth-child(2),
  .pbx-dash-panels > .pbx-dash-panel:nth-child(4) { grid-column: 1 !important; }
  .pbx-dash-call-name { font-size: 10px; }
  .pbx-dash-call-dur { font-size: 9px; }
  .pbx-dash-kpi-val { font-size: 16px; }
  .pbx-hero-badges { grid-template-columns: 1fr !important; gap: 6px 0; }
  .pbx-badge { font-size: 10.5px; padding: 4px 9px; }

  /* 2-up grids → still 2 columns for compactness */
  .stats-grid, .tech-specs, .customer-logos, .usecase-grid-6,
  .mkt-results, .mkt-channels, .pbx-kpis, .pbx-dash-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }

  /* Bento card stacks */
  .bento, .bento-small { grid-template-columns: 1fr !important; }
  .bento-card-large { grid-column: 1 !important; grid-row: auto !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }

  /* Cards — reduce padding */
  .bento-card, .bento-card-large, .pricing-card, .case-card,
  .industry-card, .doc-card, .cta-card, .blog-card,
  .faq-item, .compare-table { padding: 24px 20px; }

  /* Tables — horizontal scroll wrap */
  .compare-table-wrap, .cust-list-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table { min-width: 560px; }

  /* Pricing featured card — kill transform on mobile */
  .pricing-card.featured { transform: none !important; }

  /* Preview / mockups — sidebars hide, optimize for narrow */
  .preview-sidebar, .preview-rightpanel { display: none; }
  .preview-body { grid-template-columns: 1fr !important; min-height: auto; }
  .hero-preview { padding: 8px; margin-top: 16px; }
  .preview-titlebar { padding: 9px 12px; }
  .preview-titlebar .url { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .preview-titlebar .dots span { width: 8px; height: 8px; }
  .preview-main { padding: 14px; gap: 10px; }
  .call-card { padding: 12px; gap: 12px; border-radius: 10px; }
  .call-card .avatar { width: 36px; height: 36px; font-size: 12px; }
  .call-card .name { font-size: 13px; }
  .call-card .meta { font-size: 11px; }
  .call-status { font-size: 10px; padding: 3px 8px; }
  .call-status .status-text,
  .call-status:not(.status-live)::after { display: inline; }
}

/* Mobile call-card — 2-row grid: avatar + name/meta on top, status pill below right */
@media (max-width: 560px) {
  .hero-preview { margin-top: 12px; padding: 6px; }
  .preview-titlebar { padding: 8px 10px; }
  .preview-titlebar .url { font-size: 10.5px; }
  .preview-main { padding: 10px; gap: 8px; }
  .call-card {
    padding: 12px;
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
  }
  .call-card .avatar { width: 36px; height: 36px; font-size: 12px; grid-row: 1 / 3; align-self: start; }
  .call-card .call-info { grid-column: 2; grid-row: 1; min-width: 0; }
  .call-card .call-info .name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .call-card .call-info .meta {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-tertiary);
  }
  .call-card .call-status {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    font-size: 10.5px;
    padding: 3px 8px;
    gap: 5px;
    white-space: nowrap;
    align-self: center;
  }
  .call-status::before { width: 5px; height: 5px; }

  /* Copilot card on mobile */
  .copilot-card { margin-left: 0; max-width: 100%; }

  /* PBX dashboard mockup side panel */
  .pbx-dash-side { width: 100px; }
}

/* ===== Smartphone (<=540px) ===== */
@media (max-width: 540px) {
  .container { padding: 0 16px; }
  section { padding: 48px 0; }

  .hero { padding: 56px 0 40px; }
  .hero-title, h1.hero-title, .page-hero-title, .pbx-hero-title { font-size: clamp(28px, 8vw, 38px) !important; }
  .hero-sub, .page-hero-sub, .pbx-hero-sub { font-size: 14.5px; }
  h2, h2.section-title { font-size: clamp(22px, 6vw, 28px) !important; }
  .section-sub { font-size: 14px; }

  /* All 2-up shrink → single column */
  .stats-grid, .tech-specs, .customer-logos, .usecase-grid-6,
  .mkt-results, .mkt-channels, .key-numbers,
  .pbx-kpis, .pbx-dash-kpis {
    grid-template-columns: 1fr !important;
  }

  /* Wallboard — compact for phones: stats 2x2, agents 4-per-row */
  .wboard-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .wboard-stat { padding: 14px 8px; }
  .wboard-num { font-size: 24px !important; }
  .wboard-lbl { font-size: 8.5px; margin-top: 4px; }
  .wboard-agents { grid-template-columns: repeat(4, 1fr) !important; gap: 5px; padding: 0 10px 12px; }
  .wb-agent { padding: 7px 3px; gap: 4px; border-radius: 6px; }
  .wb-agent-av { width: 24px; height: 24px; font-size: 8.5px; }
  .wb-agent em { font-size: 7.5px; }
  .wboard-agents-head { font-size: 8.5px; padding: 12px 12px 6px; }

  /* Footer — single column */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Cards — further tighten */
  .bento-card, .bento-card-large, .pricing-card, .case-card,
  .industry-card, .doc-card, .cta-card, .blog-card,
  .faq-item { padding: 20px 16px; }
  .cta-card { padding: 32px 20px; }

  /* Eyebrow / badges */
  .eyebrow { font-size: 11px; padding: 5px 10px; }

  /* FAQ */
  .faq-q { font-size: 15px; padding: 16px 0; }
  .faq-a { font-size: 14px; }

  /* Pricing tier tabs — wrap & scroll */
  .tier-tabs, .pricing-tier-tabs { flex-wrap: wrap; overflow-x: auto; }

  /* Mockup figures — soft cap */
  figure.mockup-frame, .mockup-frame { padding: 8px; border-radius: 12px; }
}

/* ===== Very small (<=380px) ===== */
@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .hero-title, h1.hero-title, .page-hero-title, .pbx-hero-title { font-size: 26px !important; }
  h2, h2.section-title { font-size: 22px !important; }
  .btn { padding: 10px 14px; font-size: 13px; }
}