/* ============================================
   Layout - Section Styles
   Last updated: 2025-11-20
   ============================================ */

/* ===== NAVIGATION ===== */
/* EXACT FIGMA SPECIFICATIONS - DO NOT CHANGE */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  background: rgba(0, 0, 0, 0.85);
  border-bottom: none;
  height: 72px; /* EXACT: 72px */
  width: 100%;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
  transform: translateY(0);
}

.navbar.navbar-hidden {
  transform: translateY(-100%);
}

.navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: -1;
}

.navbar.scrolled {
  box-shadow: var(--shadow-lg);
}

.navbar-container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 64px; /* EXACT: 64px horizontal */
  height: 72px; /* EXACT: 72px */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Left Section - Logo & Navigation */
.navbar-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.navbar-logo {
  flex-shrink: 0;
  margin-right: 24px; /* EXACT: 24px gap from navigation */
}

.navbar-logo img {
  width: 75px; /* EXACT: 75px */
  height: 19px; /* EXACT: 19px */
  object-fit: contain;
  display: block;
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: 32px; /* EXACT: 32px between links */
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-menu a {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 16px; /* EXACT: 16px */
  font-weight: 400; /* EXACT: Regular */
  line-height: 1.5; /* EXACT: 1.5 */
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 200ms ease;
  position: relative;
}

.navbar-menu a:hover {
  opacity: 0.8;
}

.navbar-menu a.active {
  opacity: 1;
}

/* Megamenu Styles */
.navbar-menu-item-with-mega {
  position: static;
}

.navbar-menu-item-with-mega > a {
  position: relative;
}

.megamenu {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: #ffffff;
  width: 100%;
  padding: 40px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 999;
  margin-top: 0;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12);
}

/* Megamenu visibility is now controlled by JavaScript for delay functionality */
.navbar-menu-item-with-mega > a:hover ~ .megamenu,
.megamenu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Bridge to prevent gap between menu item and megamenu */
.navbar-menu-item-with-mega > a::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
  background: transparent;
  z-index: 998;
  pointer-events: none;
}

.megamenu-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.megamenu-titles-row {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
}

.megamenu-titles-row .megamenu-column-title:first-child {
  flex: 0 0 calc(50% - 24px);
}

.megamenu-titles-row .megamenu-column-title:last-child {
  flex: 0 0 calc(50% - 24px);
}

.megamenu-content-row {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.megamenu-content-row .megamenu-column {
  flex: 1 0 0;
}

.megamenu-column {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}

.megamenu-column-title {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.5;
  color: #0A0B0C;
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.megamenu-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.megamenu-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  margin: 0 -12px;
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 8px;
  min-height: auto;
}

.megamenu-item:hover {
  background: rgba(10, 11, 12, 0.05);
}

.megamenu-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f5ad7;
}

.megamenu-icon svg {
  width: 100%;
  height: 100%;
  stroke: #0f5ad7;
  fill: none;
}

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

.megamenu-item:hover .megamenu-icon svg {
  stroke: #0D4EC0;
}

.megamenu-content {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  line-height: 1.5;
}

.megamenu-item-title {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #0A0B0C;
  margin: 0;
  white-space: pre-wrap;
}

.megamenu-item-subtitle {
  display: none;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #666666;
  margin: 0;
  white-space: pre-wrap;
}

.megamenu-more {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: #0f5ad7;
  text-align: left;
  margin: 16px 0 0 0;
  white-space: pre-wrap;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: auto;
}

.megamenu-more:hover {
  color: #0D4EC0;
  text-decoration: underline;
}

/* Megamenu Footer Section */
.megamenu-footer {
  border-top: 1px solid rgba(10, 11, 12, 0.1);
  margin-top: 32px;
  padding-top: 24px;
  width: 100%;
}

.megamenu-footer-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.megamenu-footer-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.megamenu-footer-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: #0A0B0C;
  margin: 0;
}

.megamenu-footer-description {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #666666;
  margin: 0;
}

.megamenu-footer-button {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #0A0B0C;
  background: rgba(10, 11, 12, 0.05);
  border: none;
  border-radius: 100px;
  padding: 10px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.megamenu-footer-button:hover {
  background: rgba(10, 11, 12, 0.1);
  transform: translateY(-2px);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 15px; /* EXACT: 15px between actions */
  flex-shrink: 0;
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: all var(--transition-base);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu Overlay - Full screen menu */
.mobile-menu-overlay {
  position: fixed;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  background: #0F1012 !important; /* Dark charcoal like Image 2 */
  z-index: 999999 !important;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  visibility: hidden;
  opacity: 1 !important;
  pointer-events: none;
}

.mobile-menu-overlay.active {
  display: flex !important;
  transform: translateX(0);
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Mobile Menu Header - DARK THEME */
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-menu-logo img {
  width: 75px !important; /* Match navbar logo size */
  height: 19px !important; /* Match navbar logo size */
  max-width: 75px !important;
  max-height: 19px !important;
  object-fit: contain;
}

.mobile-menu-close {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: all 0.2s ease;
}

.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-close svg {
  width: 20px;
  height: 20px;
  stroke: #ffffff !important;
}

.mobile-menu-close svg path {
  stroke: #ffffff !important;
}

/* Mobile Menu Navigation Items - APP STYLE sidebar */
.mobile-menu-nav {
  flex: 1;
  padding: 24px 16px;
}

/* Search bar visual placeholder - Image 2 style */
.mobile-menu-nav::before {
  content: 'Search';
  display: flex;
  align-items: center;
  height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin-bottom: 24px;
  padding: 0 16px 0 44px;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.4)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 16px center;
  background-size: 18px;
}

.mobile-menu-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-menu-nav li {
  border-bottom: none;
}

.mobile-menu-nav a, 
.mobile-menu-dropdown-toggle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 14px 16px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  background: transparent;
  border-radius: 14px;
  transition: all 0.2s ease;
  width: 100%;
  border: none;
  cursor: pointer;
}

.mobile-menu-nav a:hover, 
.mobile-menu-dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-primary);
}

.mobile-menu-dropdown.active .mobile-menu-dropdown-toggle {
  background: rgba(255, 255, 255, 0.08);
}

/* Icons for the menu items - purely via CSS */
.mobile-menu-nav a::before,
.mobile-menu-dropdown-toggle::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

/* Services icon */
.mobile-menu-nav a[href*="ser.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' /%3E%3C/svg%3E");
}

/* Industry icon */
.mobile-menu-dropdown-toggle::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4' /%3E%3C/svg%3E");
}

/* Pricing icon */
.mobile-menu-nav a[href*="pricing.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
}

.mobile-menu-nav .menu-chevron {
  width: 18px;
  height: 18px;
  stroke: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  margin-left: auto;
}

/* Mobile Menu Dropdown Content */
.mobile-menu-dropdown-content {
  display: none;
  padding: 8px 0 16px 44px;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  margin-left: 26px;
  margin-top: 4px;
}

.mobile-menu-dropdown.active .mobile-menu-dropdown-content {
  display: block;
}

.mobile-menu-category {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 16px 0 12px 0;
  padding: 0;
}

.mobile-menu-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu-submenu li {
  border-bottom: none;
}

.mobile-menu-submenu a {
  display: block;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mobile-menu-submenu a:hover {
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
}

.mobile-menu-submenu a:hover {
  color: var(--color-primary);
}

.mobile-menu-view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  padding: 16px !important;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: #ffffff !important;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mobile-menu-view-all .menu-chevron {
  width: 18px;
  height: 18px;
  stroke: var(--color-primary);
  margin-left: 0; /* Centered with text */
}

.mobile-menu-view-all:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 90, 215, 0.15);
}

.mobile-menu-view-all:hover .menu-chevron {
  transform: translateX(4px);
  stroke: #ffffff;
}

/* Mobile Menu Footer - Profile Style */
.mobile-menu-footer {
  padding: 24px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-menu-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  color: #ffffff;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.mobile-menu-phone svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.mobile-menu-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mobile-menu-actions .btn-login {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 14px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-menu-actions .btn-register {
  background: var(--color-primary);
  border: none;
  color: #ffffff;
  padding: 14px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(15, 90, 215, 0.2);
}

.mobile-menu-actions .btn-login:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-actions .btn-register:hover {
  background: var(--color-primary-dark);
}

.mobile-menu-phone svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-primary);
}

