/* ==========================================================================
   Salamtalk - Modern Enterprise Communication Platform Stylesheet
   ========================================================================== */

/* --- CSS Variables & Design Tokens (Salamtalk Brand Color Palette) --- */
:root {
  /* Primary Colors */
  --primary: #FF7A21;
  /* CTA Orange (Buttons, Highlights) */
  --primary-hover: #E86610;
  /* CTA Orange Hover */
  --primary-orange: #F5A623;
  /* Primary Orange (Brand Accent) */
  --primary-blue: #159FE3;
  /* Primary Blue (Icons, Graphics, Communication) */
  --primary-light: #FFF4E6;
  /* Warm Background (Accents, Alternate Sections) */
  --primary-border: #FFD8A8;
  /* Warm border */
  --primary-glow: rgba(255, 122, 33, 0.35);

  /* Typography / Text Colors */
  --dark: #111111;
  /* Primary / Text (Logo, Headings, Text) */
  --dark-heading: #111111;
  /* Headings */
  --dark-sub: #334155;
  /* Body text */
  --dark-accent: #1F2937;
  /* Dark Accent (Footer, Strong Text) */
  --text-muted: #667085;
  /* Secondary Text (Labels, Descriptions) */
  --text-light: #98A2B3;
  /* Subtle text */

  /* Background Colors */
  --bg-page: #FCFDFE;
  /* Main Background (Page Background) */
  --bg-surface: #FCFDFE;
  /* Surface */
  --bg-card: #FFFFFF;
  /* White (Cards, Containers) */
  --bg-light-blue: #EBF7FE;
  /* Light Blue (Sections, Cards, Highlights) */
  --bg-warm: #FFF4E6;
  /* Warm Background (Accents, Alternate Sections) */
  --bg-subtle: #F8FAFC;
  /* Subtle card background */
  --bg-alt: #FFF4E6;
  /* Alternate section background */

  /* Neutral Colors: Borders & Dividers */
  --border-light: #D0D5DD;
  /* Borders / Dividers (Lines, Inputs) */
  --border-subtle: #EAECF0;
  /* Subtle borders */

  /* Success / Status Colors */
  --green: #22C55E;
  /* Success (Online, Active) */
  --green-light: #F0FDF4;
  /* Soft success tint */
  --blue: #159FE3;
  /* Primary Blue */
  --blue-light: #EBF7FE;
  /* Light Blue */
  --error: #EF4444;
  /* Error (Alerts, Errors) */
  --amber: #F5A623;
  /* Primary Orange / Brand Accent */
  --amber-light: #FFF4E6;
  /* Warm Background */

  /* Brand Gradients */
  --gradient-brand-bg: linear-gradient(135deg, #EAF7FE 0%, #FFF4E6 100%);
  --gradient-cta: linear-gradient(135deg, #159FE3 0%, #0284C7 100%);
  --gradient-cta-hover: linear-gradient(135deg, #0EA5E9 0%, #0369A1 100%);
  --gradient-blue: linear-gradient(135deg, #159FE3 0%, #0284C7 100%);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(17, 17, 17, 0.04);
  --shadow-md: 0 8px 24px -4px rgba(17, 17, 17, 0.08);
  --shadow-lg: 0 20px 40px -8px rgba(17, 17, 17, 0.1);
  --shadow-card: 0 10px 30px -5px rgba(17, 17, 17, 0.05), 0 0 1px rgba(208, 213, 221, 0.8);
  --shadow-button: 0 10px 20px -3px rgba(21, 159, 227, 0.4);

  /* Typography */
  --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-handwriting: 'Caveat', cursive;

  /* Spacing & Layout */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --container-max: 1240px;
  --transition-normal: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Base Reset & Global Styles --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-page);
  color: var(--dark-sub);
  line-height: 1.6;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-normal);
}

button,
input,
textarea,
select {
  font-family: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  transition: var(--transition-normal);
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Text & Utility Classes --- */
.text-orange {
  color: var(--primary);
}

.text-highlight,
.gradient-text {
  background: linear-gradient(90deg, #FE743E 0%, #FA8C38 18%, #E59140 34%, #7A9E88 56%, #33828A 76%, #187E98 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.text-blue {
  color: var(--blue);
}

.text-green {
  color: var(--green);
}

.text-center {
  text-align: center !important;
}

.section-header {
  margin-bottom: 32px;
}

.section-header.text-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.section-header.text-center .badge {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  max-width: max-content;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-full);
}

.badge-pill {
  border-radius: var(--radius-full);
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  max-width: max-content;
}

.badge-primary-tint {
  background-color: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary-border);
}

.badge-hero {
  background-color: #FFF4E6;
  color: #FF7A21;
  border: 1px solid #FFD8A8;
  box-shadow: 0 2px 10px rgba(255, 122, 33, 0.08);
}

.badge-dot {
  width: 7px;
  height: 7px;
  background-color: var(--primary);
  border-radius: 50%;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.3);
    opacity: 0.6;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  transition: var(--transition-normal);
  white-space: nowrap;
}

.btn-pill {
  border-radius: var(--radius-full);
}

.btn-lg {
  padding: 14px 28px;
  font-size: 1.02rem;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, #159FE3 0%, #0284C7 100%);
  color: #FFFFFF;
  box-shadow: var(--shadow-button);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0EA5E9 0%, #0369A1 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -2px rgba(21, 159, 227, 0.48);
}

.btn-primary:active {
  transform: translateY(0);
}

.shadow-glow {
  box-shadow: 0 10px 25px -4px rgba(21, 159, 227, 0.42);
}

.btn-secondary {
  background: #FFFFFF;
  color: var(--dark-heading);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background: var(--bg-subtle);
  border-color: #CBD5E1;
  transform: translateY(-2px);
}

.btn-outline {
  background: #FFFFFF;
  color: var(--dark-heading);
  border: 1px solid var(--border-light);
}

.btn-outline:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background-color: var(--bg-light-blue);
  transform: translateY(-2px);
}

.btn-outline-white {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #FFFFFF;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.btn-ghost {
  color: var(--dark-heading);
  font-weight: 600;
}

.btn-ghost:hover {
  color: var(--primary-blue);
}

.btn-arrow {
  transition: transform 0.2s ease;
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

.play-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dark-heading);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

/* Common Section Titles */
.section-title {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--dark-heading);
  line-height: 1.2;
  margin: 12px 0 14px;
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: 1.08rem;
  color: var(--text-muted);
  max-width: 580px;
  line-height: 1.6;
}

.section-header-flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #FFFFFF;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  transition: var(--transition-normal);
}

.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  position: relative;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.brand-logo-img {
  height: 36px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.brand-logo:hover .brand-logo-img {
  transform: scale(1.03);
}

.footer-logo-img {
  height: 32px;
  width: auto;
  max-width: 170px;
}

.nav-menu,
.main-nav {
  display: flex;
  align-items: center;
}

.nav-links,
.nav-list {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--dark-sub);
  position: relative;
  padding: 6px 4px;
  display: inline-flex;
  align-items: center;
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link.active {
  color: var(--primary);
  font-weight: 650;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0%;
  height: 2.5px;
  background: linear-gradient(90deg, #FE743E 0%, #FA8C38 100%);
  border-radius: 99px;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Solutions & Resources Dropdown Trigger & Mega Menu */
.nav-item-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--dark-sub);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-dropdown-trigger::after {
  display: none !important;
}

.nav-dropdown-trigger:hover {
  color: #0284c7;
  background-color: #f0f7ff;
}

.nav-dropdown-trigger.is-active,
.nav-dropdown-trigger.active {
  background-color: #eaf5fe;
  color: #0284c7;
  font-weight: 600;
}

.dropdown-chevron {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: inherit;
}

.nav-dropdown-trigger.is-active .dropdown-chevron,
.nav-dropdown-trigger.active .dropdown-chevron {
  transform: rotate(180deg);
}

.nav-link-chevron {
  gap: 4px;
}

.dropdown-chevron-static {
  display: inline-block;
  color: inherit;
  opacity: 0.65;
}

/* Mega Menu Popup Container */
.mega-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -40px;
  width: 520px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05);
  padding: 18px 20px;
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
  pointer-events: none;
}

/* Invisible bridge so mouse hover never drops across the gap */
.mega-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

.mega-dropdown-menu.is-open,
.mega-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Force minimized/closed state even if hovering */
.mega-dropdown-menu.is-closed {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px) !important;
  pointer-events: none !important;
}

/* Mega Grid: 2 Compact Columns */
.mega-dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}

.mega-column {
  display: flex;
  flex-direction: column;
}

.mega-column-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.mega-menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Mega Menu Item */
.mega-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  margin: 0;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.mega-menu-item:hover {
  background-color: #f8fafc;
  transform: translateX(2px);
}

.mega-item-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  background: #e0f2fe;
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.mega-item-icon svg {
  width: 17px;
  height: 17px;
}

.mega-menu-item:hover .mega-item-icon {
  background: #0284c7;
  color: #ffffff;
  transform: scale(1.05);
}

.mega-item-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mega-item-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 2px;
  transition: color 0.2s ease;
}

.mega-menu-item:hover .mega-item-title {
  color: #0284c7;
}

.mega-item-desc {
  font-size: 0.74rem;
  color: #64748b;
  line-height: 1.3;
}

.mega-item-title {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  transition: color 0.2s ease;
  line-height: 1.35;
}

.mega-menu-item:hover .mega-item-title {
  color: #0284c7;
}

.mega-item-desc {
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.45;
}

/* Resources Mega Menu Specific Styling */
.resources-mega-menu {
  width: 640px;
  left: -170px;
}

.icon-blue-soft {
  background: #E0F2FE;
  color: #0082CD;
}

/* Mega Dropdown Footer (Need help getting started?) */
.mega-dropdown-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mega-footer-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-footer-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0F172A;
}

.mega-footer-sub {
  font-size: 0.84rem;
  color: #64748B;
}

.mega-footer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-outline-cyan {
  background: transparent;
  border: 1.5px solid #0082CD;
  color: #0082CD;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.88rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-outline-cyan:hover {
  background: #F0F9FF;
  border-color: #006FB0;
  color: #006FB0;
}

.btn-cyan {
  background: #0082CD;
  color: #FFFFFF;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 0.88rem;
  border: 1.5px solid #0082CD;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-cyan:hover {
  background: #006FB0;
  border-color: #006FB0;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 130, 205, 0.25);
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.88rem;
}

@media (min-width: 993px) {

  .nav-item-dropdown:hover .mega-dropdown-menu:not(.is-closed),
  .mega-dropdown-menu.is-open:not(.is-closed),
  .mega-dropdown-menu.show:not(.is-closed) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-item-dropdown:hover .dropdown-chevron,
  .nav-dropdown-trigger.is-active .dropdown-chevron,
  .nav-dropdown-trigger.active .dropdown-chevron {
    transform: rotate(180deg);
  }

  .nav-item-dropdown:hover .nav-dropdown-trigger {
    background-color: #eaf5fe;
    color: #0284c7;
  }
}

@media (max-width: 1200px) {
  .resources-mega-menu {
    left: -200px;
  }
}

@media (max-width: 992px) {
  .resources-mega-menu {
    left: 0;
    width: 100%;
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-mobile-actions {
  display: none;
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.mobile-menu-btn .bar {
  width: 24px;
  height: 2.5px;
  background-color: var(--dark-heading);
  border-radius: 2px;
  transition: var(--transition-normal);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
  padding: 24px 0 36px;
  position: relative;
  background: #F0F8FE;
  overflow: hidden;
}

.hero-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  max-width: 1220px;
  margin: 0 auto;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 500px;
  flex: 0 0 500px;
  max-width: 500px;
}

.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(2, 132, 199, 0.25);
  border-radius: 9999px;
  padding: 6px 16px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0284C7;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-badge-dash {
  width: 14px;
  height: 2px;
  background: #0284C7;
  border-radius: 2px;
}

.hero-title {
  font-size: clamp(2.95rem, 4vw, 3.75rem);
  font-weight: 850;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #0F172A;
  margin: 0 0 16px;
}

.hero-accent-divider {
  display: flex;
  align-items: center;
  width: 260px;
  height: 5px;
  background: #E2E8F0;
  border-radius: 999px;
  margin: 16px 0 22px;
  overflow: hidden;
}

.accent-glow-bar {
  width: 115px;
  height: 100%;
  background: linear-gradient(90deg, #FE8C3D 0%, #E28D47 30%, #5E9183 68%, #147B96 100%);
  border-radius: 999px;
}

.hero-subtitle {
  font-size: 1.06rem;
  color: #475569;
  max-width: 410px;
  line-height: 1.58;
  margin: 0 0 26px;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.btn-hero-trial {
  background: linear-gradient(135deg, #0284C7 0%, #0099FF 100%);
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.28);
  color: #FFFFFF;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
}

.btn-hero-trial:hover {
  background: linear-gradient(135deg, #0369A1 0%, #0284C7 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 132, 199, 0.38);
}

.play-circle-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0F172A;
  color: #FFFFFF;
  margin-right: 8px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn-demo:hover .play-circle-dark {
  background: #0284C7;
  transform: scale(1.08);
}

/* Trust Badges Row */
.hero-trust-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.trust-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 500;
  color: #475569;
}

.trust-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #E0F2FE;
  color: #0284C7;
}

.trust-icon-chart,
.trust-icon-team {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0284C7;
}

.trust-bar-sep {
  color: #CBD5E1;
  font-size: 0.85rem;
  user-select: none;
}

.nav-btn-arrow {
  margin-left: 4px;
  transition: transform 0.2s ease;
}

#navGetStarted:hover .nav-btn-arrow {
  transform: translateX(3px);
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 32px;
  margin-top: 52px;
  padding: 22px 36px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(208, 213, 221, 0.65);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.04);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 5;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.hero-stats.is-reloading {
  animation: heroStatsEntrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes heroStatsEntrance {
  0% {
    opacity: 0.6;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--dark-heading);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 90px;
  text-align: center;
}

.stat-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}

.stat-divider {
  width: 1px;
  height: 38px;
  background-color: var(--border-light);
}

/* Hero Right Visual Scene - 3D Platform Showcase */
.hero-visual-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.hero-telecom-showcase {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 1 1 720px;
  max-width: 750px;
  margin-left: -30px;
}

.hero-platform-container {
  position: relative;
  width: 100%;
  max-width: 750px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-platform-container::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 10%;
  width: 80%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.16) 0%, rgba(56, 189, 248, 0.06) 55%, transparent 75%);
  filter: blur(35px);
  pointer-events: none;
  z-index: 0;
}

.hero-platform-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  position: relative;
  z-index: 1;
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 54% 50%, black 58%, rgba(0, 0, 0, 0.5) 76%, rgba(0, 0, 0, 0.1) 88%, transparent 96%);
  mask-image: radial-gradient(ellipse 78% 82% at 54% 50%, black 58%, rgba(0, 0, 0, 0.5) 76%, rgba(0, 0, 0, 0.1) 88%, transparent 96%);
}

/* ==========================================================================
   Hero Platform Network Light Stream SVG (No drawn lines - pure light pulse animation)
   ========================================================================== */
.hero-network-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 54% 50%, black 58%, rgba(0, 0, 0, 0.5) 76%, rgba(0, 0, 0, 0.1) 88%, transparent 96%);
  mask-image: radial-gradient(ellipse 78% 82% at 54% 50%, black 58%, rgba(0, 0, 0, 0.5) 76%, rgba(0, 0, 0, 0.1) 88%, transparent 96%);
}

/* ==========================================================================
   Hotspots mapped directly over the Connected Network Nodes
   ========================================================================== */
.platform-hotspot {
  position: absolute;
  border-radius: 18px;
  cursor: pointer;
  background: transparent;
  z-index: 10;
  text-decoration: none;
  border: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.platform-hotspot:hover {
  outline: 2px solid rgba(2, 132, 199, 0.45);
  background: rgba(2, 132, 199, 0.04);
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.16);
  backdrop-filter: brightness(1.02);
}

.hotspot-customers {
  top: 7%;
  left: 6%;
  width: 26%;
  height: 32%;
  border-radius: 20px;
}

.hotspot-remote-teams {
  top: 7%;
  right: 5%;
  width: 26%;
  height: 32%;
  border-radius: 20px;
}

.hotspot-salamtalk-team {
  top: 33%;
  left: 32%;
  width: 36%;
  height: 42%;
  border-radius: 22px;
}

.hotspot-branch-offices {
  bottom: 2%;
  left: 3%;
  width: 36%;
  height: 31%;
  border-radius: 20px;
}

.hotspot-global-locations {
  bottom: 2%;
  right: 3%;
  width: 36%;
  height: 31%;
  border-radius: 20px;
}

.hero-woman-scene,
.hero-mascot-scene {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-stage-composite {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 880px;
  max-width: none;
  aspect-ratio: 1024 / 561;
  pointer-events: auto;
}

.hero-stage-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
  mask-image: radial-gradient(ellipse 75% 70% at 65% 50%, black 45%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 65% 50%, black 45%, transparent 82%);
}

/* Podium Hologram Glow Ring when speaking */
.stage-podium-glow {
  position: absolute;
  left: 64.3%;
  bottom: 1%;
  width: 300px;
  height: 85px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 122, 33, 0.55) 0%, rgba(21, 159, 227, 0.35) 45%, transparent 72%);
  opacity: 0;
  transform: translateX(-50%) scale(0.85);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  z-index: 2;
}

.hero-stage-composite.speaking .stage-podium-glow,
.hero-character-wrapper.speaking~.stage-podium-glow {
  opacity: 1;
  transform: translateX(-50%) scale(1.08);
  animation: pulsePodiumSpeaking 1.6s ease-in-out infinite alternate;
}