.mobile-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-menu-actions .btn-login {
  padding: 14px 24px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

.mobile-menu-actions .btn-login:hover {
  color: #ffffff;
}

.mobile-menu-actions .btn-register {
  padding: 14px 24px;
  background: var(--color-primary);
  border: none;
  border-radius: 100px;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mobile-menu-actions .btn-register:hover {
  background: #2563eb;
}

/* Prevent body scroll when menu is open */
body.mobile-menu-open {
  overflow: hidden;
}

/* ===== HERO SECTION ===== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--page-padding);
  overflow: hidden;
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../images/backgrounds/home_page_background.png') no-repeat center center;
  background-size: cover; /* Cover entire section */
  overflow: hidden;
}

/* Gradient overlay at bottom of hero - ultra smooth seamless blend */
.hero-background::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 800px; /* Extra long for imperceptible transition */
  background: linear-gradient(180deg,
    rgba(10,11,12,0) 0%,
    rgba(10,11,12,0.05) 15%,
    rgba(10,11,12,0.1) 25%,
    rgba(10,11,12,0.18) 35%,
    rgba(10,11,12,0.28) 45%,
    rgba(10,11,12,0.4) 55%,
    rgba(10,11,12,0.55) 65%,
    rgba(10,11,12,0.7) 75%,
    rgba(10,11,12,0.85) 85%,
    rgba(10,11,12,0.95) 92%,
    rgba(10,11,12,1) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-container {
  position: relative;
  z-index: 2; /* Above gradient overlay */
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

.hero-content {
  max-width: 768px;
  text-align: center;
}

.hero-title {
  font-size: 72px; /* EXACT: 72px per Figma */
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  line-height: 1.2; /* EXACT: 1.2 per Figma */
  letter-spacing: -0.72px; /* EXACT: -0.72px per Figma */
  color: #ffffff;
  text-align: center;
  margin-bottom: 24px; /* EXACT: 24px gap to description */
}

.hero-subtitle {
  font-size: 18px; /* EXACT: 18px per Figma */
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5; /* EXACT: 1.5 per Figma */
  color: #ffffff;
  text-align: center;
  margin-bottom: 32px; /* EXACT: 32px gap to buttons */
}

.hero-actions {
  display: flex;
  gap: 16px; /* EXACT: 16px gap between buttons */
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

/* Wrapper for Get Started button with dots background */
.btn-get-started-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.btn-get-started-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 83px;
  min-width: 300px;
  background-image: url('../images/dots_1.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* HOME PAGE HERO BUTTONS - EXACT FIGMA SPECIFICATIONS */
/* Primary "Get Started" button - WHITE background */
.hero-actions .btn-primary-large,
.ser-services-header-actions .btn-primary-large {
  background: #ffffff; /* EXACT: WHITE not blue! */
  color: #0a0b0c; /* EXACT: BLACK text */
  border: none;
  padding: 10px 24px; /* EXACT: 10px × 24px */
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  transition: background-color 0.2s ease;
  position: relative;
  z-index: 1;
  width: 200px;
  box-sizing: border-box;
}

.hero-actions .btn-primary-large:hover,
.ser-services-header-actions .btn-primary-large:hover {
  background: #f5f5f5;
  transform: none;
  box-shadow: none;
}

/* Secondary "Book a Demo" button - Transparent white */
.hero-actions .btn-secondary-large,
.ser-services-header-actions .btn-secondary-large {
  background: rgba(255, 255, 255, 0.1); /* EXACT: 10% white opacity */
  color: #ffffff; /* EXACT: WHITE text */
  border: 1px solid transparent;
  padding: 10px 24px; /* EXACT: 10px × 24px */
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  transition: background-color 0.2s ease;
  width: 200px;
  box-sizing: border-box;
}

.hero-actions .btn-secondary-large:hover,
.ser-services-header-actions .btn-secondary-large:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: none;
}

.hero-trust {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.trust-text {
  font-size: var(--text-regular);
  color: var(--color-gray-light);
}

/* ===== FEATURES SECTION ===== */
/* EXACT FIGMA SPECIFICATIONS - Pure Black Background */

.features {
  background-color: #0a0b0c; /* EXACT: Pure black - removed gradients for cleaner blend from hero */
  padding: 112px 64px; /* EXACT: 112px vertical, 64px horizontal */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.features-container {
  max-width: 1280px;
  width: 100%;
  display: flex;
  gap: 80px; /* EXACT: 80px between columns */
  align-items: flex-start;
}

/* Left Column */
.features-left {
  flex: 1;
  min-width: 0;
}

.features-left .tagline {
  font-family: var(--font-body);
  font-weight: 400; /* Regular font weight */
  font-size: 16px;
  line-height: 1.5;
  color: #e7eefb; /* EXACT: Light blue */
  margin-bottom: 16px;
  display: block;
  text-transform: none; /* Override uppercase to show title case */
}

.features-left h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 52px; /* EXACT: 52px per Figma */
  line-height: 1.2;
  letter-spacing: -0.52px; /* EXACT: -0.52px */
  color: #ffffff;
  margin: 0;
  text-align: left;
}

/* 3D Dashboard Image */
.dashboard-image-container {
  margin-top: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dashboard-image {
  max-width: 400px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.dashboard-image:hover {
  transform: translateY(-4px) scale(1.02);
  filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.6));
}

/* Right Column */
.features-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 75px; /* EXACT: 75px between sections */
}

.features-description {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  margin-top: 45px; /* Add space above to align with title */
  text-align: left;
}

.features-description p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px; /* EXACT: 18px */
  line-height: 1.5;
  color: #ffffff;
  margin: 0 0 18px 0;
  text-align: left;
}

.features-description p:last-child {
  margin-bottom: 0;
}

/* Feature Cards Wrapper - Contains both cards */
.features-cards-wrapper {
  width: 100%;
  margin: 0;
}

/* Feature Cards Container - Row layout */
.features-cards-container {
  display: flex;
  gap: 24px; /* EXACT: 24px gap between cards */
  width: 100%;
}

/* Individual Feature Card - Figma Design with Gradient Border on Hover */
.features-cards-container .feature-card {
  flex: 1;
  display: flex;
  gap: 10px; /* EXACT: 10px between icon and content */
  align-items: flex-start;
  padding: 15px 10px; /* EXACT: 15px vertical, 10px horizontal per Figma */
  border-radius: 10px; /* All corners rounded per Figma */
  box-sizing: border-box;
  position: relative;
  background: #0a0b0c; /* Dark background */
  border: 0.5px solid rgba(255, 255, 255, 0.1); /* Subtle border by default */
  box-shadow: none; /* Removed shadow */
  transition: all 0.3s ease;
}

/* Gradient border on hover */
.features-cards-container .feature-card:hover {
  border: 0.5px solid transparent;
  /* Create gradient border using background layers */
  background-image: 
    linear-gradient(#0a0b0c, #0a0b0c), /* Inner background */
    linear-gradient(
      180deg,
      #00021F 0%,
      rgba(187, 42, 67, 0.6) 50%,
      #0054EF 100%
    ); /* Gradient border */
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: none; /* Removed white shadow on hover */
}

/* Remove divider - not needed anymore */
.feature-card-divider {
  display: none;
}

.features-cards-container .feature-card .feature-icon {
  width: 32px; /* EXACT: 32×32px */
  height: 32px;
  flex-shrink: 0;
  margin: 0;
  display: block;
  filter: brightness(0) invert(1); /* Make icons white */
}

.features-cards-container .feature-card .feature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px; /* EXACT: 16px between title and description */
}

.features-cards-container .feature-card h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 22px; /* EXACT: 22px */
  line-height: 1.4;
  letter-spacing: -0.22px; /* EXACT: -0.22px */
  color: #ffffff;
  margin: 0;
}

.features-cards-container .feature-card p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px; /* EXACT: 16px */
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}

/* Buttons Container */
.features-buttons {
  display: flex;
  gap: 24px; /* EXACT: 24px gap between buttons */
  align-items: center;
  margin: 0;
}

.features-buttons .btn-outline-white,
.features-buttons .btn-text-white,
.features-buttons .btn-primary-large,
.features-buttons .btn-secondary-large,
.features-buttons .transform-cta-btn-secondary {
  width: 200px;
  box-sizing: border-box;
}

.features-buttons .btn-primary-large,
.features-buttons .btn-secondary-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
}