@keyframes pulsePodiumSpeaking {
  0% {
    transform: translateX(-50%) scale(0.96);
    opacity: 0.65;
  }

  50% {
    transform: translateX(-50%) scale(1.14);
    opacity: 0.95;
  }

  100% {
    transform: translateX(-50%) scale(0.96);
    opacity: 0.65;
  }
}

/* AI Receptionist Character Wrapper - Pixel-perfect centered on circular stage podium */
.hero-character-wrapper {
  position: absolute;
  left: 49.1%;
  bottom: 2%;
  height: 93.8%;
  width: auto;
  aspect-ratio: 682 / 1024;
  z-index: 4;
  transform-origin: 50% 100%;
  /* Solidly anchored feet on the podium floor */
  cursor: pointer;
  transition: filter 0.3s ease;
}

.hero-character-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 12px 28px rgba(17, 17, 17, 0.18));
  transition: filter 0.3s ease;
}

.hero-character-wrapper:hover .hero-character-img {
  filter: drop-shadow(0 16px 36px rgba(255, 122, 33, 0.32)) brightness(1.02);
}

/* When speaking: graceful, calm organic chest expansion only - completely grounded with NO shaking, NO tilting, and NO jumping */
.hero-character-wrapper.speaking {
  animation: womanSpeakingPresence 3s ease-in-out infinite alternate;
}

@keyframes womanSpeakingPresence {
  0% {
    transform: scale(1, 1);
  }

  100% {
    transform: scale(1.004, 1.01);
  }
}

.hero-character-wrapper.speaking .hero-character-img {
  filter: drop-shadow(0 14px 34px rgba(255, 122, 33, 0.38)) drop-shadow(0 0 14px rgba(255, 122, 33, 0.22));
}

/* Hand Holographic Presentation Action - Active AI demo from outstretched palm */
.palm-hologram-action {
  position: absolute;
  top: 20%;
  left: 82.5%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 6;
}

.hero-character-wrapper.speaking .palm-hologram-action {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.palm-holo-orb {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.palm-holo-core {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 20%, #159FE3 60%, #FF7A21 100%);
  box-shadow: 0 0 16px #159FE3, 0 0 28px rgba(255, 122, 33, 0.85);
  animation: pulseHoloCore 1.6s ease-in-out infinite alternate;
}

@keyframes pulseHoloCore {
  0% {
    transform: scale(0.85);
    box-shadow: 0 0 12px #159FE3, 0 0 20px rgba(255, 122, 33, 0.6);
  }

  100% {
    transform: scale(1.15);
    box-shadow: 0 0 22px #159FE3, 0 0 35px rgba(255, 122, 33, 0.95);
  }
}

.palm-holo-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid transparent;
}

.palm-holo-ring.ring-a {
  width: 44px;
  height: 44px;
  border-top-color: #159FE3;
  border-bottom-color: #FF7A21;
  animation: spinRingA 2.5s linear infinite;
}

.palm-holo-ring.ring-b {
  width: 58px;
  height: 58px;
  border-left-color: rgba(21, 159, 227, 0.8);
  border-right-color: rgba(255, 122, 33, 0.8);
  animation: spinRingB 3.8s linear infinite reverse;
}

@keyframes spinRingA {
  0% {
    transform: rotate(0deg) rotateX(60deg);
  }

  100% {
    transform: rotate(360deg) rotateX(60deg);
  }
}

@keyframes spinRingB {
  0% {
    transform: rotate(0deg) rotateY(60deg);
  }

  100% {
    transform: rotate(360deg) rotateY(60deg);
  }
}

.palm-holo-sparkle {
  position: absolute;
  color: #FF7A21;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
}

.palm-holo-sparkle.s-1 {
  top: -4px;
  right: 6px;
  animation: sparkleFloatA 2s ease-in-out infinite;
}

.palm-holo-sparkle.s-2 {
  bottom: -2px;
  left: 4px;
  animation: sparkleFloatB 2.4s ease-in-out infinite 0.7s;
  color: #159FE3;
}

@keyframes sparkleFloatA {

  0%,
  100% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }

  50% {
    transform: translateY(-8px) scale(1.1);
    opacity: 1;
    text-shadow: 0 0 8px #FF7A21;
  }
}

@keyframes sparkleFloatB {

  0%,
  100% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }

  50% {
    transform: translateY(-7px) scale(1.1);
    opacity: 1;
    text-shadow: 0 0 8px #159FE3;
  }
}

.palm-holo-label {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.88);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid rgba(56, 189, 248, 0.5);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}


/* Character Speaking Holographic Aura */
.character-speaking-aura {
  position: absolute;
  inset: -15px;
  border-radius: 40px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 92, 40, 0.22) 0%, rgba(56, 189, 248, 0.12) 50%, transparent 75%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.hero-character-wrapper.speaking .character-speaking-aura {
  opacity: 1;
  animation: auraSpeakingPulse 2s ease-in-out infinite alternate;
}

@keyframes auraSpeakingPulse {
  0% {
    transform: scale(0.96);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.06);
    opacity: 0.95;
  }
}

/* Mascot Floating Speak Trigger */
.mascot-speak-badge {
  position: absolute;
  top: 70px;
  left: 36%;
  transform: translateX(-50%);
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(17, 17, 17, 0.88);
  backdrop-filter: blur(12px);
  color: #FFFFFF;
  padding: 8px 16px 8px 12px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 10px 25px -4px rgba(17, 17, 17, 0.28), 0 0 0 1.5px rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: floatMascotPrompt 4s ease-in-out infinite alternate;
}

.mascot-speak-badge:hover {
  transform: translateX(-50%) translateY(-2px) scale(1.05);
  background: rgba(17, 17, 17, 0.98);
  box-shadow: 0 12px 30px rgba(255, 122, 33, 0.35), 0 0 0 2px var(--primary);
}

.mascot-speak-badge.speaking {
  background: linear-gradient(135deg, #FF7A21 0%, #F5A623 100%);
  box-shadow: 0 10px 30px rgba(255, 122, 33, 0.5);
}

.mascot-speak-badge .badge-speaker-icon {
  font-size: 0.96rem;
  line-height: 1;
}

.mascot-speak-badge.speaking .badge-speaker-icon {
  animation: pulseSpeaking 0.6s infinite alternate;
}

.mascot-speak-badge .pulse-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid var(--primary);
  border-radius: var(--radius-full);
  animation: promptRingPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes promptRingPing {
  0% {
    transform: scale(0.96);
    opacity: 0.8;
  }

  75%,
  100% {
    transform: scale(1.22);
    opacity: 0;
  }
}

@keyframes floatMascotPrompt {
  0% {
    transform: translateX(-50%) translateY(0);
  }

  100% {
    transform: translateX(-50%) translateY(-7px);
  }
}

/* Mascot Live Speech Subtitle Bubble */
.mascot-speech-bubble {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 90%;
  max-width: 480px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255, 92, 40, 0.4);
  border-radius: var(--radius-lg);
  padding: 11px 18px;
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.18), 0 0 24px rgba(255, 92, 40, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}

.mascot-speech-bubble.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.speech-bubble-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--dark-heading);
  line-height: 1.45;
}

.bubble-sparkle {
  color: var(--primary);
  font-size: 1.05rem;
}


.woman-hero-img {
  width: 100%;
  max-width: 560px;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 20px 35px rgba(15, 23, 42, 0.12));
  animation: gentleFloat 6s ease-in-out infinite;
  border-radius: 24px;
  transition: transform 0.3s ease;
}

.robot-hero-img {
  width: 82%;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 20px 30px rgba(15, 23, 42, 0.12));
  animation: gentleFloat 6s ease-in-out infinite;
  border-radius: 24px;
}

@keyframes gentleFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Floating Badges Around Robot */
.floating-badge {
  position: absolute;
  z-index: 5;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-full);
  padding: 8px 16px 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.12);
  font-size: 0.86rem;
  color: var(--dark-heading);
  animation: floatBadge 5s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-badge:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 30px -4px rgba(15, 23, 42, 0.18);
}

@keyframes floatBadge {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-12px);
  }
}

.badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-orange {
  background-color: #FFF4E6;
  color: #FF7A21;
}

.icon-blue {
  background-color: #EAF7FE;
  color: #159FE3;
}

.icon-orange-soft {
  background-color: #FFF4E6;
  color: #F5A623;
}

.icon-amber {
  background-color: #FFF4E6;
  color: #F5A623;
}

/* Badge Positions */
.badge-cloud-phone {
  top: 10px;
  left: -15px;
}

.badge-video-meetings {
  top: 115px;
  left: -50px;
}

.badge-team-messaging {
  top: 230px;
  left: -25px;
}

.badge-smart-integrations {
  top: 340px;
  left: -35px;
}

/* Hello AI Receptionist Card (Speech Card) */
.receptionist-speech-card {
  position: absolute;
  top: 25px;
  right: -20px;
  z-index: 6;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(208, 213, 221, 0.8);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: 0 16px 36px -6px rgba(17, 17, 17, 0.14);
  max-width: 155px;
  text-align: center;
  animation: floatBadge 5.5s ease-in-out infinite alternate;
  animation-delay: 1.8s;
}

.speech-greet {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark-heading);
}

.speech-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
}

.speech-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Soundwave Equalizer */
.soundwave-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 28px;
  margin: 12px 0 10px;
}

.wave-bar {
  display: inline-block;
  width: 3px;
  background: linear-gradient(180deg, #FF7A21 0%, #F5A623 100%);
  border-radius: 3px;
  height: 10px;
  animation: soundWave 1.4s ease-in-out infinite alternate;
}

.wave-bar:nth-child(1) {
  height: 8px;
  animation-delay: 0.1s;
}

.wave-bar:nth-child(2) {
  height: 16px;
  animation-delay: 0.3s;
}

.wave-bar:nth-child(3) {
  height: 22px;
  animation-delay: 0.5s;
}

.wave-bar:nth-child(4) {
  height: 14px;
  animation-delay: 0.2s;
}

.wave-bar:nth-child(5) {
  height: 26px;
  animation-delay: 0.6s;
}

.wave-bar:nth-child(6) {
  height: 18px;
  animation-delay: 0.4s;
}

.wave-bar:nth-child(7) {
  height: 22px;
  animation-delay: 0.2s;
}

.wave-bar:nth-child(8) {
  height: 12px;
  animation-delay: 0.5s;
}

.wave-bar:nth-child(9) {
  height: 6px;
  animation-delay: 0.1s;
}

@keyframes soundWave {
  0% {
    transform: scaleY(0.4);
  }

  100% {
    transform: scaleY(1.2);
  }
}

.receptionist-tags {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Hero Speech Card Listen Button */
.speech-listen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #FF7A21 0%, #F5A623 100%);
  color: #FFFFFF;
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 122, 33, 0.3);
  transition: all 0.2s ease;
  width: 100%;
}

.speech-listen-btn:hover {
  background: linear-gradient(135deg, #E86610 0%, #E09415 100%);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 16px rgba(255, 122, 33, 0.45);
}

.speech-listen-btn.speaking {
  background: #1F2937;
  box-shadow: 0 4px 12px rgba(31, 41, 55, 0.3);
}

.speech-listen-btn.speaking .listen-pulse-icon {
  animation: pulseSpeaking 0.8s infinite alternate;
}

@keyframes pulseSpeaking {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.3);
    opacity: 1;
  }
}

.soundwave-container.speaking .wave-bar {
  animation: soundWaveActive 0.4s ease-in-out infinite alternate !important;
}

@keyframes soundWaveActive {
  0% {
    transform: scaleY(0.2);
  }

  100% {
    transform: scaleY(1.9);
  }
}

/* ==========================================================================
   PARTNERS / TRUSTED BY LOGO BAR (INFINITE MOVING MARQUEE)
   ========================================================================== */
.partners-section {
  padding: 32px 0 38px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background-color: #FFFFFF;
  overflow: hidden;
}

.partners-title {
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #94A3B8;
  margin-bottom: 24px;
}

.partners-marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.partners-marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 24s linear infinite;
  will-change: transform;
}

.partners-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.partners-logos {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 0 30px;
  flex-shrink: 0;
}

.partner-item {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.78;
  transition: var(--transition-normal);
  filter: grayscale(15%);
  cursor: pointer;
  flex-shrink: 0;
}

.partner-item:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(-2px) scale(1.05);
}

.partner-brand-text {
  font-size: 1.15rem;
  font-weight: 700;
  color: #5E5E5E;
}

.zoom-logo-text {
  font-size: 1.5rem;
  font-weight: 800;
  color: #2D8CFF;
  letter-spacing: -0.05em;
}

.cisco-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}

.c-bar {
  width: 2.5px;
  height: 8px;
  background-color: #049fd9;
  border-radius: 1px;
}

.c-bar.tall {
  height: 12px;
}

.c-bar.tallest {
  height: 16px;
}

.cisco-logo-text {
  font-size: 0.95rem;
  font-weight: 800;
  color: #049fd9;
  letter-spacing: 0.08em;
}

.yealink-logo-text {
  font-size: 1.25rem;
  font-weight: 800;
  color: #2E7D32;
  letter-spacing: -0.02em;
}

.rc-icon {
  display: flex;
  gap: 2px;
}

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

.rc-dot.blue {
  background-color: #0073D1;
}

.rc-dot.orange {
  background-color: #F37021;
}

.rc-logo-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0073D1;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   SHOWCASE SECTION ("BUILT FOR MODERN BUSINESSES")
   ========================================================================== */
.showcase-section {
  position: relative;
  background-color: #FFFFFF;
  margin: 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

@media (min-width: 992px) {
  .showcase-section {
    height: 420vh;
    padding: 0;
  }

  .showcase-sticky-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 68px;
    height: calc(100vh - 68px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    padding: 10px 0 14px;
    width: 100%;
    overflow: visible;
    z-index: 10;
  }
}

@media (max-width: 991px) {
  .showcase-section {
    padding: 48px 0 56px;
    height: auto;
  }

  .showcase-sticky-wrapper {
    position: relative;
    top: auto;
    height: auto;
    display: block;
    width: 100%;
  }
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  align-items: center;
  gap: 36px;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

/* Mockup Card Wrapper */
.mockup-card-wrapper {
  position: relative;
  width: 100%;
}

.mockup-dashboard-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08);
  display: flex;
  overflow: hidden;
  position: relative;
  min-height: auto;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Micro Sidebar */
.mockup-sidebar {
  width: 54px;
  background-color: #F8FAFC;
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 14px;
  flex-shrink: 0;
}

.sidebar-icon {
  width: 35px;
  height: 35px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.25s ease;
}

.sidebar-icon:hover {
  background-color: #EDF2F7;
  color: var(--dark-heading);
  transform: scale(1.05);
}

.sidebar-icon.active {
  background-color: var(--primary-light);
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(255, 92, 40, 0.25);
}

/* Mockup Views Container */
.mockup-views-container {
  flex: 1;
  position: relative;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  min-height: auto;
  overflow: hidden;
  box-sizing: border-box;
}

.mockup-view-panel {
  display: none;
  flex-direction: column;
  width: 100%;
}

.mockup-view-panel.active {
  display: flex;
  animation: viewFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes viewFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   VIEW 1: CLOUD PHONE (ONGOING CALL & DOWN SECTION CONTINUOUS LIVE AI SUMMARY)
   ========================================================================== */

/* Top Section: Ongoing Call Card */
.ongoing-call-card {
  background: #FFFFFF;
  border: 1px solid rgba(255, 122, 33, 0.22);
  border-radius: var(--radius-lg);
  padding: 10px 14px 9px;
  box-shadow: 0 4px 14px rgba(255, 122, 33, 0.06);
  margin-bottom: 9px;
}

.oc-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.oc-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #FFF4E6;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.oc-pulse-ring {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 rgba(255, 122, 33, 0.7);
  animation: pulseGreen 1.5s infinite;
}

.oc-timer {
  font-size: 0.72rem;
  font-weight: 700;
  color: #22C55E;
  background: #F0FDF4;
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
}

.oc-middle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.oc-avatar-wrap {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.oc-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF7A21, #F5A623);
  color: #FFFFFF;
  font-size: 0.76rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 122, 33, 0.35);
}

.oc-voice-waves {
  position: absolute;
  bottom: -2px;
  right: -4px;
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  background: #FFFFFF;
  padding: 2px 4px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.oc-voice-waves span {
  width: 2px;
  height: 6px;
  background: #22C55E;
  border-radius: 1px;
  animation: soundWaveActive 0.5s ease-in-out infinite alternate;
}

.oc-voice-waves span:nth-child(1) {
  animation-delay: 0.1s;
  height: 5px;
}

.oc-voice-waves span:nth-child(2) {
  animation-delay: 0.3s;
  height: 10px;
}

.oc-voice-waves span:nth-child(3) {
  animation-delay: 0.2s;
  height: 8px;
}

.oc-voice-waves span:nth-child(4) {
  animation-delay: 0.4s;
  height: 6px;
}

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

.oc-caller-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--dark-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
}

.oc-caller-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-hd-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #22C55E;
  background: #F0FDF4;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.oc-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid #F1F5F9;
}

.oc-ctrl-btn {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-full);
  padding: 4px 9px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--dark-sub);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oc-ctrl-btn:hover {
  background: #EDF2F7;
  color: var(--dark-heading);
  transform: translateY(-1px);
}

.oc-ctrl-btn.active {
  background: #EAF7FE;
  border-color: #BAE6FD;
  color: #159FE3;
}

.oc-rec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #EF4444;
}

.oc-ctrl-btn.oc-hangup-btn {
  background: #EF4444;
  color: #FFFFFF;
  border-color: #EF4444;
  padding: 4px 10px;
  font-weight: 700;
}

.oc-ctrl-btn.oc-hangup-btn:hover {
  background: #DC2626;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

/* ==========================================================================
   Down Section: Real-Time Live AI Call Summary & Transcription
   ========================================================================== */
.ai-call-summary-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 9px;
  padding: 6px 10px 5px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.summary-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #F1F5F9;
}

.sth-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sth-left h4 {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--dark-heading);
  margin: 0;
}

.ai-sparkle {
  font-size: 0.68rem;
}

.live-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--green);
  background: #F0FDF4;
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: 0.5px 5px;
  border-radius: var(--radius-full);
  transition: all 0.3s ease;
}

.live-ai-badge.streaming {
  color: var(--primary);
  background: var(--bg-warm);
  border-color: rgba(255, 122, 33, 0.35);
}

.live-ai-badge.streaming .live-dot-pulse {
  background: var(--primary);
  box-shadow: 0 0 6px rgba(255, 122, 33, 0.8);
}

.live-dot-pulse {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 5px var(--green);
  animation: pulseGreen 1.5s infinite;
}

/* Live Dialogue Transcript Box */
.live-transcript-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 4px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.live-transcript-box.speaker-active {
  border-color: #BFDBFE;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.live-transcript-box.agent-active {
  border-color: #FED7AA;
  box-shadow: 0 0 0 1px rgba(255, 92, 40, 0.2);
}

.trans-row {
  display: flex;
  gap: 4px;
  font-size: 0.58rem;
  line-height: 1.25;
}

.trans-name {
  font-weight: 700;
  color: var(--dark-heading);
  flex-shrink: 0;
}

.trans-speech {
  color: var(--dark-sub);
  font-style: italic;
  transition: opacity 0.25s ease;
}

.trans-agent .trans-name {
  color: var(--primary);
}

.tk-text {
  transition: opacity 0.25s ease;
}

/* Real-Time Key Takeaways */
.ai-live-takeaways {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.takeaways-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--dark-heading);
  margin-bottom: 1px;
}

.takeaways-time {
  font-size: 0.50rem;
  color: #94A3B8;
  font-weight: 500;
  transition: color 0.3s ease;
}

.takeaways-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.takeaways-list li {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 0.57rem;
  line-height: 1.25;
  color: var(--dark-sub);
  padding: 1px 4px;
  border-radius: 3px;
  transition: background-color 0.4s ease, transform 0.3s ease;
}

.takeaways-list li.updating {
  background-color: rgba(255, 122, 33, 0.14);
  transform: translateX(2px);
}

.tk-check {
  color: var(--green);
  font-weight: 800;
  font-size: 0.60rem;
  flex-shrink: 0;
}

.tk-sparkle {
  color: var(--primary-orange);
  font-size: 0.60rem;
  flex-shrink: 0;
}

.tk-live-line {
  color: var(--primary);
  font-weight: 600;
  background: var(--bg-warm);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px dashed rgba(255, 122, 33, 0.3);
}

.tk-cursor {
  display: inline-block;
  color: var(--primary);
  animation: cursorBlink 0.8s infinite;
  font-weight: 700;
}

@keyframes cursorBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Mini dialer popup (when toggled) */
.mini-dialer-popup {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 11px;
  padding: 8px 12px 9px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
}

.dialer-screen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  padding: 3px 8px;
  margin-bottom: 7px;
}

.dialer-display-input {
  border: none;
  background: transparent;
  font-family: 'Plus Jakarta Sans', monospace, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark-heading);
  letter-spacing: 0.03em;
  width: 100%;
  outline: none;
}

.dialer-backspace-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transition: all 0.15s ease;
}

.dialer-keys-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 7px;
}

.dial-num-key {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  padding: 4px 0 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.dial-num-key:hover {
  background: #FFF7ED;
  border-color: #FDBA74;
}

.dk-digit {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--dark-heading);
  line-height: 1;
}

.dk-sub {
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin-top: 1px;
}

.dialer-close-btn {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dark-sub);
  cursor: pointer;
  margin-top: 4px;
  transition: all 0.2s ease;
}

.dialer-close-btn:hover {
  background: #E2E8F0;
  color: var(--dark-heading);
}

/* ==========================================================================
   VIEW 2: VIDEO MEETINGS
   ========================================================================== */
.video-mockup-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.vm-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #EAF7FE;
  border: 1px solid rgba(21, 159, 227, 0.25);
  padding: 6px 10px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.vm-live-indicator {
  font-size: 0.65rem;
  font-weight: 700;
  color: #159FE3;
}

.vm-room-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dark-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vm-tiles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.vm-tile {
  background: #0F172A;
  border-radius: 8px;
  height: 76px;
  position: relative;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.25s ease;
  cursor: pointer;
}

.vm-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  border-color: rgba(21, 159, 227, 0.5);
}

.vm-tile.active-speaker {
  border-color: #159FE3;
  box-shadow: 0 0 0 1px #159FE3, 0 0 12px rgba(21, 159, 227, 0.5);
}

.vm-video-feed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.4s ease;
}

.vm-tile:hover .vm-video-feed {
  transform: scale(1.04);
}

.vm-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, 0.78) 100%);
  pointer-events: none;
}

.vm-user-name {
  position: absolute;
  bottom: 4px;
  left: 5px;
  font-size: 0.58rem;
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(4px);
  padding: 1.5px 5px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.12);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.vm-mic-icon {
  color: #22C55E;
  flex-shrink: 0;
}

.vm-audio-rings {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  padding: 2.5px 4px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 2;
  height: 15px;
}

.vm-audio-rings span {
  width: 2px;
  height: 6px;
  background: #159FE3;
  border-radius: 1px;
  animation: soundWaveActive 0.6s ease-in-out infinite alternate;
}

.vm-audio-rings span:nth-child(2) {
  animation-delay: 0.2s;
  height: 11px;
}

.vm-audio-rings span:nth-child(3) {
  animation-delay: 0.4s;
  height: 8px;
}

/* Normal Integrated Live AI Meeting Summary Card */
.vm-ai-summary-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  padding: 4px 8px 3px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.25s ease;
}

.vm-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2px;
  border-bottom: 1px solid #EDF2F7;
}

.vm-sh-left {
  display: flex;
  align-items: center;
  gap: 3px;
}

.vm-ai-spark {
  font-size: 0.62rem;
}

.vm-sh-title {
  font-size: 0.56rem;
  font-weight: 700;
  color: var(--dark-heading);
}

.vm-ai-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.48rem;
  font-weight: 700;
  color: #159FE3;
  background: #EAF7FE;
  padding: 0.5px 4px;
  border-radius: var(--radius-full);
}

.vm-dot-pulse {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: #159FE3;
  animation: pulseGreen 1.5s infinite;
}

.vm-summary-points {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
}

.vm-sum-item {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 0.54rem;
  line-height: 1.22;
  color: var(--dark-sub);
  padding: 0.5px 2px;
  border-radius: 3px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.vm-sum-item.updating {
  background-color: rgba(21, 159, 227, 0.12);
  transform: translateX(2px);
}

.vm-check {
  color: #22C55E;
  font-weight: 800;
  font-size: 0.56rem;
  flex-shrink: 0;
}

.vm-sum-text {
  transition: opacity 0.25s ease;
}

.vm-sum-insight {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.50rem;
  font-weight: 600;
  color: #159FE3;
  background: #EAF7FE;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px dashed rgba(21, 159, 227, 0.3);
  margin-top: 0;
}

.vm-spark-tag {
  color: #159FE3;
  font-size: 0.56rem;
}

.vm-controls-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.vm-ctrl-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: var(--dark-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.vm-ctrl-icon.active {
  background: #EAF7FE;
  color: #159FE3;
  border-color: #BAE6FD;
}

.vm-ctrl-share {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--dark-heading);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.vm-ctrl-leave {
  background: #EF4444;
  color: #FFF;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   VIEW 3: MESSAGING (INTERACTIVE TEAM CHAT & AI COPILOT)
   ========================================================================== */
.chat-mockup-wrapper {
  background: #FFFFFF;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: var(--radius-lg);
  padding: 10px 13px 10px;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.05);
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.chat-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F8FAFC;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  padding: 5px 9px;
  margin-bottom: 8px;
}

.chat-channel-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.chat-channel-title h4 {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--dark-heading);
  margin: 0;
}

.chat-status-pill {
  font-size: 0.58rem;
  font-weight: 700;
  color: #22C55E;
  background: #F0FDF4;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chat-pulse-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 6px #22C55E;
  animation: pulseGreen 1.5s infinite;
}

.chat-member-count {
  font-size: 0.6rem;
  color: var(--text-muted);
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.chat-replay-btn {
  background: transparent;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-full);
  padding: 1px 7px;
  font-size: 0.54rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.4;
}

.chat-replay-btn:hover {
  background: #EAF7FE;
  color: var(--primary-blue);
  border-color: #BAE6FD;
}

.chat-stream {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 180px;
  max-height: 250px;
  overflow-y: auto;
  margin-bottom: 8px;
  padding-right: 3px;
  scrollbar-width: thin;
}

.chat-stream::-webkit-scrollbar {
  width: 3px;
}

.chat-stream::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  animation: viewFadeIn 0.25s ease;
}

.msg-sender {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.msg-bubble {
  font-size: 0.72rem;
  line-height: 1.45;
  padding: 6px 10px;
  border-radius: 8px;
  max-width: 92%;
  letter-spacing: -0.01em;
}

.client-msg .msg-bubble {
  background: #F1F5F9;
  color: var(--dark-heading);
  align-self: flex-start;
}

.ai-msg .msg-bubble {
  background: #F0FDF4;
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #166534;
  align-self: flex-start;
}

.user-msg .msg-bubble {
  background: linear-gradient(135deg, #159FE3 0%, #0284C7 100%);
  color: #FFFFFF;
  align-self: flex-end;
}

.user-msg .msg-sender {
  align-self: flex-end;
}

.msg-timestamp {
  font-size: 0.58rem;
  color: #94A3B8;
  margin-top: 2px;
}

/* Animated Chat Typing Dots */
.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  margin-right: 4px;
}

.typing-dots span {
  width: 4px;
  height: 4px;
  background-color: #22C55E;
  border-radius: 50%;
  display: inline-block;
  animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0s;
}

@keyframes typingBounce {

  0%,
  80%,
  100% {
    transform: scale(0.4);
    opacity: 0.4;
  }

  40% {
    transform: scale(1.15);
    opacity: 1;
  }
}

.chat-ai-chips {
  display: flex;
  gap: 5px;
  margin-bottom: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.chat-ai-chips::-webkit-scrollbar {
  display: none;
}

.chat-chip {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-full);
  padding: 3px 9px;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--dark-sub);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: all 0.15s ease;
}

.chat-chip:hover {
  background: #EAF7FE;
  border-color: #BAE6FD;
  color: #159FE3;
  transform: translateY(-1px);
}

.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 7px;
  padding: 4px 6px 4px 10px;
  transition: all 0.2s ease;
}

.chat-input-bar:focus-within {
  border-color: var(--primary-blue);
  background: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(21, 159, 227, 0.15);
}

.chat-text-input {
  border: none;
  background: transparent;
  font-size: 0.72rem;
  color: var(--dark-heading);
  width: 100%;
  outline: none;
  font-family: inherit;
}

.chat-text-input::placeholder {
  color: #94A3B8;
}

.chat-send-icon {
  background: linear-gradient(135deg, #159FE3 0%, #0284C7 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 5px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.chat-send-icon:hover {
  background: #0284C7;
  transform: scale(1.06);
}

/* ==========================================================================
   VIEW 4: INTEGRATIONS (ENTERPRISE CRM SYNC & PIPELINE STREAM)
   ========================================================================== */
.integ-mockup-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Top Card: Enterprise CRM & Workflow Sync Hub */
.integ-sync-card {
  background: #FFFFFF;
  border: 1px solid rgba(249, 115, 22, 0.22);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.05);
  margin-bottom: 7px;
}

.integ-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.integ-brand-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.integ-hub-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #FFF7ED;
  border: 1px solid rgba(249, 115, 22, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.integ-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dark-heading);
  margin: 0;
  line-height: 1.2;
}

.integ-subtitle {
  font-size: 0.56rem;
  color: var(--text-muted);
  line-height: 1.1;
  display: block;
}

.integ-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.52rem;
  font-weight: 700;
  color: #22C55E;
  background: #F0FDF4;
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 1.5px 6px;
  border-radius: var(--radius-full);
}

.integ-connectors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.connector-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.connector-item:hover {
  border-color: #CBD5E1;
  background: #F1F5F9;
}

.connector-icon-box {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bg-it-salesforce {
  background: #E0F2FE;
}

.bg-it-hubspot {
  background: #FFECE5;
}

.bg-it-zendesk {
  background: #E0F2F1;
}

.bg-it-slack {
  background: #FCE7F3;
}

.bg-it-google {
  background: #FEF3C7;
}

.bg-it-zapier {
  background: #FFF4E6;
}

.connector-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.connector-info strong {
  font-size: 0.63rem;
  font-weight: 700;
  color: var(--dark-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.connector-info span {
  font-size: 0.50rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.conn-status-tag {
  font-size: 0.46rem;
  font-weight: 700;
  color: #22C55E;
  background: #F0FDF4;
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: 1px 3px;
  border-radius: 3px;
  flex-shrink: 0;
}

.integ-live-stat-bar {
  background: #F8FAFC;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--dark-heading);
  margin-top: 3px;
}

/* Bottom Card: Real-Time Live Pipeline Stream */
.integ-pipeline-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 6px 9px 5px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pipeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid #F1F5F9;
}

.pipeline-title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.60rem;
  font-weight: 700;
  color: var(--dark-heading);
}

.pipeline-spark {
  color: #F97316;
  font-size: 0.62rem;
}

.pipeline-timer {
  font-size: 0.48rem;
  font-weight: 700;
  color: #16A34A;
  background: #F0FDF4;
  border: 1px solid rgba(22, 163, 74, 0.2);
  padding: 1px 5px;
  border-radius: var(--radius-full);
}

.pipeline-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pipe-event-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.54rem;
  color: var(--dark-sub);
  background: #F8FAFC;
  padding: 2px 5px;
  border-radius: 4px;
}

.pipe-dot {
  color: #22C55E;
  font-weight: 800;
  font-size: 0.54rem;
  flex-shrink: 0;
}

.pipe-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pipe-time {
  font-size: 0.46rem;
  color: #94A3B8;
  flex-shrink: 0;
}

.pipe-live-action {
  font-size: 0.52rem;
  font-weight: 600;
  color: #D97706;
  background: #FFFBEB;
  border: 1px dashed rgba(245, 158, 11, 0.4);
  padding: 2px 5px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pipe-action-icon {
  color: #D97706;
  font-size: 0.56rem;
}

/* Showcase Right Content */
.showcase-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.showcase-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 14px;
  margin-bottom: 4px;
}

/* Step Tracker & Segments */
.showcase-step-tracker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-counter {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
  background: var(--primary-light);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 122, 33, 0.25);
  white-space: nowrap;
  transition: all 0.3s ease;
}

.step-progress-track {
  display: flex;
  align-items: center;
  gap: 4px;
}

.step-progress-segment {
  width: 16px;
  height: 4px;
  border-radius: 3px;
  background: #E2E8F0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-progress-segment.active {
  background: var(--primary);
  width: 24px;
  box-shadow: 0 0 8px rgba(255, 122, 33, 0.45);
}

.showcase-content .section-title {
  margin: 6px 0 8px;
  font-size: clamp(1.55rem, 1.9vw, 1.8rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.showcase-content .section-subtitle {
  margin-bottom: 14px;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.showcase-tabs {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}

.showcase-tab {
  padding: 5px 13px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  background-color: #F1F5F9;
  color: var(--dark-heading);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.showcase-tab:hover {
  background-color: #E2E8F0;
  color: var(--dark-heading);
  transform: translateY(-1px);
}

.showcase-tab.active {
  background: linear-gradient(135deg, #159FE3 0%, #0284C7 100%);
  color: #FFFFFF;
  border-color: #159FE3;
  box-shadow: 0 4px 14px rgba(21, 159, 227, 0.35);
  transform: translateY(-1px);
}

.showcase-tab .tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  width: 18px;
  height: 16px;
}

.showcase-tab .tab-icon svg {
  display: block;
  width: 18px;
  height: 16px;
}

.showcase-tab:not(.active) .tab-icon-cloud {
  color: #159FE3;
}

.showcase-tab.active .tab-icon-cloud {
  color: #FFFFFF;
}

/* Side-by-Side Sub-Grid for Feature Panels and Onboarding Card */
.showcase-split-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 22px;
  align-items: start;
  width: 100%;
}

.showcase-subcol-left {
  display: flex;
  flex-direction: column;
}

.feature-panel {
  display: none;
  opacity: 0;
  transform: translateY(6px);
}

.feature-panel.active {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: translateY(0);
  animation: featurePanelIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes featurePanelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-header-badge {
  margin-bottom: 7px;
}

.panel-badge-pill {
  display: inline-block;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2.5px 9px;
  border-radius: var(--radius-full);
  background: #FFF4E6;
  color: #FF7A21;
  border: 1px solid rgba(255, 122, 33, 0.25);
}

.panel-badge-pill.bg-blue {
  background: #EAF7FE;
  color: #159FE3;
  border-color: rgba(21, 159, 227, 0.25);
}

.panel-badge-pill.bg-green {
  background: #F0FDF4;
  color: #22C55E;
  border-color: rgba(34, 197, 94, 0.25);
}

.panel-badge-pill.bg-amber {
  background: #FFF4E6;
  color: #F5A623;
  border-color: rgba(245, 166, 35, 0.3);
}

.panel-description {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 12px;
}

.feature-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
}

.feature-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--dark-sub);
  line-height: 1.32;
}

.check-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #F0FDF4;
  color: #22C55E;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.showcase-action-row {
  margin-top: 18px;
}