/* Button 1: "Get Started" - Perfect oval/pill shape */
.btn-outline-white {
  /* Layout - CRITICAL: inline-flex for natural sizing */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Spacing - CRITICAL: Creates the button size */
  padding: 10px 24px; /* EXACT: 10px vertical, 24px horizontal */

  /* Shape - CRITICAL: 100px for perfect pill */
  border-radius: 100px; /* EXACT: Perfect oval shape */

  /* Background & Border */
  background-color: rgba(10, 11, 12, 0.05); /* EXACT: Very subtle dark background */
  border: 1px solid #ffffff; /* EXACT: White border (NOT 0.5px) */

  /* Text */
  font-family: var(--font-body);
  font-weight: 500; /* EXACT: Medium */
  font-size: 16px; /* EXACT: 16px */
  line-height: 1.5;
  color: #ffffff;
  white-space: nowrap; /* CRITICAL: Prevents text wrapping */

  /* Behavior */
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  text-decoration: none;

  /* Ensure proper sizing */
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;

  /* No fixed dimensions - let content define size */
  width: auto;
  height: auto;
}

.btn-outline-white:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
}

.btn-outline-white:active {
  background-color: rgba(255, 255, 255, 0.15);
  transform: scale(0.98);
}

.btn-outline-white:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Button 2: "Hear a Sample" - Text button with chevron icon */
.btn-text-white {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* EXACT: 8px between text and icon */

  /* Spacing */
  padding: 10px 24px; /* Match benefits-modern-btn-secondary */

  /* Shape */
  border-radius: 100px;

  /* Background & Border */
  background: transparent; /* EXACT: No background */
  border: none; /* EXACT: No border */

  /* Text */
  font-family: var(--font-body);
  font-weight: 500; /* EXACT: Medium */
  font-size: 16px; /* EXACT: 16px */
  line-height: 1.5;
  color: #ffffff;

  /* Behavior */
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  outline: none;
}

.btn-text-white:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-text-white:active {
  opacity: 0.8;
}

.btn-text-white:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Chevron Icon */
.btn-text-white .chevron {
  width: 24px; /* EXACT: 24×24px */
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.btn-text-white .chevron path {
  stroke: #ffffff;
}

.btn-text-white:hover .chevron {
  transform: translateX(4px);
}

/* ===== HOW IT WORKS SECTION ===== */

/* Section Container */
.how-it-works {
  position: relative;
  width: 100%;
  padding: 112px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  overflow: hidden;
}

/* Background Layer */
.background-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Wave Pattern - Background image only */
.wave-pattern {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  min-width: 100%;
}

/* Content Container */
.how-container {
  position: relative;
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  z-index: 1;
}

/* Section Header */
.how-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 768px;
  width: 100%;
  text-align: center;
}

.how-tagline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff; /* Changed from blue to white */
  margin: 0;
}

.how-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.how-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: -0.52px;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

.how-description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

/* Features Container */
.how-features-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.how-features-row {
  display: flex;
  gap: 48px;
  width: 100%;
}

/* Feature Column */
.how-feature-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

/* Feature Icon */
.how-feature-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.how-feature-icon path,
.how-feature-icon circle {
  fill: #ffffff;
  stroke: #ffffff;
}

/* Feature Content */
.how-feature-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.how-feature-title {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.22px;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

.how-feature-description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

/* Actions */
.how-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

.how-actions .btn-outline-white,
.how-actions .btn-primary-large {
  width: 200px;
  box-sizing: border-box;
}

.how-actions .btn-primary-large {
  background: #ffffff;
  color: #0a0b0c;
  border: none;
  padding: 10px 24px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.how-actions .btn-primary-large:hover {
  background: #f5f5f5;
}

/* ===== BENEFITS SECTION - LIGHT THEME ===== */

/* Section Container */
.benefits-section {
  position: relative;
  width: 100%;
  padding: 112px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  overflow: hidden;
}

/* Background Layer - LIGHT */
.benefits-background-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.benefits-bg-color {
  position: absolute;
  inset: 0;
  background-color: #FAFBFC; /* Light off-white background */
}

/* Background Pattern */
.benefits-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.6; /* Increased to 60% so you can see it */
  max-width: none;
  z-index: 0;
}

/* Content Container */
.benefits-container {
  position: relative;
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  z-index: 1;
}

/* Section Header */
.benefits-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 768px;
  width: 100%;
  text-align: center;
}

.benefits-tagline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: #0a0b0c; /* BLACK text for light theme */
  margin: 0;
}

.benefits-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.benefits-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: -0.52px;
  color: #0a0b0c; /* BLACK text for light theme */
  margin: 0;
  text-align: center;
}

.benefits-description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #0a0b0c; /* BLACK text for light theme */
  margin: 0;
  text-align: center;
}

/* Benefits Row - 4 COLUMNS */
.benefits-row {
  display: flex;
  gap: 25px;
  min-height: 320px;
  width: 100%;
}

/* Benefit Column */
.benefit-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

/* Benefit Icon - BLACK */
.benefit-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.benefit-icon path,
.benefit-icon line,
.benefit-icon circle,
.benefit-icon rect {
  stroke: #0a0b0c; /* BLACK */
}

.benefit-icon circle[fill],
.benefit-icon path[fill] {
  fill: #0a0b0c; /* BLACK */
}

/* Brain icon from Figma - invert colors for light background */
.benefit-icon-brain {
  filter: invert(1) brightness(0);
}

/* Benefit Content */
.benefit-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.benefit-title {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.22px;
  color: #0a0b0c; /* BLACK text for light theme */
  margin: 0;
  text-align: center;
}

.benefit-description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #0a0b0c; /* BLACK text for light theme */
  margin: 0;
  text-align: center;
}

/* Actions - Light Theme Buttons */
.benefits-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

/* Get Started Button - Light Theme */
.btn-get-started-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background-color: rgba(10, 11, 12, 0.05); /* Subtle gray tint */
  border: none;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #0a0b0c; /* BLACK text */
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  outline: none;
}

.btn-get-started-light:hover {
  background-color: rgba(10, 11, 12, 0.1);
}

.btn-get-started-light:active {
  background-color: rgba(10, 11, 12, 0.15);
  transform: scale(0.98);
}

/* Hear a Sample Button - Light Theme */
.btn-hear-sample-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #0a0b0c; /* BLACK text */
  cursor: pointer;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  outline: none;
}

.btn-hear-sample-light:hover {
  opacity: 0.7;
}

.btn-hear-sample-light:active {
  opacity: 0.5;
}

/* Chevron - BLACK */
.chevron-dark {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.chevron-dark path {
  stroke: #0a0b0c; /* BLACK */
}

/* ===== AI PERFORMANCE SECTION - DARK THEME ===== */

.ai-performance-section {
  position: relative;
  width: 100%;
  background-color: #0a0b0c;
  padding: 112px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

/* Background Image */
.performance-background-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: left top;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: normal;
}

.performance-container {
  position: relative;
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 80px;
  z-index: 1;
}

.performance-top-content {
  display: flex;
  gap: 80px;
  width: 100%;
  position: relative;
  overflow: visible;
}

.performance-content-left {
  flex: 1;
}

.performance-content-right {
  flex: 1;
}

.performance-title {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -0.44px;
  color: #ffffff;
  margin: 0;
  position: relative;
  z-index: 1;
}

.performance-description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}

.performance-stats-wrapper {
  width: 100%;
}

.performance-stats-row {
  display: flex;
  gap: 48px;
  width: 100%;
}

.performance-stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.performance-stat-item:first-child {
  padding-left: 0;
  border-left: none;
}

.performance-stat-number {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 80px;
  line-height: 1.3;
  color: #ffffff;
  margin: 0;
}

.performance-stat-label {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.22px;
  color: #ffffff;
  margin: 0;
}

/* ===== TRANSFORM YOUR BUSINESS COMMUNICATIONS CTA SECTION ===== */

.cta-transform-section {
  position: relative;
  width: 100%;
  padding: 112px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Background Wrapper */
.cta-background-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Background Base */
.cta-background-base {
  position: absolute;
  inset: 0;
  background-color: #000000;
  z-index: 0;
}

/* Background Image */
.cta-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

/* Background Overlay */
.cta-background-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 2;
  pointer-events: none;
}

/* Container */
.cta-transform-container {
  position: relative;
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  z-index: 1;
}

/* Content Wrapper - Centered */
.cta-transform-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 768px;
  width: 100%;
}

/* Text Content */
.cta-transform-text-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  width: 100%;
}

/* CTA Heading */
.cta-transform-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: -0.52px;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

/* CTA Description */
.cta-transform-description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

/* CTA Actions (Buttons) */
.cta-transform-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

/* CTA Actions (Buttons) */
.cta-transform-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

/* Button: Get Started (Primary - Gradient) */
.btn-cta-get-started {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  background: #ffffff;
  background-image: 
    radial-gradient(circle at 89.6% 17.3%, rgba(205, 175, 250, 0.8) 0%, rgba(205, 175, 250, 0) 60%),
    radial-gradient(circle at 15.4% 26.4%, rgba(247, 203, 191, 0.8) 0%, rgba(247, 203, 191, 0) 60%),
    radial-gradient(circle at 72.5% 100%, rgba(129, 169, 248, 0.8) 0%, rgba(129, 169, 248, 0) 60%),
    radial-gradient(circle at 42.1% 65%, rgba(164, 252, 245, 0.8) 0%, rgba(164, 252, 245, 0) 60%);
  border: 0.25px solid rgba(255, 255, 255, 0.8);
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #0a0b0c; /* Black text */
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  outline: none;
  box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.41);
}

.btn-cta-get-started:hover {
  box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.btn-cta-get-started:active {
  transform: translateY(0);
  box-shadow: 0px 0px 3px 0px rgba(255, 255, 255, 0.3);
}

/* Button: Book a Demo (Secondary - Glass) */
.btn-book-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  background-color: rgba(255, 255, 255, 0.1); /* Glass effect */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  outline: none;
  backdrop-filter: blur(10px);
}

.btn-book-demo:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-book-demo:active {
  background-color: rgba(255, 255, 255, 0.15);
}

/* ===== YOUR TIME IS VALUABLE - EFFICIENCY SECTION ===== */

.efficiency-section {
  position: relative;
  width: 100%;
  background-image: url('../images/backgrounds/efficiency_background.png');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  background-attachment: local;
  padding: 112px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Container */
.efficiency-container {
  position: relative;
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

/* Content Wrapper */
.efficiency-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1280px;
  width: 100%;
}

/* Tagline Wrapper */
.efficiency-tagline-wrapper {
  display: flex;
  align-items: center;
}

/* Tagline */
.efficiency-tagline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: #0f5ad7;
  margin: 0;
}

/* Main Content */
.efficiency-main-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

/* Efficiency Heading (Large) */
.efficiency-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: -0.52px;
  color: #ffffff;
  margin: 0;
  width: 100%;
}

/* Word-by-word reveal animation */
.efficiency-heading .reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.efficiency-heading .reveal-word.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Actions */
.efficiency-actions {
  display: flex;
  gap: 24px;
  align-items: center;
}

/* Get Started Button - White background for dark bg */
.btn-efficiency-get-started {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background-color: #ffffff; /* White background for visibility */
  border: 1px solid #ffffff;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #0a0b0c; /* Black text */
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  outline: none;
}

.btn-efficiency-get-started:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.btn-efficiency-get-started:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
}

/* Decorative 3D Spheres */
.efficiency-decorative-spheres {
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 500px;
  height: 450px;
  pointer-events: none;
  z-index: 2; /* Above the transition overlay */
}

.efficiency-spheres-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== CUSTOMER TRUST TESTIMONIALS SECTION ===== */

.customer-trust-section {
  position: relative;
  width: 100%;
  background-color: #222324; /* Dark charcoal gray */
  padding: 112px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Container */
.trust-container {
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* Section Header */
.trust-section-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
  max-width: 768px;
  margin: 0 auto;
}

.trust-section-title {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: -0.52px;
  color: #ffffff;
  margin: 0;
}

.trust-section-description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}

.trust-description-highlight {
  color: #efac0e;
}

/* Testimonials Wrapper */
.trust-testimonials-wrapper {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
}

/* Testimonials Row */
.trust-testimonials-row {
  display: flex;
  gap: 48px;
  justify-content: center;
  width: 100%;
}

/* Individual Testimonial Column */
.trust-testimonial-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  overflow: hidden;
}

/* Stars Rating */
.trust-stars {
  width: 116px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.trust-stars img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Testimonial Quote */
.trust-testimonial-quote {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.22px;
  color: #ffffff;
  margin: 0;
  text-align: center;
  width: 100%;
}

/* Testimonial Avatar Section */
.trust-testimonial-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 300px;
  width: 100%;
}

/* Avatar Image */
.trust-avatar-image {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

/* Avatar Info */
.trust-avatar-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  text-align: center;
}

.trust-avatar-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}

.trust-avatar-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-avatar-role,
.trust-avatar-company {
  display: block;
}

/* ===== FAQ SECTION ===== */
/* Apply styles to all FAQ sections */
.faq-section,
.ind-faq-section,
.locksmith-section.locksmith-section-dark-alt,
.home-service-section.home-service-section-dark-alt,
.service-faq,
.ser-faqs {
  position: relative;
  width: 100%;
  background-color: #222324;
  padding: 112px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Scroll Animation - Consistent State */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.faq-section.animate-in,
.ind-faq-section.animate-in,
.locksmith-section.locksmith-section-dark-alt.animate-in,
.home-service-section.home-service-section-dark-alt.animate-in,
.service-faq.animate-in,
.ser-faqs.animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Container */
.faq-section-container,
.ser-faq-section-container,
.home-service-container,
.locksmith-container,
.ind-container {
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* FAQ Wrapper - 2 Columns */
.faq-wrapper,
.ser-faq-wrapper,
.ind-faq-content,
.home-service-two-column,
.locksmith-two-column {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 60px;
  width: 100%;
  align-items: flex-start;
}

/* LEFT COLUMN */
.faq-left,
.ser-faq-left,
.ind-faq-title-section,
.home-service-faq-title-section,
.locksmith-faq-title-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.faq-header,
.ser-faq-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.faq-title,
.ser-faq-title,
.ind-faq-heading,
.home-service-heading-left,
.locksmith-heading-left {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: -0.52px;
  color: #ffffff;
  margin: 0;
}

.faq-description,
.ser-faq-description,
.ind-faq-description,
.home-service-description-left,
.locksmith-description-left {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}

.faq-actions,
.ser-faq-actions {
  display: flex;
  gap: 24px;
}

.btn-contact,
.ind-faq-contact-btn,
.home-service-btn-contact,
.locksmith-btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background-color: rgba(10, 11, 12, 0.6);
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  outline: none;
  width: fit-content;
}

.btn-contact:hover,
.ind-faq-contact-btn:hover,
.home-service-btn-contact:hover,
.locksmith-btn-contact:hover {
  background-color: rgba(10, 11, 12, 0.8);
}

/* RIGHT COLUMN - Accordion List */
.accordion-list,
.ind-faq-accordion,
.locksmith-faq-accordion,
.service-faq-accordion,
.ser-faq-accordion-list,
.home-service-faq-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Accordion Item - Unified Across All Pages */
.faq-section .accordion-item,
.ind-faq-item,
.locksmith-faq-item,
.service-faq-item,
.ser-faq-item,
.home-service-faq-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
}

/* Accordion Question (Header) */
.faq-section .accordion-question,
.ind-faq-question,
.locksmith-faq-question,
.service-faq-question,
.ser-faq-question,
.home-service-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease, transform 0.3s ease;
}

.faq-section .accordion-question p,
.ind-faq-question p,
.locksmith-faq-question p,
.service-faq-question p,
.ser-faq-question-text,
.home-service-faq-question p {
  flex: 1;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
  text-align: left;
}

.faq-section .accordion-item:first-child .accordion-question,
.ind-faq-item:first-child .ind-faq-question,
.locksmith-faq-item:first-child .locksmith-faq-question,
.service-faq-item:first-child .service-faq-question,
.ser-faq-item:first-child .ser-faq-question,
.home-service-faq-item:first-child .home-service-faq-question {
  border-top: none;
  padding-top: 0;
}

/* Accordion Icon (Chevron) */
.faq-section .accordion-icon,
.ind-faq-question svg,
.locksmith-faq-question svg,
.service-faq-icon,
.ser-faq-icon,
.home-service-faq-question svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
  transform: rotate(180deg);
}

.faq-section .accordion-item.active .accordion-icon,
.ind-faq-item.active .ind-faq-question svg,
.locksmith-faq-item.active .locksmith-faq-question svg,
.service-faq-item.active .service-faq-icon,
.ser-faq-item.active .ser-faq-icon,
.home-service-faq-item.active .home-service-faq-question svg {
  transform: rotate(0deg);
}

/* Accordion Answer (Content) */
.faq-section .accordion-answer,
.ind-faq-answer,
.locksmith-faq-answer,
.service-faq-answer,
.ser-faq-answer,
.home-service-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              padding 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  background: transparent;
  border: none;
  box-sizing: border-box;
  opacity: 0;
}