.showcase-action-row .btn {
  padding: 8px 18px;
  font-size: 0.84rem;
}

/* Onboarding Steps Sub-card */
.showcase-subcol-right {
  display: flex;
  flex-direction: column;
}

.onboarding-steps-box {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 16px 18px 18px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
}

.steps-title {
  font-size: 0.90rem;
  font-weight: 800;
  color: var(--dark-heading);
  margin-bottom: 11px;
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 14px;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.70rem;
  font-weight: 700;
  flex-shrink: 0;
}

.step-badge.step-1 {
  background-color: #F0FDF4;
  color: var(--green);
}

.step-badge.step-2 {
  background-color: var(--bg-light-blue);
  color: var(--primary-blue);
}

.step-badge.step-3 {
  background-color: var(--bg-warm);
  color: var(--primary);
}

.step-text {
  display: flex;
  flex-direction: column;
  line-height: 1.24;
}

.step-text strong {
  font-size: 0.80rem;
  font-weight: 700;
  color: var(--dark-heading);
}

.step-text span {
  font-size: 0.69rem;
  color: var(--text-muted);
}

#stepsGetStarted {
  padding: 8px 16px;
  font-size: 0.84rem;
}

/* ==========================================================================
   POWERFUL CAPABILITIES (RICH 6-CARD GRID V2 WITH 3D VISUALS & METRICS)
   ========================================================================== */
.capabilities-section {
  padding: 95px 0 90px;
  background-color: #F8FAFC;
  position: relative;
}

.capabilities-header-flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 20px;
}

.text-brand-cyan {
  color: #00A3C4;
  font-weight: 800;
}

.capabilities-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.capabilities-top-subtext {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94A3B8;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.capabilities-explore-btn {
  background: #0082CD;
  color: #FFFFFF !important;
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 130, 205, 0.35);
  transition: all 0.25s ease;
  border: none;
}

.capabilities-explore-btn:hover {
  background: #006FB0;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 130, 205, 0.45);
}

.capabilities-btn-note {
  font-size: 0.78rem;
  color: #94A3B8;
  margin-top: 6px;
}

/* 6 Cards Grid (3x2) */
.capabilities-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.cap-card-v2 {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 20px;
  padding: 26px 20px 24px 26px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  min-height: 255px;
}

.cap-card-v2:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px -10px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.85);
  border-color: rgba(203, 213, 225, 0.95);
}

.cap-card-v2:hover .cap-learn-link svg {
  transform: translateX(5px);
  transition: transform 0.25s ease;
}

/* Clean Light Cards with Low-Brightness Ambient Glow */
.cap-theme-blue {
  background: radial-gradient(circle at 86% 50%, rgba(219, 234, 254, 0.4) 0%, rgba(239, 246, 255, 0.16) 45%, #FFFFFF 72%);
}

.cap-theme-green {
  background: radial-gradient(circle at 86% 50%, rgba(220, 252, 231, 0.35) 0%, rgba(236, 253, 245, 0.14) 45%, #FFFFFF 72%);
}

.cap-theme-orange {
  background: radial-gradient(circle at 86% 50%, rgba(254, 243, 199, 0.35) 0%, rgba(255, 247, 237, 0.14) 45%, #FFFFFF 72%);
}

.cap-theme-purple {
  background: radial-gradient(circle at 86% 50%, rgba(243, 232, 255, 0.35) 0%, rgba(250, 245, 255, 0.14) 45%, #FFFFFF 72%);
}

.cap-theme-coral {
  background: radial-gradient(circle at 86% 50%, rgba(255, 228, 230, 0.35) 0%, rgba(255, 241, 242, 0.14) 45%, #FFFFFF 72%);
}

.cap-theme-cyan {
  background: radial-gradient(circle at 86% 50%, rgba(224, 242, 254, 0.4) 0%, rgba(240, 249, 255, 0.16) 45%, #FFFFFF 72%);
}

/* Card Content (Left) */
.cap-card-content {
  flex: 1 1 58%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 2;
  padding-right: 12px;
}

.cap-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 14px;
}

.cap-pill-blue {
  background-color: #EFF6FF;
  color: #2563EB;
}

.cap-pill-green {
  background-color: #ECFDF5;
  color: #059669;
}

.cap-pill-orange {
  background-color: #FFF7ED;
  color: #EA580C;
}

.cap-pill-purple {
  background-color: #FAF5FF;
  color: #9333EA;
}

.cap-pill-coral {
  background-color: #FFF1F2;
  color: #E11D48;
}

.cap-pill-cyan {
  background-color: #F0F9FF;
  color: #0284C7;
}

.cap-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
  line-height: 1.3;
}

.cap-desc {
  font-size: 0.84rem;
  color: #64748B;
  line-height: 1.55;
  margin-bottom: 18px;
}

.cap-learn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.25s ease, opacity 0.25s ease;
}

.cap-learn-link:hover {
  gap: 9px;
  opacity: 0.85;
}

.cap-link-blue {
  color: #2563EB;
}

.cap-link-green {
  color: #059669;
}

.cap-link-orange {
  color: #EA580C;
}

.cap-link-purple {
  color: #9333EA;
}

.cap-link-coral {
  color: #E11D48;
}

.cap-link-cyan {
  color: #0284C7;
}

/* Card Visual (Right) */
.cap-card-visual {
  flex: 0 0 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.cap-visual-img {
  width: 100%;
  max-width: 155px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(circle at center, #000000 44%, rgba(0, 0, 0, 0.65) 58%, transparent 72%);
  mask-image: radial-gradient(circle at center, #000000 44%, rgba(0, 0, 0, 0.65) 58%, transparent 72%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cap-card-v2:not(.cap-theme-blue):not(.cap-theme-purple):not(.cap-theme-coral):not(.cap-theme-cyan):hover .cap-visual-img {
  transform: scale(1.06) translateY(-2px);
}

/* ==========================================================================
   Cloud Phone System Levitation, Screen Audio Equalizer & Call Waves
   ========================================================================== */
.cap-visual-phone {
  position: relative;
  overflow: visible;
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ambient Cloud Backlight Glow */
.cap-phone-cloud-aura {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 95px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.32) 0%, rgba(14, 165, 233, 0.12) 48%, transparent 72%);
  animation: capAuraPulse 3.8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

/* Wireless Voice Call Waves emitting from handset to cloud */
.cap-phone-call-wave {
  position: absolute;
  top: 26%;
  left: 36%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, 0.7);
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.4), inset 0 0 6px rgba(56, 189, 248, 0.2);
  pointer-events: none;
  z-index: 1;
  animation: capPhoneCallWave 3.4s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}

.call-wave-2 {
  animation-delay: 1.7s;
}

@keyframes capPhoneCallWave {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.85;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
}

/* Levitating 3D Phone Container */
.cap-phone-wrap {
  position: relative;
  width: 100%;
  max-width: 155px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  animation: capPhoneLevitate 3.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
  transform-origin: center bottom;
}

.cap-phone-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Screen Ambient Electric Cyan Glow */
.cap-phone-screen-glow {
  position: absolute;
  top: 45%;
  left: 48%;
  width: 38%;
  height: 18%;
  transform: rotate(4deg);
  border-radius: 8px;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.45) 0%, rgba(14, 165, 233, 0.16) 55%, transparent 75%);
  filter: blur(4px);
  animation: capScreenPulse 2.8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 4;
}

@keyframes capScreenPulse {
  0% {
    opacity: 0.6;
    transform: rotate(4deg) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: rotate(4deg) scale(1.08);
    filter: blur(5px);
  }
}

/* Live Equalizer Soundwave Bars over Screen */
.cap-phone-screen-wave {
  position: absolute;
  top: 48%;
  left: 49%;
  width: 32%;
  height: 8.5%;
  transform: rotate(4deg);
  pointer-events: none;
  z-index: 5;
  overflow: visible;
  opacity: 0.92;
}

.p-bar {
  fill: #00F0FF;
  filter: drop-shadow(0 0 2px #00F0FF) drop-shadow(0 0 5px rgba(2, 132, 199, 0.9));
  transform-origin: center;
  animation: capEqBar 1.2s ease-in-out infinite alternate;
}

.p-bar-1 {
  animation-delay: -0.2s;
}

.p-bar-2 {
  animation-delay: -0.7s;
}

.p-bar-3 {
  animation-delay: -0.4s;
}

.p-bar-4 {
  animation-delay: -1.0s;
}

.p-bar-5 {
  animation-delay: -0.3s;
}

.p-bar-6 {
  animation-delay: -0.8s;
}

.p-bar-7 {
  animation-delay: -0.5s;
}

.p-bar-8 {
  animation-delay: -0.1s;
}

.p-bar-9 {
  animation-delay: -0.9s;
}

.p-bar-10 {
  animation-delay: -0.6s;
}

.p-bar-11 {
  animation-delay: -0.35s;
}

.p-bar-12 {
  animation-delay: -0.75s;
}

.p-bar-13 {
  animation-delay: -0.15s;
}

.p-bar-14 {
  animation-delay: -0.55s;
}

@keyframes capEqBar {
  0% {
    transform: scaleY(0.35);
    opacity: 0.55;
  }

  50% {
    transform: scaleY(1.3);
    opacity: 1;
  }

  100% {
    transform: scaleY(0.6);
    opacity: 0.8;
  }
}

/* Glass Screen Shimmer Sweep */
.cap-phone-screen-shimmer {
  position: absolute;
  top: -60%;
  left: -90%;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.04) 25%,
      rgba(255, 255, 255, 0.42) 50%,
      rgba(255, 255, 255, 0.04) 75%,
      transparent 100%);
  transform: rotate(26deg);
  animation: capShimmerSweep 4.6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 6;
}

/* Phone Floating & Incoming Call Ring Vibration */
@keyframes capPhoneLevitate {

  0%,
  46% {
    transform: translateY(0px) rotate(0deg);
  }

  48% {
    transform: translateY(-6px) rotate(-2.5deg);
  }

  51% {
    transform: translateY(-6px) rotate(2.5deg);
  }

  54% {
    transform: translateY(-6px) rotate(-2deg);
  }

  57% {
    transform: translateY(-6px) rotate(2deg);
  }

  60% {
    transform: translateY(-6px) rotate(-1deg);
  }

  63% {
    transform: translateY(-6px) rotate(1deg);
  }

  66%,
  74% {
    transform: translateY(-4px) rotate(0deg);
  }

  76% {
    transform: translateY(-6px) rotate(-2.5deg);
  }

  79% {
    transform: translateY(-6px) rotate(2.5deg);
  }

  82% {
    transform: translateY(-6px) rotate(-2deg);
  }

  85% {
    transform: translateY(-6px) rotate(2deg);
  }

  88% {
    transform: translateY(-6px) rotate(0deg);
  }

  92%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* Dynamic Floor Shadow */
.cap-phone-shadow {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.18) 0%, rgba(14, 165, 233, 0.08) 45%, transparent 75%);
  filter: blur(4px);
  animation: capPhoneShadowPulse 3.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes capPhoneShadowPulse {

  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.85;
    filter: blur(4px);
  }

  50% {
    transform: translateX(-50%) scale(0.78);
    opacity: 0.4;
    filter: blur(6px);
  }
}

/* Hover Interaction */
.cap-card-v2.cap-theme-blue:hover .cap-phone-wrap {
  animation-play-state: paused;
  transform: translateY(-12px) scale(1.05);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cap-card-v2.cap-theme-blue:hover .p-bar {
  animation-duration: 0.6s;
}

.cap-card-v2.cap-theme-blue:hover .cap-phone-shadow {
  animation-play-state: paused;
  transform: translateX(-50%) scale(0.68);
  opacity: 0.35;
  filter: blur(6px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   HD Video Conferencing 3D Interactive Flip Card (Card 2)
   ========================================================================== */
.cap-visual-meeting {
  position: relative;
  overflow: visible;
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

/* Emerald Ambient Aura */
.cap-meeting-aura {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.24) 0%, rgba(5, 150, 105, 0.08) 50%, transparent 72%);
  animation: capAuraPulse 3.8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

/* Floating Stage Wrapper */
.cap-meeting-stage {
  position: relative;
  width: 100%;
  max-width: 155px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  z-index: 3;
  animation: capMeetingFloat 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3D Flip Card Element */
.cap-meeting-flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.34, 1.25, 0.64, 1);
  will-change: transform;
}

.cap-meeting-flip-card.is-flipped {
  transform: rotateY(180deg);
}

/* Shared Face Styles */
.cap-meeting-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Front Face */
.cap-meeting-front {
  transform: rotateY(0deg);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.cap-meeting-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cap-meeting-shimmer {
  position: absolute;
  top: -60%;
  left: -90%;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.04) 25%,
      rgba(255, 255, 255, 0.45) 50%,
      rgba(255, 255, 255, 0.04) 75%,
      transparent 100%);
  transform: rotate(26deg);
  animation: capShimmerSweep 4.6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 4;
}

/* Back Face: Frosted Emerald AI Meeting Summary */
.cap-meeting-back {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, #07271F 0%, #031D16 55%, #01130E 100%);
  border: 1.5px solid rgba(52, 211, 153, 0.42);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4), inset 0 0 22px rgba(16, 185, 129, 0.22);
  padding: 8px 8px 7px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  z-index: 1;
}

/* AI Summary Header */
.cap-ai-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.cap-ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #34D399;
  background: rgba(6, 78, 59, 0.7);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: var(--radius-full);
  padding: 2px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.cap-ai-pill svg {
  color: #6EE7B7;
  animation: capAiSparklePulse 2.4s ease-in-out infinite alternate;
}

@keyframes capAiSparklePulse {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.15);
    opacity: 1;
    filter: drop-shadow(0 0 4px #34D399);
  }
}

.cap-ai-tagline {
  font-size: 0.46rem;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.02em;
}

/* AI Summary Cards */
.cap-ai-cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin: 1px 0;
}

.cap-ai-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 3.5px 6px;
  text-align: left;
  transition: all 0.2s ease;
}

.cap-ai-card:hover {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.25);
}

.cap-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  font-size: 0.46rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}

.cap-ai-badge.green {
  color: #34D399;
}

.cap-ai-badge.cyan {
  color: #67E8F9;
}

.cap-ai-summary-text {
  font-size: 0.52rem;
  font-weight: 600;
  color: #F8FAFC;
  line-height: 1.35;
  margin: 0;
  letter-spacing: 0.01em;
}

.cap-ai-card-active {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(56, 189, 248, 0.28);
  min-height: 52px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cap-ai-cursor {
  display: inline-block;
  width: 1.5px;
  height: 0.58rem;
  background-color: #67E8F9;
  margin-left: 1.5px;
  vertical-align: -1px;
  animation: capAiBlink 0.85s infinite;
  box-shadow: 0 0 5px #67E8F9;
}

@keyframes capAiBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Footer / Live Status */
.cap-ai-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.cap-ai-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  font-size: 0.44rem;
  font-weight: 600;
  color: #A7F3D0;
  letter-spacing: 0.02em;
}

.cap-ai-dot {
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px #10B981;
  animation: capPulseDot 2s infinite;
}

@keyframes capPulseDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.75);
  }
}

.cap-back-action {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.48rem;
  font-weight: 700;
  color: #6EE7B7;
  letter-spacing: 0.03em;
  opacity: 0.95;
  background: rgba(0, 0, 0, 0.35);
  padding: 1.5px 6px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(52, 211, 153, 0.25);
  cursor: pointer;
}

.cap-back-action svg {
  animation: capSpinSlow 4s linear infinite;
}

@keyframes capSpinSlow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes capMeetingFloat {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-7px) rotate(0.8deg);
  }
}

.cap-meeting-shadow {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.18) 0%, rgba(16, 185, 129, 0.08) 45%, transparent 75%);
  filter: blur(4px);
  animation: capPhoneShadowPulse 3.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
  z-index: 1;
}

/* Card 2 Hover State */
.cap-card-v2.cap-theme-green:hover .cap-meeting-stage {
  animation-play-state: paused;
  transform: translateY(-10px) scale(1.05);
}

.cap-card-v2.cap-theme-green:hover .cap-meeting-shadow {
  animation-play-state: paused;
  transform: translateX(-50%) scale(0.68);
  opacity: 0.35;
  filter: blur(6px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Team Messaging Floating Emojis, Typing Indicator & Chat Float (Card 3)
   ========================================================================== */
.cap-visual-messaging {
  position: relative;
  overflow: visible;
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Warm Orange Aura Glow */
.cap-messaging-aura {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.22) 0%, rgba(251, 146, 60, 0.08) 50%, transparent 72%);
  animation: capAuraPulse 3.8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

/* Floating Live Reaction Emojis that rise from the phone */
.cap-float-reaction {
  position: absolute;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
  will-change: transform, opacity;
}

.reaction-1 {
  top: 32%;
  left: 78%;
  animation: capFloatEmoji 3.6s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  animation-delay: 0s;
}

.reaction-2 {
  top: 48%;
  left: 14%;
  animation: capFloatEmoji 4.2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  animation-delay: 1.1s;
}

.reaction-3 {
  top: 26%;
  left: 82%;
  animation: capFloatEmoji 3.8s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  animation-delay: 2.1s;
}

.reaction-4 {
  top: 56%;
  left: 18%;
  animation: capFloatEmoji 4.0s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  animation-delay: 3.0s;
}

@keyframes capFloatEmoji {
  0% {
    transform: translateY(14px) scale(0.35) rotate(-10deg);
    opacity: 0;
  }

  15% {
    transform: translateY(0px) scale(1) rotate(4deg);
    opacity: 1;
  }

  75% {
    transform: translateY(-40px) scale(1.05) rotate(-6deg);
    opacity: 0.9;
  }

  100% {
    transform: translateY(-60px) scale(0.85) rotate(12deg);
    opacity: 0;
  }
}

/* Live Typing Indicator Bubble */
.cap-typing-indicator {
  position: absolute;
  bottom: 22%;
  left: 12%;
  background: #FFFFFF;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(249, 115, 22, 0.15);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 12px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 3.5px;
  z-index: 6;
  pointer-events: none;
  animation: capTypingBubblePop 4s ease-in-out infinite;
}

.typing-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #F97316;
  animation: capTypingDot 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes capTypingDot {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@keyframes capTypingBubblePop {

  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.95;
  }

  50% {
    transform: translateY(-4px) scale(1.04);
    opacity: 1;
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.2);
  }
}

/* 3D Smartphone Container */
.cap-phone-chat-wrap {
  position: relative;
  width: 100%;
  max-width: 155px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  animation: capChatPhoneFloat 3.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
  transform-origin: center bottom;
}

.cap-chat-phone-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Glass Screen Shimmer Sweep */
.cap-chat-screen-shimmer {
  position: absolute;
  top: -60%;
  left: -90%;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.04) 25%,
      rgba(255, 255, 255, 0.42) 50%,
      rgba(255, 255, 255, 0.04) 75%,
      transparent 100%);
  transform: rotate(26deg);
  animation: capShimmerSweep 4.6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 4;
}