.faq-section .accordion-item.active .accordion-answer,
.ind-faq-item.active .ind-faq-answer,
.locksmith-faq-item.active .locksmith-faq-answer,
.service-faq-item.active .service-faq-answer,
.ser-faq-item.active .ser-faq-answer,
.home-service-faq-item.active .home-service-faq-answer {
  max-height: 500px;
  padding-bottom: 16px;
  padding-top: 0;
  opacity: 1;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              padding 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

/* Text slide-up animation for all FAQ answers */
.faq-section .answer-text,
.ind-faq-answer p,
.locksmith-faq-answer p,
.service-faq-answer p,
.ser-faq-answer p,
.ser-faq-answer-text,
.home-service-faq-answer p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
  padding: 0;
  transform: translateY(-8px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, 
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
  opacity: 0;
}

.faq-section .accordion-item.active .answer-text,
.ind-faq-item.active .ind-faq-answer p,
.locksmith-faq-item.active .locksmith-faq-answer p,
.service-faq-item.active .service-faq-answer p,
.ser-faq-item.active .ser-faq-answer p,
.ser-faq-item.active .ser-faq-answer-text,
.home-service-faq-item.active .home-service-faq-answer p {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, 
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

/* ===== FOOTER ===== */

.footer {
  background: #0a0b0c;
  padding: 80px 64px;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
}

.footer-content {
  display: flex;
  gap: 128px;
  margin-bottom: 80px;
  padding-bottom: 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Newsletter Section (Left side) */
.footer-newsletter {
  width: 500px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.newsletter-logo {
  margin-bottom: 8px;
}

.newsletter-logo img {
  height: 21px;
  width: auto;
}

.newsletter-heading {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}

.newsletter-form {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  align-items: flex-start;
}

.newsletter-form input {
  flex: 1 0 0;
  padding: 8px 12px;
  min-height: auto;
  height: auto;
  background: #0A0B0C;
  border: 2px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  font-family: var(--font-body);
}

.newsletter-form input:focus {
  border-color: rgba(255, 255, 255, 0.1);
}

.newsletter-submit-btn {
  padding: 10px 24px;
  min-height: auto;
  height: auto;
  background: rgba(10, 11, 12, 0.05);
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.newsletter-submit-btn:hover {
  background: rgba(10, 11, 12, 0.1);
  border-color: transparent;
}

.newsletter-submit-btn svg {
  display: none;
}

.newsletter-disclaimer {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}

/* Link Columns (Right side) */
.footer-links {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Desktop: Hide dropdown toggle, show content directly */
.footer-dropdown-toggle {
  display: none;
}

.footer-dropdown-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-column h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  margin: 0;
}

.footer-column ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-column ul li {
  padding: 0;
}

.footer-column ul li a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.2s ease;
  display: inline-block;
}

.footer-column ul li a:hover {
  opacity: 0.7;
}

/* Social Links - More specific to override generic link styles */
.social-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.social-links li {
  padding: 0;
}

.social-links li a {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.social-links li a:hover {
  opacity: 0.7;
}

.social-links li a svg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex-shrink: 0;
  flex-grow: 0;
  color: #ffffff;
}

/* Footer Bottom (Copyright and Legal) */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-bottom p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  margin: 0;
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.footer-legal a:hover {
  opacity: 0.7;
}

/* ===== INDUSTRIES GRID SECTION ===== */

.industries-grid-section {
  background: #FFFFFF !important;
  width: 100%;
  padding: 112px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #0A0B0C !important;
}

/* Override base styles for this section */
.industries-grid-section h2,
.industries-grid-section h3 {
  color: #0A0B0C !important;
}

.industries-grid-section p {
  color: #0A0B0C !important;
}

.industries-grid-container {
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: flex-start;
}

/* Section Header */
.industries-grid-header {
  width: 100%;
}

.industries-grid-title-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.industries-grid-tagline-wrapper {
  margin-bottom: 0;
}

.industries-grid-tagline {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: #0A0B0C !important;
  margin: 0;
}

.industries-grid-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: -0.52px;
  color: #0A0B0C !important;
  margin: 0;
}

.industries-grid-highlight {
  color: #0F5AD7 !important;
}

/* Content Grid */
.industries-grid-content {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
}

.industries-grid-row {
  display: flex;
  gap: 32px;
  width: 100%;
}

.industries-grid-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.industries-grid-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.industries-grid-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.industries-grid-card-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.industries-grid-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: -0.28px;
  color: #0A0B0C !important;
  margin: 0;
}

.industries-grid-card-description {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #0A0B0C !important;
  margin: 0;
}

/* CTA Buttons */
.industries-grid-actions {
  display: flex;
  gap: 24px;
  align-items: center;
}

.industries-grid-btn-primary {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #0A0B0C !important;
  background: rgba(10, 11, 12, 0.05) !important;
  border: none;
  border-radius: 100px;
  padding: 10px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.industries-grid-btn-primary:hover {
  background: rgba(10, 11, 12, 0.1);
}

.industries-grid-btn-secondary {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #0A0B0C !important;
  background: transparent !important;
  border: none;
  border-radius: 100px;
  padding: 10px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.industries-grid-btn-secondary svg {
  stroke: #0A0B0C !important;
}

.industries-grid-btn-secondary:hover {
  opacity: 0.7;
}

.industries-grid-btn-secondary svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Responsive Styles */
@media (max-width: 1023px) {
  .industries-grid-section {
    padding: 80px 40px;
  }

  .industries-grid-container {
    gap: 64px;
  }

  .industries-grid-row {
    flex-wrap: wrap;
    gap: 24px;
  }

  .industries-grid-card {
    flex: 1 1 calc(50% - 12px);
    min-width: 280px;
  }

  .industries-grid-heading {
    font-size: 42px;
    letter-spacing: -0.42px;
  }
}

@media (max-width: 767px) {
  .industries-grid-section {
    padding: 60px 24px;
  }

  .industries-grid-container {
    gap: 48px;
  }

  .industries-grid-row {
    flex-direction: column;
    gap: 40px;
  }

  .industries-grid-card {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .industries-grid-heading {
    font-size: 36px;
    letter-spacing: -0.36px;
  }

  .industries-grid-actions {
    flex-direction: column;
    width: 100%;
    gap: 16px;
  }

  .industries-grid-btn-primary,
  .industries-grid-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* ===== BENEFITS MODERN SECTION - CLEAN DESIGN ===== */

.benefits-modern-section {
  background: #FFFFFF;
  width: 100%;
  padding: 112px 64px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Background Decorations */
.benefits-modern-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.benefits-modern-texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/300.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
}

.benefits-modern-gradient {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 60%;
  background: radial-gradient(ellipse at center bottom, rgba(255, 255, 255, 1) 0%, transparent 70%);
  pointer-events: none;
}

/* Content Container */
.benefits-modern-container {
  position: relative;
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

/* Section Header */
.benefits-modern-header {
  max-width: 768px;
  text-align: center;
  margin-bottom: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.benefits-modern-tagline {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #0A0B0C;
  margin-bottom: 16px;
  display: block;
}

.benefits-modern-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: -0.52px;
  color: #0A0B0C;
  margin: 0 0 24px 0;
  text-align: center;
}

.benefits-modern-highlight {
  color: #0F5AD7;
}

.benefits-modern-description {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #0A0B0C;
  margin: 0;
  text-align: center;
  max-width: 768px;
}

/* Four Feature Columns */
.benefits-modern-features {
  display: flex;
  flex-direction: row;
  gap: 25px;
  width: 100%;
  margin-bottom: 48px;
  align-items: flex-start;
}

.benefits-modern-feature-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 320px;
  justify-content: flex-start;
}

.benefits-modern-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  margin-bottom: 24px;
}

.benefits-modern-feature-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.22px;
  color: #0A0B0C;
  margin: 0 0 24px 0;
}

.benefits-modern-feature-description {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #0A0B0C;
  margin: 0;
}

/* CTA Buttons */
.benefits-modern-actions {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

.benefits-modern-btn-primary {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #0A0B0C;
  background: rgba(10, 11, 12, 0.05);
  border: none;
  border-radius: 100px;
  padding: 10px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 200px;
}

.benefits-modern-btn-primary:hover {
  background: rgba(10, 11, 12, 0.1);
  transform: translateY(-2px);
}

.benefits-modern-btn-secondary {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #0A0B0C;
  background: transparent;
  border: 1px solid rgba(10, 11, 12, 0.15);
  border-radius: 100px;
  padding: 10px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  box-sizing: border-box;
  width: 200px;
}

.benefits-modern-btn-secondary:hover {
  background: rgba(10, 11, 12, 0.05);
}

.benefits-modern-btn-secondary svg {
  display: none;
}

/* Responsive Styles */
@media (max-width: 1279px) {
  .benefits-modern-section {
    padding: 80px 40px;
  }

  .benefits-modern-features {
    gap: 20px;
  }

  .benefits-modern-heading {
    font-size: 48px;
    letter-spacing: -0.48px;
  }
}

@media (max-width: 1023px) {
  .benefits-modern-section {
    padding: 80px 40px;
  }

  .benefits-modern-features {
    flex-wrap: wrap;
    gap: 40px;
  }

  .benefits-modern-feature-column {
    flex: 1 1 calc(50% - 20px);
    min-width: 280px;
    min-height: auto;
  }

  .benefits-modern-heading {
    font-size: 42px;
    letter-spacing: -0.42px;
  }
}

@media (max-width: 767px) {
  .benefits-modern-section {
    padding: 60px 24px;
  }

  .benefits-modern-header {
    margin-bottom: 48px;
  }

  .benefits-modern-tagline {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .benefits-modern-heading {
    font-size: 36px;
    letter-spacing: -0.36px;
    margin-bottom: 20px;
  }

  .benefits-modern-description {
    font-size: 16px;
  }

  .benefits-modern-features {
    flex-direction: column;
    gap: 40px;
    margin-bottom: 40px;
  }

  .benefits-modern-feature-column {
    flex: 1 1 100%;
    min-width: 100%;
    min-height: auto;
  }

  .benefits-modern-feature-title {
    font-size: 20px;
    letter-spacing: -0.2px;
    margin-bottom: 16px;
  }

  .benefits-modern-feature-description {
    font-size: 15px;
  }

  .benefits-modern-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    align-items: center;
  }

  .benefits-modern-btn-primary,
  .benefits-modern-btn-secondary {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

/* ===== HEAR A SAMPLE SECTION ===== */

.hear-sample-section {
  background: #ffffff;
  width: 100%;
  padding: 112px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hear-sample-container {
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

/* Section Header */
.hear-sample-header {
  max-width: 768px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.hear-sample-tagline {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: #0a0b0c;
  margin: 0;
}

.hear-sample-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: -0.52px;
  color: #0a0b0c;
  margin: 0;
  text-align: center;
}

.hear-sample-title-highlight {
  color: #0f5ad7;
}

.hear-sample-description {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.hear-sample-description p {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #0a0b0c;
  margin: 0;
  text-align: center;
}

/* Main Card */
.hear-sample-card {
  background: transparent;
  border-radius: 24px;
  box-shadow: 0px 0px 55px 0px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 100%;
  min-height: 600px; /* Altura mínima, pero puede crecer */
  display: flex;
  flex-direction: column;
  overflow: visible; /* Permitir que se vea todo el contenido */
  height: auto; /* Altura automática basada en contenido */
}

/* Hide mobile icons on desktop */
.hear-sample-mobile-icons {
  display: none;
}

.hear-sample-card-content {
  display: flex;
  gap: 30px;
  flex: 1;
  align-items: flex-start; /* Alinear al inicio para que ambos paneles se ajusten */
  min-height: 600px; /* Altura mínima para que coincida con la imagen */
  overflow: visible; /* Permitir que se vea todo el contenido */
  height: auto; /* Altura automática basada en el contenido más alto */
}

/* Left Panel */
.hear-sample-left-panel {
  width: 500px;
  flex-shrink: 0;
  position: relative;
}

.hear-sample-image-container {
  position: relative;
  width: 500px;
  min-height: 600px; /* Altura mínima, pero puede crecer */
  border-radius: 20px;
  overflow: visible; /* Permitir que se vea todo el contenido */
  flex-shrink: 0;
  pointer-events: none;
}

.hear-sample-image-container > * {
  pointer-events: auto;
}

.hear-sample-professional-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  pointer-events: none;
  border-radius: 20px;
}

.hear-sample-professional-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #1e293b;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  margin-bottom: 35px;
  flex-shrink: 0;
}

/* Service Icons Menu */
.hear-sample-service-icons-menu {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 68px;
  height: auto;
  background: transparent;
  border-radius: 20px;
  overflow: visible;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 2px;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.hear-sample-icon-btn {
  position: relative;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 10px;
  outline: none;
  box-sizing: border-box;
}

.hear-sample-icon-btn:nth-child(1) {
  /* First button - no special positioning needed */
}

.hear-sample-icon-btn:nth-child(2) {
  /* Second button - no special positioning needed */
}

.hear-sample-icon-btn:nth-child(3) {
  /* Third button - no special positioning needed */
}

.hear-sample-icon-btn:nth-child(4) {
  /* Fourth button - no special positioning needed */
}

.hear-sample-icon-btn:nth-child(5) {
  /* Fifth button - no special positioning needed */
}

.hear-sample-icon-btn-active {
  background: #848585;
  border: 0.5px solid #ffffff;
  box-shadow: 0px 0px 10px 0px #f4f4f4;
  padding: 10px;
}

.hear-sample-icon-btn-active .hear-sample-icon-img {
  filter: brightness(0) invert(1);
}

.hear-sample-icon-btn:hover:not(.hear-sample-icon-btn-active) {
  background: transparent;
}

.hear-sample-icon-img {
  width: 25px;
  height: 25px;
  display: block;
  transition: filter 0.2s ease;
  object-fit: contain;
  flex-shrink: 0;
}

/* When icon is active, make it white */
.hear-sample-icon-btn-active .hear-sample-icon-img {
  filter: brightness(0) invert(1);
}

/* Right Panel */
.hear-sample-right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 30px;
  justify-content: flex-end; /* Alineado hacia abajo */
  position: relative;
  min-height: 600px; /* Altura mínima para que coincida con la imagen */
  max-height: 600px; /* Altura máxima fija para permitir scroll */
  overflow: hidden; /* Evitar scroll en el panel, solo en el chat */
}

/* Chat Interface */
.hear-sample-chat {
  display: flex;
  flex-direction: column;
  gap: 25px;
  overflow-y: auto; /* Scroll vertical activo */
  overflow-x: hidden;
  flex: 1 1 0; /* Ocupa espacio disponible pero puede encogerse */
  min-height: 0; /* Permite que flex funcione correctamente */
  max-height: calc(100% - 80px); /* Altura máxima: 100% menos espacio del audio player */
  padding: 0; /* Sin padding para permitir scroll completo */
  margin-bottom: 0; /* Sin margen inferior */
  position: relative;
  /* Centrar contenido cuando solo hay la tarjeta de resumen */
  justify-content: center; /* Centrar verticalmente */
  align-items: center; /* Centrar horizontalmente */
  /* Asegurar que el scroll funcione desde el inicio */
  scroll-behavior: smooth;
  /* Ocultar scrollbar pero mantener funcionalidad de scroll */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE y Edge */
}

/* Cuando hay mensajes, alinear hacia arriba */
.hear-sample-chat:has(.hear-sample-message) {
  justify-content: flex-start;
  align-items: stretch;
}

/* Summary Card */
.hear-sample-summary-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0 auto;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  border: none;
  transition: box-shadow 0.3s ease;
}

.hear-sample-summary-card:hover {
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
}

.hear-sample-summary-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hear-sample-summary-section:not(:last-of-type) {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.hear-sample-summary-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: #94a3b8;
  text-transform: uppercase;
  margin: 0;
}

.hear-sample-summary-issue {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  color: #1e293b;
  margin: 0;
}

.hear-sample-summary-actions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hear-sample-summary-actions li {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
  padding-left: 20px;
  position: relative;
  transition: color 0.2s ease;
}

.hear-sample-summary-actions li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #0f5ad7;
}

.hear-sample-summary-actions li:hover {
  color: #0f5ad7;
}

.hear-sample-summary-why {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: #64748b;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border-left: none;
  font-style: italic;
}

.hear-sample-chat::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Gradiente superior para indicar más contenido arriba (máscara como WhatsApp) */
.hear-sample-chat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Mostrar gradiente solo cuando hay scroll disponible arriba */
.hear-sample-chat:not(:first-child)::before {
  opacity: 1;
}

/* Gradiente inferior para indicar más contenido abajo */
.hear-sample-chat::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 2;
  margin-top: -40px;
  display: block;
}

.hear-sample-message {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hear-sample-message-agent {
  align-items: flex-start;
}

.hear-sample-message-client {
  align-items: flex-end;
}

.hear-sample-message-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hear-sample-message-header-right {
  flex-direction: row-reverse;
}

.hear-sample-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hear-sample-avatar-agent {
  background: transparent;
  overflow: hidden;
  position: relative;
}

.hear-sample-avatar-client {
  background: transparent;
  overflow: hidden;
  position: relative;
}

.hear-sample-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hear-sample-message-author {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #848585;
}

.hear-sample-message-bubble {
  padding: 12px;
  border-radius: 16px;
  max-width: 500px;
}

.hear-sample-message-bubble-agent {
  background: #f2f2f2;
  border-radius: 16px;
  border-top-left-radius: 0;
}

.hear-sample-message-bubble-client {
  background: #f2f2f2;
  border-radius: 16px;
  border-top-right-radius: 0;
}

.hear-sample-message-bubble p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #334155;
  margin: 0;
  white-space: pre-wrap;
}

/* Thinking indicator - ChatGPT style dots */
.hear-sample-thinking {
  opacity: 1;
}

.hear-sample-thinking-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}

.hear-sample-thinking-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #848585;
  display: inline-block;
  animation: thinking-dot 1.4s infinite ease-in-out;
}

.hear-sample-thinking-dots span:nth-child(1) {
  animation-delay: 0s;
}

.hear-sample-thinking-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

@keyframes thinking-dot {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Typing animation - letter by letter */
.hear-sample-message-bubble p span {
  display: inline;
}

/* Listening indicator - Lottie animation when client is speaking */
.hear-sample-listening-indicator {
  opacity: 1;
}

.hear-sample-listening-indicator .hear-sample-message-bubble-agent {
  background-color: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hear-sample-lottie-animation {
  width: 60px;
  height: 60px;
  display: block;
  flex-shrink: 0;
}

/* Active message indicator - Inner stroke */
.hear-sample-message.active .hear-sample-message-bubble {
  box-shadow: inset 0 0 0 2px rgba(15, 90, 215, 0.4);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.hear-sample-message.active .hear-sample-message-bubble-agent {
  background: #f2f2f2;
}

.hear-sample-message.active .hear-sample-message-bubble-client {
  background: #f2f2f2;
}

/* Revo Start Notification */
.hear-sample-revo-notification {
  width: 100%;
  align-items: center;
  margin-top: 32px;
  margin-bottom: 24px;
}

.hear-sample-message-bubble-notification {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
  max-width: 400px;
  margin: 0 auto;
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
}

.hear-sample-notification-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.hear-sample-notification-close:hover {
  background: #f1f5f9;
  color: #334155;
}

.hear-sample-notification-header {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.hear-sample-notification-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  overflow: hidden;
}

.hear-sample-notification-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hear-sample-notification-header-text {
  flex: 1;
  padding-top: 4px;
}

.hear-sample-notification-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: #0a0b0c;
  margin: 0 0 6px 0;
}

.hear-sample-notification-description {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #64748b;
  margin: 0;
}

.hear-sample-notification-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0;
  padding-left: 52px;
}

.hear-sample-notification-btn {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hear-sample-notification-btn-primary {
  background: #0F5AD7;
  color: #ffffff;
  border: none;
}

.hear-sample-notification-btn-primary:hover {
  background: #0e4fc5;
  transform: translateY(-1px);
  box-shadow: 0px 4px 12px rgba(15, 90, 215, 0.25);
}

.hear-sample-notification-btn-secondary {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  padding: 10px 20px;
  text-decoration: none;
  min-height: 40px;
}

.hear-sample-notification-btn-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

/* Audio Player */
.hear-sample-audio-player {
  border-top: 1px solid #e2e8f0;
  padding-top: 11px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 0;
  flex-shrink: 0;
}

.hear-sample-play-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  padding: 0;
}

.hear-sample-play-button:hover {
  transform: scale(1.05);
}

.hear-sample-play-icon {
  width: 32px;
  height: 32px;
  display: block;
}

.hear-sample-progress-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hear-sample-time {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
}

.hear-sample-progress-bar {
  flex: 1;
  height: 8px;
  background: #f2f2f2;
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  min-width: 0;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.hear-sample-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 25%;
  background: #0f5ad7;
  border-radius: 9999px;
  pointer-events: none;
}

.hear-sample-progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border: none;
  background: #0f5ad7;
  border-radius: 50%;
  cursor: grab;
  pointer-events: all;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  z-index: 10;
}

.hear-sample-progress-handle:hover {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}

.hear-sample-progress-handle:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.1);
}

.hear-sample-volume-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hear-sample-volume-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.hear-sample-volume-slider {
  width: 96px;
  height: 4px;
  background: #f2f2f2;
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.hear-sample-volume-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 44%;
  background: #0f5ad7;
  border-radius: 9999px;
  pointer-events: none;
}

.hear-sample-volume-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #0f5ad7;
  border-radius: 50%;
  cursor: grab;
  pointer-events: all;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: transform 0.1s ease;
  z-index: 10;
}