/* New Message Bubble Ping */
.cap-chat-bubble-ping {
  position: absolute;
  top: 38%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 24px;
  border-radius: 12px;
  border: 1.5px solid rgba(249, 115, 22, 0.65);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.35);
  pointer-events: none;
  z-index: 4;
  animation: capBubblePing 3.2s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}

@keyframes capBubblePing {
  0% {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0.85;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }
}

@keyframes capChatPhoneFloat {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-7px) rotate(1deg);
  }
}

/* Dynamic Floor Shadow */
.cap-messaging-shadow {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 95px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.18) 0%, rgba(249, 115, 22, 0.08) 45%, transparent 75%);
  filter: blur(4px);
  animation: capPhoneShadowPulse 3.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
  z-index: 1;
}

/* Hover Interaction */
.cap-card-v2.cap-theme-orange:hover .cap-phone-chat-wrap {
  animation-play-state: paused;
  transform: translateY(-14px) scale(1.06) rotate(-1.2deg);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cap-card-v2.cap-theme-orange:hover .cap-float-reaction {
  animation-duration: 2s;
  filter: drop-shadow(0 6px 14px rgba(249, 115, 22, 0.4));
}

.cap-card-v2.cap-theme-orange:hover .cap-typing-indicator {
  transform: translateY(-5px) scale(1.06);
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.28);
  border-color: rgba(249, 115, 22, 0.5);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cap-card-v2.cap-theme-orange:hover .cap-messaging-shadow {
  animation-play-state: paused;
  transform: translateX(-50%) scale(0.62);
  opacity: 0.35;
  filter: blur(6px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Smart Integrations Rotating Orbit Animation */
.cap-visual-integrations {
  position: relative;
}

.cap-orbit-aura {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, rgba(59, 130, 246, 0.12) 50%, transparent 70%);
  animation: capAuraPulse 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

.cap-rotating-integrations {
  position: relative;
  z-index: 2;
  animation: capOrbitSpin 22s linear infinite;
  transform-origin: center center;
  will-change: transform;
}

.cap-card-v2.cap-theme-purple:hover .cap-rotating-integrations {
  animation-duration: 9s;
}

@keyframes capOrbitSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes capAuraPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.15);
    opacity: 0.85;
  }
}

/* AI Analytics Dashboard Levitation, Shimmer & Pulse Animation */
.cap-visual-dashboard {
  position: relative;
  overflow: visible;
  padding-bottom: 6px;
}

.cap-dashboard-glow {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.22) 0%, rgba(244, 63, 94, 0.08) 50%, transparent 72%);
  animation: capAuraPulse 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.cap-dashboard-card-wrap {
  position: relative;
  width: 100%;
  max-width: 155px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border-radius: 18px;
  overflow: hidden;
  animation: capDashboardLevitate 3.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
  transform-origin: center bottom;
}

.cap-dashboard-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Luminous Glass Shimmer Reflection */
.cap-dashboard-shimmer {
  position: absolute;
  top: -60%;
  left: -90%;
  width: 50%;
  height: 220%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.04) 25%,
      rgba(255, 255, 255, 0.45) 50%,
      rgba(255, 255, 255, 0.04) 75%,
      transparent 100%);
  transform: rotate(26deg);
  animation: capShimmerSweep 4.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 3;
}

/* Animated Continuous Data Flow SVG */
.cap-chart-flow-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}

/* Subtle Ambient Glow along the Curve Track */
.cap-flow-track {
  fill: none;
  stroke: url(#capFlowGrad);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.28;
  filter: blur(1.5px);
}

/* Flowing Neon Energy Streams */
.cap-flow-stream {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  will-change: stroke-dashoffset, opacity;
}

.cap-flow-stream-primary {
  stroke: #FFFFFF;
  stroke-width: 16px;
  stroke-dasharray: 130px 900px;
  filter: drop-shadow(0 0 3px #FFFFFF) drop-shadow(0 0 8px #FF2E79) drop-shadow(0 0 16px rgba(255, 46, 121, 0.95));
  animation: capChartFlowStream 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.cap-flow-stream-secondary {
  stroke: #FCE7F3;
  stroke-width: 12px;
  stroke-dasharray: 100px 930px;
  filter: drop-shadow(0 0 3px #FFFFFF) drop-shadow(0 0 8px #C044FF) drop-shadow(0 0 16px rgba(192, 68, 255, 0.9));
  animation: capChartFlowStream 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: -1.3s;
}

/* Dynamic Floor Shadow */
.cap-dashboard-shadow {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.18) 0%, rgba(244, 63, 94, 0.08) 45%, transparent 75%);
  filter: blur(4px);
  animation: capShadowPulse 3.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
  z-index: 1;
}

/* Hover Interaction */
.cap-card-v2.cap-theme-coral:hover .cap-dashboard-card-wrap {
  animation-play-state: paused;
  transform: translateY(-12px) scale(1.05);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cap-card-v2.cap-theme-coral:hover .cap-dashboard-shadow {
  animation-play-state: paused;
  transform: translateX(-50%) scale(0.68);
  opacity: 0.35;
  filter: blur(6px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes capDashboardLevitate {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(-1.2deg);
  }
}

@keyframes capShadowPulse {

  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.85;
    filter: blur(4px);
  }

  50% {
    transform: translateX(-50%) scale(0.78);
    opacity: 0.4;
    filter: blur(6px);
  }
}

@keyframes capShimmerSweep {

  0%,
  25% {
    left: -90%;
  }

  65%,
  100% {
    left: 150%;
  }
}

@keyframes capChartFlowStream {
  0% {
    stroke-dashoffset: 140px;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  86% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: -675px;
    opacity: 0;
  }
}

/* ==========================================================================
   Enterprise Security Shield Levitation, Cyber HUD & Sonar Pulse
   ========================================================================== */
.cap-visual-security {
  position: relative;
  overflow: visible;
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ambient Cyan Energy Aura */
.cap-security-aura {
  position: absolute;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.28) 0%, rgba(14, 165, 233, 0.12) 48%, transparent 72%);
  animation: capAuraPulse 3.8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

/* Expanding Sonar Defense Radar Rings */
.cap-security-sonar {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, 0.7);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.45), inset 0 0 8px rgba(6, 182, 212, 0.25);
  pointer-events: none;
  z-index: 1;
  animation: capSecuritySonarPulse 3.4s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}

.sonar-ring-2 {
  animation-delay: 1.7s;
}

@keyframes capSecuritySonarPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.85;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.3);
    opacity: 0;
  }
}

/* Rotating Holographic Cyber HUD Rings */
.cap-security-hud {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 168px;
  height: 168px;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.hud-orbit-outer {
  fill: none;
  stroke: rgba(56, 189, 248, 0.45);
  stroke-width: 1.5;
  stroke-dasharray: 8 16 2 16;
  stroke-linecap: round;
  transform-origin: 100px 100px;
  animation: capHudRotateCW 26s linear infinite;
  filter: drop-shadow(0 0 3px rgba(6, 182, 212, 0.5));
}

.hud-orbit-mid {
  fill: none;
  stroke: rgba(14, 165, 233, 0.4);
  stroke-width: 1.2;
  stroke-dasharray: 24 14 6 14;
  stroke-linecap: round;
  transform-origin: 100px 100px;
  animation: capHudRotateCCW 18s linear infinite;
}

.hud-orbit-inner {
  fill: none;
  stroke: rgba(0, 240, 255, 0.38);
  stroke-width: 1;
  stroke-dasharray: 4 10;
  stroke-linecap: round;
  transform-origin: 100px 100px;
  animation: capHudRotateCW 12s linear infinite;
}

@keyframes capHudRotateCW {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes capHudRotateCCW {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

/* Levitating 3D Shield Graphic Container */
.cap-security-shield-wrap {
  position: relative;
  width: 100%;
  max-width: 155px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  animation: capShieldLevitate 3.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
  transform-origin: center bottom;
}

.cap-security-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Holographic Threat Scanner Sweep */
.cap-security-scan-beam {
  position: absolute;
  top: -60%;
  left: -90%;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(56, 189, 248, 0.05) 25%,
      rgba(0, 240, 255, 0.42) 50%,
      rgba(56, 189, 248, 0.05) 75%,
      transparent 100%);
  transform: rotate(28deg);
  animation: capSecurityScan 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 4;
}

@keyframes capSecurityScan {

  0%,
  20% {
    left: -90%;
  }

  60%,
  100% {
    left: 150%;
  }
}

/* Glowing Padlock Core Pulse */
.cap-security-core-glow {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.45) 0%, rgba(6, 182, 212, 0.18) 50%, transparent 75%);
  filter: blur(5px);
  animation: capLockHeartbeat 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 4;
}

@keyframes capLockHeartbeat {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.5;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.22);
    opacity: 0.95;
    filter: blur(6px);
  }
}

/* Smooth Zero-Gravity Shield Float */
@keyframes capShieldLevitate {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(-1deg);
  }
}

/* Dynamic Floor Shadow */
.cap-security-shadow {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 95px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.18) 0%, rgba(6, 182, 212, 0.08) 45%, transparent 75%);
  filter: blur(4px);
  animation: capSecurityShadowPulse 3.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes capSecurityShadowPulse {

  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.85;
    filter: blur(4px);
  }

  50% {
    transform: translateX(-50%) scale(0.78);
    opacity: 0.4;
    filter: blur(6px);
  }
}

/* Hover Interaction */
.cap-card-v2.cap-theme-cyan:hover .cap-security-shield-wrap {
  animation-play-state: paused;
  transform: translateY(-12px) scale(1.05);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cap-card-v2.cap-theme-cyan:hover .hud-orbit-outer {
  animation-duration: 9s;
}

.cap-card-v2.cap-theme-cyan:hover .hud-orbit-mid {
  animation-duration: 6s;
}

.cap-card-v2.cap-theme-cyan:hover .hud-orbit-inner {
  animation-duration: 4s;
}

.cap-card-v2.cap-theme-cyan:hover .cap-security-shadow {
  animation-play-state: paused;
  transform: translateX(-50%) scale(0.68);
  opacity: 0.35;
  filter: blur(6px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Capabilities Trust Bar */
.capabilities-trust-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 30px 20px 10px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  flex-wrap: wrap;
  gap: 20px;
}

.cap-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #334155;
}

.cap-trust-icon {
  color: #0082CD;
  flex-shrink: 0;
}

.cap-trust-text {
  display: flex;
  flex-direction: column;
  font-size: 0.88rem;
  line-height: 1.35;
}

.cap-trust-text strong {
  font-weight: 700;
  color: #0F172A;
}

.cap-trust-text span {
  color: #64748B;
  font-size: 0.82rem;
}

.cap-trust-divider {
  width: 1px;
  height: 36px;
  background-color: #E2E8F0;
}

@media (max-width: 1100px) {
  .capabilities-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .capabilities-header-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .capabilities-header-right {
    align-items: flex-start;
  }

  .capabilities-grid-v2 {
    grid-template-columns: 1fr;
  }

  .cap-trust-divider {
    display: none;
  }
}

/* ==========================================================================
   "REAL PEOPLE. REAL RESULTS." (VIDEO & TESTIMONIAL)
   ========================================================================== */
.results-section {
  padding: 40px 0 40px;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFF8F1 50%, #F8FAFC 100%);
}

.results-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 52px;
}

/* ==========================================================================
   Enterprise Communication Hub 3D Showcase (Card Left)
   ========================================================================== */
.enterprise-hub-preview-card,
.video-preview-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 480px;
  background: #000000;
  border: 1.5px solid rgba(0, 210, 255, 0.45);
  box-shadow:
    0 24px 60px -10px rgba(0, 0, 0, 0.65),
    0 0 45px rgba(0, 162, 255, 0.25),
    inset 0 0 30px rgba(0, 210, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  perspective: 1200px;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.enterprise-hub-preview-card:hover,
.video-preview-card:hover {
  transform: translateY(-8px) scale(1.012);
  border-color: rgba(0, 220, 255, 0.85);
  box-shadow:
    0 36px 85px -12px rgba(0, 0, 0, 0.75),
    0 0 65px rgba(0, 195, 255, 0.45),
    inset 0 0 45px rgba(0, 210, 255, 0.15);
}

/* Card Background Color Themes */
.enterprise-hub-preview-card.theme-sapphire {
  background: #000000;
  border-color: rgba(0, 210, 255, 0.45);
  box-shadow:
    0 24px 60px -10px rgba(0, 0, 0, 0.65),
    0 0 45px rgba(0, 162, 255, 0.25),
    inset 0 0 30px rgba(0, 210, 255, 0.08);
}

.enterprise-hub-preview-card.theme-violet {
  background: #000000;
  border-color: rgba(192, 132, 252, 0.45);
  box-shadow:
    0 24px 60px -10px rgba(0, 0, 0, 0.65),
    0 0 45px rgba(168, 85, 247, 0.25),
    inset 0 0 30px rgba(168, 85, 247, 0.08);
}

.enterprise-hub-preview-card.theme-violet:hover {
  border-color: rgba(216, 180, 254, 0.85);
  box-shadow:
    0 36px 85px -12px rgba(0, 0, 0, 0.75),
    0 0 65px rgba(168, 85, 247, 0.45),
    inset 0 0 45px rgba(168, 85, 247, 0.15);
}

.enterprise-hub-preview-card.theme-violet .hub-ambient-glow {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.28) 0%, rgba(126, 34, 206, 0.08) 50%, transparent 70%);
}

.enterprise-hub-preview-card.theme-emerald {
  background: #000000;
  border-color: rgba(52, 211, 153, 0.45);
  box-shadow:
    0 24px 60px -10px rgba(0, 0, 0, 0.65),
    0 0 45px rgba(16, 185, 129, 0.25),
    inset 0 0 30px rgba(16, 185, 129, 0.08);
}

.enterprise-hub-preview-card.theme-emerald:hover {
  border-color: rgba(110, 231, 183, 0.85);
  box-shadow:
    0 36px 85px -12px rgba(0, 0, 0, 0.75),
    0 0 65px rgba(16, 185, 129, 0.45),
    inset 0 0 45px rgba(16, 185, 129, 0.15);
}

.enterprise-hub-preview-card.theme-emerald .hub-ambient-glow {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.28) 0%, rgba(5, 150, 105, 0.08) 50%, transparent 70%);
}

.enterprise-hub-preview-card.theme-cyber-dark {
  background: #000000;
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow:
    0 24px 60px -10px rgba(0, 0, 0, 0.65),
    0 0 35px rgba(56, 189, 248, 0.18),
    inset 0 0 25px rgba(56, 189, 248, 0.08);
}

.enterprise-hub-preview-card.theme-cyber-dark:hover {
  border-color: rgba(148, 163, 184, 0.7);
  box-shadow:
    0 36px 85px -12px rgba(0, 0, 0, 0.75),
    0 0 50px rgba(56, 189, 248, 0.3),
    inset 0 0 35px rgba(56, 189, 248, 0.15);
}

/* Crystal-Clear 3D Image Presentation */
.hub-preview-img,
.video-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  z-index: 2;
  filter: drop-shadow(0 0 35px rgba(0, 210, 255, 0.2));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  will-change: transform;
}

.enterprise-hub-preview-card:hover .hub-preview-img,
.video-preview-card:hover .video-preview-img {
  transform: scale(1.035);
  filter: drop-shadow(0 0 45px rgba(0, 210, 255, 0.4));
}

/* Ambient Neon Glow */
.hub-ambient-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 195, 255, 0.25) 0%, rgba(0, 114, 255, 0.08) 50%, transparent 70%);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(25px);
  pointer-events: none;
  z-index: 1;
  animation: hubPulseGlow 4s ease-in-out infinite alternate;
}

@keyframes hubPulseGlow {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.6;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
}



/* Top Header Info */
.hub-card-header {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hub-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hub-ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(5, 15, 30, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 210, 255, 0.4);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #B0E0EF;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 210, 255, 0.2);
}

.hub-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00D2FF;
  box-shadow: 0 0 8px #00D2FF, 0 0 14px #00D2FF;
  animation: hubPulseDot 1.8s infinite;
}

@keyframes hubPulseDot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.75);
    opacity: 0.4;
  }
}

.hub-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 102, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-full);
  padding: 4px 9px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(255, 102, 0, 0.35);
}

/* Background Color Switcher in Header */
.hub-color-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  padding: 4px 8px;
  pointer-events: auto;
  z-index: 5;
}

.hub-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  outline: none;
}

.hub-color-dot:hover {
  transform: scale(1.2);
}