.hear-sample-volume-handle:hover {
  transform: translate(-50%, -50%) scale(1.2);
}

.hear-sample-volume-handle:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.1);
}

/* CTA Buttons */
.hear-sample-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

.hear-sample-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: #ffffff;
  background-image: 
    radial-gradient(circle at 89.6% 17.3%, rgba(205, 175, 250, 0.8) 0%, rgba(205, 175, 250, 0) 60%),
    radial-gradient(circle at 15.4% 26.4%, rgba(247, 203, 191, 0.8) 0%, rgba(247, 203, 191, 0) 60%),
    radial-gradient(circle at 72.5% 100%, rgba(129, 169, 248, 0.8) 0%, rgba(129, 169, 248, 0) 60%),
    radial-gradient(circle at 42.1% 65%, rgba(164, 252, 245, 0.8) 0%, rgba(164, 252, 245, 0) 60%);
  border: 1px solid #ffffff;
  border-radius: 100px;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #0a0b0c;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  outline: none;
  box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.41);
  width: 200px;
  box-sizing: border-box;
}

.hear-sample-btn-primary:hover {
  box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.hear-sample-btn-secondary {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #0A0B0C;
  background: transparent;
  border: 1px solid rgba(10, 11, 12, 0.15);
  border-radius: 100px;
  padding: 10px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  box-sizing: border-box;
  width: 200px;
  outline: none;
}

.hear-sample-btn-secondary:hover {
  background: rgba(10, 11, 12, 0.05);
}

/* ===== GET STARTED FORM SECTION ===== */
.get-started-form-section {
  background: #0a0b0c;
  width: 100%;
  padding: 112px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Smooth transition overlay that fades in on scroll */
.get-started-form-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #222324; /* Gray color of next section */
  opacity: var(--transition-opacity, 0);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.1s ease-out;
}

.get-started-form-container {
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.get-started-form-wrapper {
  width: 100%;
  height: 760px;
  display: flex;
  border-radius: 20px;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5);
  position: relative;
  background: #0a0b0c;
  padding: 1px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  filter: blur(8px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.get-started-form-section.animate-in .get-started-form-wrapper {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Stroke drawing animation with glow effect */
.get-started-form-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  background: linear-gradient(to right, #ffffff 0%, #010615 100%);
  padding: 1px;
  box-sizing: border-box;
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  z-index: -1;
  transition: clip-path 1.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.4s ease;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.get-started-form-section.animate-in .get-started-form-wrapper::before {
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition-delay: 0.2s;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
}

.get-started-form-wrapper::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: calc(20px - 1px);
  background: #0a0b0c;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
  overflow: hidden;
}

.get-started-form-section.animate-in .get-started-form-wrapper::after {
  opacity: 1;
  transform: scale(1);
}

.get-started-form-left,
.get-started-form-right {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: inherit;
  overflow: hidden;
}

.get-started-form-section.animate-in .get-started-form-left {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.6s;
}

.get-started-form-right {
  transform: translateX(30px);
}

.get-started-form-section.animate-in .get-started-form-right {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.8s;
}

/* Left Side: Promotional Content */
.get-started-form-left {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px;
  border-radius: 19px 0 0 19px;
  overflow: hidden;
}

.get-started-form-background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 24px 0 0 24px;
  overflow: hidden;
}

.get-started-form-bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.get-started-form-content {
  position: relative;
  z-index: 1;
  width: 450px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.get-started-form-tagline p {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 0;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0%;
  color: #ffffff;
  margin: 0;
}

.get-started-form-heading h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #ffffff;
  margin: 0;
}

.get-started-form-highlight {
  color: #0f5ad7;
}

.get-started-form-description {
  width: 420px;
}

.get-started-form-description p {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.get-started-form-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 450px;
  margin-top: 15px;
}

.get-started-form-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.get-started-form-feature-check-icon {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.get-started-form-feature-item p {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
  flex: 1;
}

/* Right Side: Form */
.get-started-form-right {
  flex: 1;
  background: #0a0b0c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 45px;
  border-radius: 0 19px 19px 0;
  overflow: hidden;
}

.get-started-form-form-wrapper {
  width: 416px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.get-started-form-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

.get-started-form-subtitle {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin: 0;
}

.get-started-form-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
}

.get-started-form-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.get-started-form-row {
  display: flex;
  gap: 15px;
}

.get-started-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  position: relative;
}

.get-started-form-field label {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 19.5px;
  color: rgba(255, 255, 255, 0.8);
}

.get-started-form-field input,
.get-started-form-field select {
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  padding-right: 44px; /* Space for check icon */
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.3);
  outline: none !important;
  transition: color 0.2s ease;
  height: 47px;
  width: 100%;
  box-sizing: border-box;
}

.get-started-form-field input:focus,
.get-started-form-field select:focus {
  outline: none !important;
  box-shadow: none !important;
}

.get-started-form-field input:not(:placeholder-shown) {
  color: #ffffff;
}

.get-started-form-field input:focus {
  color: #ffffff;
}

.get-started-form-field select {
  color: rgba(255, 255, 255, 0.3);
}

.get-started-form-field select:focus,
.get-started-form-field select:not([value=""]) {
  color: #ffffff;
}

.get-started-form-field {
  position: relative;
}

.get-started-form-input-wrapper {
  position: relative;
  border-radius: 12px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
  outline: none;
}

.get-started-form-input-wrapper:focus-within {
  outline: none;
  box-shadow: none;
}

.get-started-form-check-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 2;
  pointer-events: none;
}

.get-started-form-input-wrapper.valid .get-started-form-check-icon {
  opacity: 1;
  visibility: visible;
}

.get-started-form-input-wrapper.focused {
  background: transparent;
  border: none;
  padding: 1px;
  box-sizing: border-box;
  position: relative;
}

.get-started-form-input-wrapper.focused::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background: linear-gradient(to right, #fe009e 0%, #005efe 50%, #01c1e8 100%);
  z-index: -1;
  opacity: 0;
  animation: strokeFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.get-started-form-input-wrapper.focused::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: calc(12px - 1px);
  background: #1a1a1a;
  pointer-events: none;
  z-index: 0;
}

/* Stroke fade in animation */
@keyframes strokeFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.get-started-form-field input:focus,
.get-started-form-field select:focus {
  border-color: transparent;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  position: relative;
  z-index: 1;
}

.get-started-form-field input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.get-started-form-email-wrapper {
  position: relative;
  border-radius: 12px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
  outline: none;
}

.get-started-form-email-wrapper:focus-within {
  background: transparent;
  border: none;
  padding: 1px;
  box-sizing: border-box;
  position: relative;
}

.get-started-form-email-wrapper:focus-within::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background: linear-gradient(to right, #fe009e 0%, #005efe 50%, #01c1e8 100%);
  z-index: -1;
  opacity: 0;
  animation: strokeFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.get-started-form-email-wrapper:focus-within::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: calc(12px - 1px);
  background: #1a1a1a;
  pointer-events: none;
  z-index: 0;
}

.get-started-form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 48px;
  cursor: pointer;
}