.hub-color-dot.active {
  transform: scale(1.25);
  border-color: #FFFFFF;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.hub-color-dot.dot-sapphire {
  background: linear-gradient(135deg, #00C6FF, #0072FF);
}

.hub-color-dot.dot-violet {
  background: linear-gradient(135deg, #C084FC, #7E22CE);
}

.hub-color-dot.dot-emerald {
  background: linear-gradient(135deg, #34D399, #059669);
}

.hub-color-dot.dot-dark {
  background: linear-gradient(135deg, #64748B, #1E293B);
}

.hub-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hub-ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(5, 15, 30, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 210, 255, 0.4);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #B0E0EF;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 210, 255, 0.2);
}

.hub-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00D2FF;
  box-shadow: 0 0 8px #00D2FF, 0 0 14px #00D2FF;
  animation: hubPulseDot 1.8s infinite;
}

@keyframes hubPulseDot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.75);
    opacity: 0.4;
  }
}

.hub-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 102, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-full);
  padding: 4px 9px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(255, 102, 0, 0.35);
}

/* Play Action Button (Holographic Edition) */
.hub-play-action-btn,
.video-play-action-btn {
  position: absolute;
  bottom: 14px;
  z-index: 4;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-full);
  padding: 6px 18px 6px 7px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(0, 210, 255, 0.25),
    0 4px 12px rgba(249, 115, 22, 0.2);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.hub-play-action-btn:hover,
.enterprise-hub-preview-card:hover .hub-play-action-btn,
.video-play-action-btn:hover,
.video-preview-card:hover .video-play-action-btn {
  transform: scale(1.06) translateY(-2px);
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.45),
    0 0 35px rgba(0, 210, 255, 0.5),
    0 8px 22px rgba(249, 115, 22, 0.4);
}

.hub-play-circle,
.video-play-circle {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B00 0%, #EA580C 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.4);
  flex-shrink: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hub-play-action-btn:hover .hub-play-circle,
.enterprise-hub-preview-card:hover .hub-play-circle {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.7);
}

.hub-play-circle::before,
.video-play-circle::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(234, 88, 12, 0.45);
  animation: playRadarPulse 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes playRadarPulse {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.video-play-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.video-play-label {
  font-size: 0.94rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}

.video-play-sub {
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748B;
  margin-top: 2px;
}

/* Results Content */
.results-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0 32px;
}

.metric-badge-box {
  background: #FAFAFA;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.metric-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metric-val {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--dark-heading);
  line-height: 1.1;
}

.metric-val.text-blue {
  color: var(--primary-blue);
}

.metric-val.text-green {
  color: var(--green);
}

.metric-tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Testimonial Card with Slider Controls */
.testimonial-slider-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-slider-card:hover {
  border-color: rgba(255, 107, 53, 0.25);
  box-shadow: 0 14px 34px rgba(255, 107, 53, 0.08);
}

.slider-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark-heading);
  flex-shrink: 0;
  transition: var(--transition-normal);
  cursor: pointer;
}

.slider-nav-btn:hover {
  background-color: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  transform: scale(1.08);
}

.slider-nav-btn:active {
  transform: scale(0.94);
}

/* Viewport & Scrolling Track */
.testimonial-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
  width: 100%;
}

.testimonial-track {
  display: flex;
  width: 100%;
  transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.testimonial-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-quote {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--dark-sub);
  font-style: italic;
  margin-bottom: 16px;
  min-height: 52px;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
  transition: transform 0.3s ease;
}

.author-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--dark-heading);
}

.author-role {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.testimonial-dots {
  position: absolute;
  right: 6px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 5;
  pointer-events: auto;
}

.testimonial-dot {
  width: 8px;
  height: 8px;
  border-radius: 10px;
  background-color: rgba(15, 23, 42, 0.18);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-dot:hover {
  background-color: rgba(255, 107, 53, 0.5);
}

.testimonial-dot.active {
  width: 22px;
  background-color: var(--primary, #FF6B35);
}

/* ==========================================================================
   INTEGRATIONS SECTION ("CONNECT YOUR ENTIRE STACK" - INFINITE MOVING MARQUEE)
   ========================================================================== */
.integrations-section {
  padding: 80px 0;
  background-color: #FFFFFF;
  overflow: hidden;
}

.integrations-marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  padding: 10px 0 16px;
}

.integrations-marquee-track {
  display: flex;
  width: max-content;
  animation: integrationsMarqueeScroll 26s linear infinite;
  will-change: transform;
}

.integrations-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes integrationsMarqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.integrations-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 9px;
  flex-shrink: 0;
}

.integration-pill-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 28px;
  height: 84px;
  min-width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  transition: var(--transition-normal);
  cursor: pointer;
  flex-shrink: 0;
}

.integration-pill-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.09);
  border-color: #CBD5E1;
}

.pill-more-tag {
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F8FAFC;
}

.more-count {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dark-heading);
  line-height: 1;
}

.more-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ==========================================================================
   POPULAR USE CASES (DEPLOY AI AGENTS)
   ========================================================================== */
.usecases-section {
  padding: 100px 0 90px;
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 5% 15%, rgba(255, 92, 40, 0.035) 0%, transparent 45%),
    radial-gradient(circle at 95% 85%, rgba(14, 165, 233, 0.035) 0%, transparent 45%);
}

.usecases-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 52px;
}

.badge-usecase {
  background: #FFF3EB;
  color: #FF5C28;
  border: 1px solid rgba(255, 92, 40, 0.18);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.usecases-subtitle {
  font-size: 1.05rem;
  color: #64748B;
  line-height: 1.6;
  margin: 14px auto 0;
  max-width: 720px;
}

.usecase-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.usecase-card {
  background: #FFFFFF;
  border: 1.5px solid #F1F5F9;
  border-radius: 20px;
  padding: 26px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
  position: relative;
  cursor: pointer;
  text-align: left;
}

.usecase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.usecase-card.active {
  border-color: #FF5C28;
  box-shadow: 0 12px 30px rgba(255, 92, 40, 0.12);
  transform: translateY(-3px);
}

.usecase-art-wrap {
  width: 96px;
  height: 96px;
  min-width: 96px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.usecase-art-svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.usecase-card:hover .usecase-art-svg {
  transform: scale(1.06);
}

.usecase-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.usecase-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.usecase-desc {
  font-size: 0.88rem;
  color: #64748B;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.usecase-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.usecase-link {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.usecase-link:hover {
  opacity: 0.85;
}

.usecase-link .arrow-text {
  transition: transform 0.2s ease;
}

.usecase-card:hover .usecase-link .arrow-text {
  transform: translateX(4px);
}

.usecase-circle-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.usecase-card:hover .usecase-circle-btn {
  transform: scale(1.08) translateX(2px);
}

/* Palette accents */
.accent-orange {
  color: #FF5C28;
}

.usecase-circle-btn.accent-orange {
  background: #FFF1EB;
  color: #FF5C28;
}

.accent-purple {
  color: #8B5CF6;
}

.usecase-circle-btn.accent-purple {
  background: #F3E8FF;
  color: #8B5CF6;
}

.accent-amber {
  color: #EA580C;
}

.usecase-circle-btn.accent-amber {
  background: #FFEDD5;
  color: #EA580C;
}

.accent-blue {
  color: #0284C7;
}

.usecase-circle-btn.accent-blue {
  background: #E0F2FE;
  color: #0284C7;
}

.accent-green {
  color: #16A34A;
}

.usecase-circle-btn.accent-green {
  background: #DCFCE7;
  color: #16A34A;
}

.accent-teal {
  color: #0891B2;
}

.usecase-circle-btn.accent-teal {
  background: #E0F7FA;
  color: #0891B2;
}

/* Card hover accents based on data-accent */
.usecase-card[data-accent="orange"]:hover,
.usecase-card[data-accent="orange"].active {
  border-color: #FF5C28;
  box-shadow: 0 12px 30px rgba(255, 92, 40, 0.14);
}

.usecase-card[data-accent="purple"]:hover,
.usecase-card[data-accent="purple"].active {
  border-color: #8B5CF6;
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.14);
}

.usecase-card[data-accent="amber"]:hover,
.usecase-card[data-accent="amber"].active {
  border-color: #EA580C;
  box-shadow: 0 12px 30px rgba(234, 88, 12, 0.14);
}

.usecase-card[data-accent="blue"]:hover,
.usecase-card[data-accent="blue"].active {
  border-color: #0284C7;
  box-shadow: 0 12px 30px rgba(2, 132, 199, 0.14);
}

.usecase-card[data-accent="green"]:hover,
.usecase-card[data-accent="green"].active {
  border-color: #16A34A;
  box-shadow: 0 12px 30px rgba(22, 163, 74, 0.14);
}

.usecase-card[data-accent="teal"]:hover,
.usecase-card[data-accent="teal"].active {
  border-color: #0891B2;
  box-shadow: 0 12px 30px rgba(8, 145, 178, 0.14);
}

/* ==========================================================================
   PRICING SECTION
   ========================================================================== */
.pricing-section {
  padding: 90px 0;
  background-color: #FFFFFF;
}

.pricing-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 44px;
  flex-wrap: wrap;
  gap: 20px;
}

.pricing-toggle-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toggle-pill-wrapper {
  background: #E2E8F0;
  border-radius: var(--radius-full);
  padding: 4px;
  display: flex;
}

.billing-btn {
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: var(--transition-normal);
}

.billing-btn.active {
  background: #FFFFFF;
  color: var(--dark-heading);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.discount-badge {
  background-color: #F0FDF4;
  color: #22C55E;
  border: 1px solid #BBF7D0;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

/* 4 Pricing Cards Grid - Compact, Proper 4-Across */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}

.pricing-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  border-color: #CBD5E1;
}

/* Business Popular Plan */
.pricing-card.card-popular {
  border: 2px solid #0284C7;
  box-shadow: 0 10px 28px -4px rgba(2, 132, 199, 0.18);
  background: #FFFFFF;
}

.pricing-card.card-popular:hover {
  box-shadow: 0 16px 36px -4px rgba(2, 132, 199, 0.26);
  border-color: #0284C7;
}

.popular-ribbon {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 750;
  padding: 3px 12px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.35);
  white-space: nowrap;
}

.plan-header {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #F1F5F9;
}

.plan-name {
  font-size: 1.15rem;
  font-weight: 750;
  color: #0F172A;
  margin-bottom: 8px;
}

.plan-price-wrap {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
}

.currency {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0F172A;
  margin-top: 2px;
}

.price-amount {
  font-size: 2.35rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1;
  letter-spacing: -0.02em;
}

.plan-period {
  font-size: 0.76rem;
  color: #64748B;
  margin-top: 5px;
}

.custom-plan-subtitle {
  font-size: 0.82rem;
  color: #64748B;
  line-height: 1.45;
  min-height: 52px;
  margin: 0;
}

.plan-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
  flex: 1;
  padding: 0;
  list-style: none;
}

.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.38;
}

.plan-check {
  color: #10B981;
  font-weight: 800;
  font-size: 0.88rem;
  flex-shrink: 0;
  line-height: 1.2;
}

.plan-cta {
  margin-top: auto;
}

.plan-cta .btn {
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 999px;
  width: 100%;
}

/* ==========================================================================
   PRE-FOOTER CTA BANNER
   ========================================================================== */
.cta-banner-section {
  padding: 60px 0;
  background-color: var(--bg-page, #FFFFFF);
}

.cta-banner-card-box {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 36px -10px rgba(10, 102, 194, 0.12);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.cta-banner-card-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 52px -10px rgba(10, 102, 194, 0.22);
}

.cta-banner-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
  user-select: none;
}