.get-started-form-input-wrapper.valid select {
  background-position: right 44px center;
}

.get-started-form-field select option {
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.9);
}

.get-started-form-submit-btn {
  background: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 13px 154px;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 22.5px;
  color: #0a0b0c;
  cursor: pointer;
  transition: opacity 0.2s ease;
  width: 640px;
  max-width: 100%;
  margin-top: 8px;
}

.get-started-form-submit-btn:hover {
  opacity: 0.9;
}

.get-started-form-submit-btn:active {
  opacity: 0.8;
}

/* ===== TRANSFORM CTA SECTION ===== */
.transform-cta-section {
  position: relative;
  width: 100%;
  padding: 112px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: #000000;
  will-change: opacity, transform;
}

.transform-cta-section.animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.transform-cta-section * {
  visibility: visible !important;
}

.transform-cta-section.animate-in * {
  opacity: 1 !important;
  visibility: visible !important;
}

.transform-cta-section.animate-in .transform-cta-heading,
.transform-cta-section.animate-in .transform-cta-description,
.transform-cta-section.animate-in .transform-cta-actions {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

.transform-cta-section.animate-in .transform-cta-actions {
  display: flex !important;
}

/* Stagger animation for content elements */
.transform-cta-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s,
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.transform-cta-section.animate-in .transform-cta-content {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.transform-cta-heading {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s,
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.transform-cta-section.animate-in .transform-cta-heading {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.transform-cta-description {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s,
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
}

.transform-cta-section.animate-in .transform-cta-description {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.transform-cta-actions {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s,
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
}

.transform-cta-section.animate-in .transform-cta-actions {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.transform-cta-background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  visibility: visible !important;
  opacity: 1 !important;
}

.transform-cta-bg-base {
  display: none;
}

.transform-cta-bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.transform-cta-overlay {
  display: none;
}

.transform-cta-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
}

.transform-cta-content {
  max-width: 768px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  text-align: center;
  visibility: visible !important;
  opacity: 1 !important;
}

.transform-cta-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: -0.52px;
  color: #ffffff;
  margin: 0;
}

.transform-cta-description {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}

.transform-cta-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

.transform-cta-actions .transform-cta-btn-primary,
.transform-cta-actions .transform-cta-btn-secondary {
  width: 200px;
  box-sizing: border-box;
}

.transform-cta-btn-primary {
  /* Complex multi-layer radial gradient to match Figma design */
  /* Multiple radial gradients layered to create the soft pastel effect */
  background: 
    /* Layer 1: Light cyan radial (bottom-right) */
    radial-gradient(circle at 100% 100%, rgba(164, 252, 245, 1) 0%, rgba(164, 252, 245, 0) 70%),
    /* Layer 2: Light blue radial (top-right) */
    radial-gradient(circle at 100% 0%, rgba(129, 169, 248, 1) 0%, rgba(129, 169, 248, 0) 70%),
    /* Layer 3: Light lavender radial (center-left) */
    radial-gradient(circle at 20% 50%, rgba(205, 175, 250, 1) 0%, rgba(205, 175, 250, 0) 60%),
    /* Layer 4: Peachy pink radial (top-left) */
    radial-gradient(circle at 0% 0%, rgba(247, 203, 191, 1) 0%, rgba(247, 203, 191, 0) 70%),
    /* Layer 5: Base white */
    #ffffff;
  border: 0.25px solid #ffffff;
  border-radius: 100px;
  padding: 10px 24px;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.41);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 0;
}

/* Ensure text is always on top and fully opaque black */
.transform-cta-btn-primary {
  color: #000000 !important;
  font-weight: 500;
}

/* Text content should be above all overlays */
.transform-cta-btn-primary > * {
  position: relative;
  z-index: 10;
  color: #000000 !important;
}

/* Additional overlay layers for more depth and richness */
/* These are behind the text (z-index: 1) - text is automatically on top */
.transform-cta-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Additional peachy pink overlay for warmth */
  background: radial-gradient(circle at 10% 20%, rgba(247, 203, 191, 0.6) 0%, rgba(247, 203, 191, 0) 50%);
  border-radius: 100px;
  z-index: 0;
  pointer-events: none;
}

.transform-cta-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Additional blue overlay for cool tones */
  background: radial-gradient(circle at 90% 30%, rgba(129, 169, 248, 0.5) 0%, rgba(129, 169, 248, 0) 50%);
  border-radius: 100px;
  z-index: 0;
  pointer-events: none;
}

.transform-cta-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0px 4px 12px 0px rgba(255, 255, 255, 0.5);
}

.transform-cta-btn-primary:hover::before {
  opacity: 0.8;
}

.transform-cta-btn-primary:hover::after {
  opacity: 0.7;
}

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

.transform-cta-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 100px;
  padding: 10px 24px;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.transform-cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}

.transform-cta-btn-secondary:active {
  background: rgba(255, 255, 255, 0.1);
}

.hear-sample-btn-secondary svg {
  display: none;
}