/* Glass Light Gleam / Shimmer across the banner */
.cta-banner-shimmer {
  position: absolute;
  top: -50%;
  left: -70%;
  width: 50%;
  height: 200%;
  background: linear-gradient(105deg,
      transparent 0%,
      rgba(255, 255, 255, 0.05) 30%,
      rgba(255, 255, 255, 0.48) 50%,
      rgba(255, 255, 255, 0.05) 70%,
      transparent 100%);
  transform: rotate(20deg);
  pointer-events: none;
  animation: ctaGleamSweep 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ctaGleamSweep {
  0% {
    left: -70%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  40% {
    left: 140%;
    opacity: 0.8;
  }

  45%,
  100% {
    left: 140%;
    opacity: 0;
  }
}

/* Radar Beacon Pulses on Connection Nodes */
.cta-node-pulse {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0066FF;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 8;
  box-shadow: 0 0 8px #0066FF;
}

.cta-node-pulse::before,
.cta-node-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(0, 102, 255, 0.7);
  animation: ctaRadarPing 2.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.cta-node-pulse::after {
  animation-delay: 1.4s;
}

.cta-pulse-left {
  left: 13.43%;
  top: 21.05%;
}

.cta-pulse-right {
  left: 93.55%;
  top: 35.67%;
}

@keyframes ctaRadarPing {
  0% {
    transform: scale(0.6);
    opacity: 0.95;
    border-color: rgba(0, 102, 255, 0.85);
  }

  100% {
    transform: scale(3.4);
    opacity: 0;
    border-color: rgba(56, 189, 248, 0);
  }
}

.cta-hotspot {
  position: absolute;
  border-radius: 9999px;
  cursor: pointer;
  z-index: 10;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-hotspot-trial {
  left: 31.4%;
  top: 63.3%;
  width: 18.6%;
  height: 14.2%;
}

/* Subtle Breathing Glow Aura for Primary CTA */
.hotspot-glow-aura {
  position: absolute;
  inset: -2px;
  border-radius: 9999px;
  box-shadow: 0 8px 24px -2px rgba(0, 102, 255, 0.35);
  animation: ctaButtonBreathe 2.5s ease-in-out infinite alternate;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

@keyframes ctaButtonBreathe {
  0% {
    box-shadow: 0 6px 16px -2px rgba(0, 102, 255, 0.3);
    opacity: 0.7;
  }

  100% {
    box-shadow: 0 12px 32px 2px rgba(0, 102, 255, 0.65);
    opacity: 1;
  }
}

.cta-hotspot-trial:hover {
  transform: translateY(-2px) scale(1.02);
}

.cta-hotspot-trial:hover .hotspot-glow-aura {
  box-shadow: 0 14px 38px 4px rgba(0, 102, 255, 0.8);
}

.cta-hotspot-expert {
  left: 51.1%;
  top: 63.0%;
  width: 17.8%;
  height: 14.8%;
}

.cta-hotspot-expert:hover {
  transform: translateY(-2px) scale(1.02);
  background: rgba(0, 102, 255, 0.04);
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.35), 0 8px 20px rgba(15, 23, 42, 0.08);
}

.cta-banner-wrapper {
  background: #F4F9FE;
  border: 1px solid rgba(219, 234, 254, 0.9);
  border-radius: 28px;
  padding: 64px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 36px -10px rgba(10, 102, 194, 0.1);
}

.cta-banner-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}

.cta-banner-title {
  font-size: 2.3rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.cta-banner-title .highlight-blue {
  color: #0066FF;
}

.cta-banner-subtitle {
  font-size: 1.05rem;
  color: #64748B;
  margin-bottom: 30px;
}

.cta-banner-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-banner-white {
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 700;
  border: 1.5px solid #0066FF;
}

.btn-banner-white:hover {
  background: #EFF6FF;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 102, 255, 0.15);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background-color: #111827;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 60px 0 32px;
  position: relative;
  z-index: 10;
  color: #F8FAFC;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.3fr;
  gap: 40px 24px;
  padding-bottom: 44px;
  align-items: start;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 16px;
}

.footer-logo-img {
  height: 32px;
  width: auto;
  max-width: 175px;
  object-fit: contain;
  display: block;
}

.footer-tagline {
  font-size: 0.9rem;
  color: #94A3B8;
  line-height: 1.55;
  max-width: 320px;
  margin: 0 0 22px 0;
}

/* Contact List in Brand Column */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
  width: 100%;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.footer-contact-item:not(.static):hover {
  transform: translateX(3px);
}

.contact-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-icon svg {
  width: 13px;
  height: 13px;
}

.contact-icon.phone {
  background: rgba(59, 130, 246, 0.2);
  color: #60A5FA;
}

.contact-icon.whatsapp {
  background: rgba(16, 185, 129, 0.2);
  color: #34D399;
}

.contact-icon.location {
  background: rgba(168, 85, 247, 0.2);
  color: #C084FC;
}

.contact-icon.email {
  background: rgba(249, 115, 22, 0.2);
  color: #FB923C;
}

.contact-details {
  display: flex;
  flex-direction: column;
}

.contact-val {
  font-size: 0.88rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.25;
}

.footer-contact-item:hover .contact-val {
  color: #38BDF8;
}

.contact-lbl {
  font-size: 0.76rem;
  color: #94A3B8;
  line-height: 1.25;
  margin-top: 2px;
}

/* Follow Us */
.footer-follow-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-follow-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

/* Footer Link Columns */
.footer-heading {
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin: 0;
  padding: 0;
}

.footer-links a {
  font-size: 0.84rem;
  color: #94A3B8;
  text-decoration: none;
  display: inline-block;
  transition: color 0.18s ease;
  line-height: 1.35;
}

.footer-links a:hover {
  color: #FFFFFF;
}

.external-tab-arrow {
  display: none !important;
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.social-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #1F2937;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.social-icon:hover {
  background: #374151;
  border-color: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.social-icon svg {
  display: block;
  fill: currentColor;
  stroke: none;
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
}

.social-icon:hover svg {
  transform: scale(1.08);
}

.social-icon.x-twitter svg,
.social-icon.twitter svg {
  width: 12px;
  height: 12px;
}

.social-icon.linkedin svg {
  width: 12px;
  height: 12px;
}

.social-icon.facebook svg {
  width: 11px;
  height: 13px;
}

.social-icon.youtube svg {
  width: 14px;
  height: 11px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copy {
  font-size: 0.85rem;
  color: #64748B;
  margin: 0;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-legal a {
  font-size: 0.85rem;
  color: #94A3B8;
  text-decoration: none;
  transition: color 0.18s;
}

.footer-legal a:hover {
  color: #FFFFFF;
}

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

  .footer-brand-col {
    grid-column: 1 / -1;
  }
}

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

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}


.copyright-text {
  font-size: 0.85rem;
  color: var(--text-muted, #64748B);
  margin: 0;
}

.legal-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.legal-links a {
  font-size: 0.85rem;
  color: var(--text-muted, #64748B);
  text-decoration: none;
  transition: color 0.2s ease;
}

.legal-links a:hover {
  color: var(--primary-blue, #0A66C2);
}

/* ==========================================================================
   INTERACTIVE DEMO VIDEO MODAL
   ========================================================================== */
.demo-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.demo-modal-overlay.active {
  display: flex;
  opacity: 1;
}

.demo-modal-window {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px 22px 18px;
  position: relative;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25);
  animation: modalScaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.demo-modal-window::-webkit-scrollbar {
  width: 5px;
}

.demo-modal-window::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

@keyframes modalScaleUp {
  0% {
    transform: scale(0.92);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 1.35rem;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F1F5F9;
  border: none;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}

.modal-close-btn:hover {
  background: #E2E8F0;
  color: var(--dark-heading);
}

.modal-video-header {
  margin-bottom: 12px;
  padding-right: 28px;
}

.modal-video-header .badge {
  font-size: 0.65rem;
  padding: 2.5px 8px;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.modal-video-header h3 {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--dark-heading);
  margin: 4px 0 3px;
  line-height: 1.3;
}

.modal-video-header p {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin: 0;
}

.modal-screen-player {
  background: var(--dark-accent);
  border-radius: 12px;
  padding: 12px 14px;
  color: #FFFFFF;
  margin-bottom: 14px;
}

.mock-call-interface {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.call-avatar-pulse {
  position: relative;
  width: 48px;
  height: 48px;
}

.call-woman-thumb,
.call-robot-thumb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.call-woman-thumb.speaking {
  animation: pulseSpeakingThumb 0.8s ease-in-out infinite alternate;
  box-shadow: 0 0 16px rgba(21, 159, 227, 0.75);
}

@keyframes pulseSpeakingThumb {
  0% {
    transform: scale(1);
    border-color: var(--primary);
  }

  100% {
    transform: scale(1.08);
    border-color: var(--primary-blue);
  }
}

.call-ring-ping {
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--primary);
  border-radius: 50%;
  animation: pingRing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pingRing {

  75%,
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Modal Voice Toolbar & Simulation Controls */
.modal-voice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 8px;
  flex-wrap: wrap;
}

.voice-btn-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.voice-play-toggle {
  background: var(--gradient-cta);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(21, 159, 227, 0.35);
}

.voice-play-toggle:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
  transform: translateY(-1px);
}

.voice-replay-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.voice-replay-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.voice-live-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.70rem;
  color: #94A3B8;
  font-weight: 600;
}

.voice-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--green);
  animation: pulseDot 1.5s infinite;
}

.voice-status-dot.speaking {
  background-color: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}

.call-status-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  margin-top: -2px;
}

.call-active-badge {
  color: #34D399;
  font-weight: 600;
}

.call-timer {
  color: #94A3B8;
  font-family: monospace;
}

.call-transcript-box {
  background: #1E293B;
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.76rem;
  max-height: 200px;
  overflow-y: auto;
}

.call-transcript-box::-webkit-scrollbar {
  width: 4px;
}

.call-transcript-box::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

.bubble {
  padding: 6px 10px;
  border-radius: 8px;
  line-height: 1.35;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease, border-color 0.25s ease;
  opacity: 0.55;
  border: 1px solid transparent;
}

.bubble p {
  margin: 0;
  font-size: 0.76rem;
}

.bubble:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.bubble.bubble-active {
  opacity: 1 !important;
  transform: scale(1.015);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.25);
}

.bubble.bubble-speaking {
  opacity: 1 !important;
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(21, 159, 227, 0.35);
  border-color: var(--primary);
}

.bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.bubble-voice-icon {
  font-size: 0.65rem;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.bubble:hover .bubble-voice-icon {
  opacity: 1;
  transform: scale(1.15);
}

.bubble-customer {
  background: #334155;
  align-self: flex-start;
  max-width: 88%;
}

.bubble-ai {
  background: rgba(21, 159, 227, 0.18);
  border-left: 3px solid var(--primary);
  align-self: flex-end;
  max-width: 88%;
}

.success-bubble {
  background: rgba(34, 197, 94, 0.18);
  border-left: 3px solid var(--green);
}

.bubble-sender {
  font-size: 0.65rem;
  font-weight: 700;
  color: #94A3B8;
  display: block;
}

.modal-audio-wave {
  width: 100%;
  display: flex;
  justify-content: center;
}

.modal-audio-wave .soundwave-container {
  height: 18px;
  margin: 2px 0 0;
  gap: 2.5px;
}

.modal-audio-wave .wave-bar {
  width: 2.5px;
}

.modal-audio-wave .wave-bar:nth-child(1) {
  height: 5px;
}

.modal-audio-wave .wave-bar:nth-child(2) {
  height: 10px;
}

.modal-audio-wave .wave-bar:nth-child(3) {
  height: 14px;
}

.modal-audio-wave .wave-bar:nth-child(4) {
  height: 8px;
}

.modal-audio-wave .wave-bar:nth-child(5) {
  height: 16px;
}

.modal-audio-wave .wave-bar:nth-child(6) {
  height: 11px;
}

.modal-audio-wave .wave-bar:nth-child(7) {
  height: 6px;
}

.modal-footer-cta {
  text-align: center;
}

.modal-footer-cta .btn {
  padding: 8px 22px;
  font-size: 0.84rem;
}

/* ==========================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-title {
    font-size: clamp(2.4rem, 3.4vw, 3.1rem);
  }

  .section-title {
    font-size: 2rem;
  }

  .results-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .showcase-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }

  .hero-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    max-width: 100%;
  }

  .hero-content {
    width: 440px;
    max-width: 440px;
    flex: 0 0 440px;
    text-align: left;
  }

  .hero-visual-wrapper,
  .hero-telecom-showcase {
    margin-top: 0;
    margin-left: -50px;
    height: auto;
    width: 100%;
    max-width: 580px;
    justify-content: flex-end;
    flex: 1 1 540px;
  }

  .hero-platform-container {
    max-width: 580px;
    margin: 0;
  }

  .hero-stage-composite {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
  }

  .capabilities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .usecase-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pricing-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  .footer-grid {
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1.15fr;
    gap: 36px 24px;
  }
}

@media (max-width: 860px) {
  .hero-grid {
    flex-direction: column;
    gap: 36px;
  }

  .hero-content {
    width: 100%;
    max-width: 520px;
    flex: none;
    text-align: left;
  }

  .hero-visual-wrapper,
  .hero-telecom-showcase {
    margin-top: 20px;
    margin-left: 0;
    width: 100%;
    max-width: 580px;
    justify-content: center;
    flex: none;
  }

  .hero-platform-container {
    max-width: 100%;
    margin: 0 auto;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 28px;
  }

  .footer-brand-col {
    grid-column: 1 / -1;
    max-width: 440px;
    margin-bottom: 8px;
  }
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .site-header {
    height: auto;
  }

  .nav-container {
    height: 64px;
  }

  .hero-section {
    padding: 20px 0 40px;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    background: #FFFFFF;
    border-bottom: 1px solid var(--border-light);
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  }

  .nav-menu.mobile-open {
    display: block;
  }

  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .nav-item-dropdown {
    width: 100%;
  }

  .nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 8px 0;
  }

  .mega-dropdown-menu,
  .resources-mega-menu {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px;
    padding: 20px 16px;
    border-radius: 14px;
    box-shadow: none;
    border: 1px solid #e2e8f0;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .mega-dropdown-menu.is-open,
  .mega-dropdown-menu.show,
  .resources-mega-menu.is-open,
  .resources-mega-menu.show {
    display: block !important;
  }

  .mega-dropdown-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .mega-dropdown-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .mega-footer-actions {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }

  .mega-footer-actions .btn {
    width: 100%;
    text-align: center;
  }

  .mega-title {
    font-size: 1.15rem;
  }

  .mobile-menu-btn {
    display: flex;
  }

  #loginBtn {
    padding: 6px 12px;
    font-size: 0.84rem;
  }

  .hero-title {
    font-size: 2.4rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-stats {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    margin-top: 36px;
  }

  .stat-divider {
    display: none;
  }

  .hero-woman-scene,
  .hero-mascot-scene {
    height: auto;
    max-width: 100%;
  }

  .hero-stage-composite {
    max-width: 100%;
    border-radius: 16px;
  }

  .receptionist-speech-card {
    right: 10px;
    top: 20px;
    max-width: 130px;
    padding: 10px;
  }

  .mascot-speak-badge {
    top: 20px;
    left: 42%;
    font-size: 0.74rem;
    padding: 6px 12px 6px 9px;
  }

  .mascot-speech-bubble {
    width: 95%;
    padding: 8px 12px;
    bottom: -10px;
  }

  .floating-badge {
    padding: 6px 12px;
    font-size: 0.78rem;
  }

  .badge-cloud-phone {
    top: 0;
    left: 10px;
  }

  .badge-video-meetings {
    left: 0px;
    top: 60px;
  }

  .badge-team-messaging {
    bottom: 50px;
    left: 10px;
  }

  .badge-smart-integrations {
    bottom: 8px;
    left: 15px;
  }

  .handwritten-note {
    right: 5%;
    font-size: 1.2rem;
  }

  .showcase-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .mockup-card-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 68px;
    z-index: 20;
  }

  .showcase-split-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .results-metrics-row {
    grid-template-columns: 1fr;
  }

  .capabilities-grid {
    grid-template-columns: 1fr;
  }

  .usecase-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }

  .footer-brand-col {
    grid-column: 1 / -1;
    max-width: 440px;
    margin-bottom: 6px;
  }

  .footer-bottom-flex {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
}

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

  .footer-brand-col {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }

  .usecase-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Global Dynamic Scroll Reveal & Reload Animation System
   ========================================================================== */
.scroll-reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active in-view state */
.scroll-reveal.scroll-revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

.cap-card-v2.scroll-reveal.scroll-revealed:hover {
  transform: translateY(-8px);
}

.usecase-card.scroll-reveal.scroll-revealed:hover {
  transform: translateY(-4px);
}

.pricing-card.scroll-reveal.scroll-revealed:hover {
  transform: translateY(-6px);
}

/* Stagger utility classes */
.scroll-stagger-1 {
  transition-delay: 0.08s;
}

.scroll-stagger-2 {
  transition-delay: 0.16s;
}

.scroll-stagger-3 {
  transition-delay: 0.24s;
}

.scroll-stagger-4 {
  transition-delay: 0.32s;
}

.scroll-stagger-5 {
  transition-delay: 0.40s;
}

.scroll-stagger-6 {
  transition-delay: 0.48s;
}

/* Metric badge pop animation on scroll reveal */
.metric-badge-box.scroll-reveal.scroll-revealed {
  animation: metricBadgePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes metricBadgePop {
  0% {
    transform: scale(0.9) translateY(15px);
    opacity: 0;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   DEDICATED PRICING PAGE STYLING
   ========================================================================== */
.pricing-page-body {
  background-color: #F8FAFC;
}

.pricing-page-hero {
  padding: 50px 0 54px;
  background: radial-gradient(circle at 50% 0%, rgba(2, 132, 199, 0.08) 0%, rgba(254, 116, 62, 0.04) 50%, rgba(255, 255, 255, 0) 80%), #F8FAFC;
  text-align: center;
  position: relative;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.pricing-breadcrumb-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 22px;
}

.pricing-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: #64748B;
  background: #FFFFFF;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.pricing-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.pricing-breadcrumb a svg {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

.pricing-breadcrumb a:hover {
  color: var(--primary);
}

.pricing-breadcrumb .bc-sep {
  color: #CBD5E1;
  font-size: 0.8rem;
}

.pricing-breadcrumb .bc-current {
  color: var(--dark-heading);
  font-weight: 600;
}

.pricing-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(2, 132, 199, 0.08);
  color: var(--primary-blue);
  border: 1px solid rgba(2, 132, 199, 0.25);
  padding: 6px 18px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.pricing-page-title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  color: var(--dark-heading);
  line-height: 1.15;
  letter-spacing: -0.03em;
  max-width: 820px;
  margin: 0 auto 18px;
}

.pricing-page-subtitle {
  font-size: 1.12rem;
  color: var(--dark-sub);
  max-width: 680px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

.pricing-guarantees-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 36px;
}

.pricing-guarantee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark-heading);
  background: #FFFFFF;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.pricing-guarantee-item svg {
  color: #10B981;
}

/* Center billing toggle in hero */
.pricing-hero-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}

.pricing-save-pill {
  background: #DCFCE7;
  color: #15803D;
  border: 1px solid #86EFAC;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: pulsePill 2.5s infinite;
}

@keyframes pulsePill {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* Plan Badges inside cards */
.plan-target-badge {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: block;
}

.pricing-card.card-popular {
  border: 2px solid var(--primary-blue);
  transform: scale(1.02);
  z-index: 2;
  box-shadow: 0 20px 40px -10px rgba(21, 159, 227, 0.25);
}

.pricing-card.card-popular:hover {
  transform: scale(1.04) translateY(-6px);
}

.pricing-card.card-enterprise {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid #CBD5E1;
}

/* Interactive ROI & Team Cost Calculator Section */
.pricing-calc-section {
  padding: 70px 0;
  background: #FFFFFF;
}

.pricing-calc-card {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: var(--radius-xl);
  padding: 48px;
  color: #FFFFFF;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.pricing-calc-card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(21, 159, 227, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.calc-left-title {
  font-size: 1.85rem;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.25;
}

.calc-left-sub {
  color: #94A3B8;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 28px;
}

.calc-slider-wrap {
  margin-bottom: 24px;
}

.calc-slider-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.calc-slider-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #CBD5E1;
}

.calc-user-count-display {
  font-size: 1.35rem;
  font-weight: 800;
  color: #38BDF8;
}

.calc-range-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: var(--radius-full);
  background: #334155;
  outline: none;
  cursor: pointer;
}

.calc-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #38BDF8;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
  border: 2px solid #FFFFFF;
  transition: transform 0.15s ease;
}

.calc-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.18);
}

.calc-range-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #38BDF8;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
  border: 2px solid #FFFFFF;
}

.calc-plan-pills {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.calc-plan-pill {
  flex: 1;
  padding: 10px 14px;
  background: #1E293B;
  border: 1px solid #334155;
  color: #CBD5E1;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.calc-plan-pill:hover,
.calc-plan-pill.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38BDF8;
  color: #38BDF8;
}

.calc-right-summary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  backdrop-filter: blur(10px);
}

.calc-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.calc-metric-row:last-of-type {
  border-bottom: none;
  margin-bottom: 18px;
}

.calc-metric-label {
  font-size: 0.92rem;
  color: #94A3B8;
}

.calc-metric-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #FFFFFF;
}

.calc-metric-value.highlight-green {
  color: #4ADE80;
}

.calc-metric-value.highlight-cyan {
  color: #38BDF8;
  font-size: 2.1rem;
}

.calc-savings-note {
  font-size: 0.8rem;
  color: #94A3B8;
  text-align: center;
  margin-top: 14px;
}

/* Feature Comparison Table Section */
.comparison-section {
  padding: 80px 0;
  background: #F8FAFC;
}

.comparison-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.comparison-table-wrapper {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 860px;
}

.comparison-table th,
.comparison-table td {
  padding: 16px 20px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-subtle);
}

.comparison-table thead th {
  background: #FFFFFF;
  position: sticky;
  top: 68px;
  z-index: 10;
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark-heading);
  border-bottom: 2px solid var(--border-light);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.comparison-table thead th:first-child {
  width: 32%;
  font-size: 1.1rem;
}

.comparison-table thead th:not(:first-child) {
  text-align: center;
  width: 17%;
}

.comp-plan-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.comp-plan-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark-heading);
}

.comp-plan-price {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-blue);
}

.comp-plan-header .btn {
  margin-top: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
}

/* Category header rows */
.table-category-row td {
  background: #F1F5F9;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dark-heading);
  padding: 14px 20px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.feature-title-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.feature-title-name {
  font-weight: 600;
  color: var(--dark-heading);
  font-size: 0.92rem;
}

.feature-title-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.comparison-table td:not(:first-child) {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--dark-sub);
}

.table-check-icon {
  color: #10B981;
  font-size: 1.1rem;
  font-weight: bold;
}

.table-dash-icon {
  color: #94A3B8;
  font-size: 1.2rem;
}

.table-popular-col {
  background: rgba(21, 159, 227, 0.03);
}

/* Add-ons section */
.addons-section {
  padding: 70px 0;
  background: #FFFFFF;
}

.addons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.addon-card {
  background: #F8FAFC;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-normal);
}

.addon-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-blue);
  box-shadow: 0 12px 24px rgba(21, 159, 227, 0.08);
}

.addon-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(21, 159, 227, 0.1);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.addon-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark-heading);
  margin-bottom: 6px;
}

.addon-desc {
  font-size: 0.85rem;
  color: var(--dark-sub);
  line-height: 1.5;
  margin-bottom: 16px;
}

.addon-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark-heading);
}

.addon-price span {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Trust Badges & Testimonials Strip */
.pricing-trust-section {
  padding: 60px 0;
  background: #F8FAFC;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.trust-badges-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 40px;
}

.trust-badge-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.trust-badge-stars {
  color: #F59E0B;
  display: flex;
  gap: 2px;
}

.trust-badge-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark-heading);
}

.pricing-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pricing-review-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review-stars {
  color: #F59E0B;
  margin-bottom: 12px;
  display: flex;
  gap: 2px;
}

.review-quote {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--dark-sub);
  margin-bottom: 16px;
  font-style: italic;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-blue);
  color: #FFFFFF;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.review-author-info h5 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--dark-heading);
  margin: 0;
}

.review-author-info p {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 0;
}

/* FAQ Accordion Section */
.pricing-faq-section {
  padding: 80px 0;
  background: #FFFFFF;
}

.faq-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}

.faq-accordion-list {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-accordion-item {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: #FFFFFF;
  overflow: hidden;
  transition: var(--transition-normal);
}

.faq-accordion-item:hover {
  border-color: #CBD5E1;
}

.faq-accordion-item.active {
  border-color: var(--primary-blue);
  box-shadow: 0 4px 16px rgba(21, 159, 227, 0.08);
}

.faq-accordion-trigger {
  width: 100%;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark-heading);
  transition: color 0.2s ease;
}

.faq-accordion-item.active .faq-accordion-trigger {
  color: var(--primary-blue);
}

.faq-toggle-chevron {
  width: 20px;
  height: 20px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
  color: var(--text-muted);
}

.faq-accordion-item.active .faq-toggle-chevron {
  transform: rotate(180deg);
  color: var(--primary-blue);
}

.faq-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
  padding: 0 24px;
  color: var(--dark-sub);
  font-size: 0.94rem;
  line-height: 1.65;
}

.faq-accordion-item.active .faq-accordion-body {
  max-height: 300px;
  padding: 0 24px 22px;
}

/* Responsive adjustments for Pricing Page */
@media (max-width: 1024px) {
  .addons-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .pricing-calc-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px;
  }
}

@media (max-width: 768px) {
  .pricing-page-hero {
    padding: 100px 0 40px;
  }

  .pricing-guarantees-bar {
    gap: 10px;
  }

  .pricing-guarantee-item {
    font-size: 0.8rem;
    padding: 6px 12px;
  }

  .comparison-table-wrapper {
    border-radius: var(--radius-md);
  }
}

/* ==========================================================================
   Interactive Solutions Hub Tab Section Styles
   ========================================================================== */
.solutions-hub-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #FCFDFE 0%, #F4F8FC 50%, #FCFDFE 100%);
  position: relative;
}

.external-tab-arrow {
  display: none !important;
}

/* Tab Navigation Container */
.solutions-tabs-nav-container {
  display: flex;
  align-items: stretch;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  margin: 40px auto 44px;
  max-width: 1140px;
  gap: 16px;
}

.solutions-nav-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.solutions-group-heading {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #64748B;
  padding: 4px 14px 8px;
  text-transform: uppercase;
}

.solutions-group-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.solutions-nav-separator {
  width: 1px;
  background: var(--border-subtle);
  margin: 6px 0;
}

/* Tab Buttons */
.solutions-nav-btn {
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
}

.solutions-nav-btn:hover {
  background: #F8FAFC;
  border-color: #E2E8F0;
  transform: translateY(-1px);
}

.solutions-nav-btn.active {
  background: #FFFFFF;
  border-color: var(--primary-blue);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.12);
}

.solutions-nav-btn[data-tab="team-messaging"].active {
  border-color: #9333EA;
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.12);
}

.nav-btn-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.solutions-nav-btn:hover .nav-btn-icon-wrap,
.solutions-nav-btn.active .nav-btn-icon-wrap {
  transform: scale(1.08);
}

.nav-btn-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nav-btn-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--dark-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-btn-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Solutions Panels Wrapper */
.solutions-panels-wrapper {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
}

.solution-tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.solution-tab-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Panel Card */
.solution-panel-card {
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  padding: 44px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
}

.solution-panel-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.solution-pillar-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.solution-pillar-badge.badge-comm {
  background: #E0F2FE;
  color: #0284C7;
}

.solution-pillar-badge.badge-collab {
  background: #E0F2FE;
  color: #0369A1;
}

.pillar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.solution-panel-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--dark-heading);
  line-height: 1.25;
  margin-bottom: 16px;
  font-family: 'Space Grotesk', sans-serif;
}

.solution-panel-desc {
  font-size: 1.05rem;
  color: var(--dark-sub);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* 2x2 Capabilities Grid */
.solution-caps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

.solution-cap-item {
  display: flex;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--dark-sub);
  line-height: 1.45;
}

.cap-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #DCFCE7;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Stats Row */
.solution-panel-stats {
  display: flex;
  gap: 28px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 16px 0;
  margin-bottom: 28px;
}

.panel-stat {
  display: flex;
  flex-direction: column;
}

.p-stat-val {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--primary);
  font-family: 'Space Grotesk', sans-serif;
}

.p-stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 1px;
}

/* Action Buttons */
.solution-panel-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.solution-open-tab-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  padding: 12px 22px;
}

.solution-open-tab-cta svg {
  transition: transform 0.2s ease;
}

.solution-open-tab-cta:hover svg {
  transform: translate(2px, -2px);
}

/* Right Column Live Mockups Frame */
.mockup-frame-dark {
  background: #0B132B;
  border-radius: 20px;
  padding: 24px;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  position: relative;
}

.mockup-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.status-indicator-live {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #22C55E;
}

.mockup-badge-pill {
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 20px;
  color: #CBD5E1;
}

/* Softphone Dialer in Home */
.softphone-display-card {
  background: #1C2541;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  margin-bottom: 14px;
}

.softphone-status-text {
  font-size: 0.75rem;
  color: #94A3B8;
  margin-bottom: 2px;
}

.softphone-number-box {
  font-size: 1.35rem;
  font-weight: 700;
  color: #6FFFE9;
  letter-spacing: 1.5px;
}

.softphone-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 200px;
  margin: 0 auto 14px;
}

.keypad-touch {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  cursor: pointer;
  transition: all 0.15s ease;
}

.keypad-touch:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: scale(1.1);
}

.softphone-actions-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}

.btn-circle-call {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.btn-circle-call.green {
  background: #22C55E;
}

.btn-circle-call.red {
  background: #EF4444;
}

.btn-circle-call:hover {
  transform: scale(1.1);
}

.ai-live-transcript-box {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px 12px;
}

.transcript-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: #FBBF24;
  display: block;
  margin-bottom: 2px;
}

.transcript-text {
  font-size: 0.78rem;
  color: #E2E8F0;
  margin: 0;
  line-height: 1.35;
}

/* Video Grid in Home */
.video-grid-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.v-tile-home {
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #1E293B;
  border: 1.5px solid transparent;
}

.v-tile-home.active-speaker {
  border-color: #22C55E;
}

.v-tile-home img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v-tile-tag {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
}

.video-room-dock {
  display: flex;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  padding: 8px;
  border-radius: 12px;
}

.dock-btn {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.dock-btn:hover {
  background: var(--primary-blue);
  transform: scale(1.1);
}

.dock-btn.danger {
  background: #EF4444;
}

/* Chat Mockup in Home */
.chat-mockup-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-thread-box {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 180px;
  overflow-y: auto;
}

.c-msg-row {
  display: flex;
  gap: 8px;
  font-size: 0.8rem;
}

.c-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.c-bubble {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 10px;
  flex: 1;
}

.c-author {
  font-weight: 700;
  font-size: 0.76rem;
  color: #C084FC;
  display: block;
  margin-bottom: 2px;
}

.c-bubble p {
  margin: 0;
  color: #F1F5F9;
  line-height: 1.35;
}

.chat-composer-row {
  display: flex;
  gap: 8px;
}

.c-composer-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  color: white;
  font-size: 0.82rem;
}

.c-composer-btn {
  background: #7C3AED;
  border: none;
  color: white;
  border-radius: 8px;
  padding: 0 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
}

/* Meeting Mockup in Home */
.meeting-agenda-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m-card-item {
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid #64748B;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.m-card-item.active {
  border-left-color: var(--primary-blue);
  background: rgba(2, 132, 199, 0.12);
}

.m-card-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: #FFFFFF;
}

.m-card-sub {
  font-size: 0.74rem;
  color: #94A3B8;
  margin-top: 2px;
}

.btn-m-join {
  background: #22C55E;
  color: white;
  border: none;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-m-join.secondary {
  background: #3B82F6;
}

.ai-meeting-summary-card {
  background: rgba(2, 132, 199, 0.15);
  border-radius: 8px;
  padding: 10px 12px;
}

.ai-sum-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: #38BDF8;
  margin-bottom: 2px;
}

.ai-sum-body {
  font-size: 0.76rem;
  color: #CBD5E1;
  line-height: 1.35;
}

/* File Vault Mockup in Home */
.file-vault-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vault-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 12px;
}

.file-icon-tag {
  font-size: 0.65rem;
  font-weight: 800;
  color: white;
  padding: 3px 6px;
  border-radius: 4px;
}

.f-info {
  flex: 1;
}

.f-name {
  font-weight: 600;
  font-size: 0.82rem;
  color: #FFFFFF;
}

.f-sub {
  font-size: 0.7rem;
  color: #94A3B8;
}

.btn-f-action {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  cursor: pointer;
}

.vault-drop-zone {
  border: 1.5px dashed rgba(2, 132, 199, 0.4);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  background: rgba(2, 132, 199, 0.05);
  cursor: pointer;
}

/* Integrations Hub in Home */
.integrations-grid-hub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.app-sync-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-card-title {
  font-weight: 700;
  font-size: 0.82rem;
  color: white;
}

.app-card-sub {
  font-size: 0.68rem;
  color: #94A3B8;
}

.app-active-tag {
  background: rgba(34, 197, 94, 0.15);
  color: #22C55E;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 700;
}

/* Responsive Breakpoints for Solutions Tab Hub */
@media (max-width: 1024px) {
  .solutions-group-btns {
    grid-template-columns: 1fr;
  }

  .solution-panel-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .solutions-tabs-nav-container {
    flex-direction: column;
    padding: 10px;
  }

  .solutions-nav-separator {
    width: 100%;
    height: 1px;
    margin: 8px 0;
  }

  .solution-panel-card {
    padding: 24px;
  }

  .solution-caps-grid {
    grid-template-columns: 1fr;
  }

  .solution-panel-title {
    font-size: 1.6rem;
  }
}

/* ==========================================================================
   DEDICATED SOLUTION PAGES STANDARDS
   ========================================================================== */
.solution-page-hero {
  padding: 36px 0 64px;
  background: linear-gradient(180deg, #F0F9FF 0%, #FFFFFF 65%, #FFF7ED 100%);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
}

.solution-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: #64748B;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  margin-bottom: 20px;
}

.solution-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.solution-breadcrumb a:hover {
  color: var(--primary);
}

.bc-sep {
  color: #CBD5E1;
  font-size: 0.8rem;
}

.bc-current {
  color: var(--dark-heading);
  font-weight: 600;
}

/* ==========================================================================
   About Us & Contact Sections
   ========================================================================== */

/* About Section */
.about-company-section {
  padding: 96px 0 80px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border-top: 1px solid #E2E8F0;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 84px;
}

.about-header {
  max-width: 820px;
  margin: 0 auto 56px;
}

.about-subtitle {
  font-size: 1.12rem;
  line-height: 1.68;
  color: #64748B;
  margin-top: 14px;
}

.about-story-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
}

.about-story-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-story-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.about-story-desc {
  font-size: 1.02rem;
  line-height: 1.7;
  color: #475569;
}

.about-quote-card {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(2, 132, 199, 0.2);
  border-left: 4px solid var(--primary-blue);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.08);
  position: relative;
}

.about-quote-icon {
  position: absolute;
  top: 6px;
  right: 18px;
  font-size: 2.8rem;
  color: rgba(2, 132, 199, 0.15);
  font-family: Georgia, serif;
  line-height: 1;
}

.about-quote-text {
  font-size: 0.98rem;
  font-style: italic;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 14px;
}

.about-quote-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quote-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FE743E, #0284C7);
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quote-info {
  display: flex;
  flex-direction: column;
  font-size: 0.86rem;
}

.quote-info strong {
  color: #0F172A;
}

.quote-info span {
  color: #64748B;
}

/* About Tech Card (Radar Map Graphic) */
.about-tech-card {
  background: #0B132B;
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 20px 40px -10px rgba(11, 19, 43, 0.35);
  color: #F8FAFC;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tech-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tech-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #38BDF8;
}

.tech-badge-live .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: pulseAnim 2s infinite;
}

.tech-sla-tag {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34D399;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
}

.tech-map-graphic {
  position: relative;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.15) 0%, transparent 70%);
  border-radius: 12px;
  overflow: hidden;
}

.network-radar-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radar-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(56, 189, 248, 0.25);
}

.radar-c1 {
  width: 90px;
  height: 90px;
}

.radar-c2 {
  width: 150px;
  height: 150px;
}

.radar-c3 {
  width: 220px;
  height: 220px;
  border-style: solid;
  border-color: rgba(56, 189, 248, 0.1);
}

.radar-center-hub {
  position: relative;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1E293B;
  border: 2px solid #38BDF8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
}

.radar-logo-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.radar-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #E2E8F0;
  z-index: 6;
}

.radar-node .node-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38BDF8;
  box-shadow: 0 0 8px #38BDF8;
}

.radar-node .node-tag {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
}

.node-us {
  top: 22px;
  left: 32px;
}

.node-eu {
  top: 28px;
  right: 38px;
}

.node-ap {
  bottom: 22px;
  right: 44px;
}

.node-me {
  bottom: 24px;
  left: 40px;
}

.tech-highlights-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: center;
}

.tech-hl-item .hl-num {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: #38BDF8;
}

.tech-hl-item .hl-lbl {
  font-size: 0.72rem;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tech-certs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.cert-pill {
  font-size: 0.74rem;
  font-weight: 600;
  color: #CBD5E1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 12px;
  border-radius: 99px;
}

/* 4 Pillars Grid */
.about-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.about-pillar-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.about-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -5px rgba(15, 23, 42, 0.08);
  border-color: #CBD5E1;
}

.pillar-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.pillar-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
}

.pillar-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #64748B;
}

/* ==================== Contact Hub Section ==================== */
.contact-hub-section {
  padding: 96px 0 88px;
  background: linear-gradient(180deg, #F8FAFC 0%, #F0F9FF 100%);
  border-top: 1px solid #E2E8F0;
  scroll-margin-top: 84px;
}

.contact-header {
  max-width: 820px;
  margin: 0 auto 52px;
}

.contact-subtitle {
  font-size: 1.12rem;
  line-height: 1.68;
  color: #64748B;
  margin-top: 14px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 40px;
  align-items: start;
}

.contact-channels-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.channel-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.channel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.08);
  border-color: #CBD5E1;
}

.channel-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.channel-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.channel-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94A3B8;
  text-transform: uppercase;
}

.channel-primary-val {
  font-size: 1.18rem;
  font-weight: 700;
  color: #0F172A;
  text-decoration: none;
  transition: color 0.2s ease;
}

.channel-primary-val:hover {
  color: var(--primary);
}

.channel-sub-val {
  font-size: 0.85rem;
  color: #64748B;
  line-height: 1.45;
}

.contact-live-badge-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 8px 20px -5px rgba(16, 185, 129, 0.1);
}

.live-status-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #065F46;
  font-size: 0.88rem;
  margin-bottom: 6px;
}

.live-status-header .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: pulseAnim 2s infinite;
}

.contact-live-badge-card p {
  font-size: 0.82rem;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}

/* Contact Form Card */
.contact-form-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.08);
}

.form-card-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
}

.form-card-subtitle {
  font-size: 0.92rem;
  color: #64748B;
  margin-bottom: 24px;
}

.contact-interactive-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.84rem;
  font-weight: 600;
  color: #334155;
}

.required-star {
  color: #EF4444;
}

.form-control-input,
.form-control-select,
.form-control-textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #CBD5E1;
  background: #F8FAFC;
  font-size: 0.92rem;
  color: #0F172A;
  font-family: inherit;
  transition: all 0.2s ease;
}

.form-control-input:focus,
.form-control-select:focus,
.form-control-textarea:focus {
  outline: none;
  background: #FFFFFF;
  border-color: #0284C7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.form-privacy-note {
  font-size: 0.76rem;
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

.form-success-banner {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #065F46;
  font-size: 0.88rem;
  margin-top: 8px;
}

.form-success-banner .success-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #10B981;
  color: white;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.form-success-banner p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: #047857;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
  .about-story-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .about-pillars-grid {
    grid-template-columns: 1fr;
  }

  .form-row-2 {
    grid-template-columns: 1fr;
  }

  .contact-form-card {
    padding: 24px 20px;
  }
}
/* Hub video already contains its own badges and frame: card wraps the video, no empty bars */
.enterprise-hub-preview-card:has(video) { aspect-ratio: auto; height: auto; min-height: 0; padding: 0; align-self: center; }
.enterprise-hub-preview-card:has(video) .hub-card-header { display: none; }
.enterprise-hub-preview-card video.hub-preview-img { width: 100%; height: auto; object-fit: contain; border-radius: inherit; }
.enterprise-hub-preview-card:has(video), .enterprise-hub-preview-card:has(video):hover { transform: none; perspective: none; }
.enterprise-hub-preview-card:has(video):hover video.hub-preview-img { transform: none; }
.results-grid { gap: 48px; }
.results-metrics-row { gap: 14px; margin: 24px 0 24px; }
.metric-badge-box { background: #fff; padding: 16px; box-shadow: 0 4px 14px rgba(15,23,42,.05); }
.metric-tag { font-size: .78rem; line-height: 1.3; }
.enterprise-hub-preview-card:has(video) { box-shadow: 0 18px 44px -12px rgba(0,60,120,.35), 0 0 0 1px rgba(0,210,255,.35); }