/* Universalsbsssesssssssssssss */
.section-header h3 {
  margin-bottom: 1rem;
}
/* s ss*/
.section-header p {
  font-size: 1.25rem;
  color: var(--gray-600);
}

.section-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Backgrouds */

/* 1. Background 1: Radial gradient backgrounds */
.bg-radial-purple {
  background: #0B0B0F;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(168, 85, 247, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(147, 51, 234, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 16px 32px;
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 9999px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--magenta));
  color: white;
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.3);
}

.btn-primary:hover {
  box-shadow: 0 0 60px rgba(139, 92, 246, 0.5);
  transform: translateY(-2px);
}

.btn-secondary {
  background: white;
  color: var(--gray-700);
  border: 2px solid #e5e7eb;
}

.btn-secondary:hover {
  border-color: #9ca3af;
}

/* Gradients */
.gradient-bg {
  background: linear-gradient(135deg, #A855F7, #9333EA);
}

.gradient-text {
  background: linear-gradient(135deg, #A855F7, #9333EA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* SECTION 1: Top Banner START */
.top-banner {
  background: linear-gradient(135deg, #7c3aed, #db2777);
  border-bottom: 1px solid rgba(168, 85, 247, 0.3);
  color: #FFFFFF;
  text-align: center;
  padding: 12px 24px;
  font-size: 0.875rem;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 1000 !important;
  transition: all 0.3s ease;
}

.top-banner-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Close Button */
.top-banner-close {
  position: absolute;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  opacity: 0.8;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.top-banner-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

/* Link Styling */
.top-banner-link {
  text-decoration: none;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.top-banner-countdown {
  font-family: monospace;
  font-variant-numeric: tabular-nums;
}

/* Top Banner Responsive Fix */
@media (max-width: 640px) {

  .top-banner {
    font-size: 0.75rem;
    padding: 10px 16px;
    position: relative;
    z-index: 39;
  }

  .top-banner>div {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  .top-banner a {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* Make the close button fit mobile */
  .top-banner button {
    right: 8px !important;
    top: 8px !important;
    transform: scale(0.85);
  }
  #navbar {
    top: 0 !important;
    z-index: 50 !important;
  }
}

/* SECTION 1: Top Banner END*/

/* SECTION 2: Navbar START*/

/* Navbar Base */
#navbar {
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 47px;
  z-index: 40 !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navbar Container */
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  transition: padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease;
  animation: navFadeIn 0.6s ease;
  z-index: 101;
}

.nav-logo:hover {
  opacity: 0.85;
}

.nav-logo img {
  height: 3.25rem;
  width: auto;
  display: block;
}

/* Desktop Navigation Menu */
.nav-menu {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-menu ul {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  animation: navFadeIn 0.6s ease backwards;
}

.nav-menu li:nth-child(1) {
  animation-delay: 0.1s;
}

.nav-menu li:nth-child(2) {
  animation-delay: 0.2s;
}

.nav-menu li:nth-child(3) {
  animation-delay: 0.3s;
}

.nav-menu li:nth-child(4) {
  animation-delay: 0.4s;
}

/* Navigation Links */
.nav-menu a {
  color: #FFFFFF;
  font-weight: 400;
  font-size: 1rem;
  transition: all 0.3s ease;
  position: relative;
  padding: 0.5rem 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: 9999px;
  display: block;
}

.nav-menu a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 9999px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-menu a:hover::before {
  opacity: 1;
}

.nav-menu a:hover {
  color: #FFFFFF;
}

/* Active State */
.nav-menu a.active {
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
}

/* .nav-menu a.active::after {
  content: '';
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  background: #8B5CF6;
  border-radius: 50%;
} */

/* Desktop Free Tools Mega Dropdown */
.nav-dropdown-parent {
  position: relative;
}

.nav-dropdown-trigger {
  display: flex !important;
  align-items: center;
  gap: 4px;
}

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

.nav-dropdown-parent:hover .nav-dropdown-arrow {
  transform: rotate(180deg);
}

/* Single column dropdown (Features) */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(13, 13, 18, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 8px;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-dropdown-parent:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.15s ease;
  display: block;
  white-space: nowrap;
  text-decoration: none;
}

.nav-dropdown a:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.04);
}

.nav-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 16px;
  min-width: 320px;
}

.nav-teams-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(96, 165, 250, 0.15));
  color: #a78bfa;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}


.nav-soon-badge {
  display: inline-block;
  background: rgba(234, 179, 8, 0.15);
  color: #FBBF24;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(234, 179, 8, 0.3);
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.nav-new-badge {
  display: inline-block;
  background: rgba(34, 197, 94, 0.15);
  color: #4ADE80;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(34, 197, 94, 0.3);
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* Multi-column mega dropdown (Free Tools) */
.nav-mega-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(13, 13, 18, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px 24px;
  min-width: 560px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 100;
}

.nav-dropdown-parent:hover .nav-mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

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

.nav-mega-grid--two-col {
  grid-template-columns: repeat(2, 1fr);
}

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

.nav-mega-dropdown a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 400;
  padding: 6px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
  display: block;
  white-space: nowrap;
}

.nav-mega-dropdown a::before {
  display: none;
}

.nav-mega-dropdown a:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.04);
}

/* Desktop Navigation Actions */
.nav-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  animation: navFadeIn 0.6s ease 0.5s backwards;
}

/* Language Switcher */
.nav-lang-switcher {
  position: relative;
}

.nav-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
}

.nav-lang-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.nav-lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  flex-direction: column;
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 6px;
  min-width: 170px;
  width: max-content;
  z-index: 9999;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: navLangFadeIn 0.15s ease;
}

@keyframes navLangFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.nav-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
  width: 100%;
}

.nav-lang-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-lang-active {
  color: #a78bfa;
  font-weight: 600;
  background: rgba(167, 139, 250, 0.08);
}

@media (max-width: 768px) {
  .nav-lang-switcher {
    display: none;
  }
}

/* Mobile Language Switcher */
.nav-mobile-lang {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 24px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-mobile-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s;
}

.nav-mobile-lang-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-mobile-lang-active {
  background: rgba(167, 139, 250, 0.1);
  color: #a78bfa;
  font-weight: 600;
}

/* Sign In Link */
.nav-signin {
  color: #FFFFFF;
  font-weight: 400;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.nav-signin::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.nav-signin:hover::before {
  transform: translateX(100%);
}

.nav-signin:hover {
  color: #FFFFFF;
  filter: brightness(1.15);
  transform: translateY(-1px);
}

/* CTA Button */
.nav-cta {
  background: linear-gradient(135deg, #A855F7, #9333EA);
  color: #FFFFFF;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
}

.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.nav-cta:hover::before {
  transform: translateX(100%);
}

.nav-cta:hover {
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6);
  transform: translateY(-1px);
  filter: brightness(1.15);
}

/* Locale override for longer nav text (ES, FR, PT-BR) */
.nav-locale-long .nav-menu a {
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
}

.nav-locale-long .nav-signin {
  font-size: 0.8125rem;
}

.nav-locale-long .nav-cta {
  font-size: 0.875rem;
}

/* Extra reduction for ES and PT-BR */
.nav-locale-xlong .nav-menu a {
  font-size: 0.875rem;
}

/* Further reduction for ES */
.nav-locale-es .nav-menu a {
  font-size: 0.8125rem;
}

/* Darker background on scroll */
#navbar.scrolled {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Reduced padding on scroll - DESKTOP ONLY */
@media (min-width: 769px) {
  #navbar.scrolled .nav-container {
    padding: 0.75rem 0 !important;
  }
}

/* Navbar when mobile menu is open - hide it */
#navbar.mobile-menu-open {
  opacity: 0;
  pointer-events: none;
  z-index: -1 !important;
}

/* Hide top banner when mobile menu is open */
body:has(.nav-mobile-dropdown.active) .top-banner {
  opacity: 0;
  pointer-events: none;
}

/* ===================================
   MOBILE DROPDOWN MENU
   =================================== */

/* Hamburger Button */
.nav-hamburger {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 101;
  position: relative;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
}

.nav-hamburger span {
  width: 24px;
  height: 2px;
  background: #FFFFFF;
  transition: all 0.3s ease;
  border-radius: 2px;
  display: block;
  position: absolute;
}

.nav-hamburger span:nth-child(1) {
  top: 12px;
}

.nav-hamburger span:nth-child(2) {
  top: 19px;
}

.nav-hamburger span:nth-child(3) {
  top: 26px;
}

/* Hamburger Animation to X */
.nav-hamburger.active span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}

.nav-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.active span:nth-child(3) {
  top: 19px;
  transform: rotate(-45deg);
}

/* Mobile Dropdown */
.nav-mobile-dropdown {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(11, 11, 15, 0.98), rgba(11, 11, 15, 0.95));
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  z-index: 100;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  padding-top: 80px;
  /* Space for navbar */
  pointer-events: none;
  /* Don't block clicks when closed */
}

.nav-mobile-dropdown.active {
  opacity: 1;
  transform: translateY(0);
  padding: 80px 0 2rem 0;
  pointer-events: auto;
  /* Allow clicks when open */
}

/* Mobile Menu Close Button */
.nav-mobile-close {
  position: fixed;
  top: 24px;
  /* Banner + nav padding + hamburger padding - adjustment */
  right: calc((100vw - 1200px) / 2 + 24px);
  /* Viewport centering + container padding */
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 101;
  padding: 0.5rem;
}

.nav-mobile-close:hover {
  opacity: 0.7;
}

.nav-mobile-close svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 1248px) {
  .nav-mobile-close {
    right: 24px;
  }
}

/* Mobile Menu List */
.nav-mobile-dropdown>ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Mobile Menu Items */
.nav-mobile-item {
  list-style: none;
  margin-bottom: 0.25rem;
}

/* Regular Mobile Links */
.nav-mobile-link {
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  display: block;
  padding: 0.875rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.nav-mobile-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Dropdown Toggle Button */
.nav-mobile-toggle {
  width: 100%;
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: left;
}

.nav-mobile-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Chevron Icon */
.nav-mobile-chevron {
  transition: transform 0.3s ease;
  color: #9CA3AF;
  flex-shrink: 0;
}

.nav-mobile-item.active .nav-mobile-chevron {
  transform: rotate(180deg);
}

/* Submenu */
.nav-mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.nav-mobile-item.active .nav-mobile-submenu {
  max-height: 1200px;
}

/* Nested Accordion */
.nav-mobile-nested {
  margin-bottom: 0.5rem;
}

.nav-mobile-nested:last-child {
  margin-bottom: 0;
}

/* Nested Toggle Button */
.nav-mobile-nested-toggle {
  width: 100%;
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: left;
}

.nav-mobile-nested-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Small Chevron for Nested Items */
.nav-mobile-chevron-small {
  transition: transform 0.3s ease;
  color: #9CA3AF;
  flex-shrink: 0;
}

.nav-mobile-nested.active .nav-mobile-chevron-small {
  transform: rotate(180deg);
}

/* Nested Submenu */
.nav-mobile-nested-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 1rem;
}

.nav-mobile-nested.active .nav-mobile-nested-submenu {
  max-height: 600px;
}

/* Nested Submenu Links */
.nav-mobile-nested-submenu a {
  display: block;
  padding: 0.625rem 1.5rem;
  margin-bottom: 0.125rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
  color: #E5E7EB;
  font-size: 0.875rem;
  font-weight: 400;
}

.nav-mobile-nested-submenu a:hover {
  background: rgba(168, 85, 247, 0.1);
  color: #A855F7;
}

/* Mobile Menu Actions */
.nav-mobile-actions {
  margin-top: 1rem;
  padding: 0 1.5rem;
}

.nav-mobile-actions .nav-cta {
  text-align: center;
  width: 100%;
  display: block;
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 1024px) {
  .nav-menu {
    gap: 0.25rem;
  }
}

@media (max-width: 768px) {

  /* Hide desktop menu */
  .nav-menu {
    display: none;
  }

  .nav-actions {
    display: none;
  }

  /* Show mobile elements */
  .nav-hamburger {
    display: flex;
  }

  .nav-mobile-dropdown {
    display: block;
  }

  .nav-logo img {
    height: 2rem;
  }
}

/* SECTION 2: Navbar END*/

/* SECTION 3: Hero START*/
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 162px 0 40px; /* 106px behind-the-pill compensation + 56px breathing room to the badge */
  position: relative;
  overflow: hidden;

  background: #0B0B0F;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(168, 85, 247, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(147, 51, 234, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}

/* Mobile: the capsule is shorter (66px of wrapper vs 106px on desktop), and the gap
   to the creator badge is cut ~30% - 90px down to 62px (Adam, 2026-08-20). */
@media (max-width: 1023px) {
  .hero { padding-top: 128px; }
}


/* Glow Background */
.hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.1), transparent 70%);
  z-index: 0;
}

/* Dot Pattern */
.hero-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 0;
}

/* Content Wrapper */
.hero-container {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.2);
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  margin-bottom: 2rem;
  backdrop-filter: blur(10px);
}

.hero-badge span {
  color: #E5E7EB;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Title + Subtitle */
.hero-title {
  font-size: clamp(3.5rem, 7vw, 5rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #FFFFFF;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: #9CA3AF;
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

/* Buttons */
.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.btn {
  padding: 1rem 2rem;
  border-radius: 9px;
  font-weight: 600;
  font-size: 1.125rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary {
  background: rgba(168, 85, 247, 0.2);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: white;
  box-shadow: 0 8px 32px rgba(168, 85, 247, 0.2);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

/* Play Icon */
.play-icon {
  width: 20px;
  height: 20px;
}

/* Screenshot */
.demo-screenshot-container {
  margin-top: 10px;
}

.screenshot-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  animation: fadeInUp 1s ease 0.8s backwards;
}

.screenshot-glow {
  position: absolute;
  inset: -20px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(147, 51, 234, 0.2));
  border-radius: 24px;
  filter: blur(60px);
  opacity: 0.5;
}

.screenshot-frame {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.screenshot-img {
  width: 100%;
  display: block;
}

/* Mobile */
@media (max-width: 768px) {
  /* Reorder hero sections on mobile - screenshot first, then buttons */
  .hero-content {
    display: flex;
    flex-direction: column;
  }

  .demo-screenshot-container {
    order: 1;
    margin-bottom: 2rem;
  }

  .hero-buttons {
    order: 2;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-badge {
    padding: 0.5rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 0.75rem;
    text-align: center;
    justify-content: center;
  }

  .hero-badge span {
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.4;
  }

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

/* SECTION 3: Hero END*/

/* SECTION 4: How it Works Start*/

/* Section Container */
#how-it-works {
  background: #0B0B0F;
  padding: 80px 0;
  position: relative;
  overflow: visible;
}

/* Section Header */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h3 {
  font-size: 3rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
}

.section-header p {
  font-size: 1.25rem;
  color: #9CA3AF;
  line-height: 1.8;
}

/* Workflow Grid */
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
  overflow: visible;
}

.workflow-grid>div {
  position: relative;
  overflow: visible;
}

/* Workflow Step Card */
.workflow-step {
  margin-top: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1.5rem;
  padding: 2.5rem 1.5rem 1.5rem 1.5rem;
  text-align: center;
  min-height: 440px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37), inset 0 2px 2px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: visible;
  position: relative;
}

/* Glass Shimmer Effect */
.workflow-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.07) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: glass-shimmer 4s ease-in-out infinite;
  border-radius: 1.5rem;
  pointer-events: none;
  z-index: 1;
}

.workflow-step:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(168, 85, 247, 0.3), inset 0 2px 2px rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Step Numbers */
.step-number {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.25rem;
  z-index: 30;
}

.step-number--blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
}

.step-number--purple {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

.step-number--green {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
}

/* =========================================================
 STEP 1: FORMAT GRID
========================================================= */

.format-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 0;
  margin-bottom: 0.75rem;
  flex: 1;
  align-content: center;
  position: relative;
  z-index: 2;
}

.format-option {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.format-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(59, 130, 246, 0.3);
  transform: scale(1.02);
}

.format-option--selected {
  background: rgba(59, 130, 246, 0.15);
  border: 2px solid rgba(59, 130, 246, 0.5);
}

a.format-option {
  text-decoration: none;
  color: inherit;
}

/* Social Proof Bar */
.social-proof-bar {
  padding: 3rem 0 0;
}

.social-proof-bar__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  max-width: 700px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.06));
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 1.25rem;
  padding: 1.75rem 0;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.06), inset 0 1px 0 rgba(255,255,255,0.03);
}

.social-proof-bar__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.social-proof-bar__number {
  font-size: 2rem;
  font-weight: 800;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.social-proof-bar__label {
  font-size: 0.8rem;
  color: #6B7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.social-proof-bar__divider {
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, transparent, rgba(139, 92, 246, 0.3), transparent);
}

@media (max-width: 640px) {
  .social-proof-bar__inner {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
  }
  .social-proof-bar__divider--desktop {
    display: none;
  }
  .social-proof-bar__stat {
    flex-direction: row;
    gap: 0.75rem;
  }
  .social-proof-bar__number {
    font-size: 1.5rem;
  }
}

.format-icon {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
}

.format-name {
  color: #e5e7eb;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
}

/* =========================================================
 STEP 2: AI TOOLS STACK
========================================================= */

.ai-tools-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.5rem 0;
  margin-bottom: 0.75rem;
  flex: 1;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.ai-tool {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.3s ease;
}

.ai-tool:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(139, 92, 246, 0.3);
}

.ai-tool__icon {
  font-size: 1.25rem;
}

.ai-tool__label {
  color: #e5e7eb;
  font-size: 0.875rem;
  font-weight: 500;
  flex: 1;
}

.ai-tool__toggle {
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  position: relative;
  transition: background 0.3s ease;
}

.ai-tool__toggle:has(.toggle-dot.active) {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.toggle-dot {
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease;
}

.toggle-dot.active {
  transform: translateX(16px);
}

/* =========================================================
 STEP 3: PROGRESS CIRCLE
========================================================= */

.progress-container {
  position: relative;
  margin-bottom: 0.75rem;
  margin-top: 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  width: 100%;
  max-width: 100%;
}

.progress-circle {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  position: relative;
  max-width: 100%;
}

.progress-circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
}

.progress-circle circle {
  stroke-linecap: round;
}

.progress-circle__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 5rem;
  font-weight: 700;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

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

  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Progress animation */
#progress-circle {
  animation: progress-animation 3s ease-in-out infinite;
}

@keyframes progress-animation {
  from {
    stroke-dashoffset: 314;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* =========================================================
 STEP CONTENT (Titles & Descriptions)
========================================================= */

.step-content {
  position: relative;
  z-index: 2;
  padding-top: 0.5rem;
}

.step-content__title {
  color: #FFFFFF;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.step-content__description {
  color: #9CA3AF;
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* =========================================================
 RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 768px) {
  .section-header h3 {
    font-size: 2rem;
  }

  .section-header p {
    font-size: 1rem;
  }

  .workflow-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .workflow-step {
    min-height: 400px;
    padding: 2rem 1.25rem 1.25rem 1.25rem;
  }

  .step-content__title {
    font-size: 1.375rem;
  }

  .step-content__description {
    font-size: 0.8125rem;
  }

  .format-grid {
    gap: 0.5rem;
    padding: 0.5rem 0;
  }

  .format-option {
    padding: 0.75rem;
  }

  .format-icon {
    font-size: 1.5rem;
  }

  .format-name {
    font-size: 0.7rem;
  }

  .ai-tools-stack {
    gap: 0.5rem;
  }

  .ai-tool {
    padding: 0.625rem 0.875rem;
  }

  .ai-tool__icon {
    font-size: 1.125rem;
  }

  .ai-tool__label {
    font-size: 0.8125rem;
  }

  /* Progress Circle Mobile Fixes */
  .progress-container {
    padding: 0.5rem;
    min-height: 120px;
  }

  .progress-circle {
    width: 14rem !important;
    height: 14rem !important;
  }

  .progress-circle svg {
    width: 14rem !important;
    height: 14rem !important;
  }

  .progress-circle__icon {
    font-size: 5rem !important;
  }
}

/* Extra Small Devices */
@media (max-width: 480px) {
  .progress-circle {
    width: 70px;
    height: 70px;
  }

  .progress-circle svg {
    width: 70px;
    height: 70px;
  }

  .progress-circle__icon {
    font-size: 1.25rem;
  }
}

/* =========================================================
 RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1024px) and (min-width: 769px) {
  .workflow-grid {
    gap: 1.5rem;
  }

  .workflow-step {
    min-height: 420px;
  }
}

/* =========================================================
 GLASS SHIMMER ANIMATION
========================================================= */

@keyframes glass-shimmer {

  0%,
  100% {
    background-position: -200% 0;
  }

  50% {
    background-position: 200% 0;
  }
}

/* SECTION 4: How it Works END*/

/* SECTION 5: Stories Carousel START */

.stories-section {
  background: #0B0B0F;
  background-image: radial-gradient(circle at 20% 50%, rgba(168, 85, 247, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(147, 51, 234, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
  padding: 80px 0;
}

.stories-section .section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.stories-section .section-header h3 {
  font-size: 3rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
}

.stories-section .section-header p {
  font-size: 1.25rem;
  color: #9CA3AF;
  line-height: 1.8;
}

/* Stories Wrapper - Hides overflow for infinite scroll */
.stories-wrapper {
  overflow: hidden;
  margin: 0 -24px;
  padding: 0 24px;
}

/* Mobile/Tablet: Enable touch scrolling */
@media (max-width: 1024px) {
  .stories-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .stories-wrapper::-webkit-scrollbar {
    display: none;
  }

  .story-card {
    scroll-snap-align: start;
  }
}

/* Stories Container - Flex layout for cards */
.stories-container {
  display: flex;
  gap: 1rem;
  padding: 2rem 0;
  width: max-content;
  /* Critical for infinite scroll */
}

/* Infinite Scroll Animation */
.stories-container--infinite {
  animation: infiniteScroll 60s linear infinite;
  -webkit-animation: infiniteScroll 60s linear infinite;
}

/* Pause animation on hover */
.stories-container--infinite:hover {
  animation-play-state: paused;
}

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

  100% {
    /* Move exactly half the width (where duplicates start) */
    transform: translateX(-50%);
  }
}

/* Story Card */
.story-card {
  flex: 0 0 280px;
  height: 500px;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.story-card:hover {
  transform: scale(1.02);
}

/* Story Background Video */
.story-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

/* Story Overlay */
.story-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

.story-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.story-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  line-height: 1.4;
  margin: 0;
}

/* =========================================================
 RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 768px) {
  .stories-section .section-header h3 {
    font-size: 2rem;
  }

  .stories-section .section-header p {
    font-size: 1rem;
  }

  .story-card {
    flex: 0 0 220px;
    height: 400px;
  }

  .story-title {
    font-size: 1.125rem;
  }

  .story-description {
    font-size: 0.8125rem;
  }

  /* Enable auto-scroll on mobile with much faster animation */
  .stories-container--infinite {
    animation: infiniteScroll 15s linear infinite !important;
    -webkit-animation: infiniteScroll 15s linear infinite !important;
  }

  .stories-container {
    width: auto;
  }
}

/* =========================================================
 TABLET
========================================================= */

@media (max-width: 1024px) and (min-width: 769px) {
  .story-card {
    flex: 0 0 250px;
    height: 450px;
  }

  /* Enable auto-scroll on tablet with medium-speed animation */
  .stories-container--infinite {
    animation: infiniteScroll 45s linear infinite;
    -webkit-animation: infiniteScroll 45s linear infinite;
  }

  .stories-container {
    width: auto;
  }
}

/* SECTION 5: Stories Carousel END */

/* SECTION 6: Growth Tools START */
/* Growth Tools Section */
.growth-tools-section {
  padding: 80px 0;
}

.growth-tools-header {
  text-align: center;
  margin-bottom: 4rem;
}

.growth-tools-header h3 {
  font-size: 3rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}

.growth-tools-header p {
  font-size: 1.25rem;
  color: #9CA3AF;
  max-width: 600px;
  margin: 0 auto;
}

/* Tools Grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

/* Tool Card */
.tool-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37), inset 0 2px 2px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(168, 85, 247, 0.25) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

.tool-card__content {
  padding: 2rem;
}

.tool-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.tool-card__icon {
  font-size: 2rem;
}

.tool-card__title {
  color: #FFFFFF;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.tool-card__description {
  color: #9CA3AF;
  font-size: 0.9375rem;
  margin: 0;
}

/* CTA Container */
.tools-cta {
  text-align: center;
  margin-top: 3rem;
}

/* Responsive */
@media (max-width: 768px) {
  .tools-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .growth-tools-header h3 {
    font-size: 2rem;
  }
}

@media (min-width: 1400px) {
  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
  }
}

/* SECTION 6: Growth Tools END */

/* ===================================
   FREE TOOLS HUB PAGE - REDESIGNED
   =================================== */

/* Hero - High Tension */
.tools-hero {
  background: #0B0B0F;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}

.tools-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% -30%, rgba(168, 85, 247, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 50%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 0% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.tools-hero-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

.tools-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.tools-hero-badge {
  display: inline-block;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #A855F7;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}

.tools-hero-title {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 24px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.tools-hero-gradient {
  background: linear-gradient(135deg, #A855F7 0%, #EC4899 50%, #F97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tools-hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 48px;
  line-height: 1.7;
}

/* Flagship Tool Section - The King */
.tools-flagship {
  background: #0B0B0F;
  padding: 0 0 60px;
  margin-top: -40px;
  position: relative;
  z-index: 2;
}

.tool-flagship-card {
  display: block;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(139, 92, 246, 0.06) 50%, rgba(236, 72, 153, 0.08) 100%);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 28px;
  padding: 48px 56px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 900px;
  margin: 0 auto;
}

.tool-flagship-glow {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.15) 0%, transparent 60%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.tool-flagship-card:hover {
  border-color: rgba(168, 85, 247, 0.5);
  transform: translateY(-6px);
  box-shadow:
    0 30px 80px rgba(168, 85, 247, 0.25),
    0 0 0 1px rgba(168, 85, 247, 0.1);
}

.tool-flagship-card:hover .tool-flagship-glow {
  opacity: 1.5;
}

.tool-flagship-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.tool-flagship-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #A855F7, #EC4899);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tool-flagship-badge-dot {
  width: 6px;
  height: 6px;
  background: #FFFFFF;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.tool-flagship-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

.tool-flagship-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.tool-flagship-desc {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 auto 32px;
  max-width: 500px;
  line-height: 1.6;
}

.tool-flagship-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  color: #0B0B0F;
  font-size: 1rem;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.tool-flagship-card:hover .tool-flagship-cta {
  background: #F3E8FF;
  transform: scale(1.02);
}

.tool-flagship-cta svg {
  transition: transform 0.3s ease;
}

.tool-flagship-card:hover .tool-flagship-cta svg {
  transform: translateX(4px);
}

.tool-flagship-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
}

.tool-flagship-stat {
  text-align: center;
}

.tool-flagship-stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.tool-flagship-stat-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Secondary Tools Grid */
.tools-secondary {
  background: #0B0B0F;
  padding: 60px 0 100px;
}

.tools-secondary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.tools-secondary-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto 24px;
}

.tools-secondary-row-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 700px;
  margin: 0 auto;
}

.tool-secondary-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.tool-secondary-card:hover {
  border-color: rgba(168, 85, 247, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(168, 85, 247, 0.12);
}

.tool-secondary-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.3));
  color: #D8B4FE;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tool-secondary-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.tool-secondary-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 10px;
}

.tool-secondary-desc {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 20px;
  line-height: 1.5;
  flex: 1;
}

.tool-secondary-cta {
  font-size: 0.9rem;
  font-weight: 600;
  color: #A855F7;
  transition: color 0.2s ease;
}

.tool-secondary-card:hover .tool-secondary-cta {
  color: #C084FC;
}

/* Section Tags */
.tools-section-tag {
  display: inline-block;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #D8B4FE;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tools-section-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.02em;
}

/* Tools Sections */
.tools-section {
  background: #0B0B0F;
  padding: 80px 0;
}

.tools-section-alt {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.03) 0%, #0B0B0F 100%);
}

.tools-section-header {
  text-align: center;
  margin-bottom: 48px;
}

.tools-section-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 12px 0 0;
}

/* Spacious Section Modifier */
.tools-section-spacious {
  padding: 100px 0;
}

/* Flagship Bridge */
.tool-flagship-bridge {
  text-align: center;
  margin-top: 24px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.5);
}

.tool-flagship-bridge a {
  color: #A855F7;
  text-decoration: none;
  transition: color 0.2s ease;
}

.tool-flagship-bridge a:hover {
  color: #C084FC;
}

/* Bridge Section - Pre-CTA */
.tools-bridge {
  background: #0B0B0F;
  padding: 80px 0;
}

.tools-bridge-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.tools-bridge-text {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin: 0;
}

.tools-bridge-text strong {
  color: #FFFFFF;
  font-weight: 600;
}

/* Disciplined Dominance Grid */
.tools-grid-dominant {
  max-width: 900px;
  margin: 0 auto;
}

/* Hero Card - The Dominant One */
.tool-card-hero {
  display: block;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(139, 92, 246, 0.06) 100%);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 20px;
  padding: 48px;
  text-align: center;
  text-decoration: none;
  margin-bottom: 24px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tool-card-hero:hover {
  border-color: rgba(168, 85, 247, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(168, 85, 247, 0.15);
}

.tool-card-hero-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #EC4899, #F97316);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tool-card-hero-icon {
  font-size: 3.5rem;
  margin-bottom: 20px;
}

.tool-card-hero-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.tool-card-hero-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Secondary Grid - 4 Uniform Cards */
.tools-grid-secondary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Uniform Cards */
.tool-card-uniform {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px 16px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tool-card-uniform:hover {
  border-color: rgba(168, 85, 247, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(168, 85, 247, 0.1);
}

.tool-card-uniform-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.tool-card-uniform-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 8px;
  line-height: 1.3;
}

.tool-card-uniform-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  line-height: 1.4;
}

/* Mixed 4-Column Grid for Utilities */
.tools-grid-mixed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Dynamic Grid - Mixed Sizes */
.tools-grid-dynamic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.tools-grid-dynamic .tool-card-highlight:first-child {
  grid-column: span 2;
}

.tools-grid-dynamic .tool-card-highlight:last-child {
  grid-column: span 2;
}

/* Tool Card V2 */
.tool-card-v2 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.tool-card-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tool-card-v2:hover {
  border-color: rgba(168, 85, 247, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(168, 85, 247, 0.12);
}

.tool-card-v2:hover::before {
  opacity: 1;
}

.tool-card-highlight {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(168, 85, 247, 0.2);
}

.tool-card-v2-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(135deg, #EC4899, #F97316);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 1;
}

.tool-card-v2-icon {
  font-size: 2.25rem;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.tool-card-v2-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.tool-card-v2-desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 16px;
  line-height: 1.5;
  flex: 1;
  position: relative;
  z-index: 1;
}

.tool-card-v2-cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: #A855F7;
  transition: color 0.2s ease;
  position: relative;
  z-index: 1;
}

.tool-card-v2:hover .tool-card-v2-cta {
  color: #C084FC;
}

/* Two Column Grid */
.tools-grid-two {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}

/* Wide Card */
.tool-card-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px 28px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tool-card-wide:hover {
  border-color: rgba(168, 85, 247, 0.35);
  transform: translateX(6px);
  box-shadow: 0 15px 40px rgba(168, 85, 247, 0.1);
}

.tool-card-wide-left {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.tool-card-wide-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.tool-card-wide-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 6px;
}

.tool-card-wide-desc {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  line-height: 1.5;
}

.tool-card-wide-cta {
  font-size: 0.9rem;
  font-weight: 600;
  color: #A855F7;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.tool-card-wide:hover .tool-card-wide-cta {
  color: #C084FC;
}

/* Three Column Grid */
.tools-grid-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 1024px) {
  .tools-grid-dynamic {
    grid-template-columns: repeat(2, 1fr);
  }

  .tools-grid-dynamic .tool-card-highlight:first-child,
  .tools-grid-dynamic .tool-card-highlight:last-child {
    grid-column: span 2;
  }

  .tools-grid-three {
    grid-template-columns: repeat(2, 1fr);
  }

  .tools-grid-three .tool-card-highlight {
    grid-column: span 2;
  }

  .tools-grid-ai {
    grid-template-columns: repeat(2, 1fr);
  }

  .tools-grid-ai .tool-card-v2.tool-card-large:first-child,
  .tools-grid-ai .tool-card-v2.tool-card-large:nth-child(4) {
    grid-column: span 2;
  }

  .tools-grid-mixed {
    grid-template-columns: repeat(2, 1fr);
  }

  .tools-secondary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tools-secondary-row-2 {
    max-width: 100%;
  }

  .tools-secondary-row-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .tool-flagship-card {
    flex-direction: column;
    gap: 32px;
  }

  .tool-flagship-stats {
    flex-direction: row;
    justify-content: flex-start;
    gap: 48px;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 24px;
  }

  .tools-section-spacious {
    padding: 80px 0;
  }

  .tools-grid-secondary {
    grid-template-columns: repeat(2, 1fr);
  }

  .tool-card-hero {
    padding: 40px 32px;
  }

  .tool-card-hero-icon {
    font-size: 3rem;
  }

  .tool-card-hero-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .tools-hero {
    padding: 80px 0 60px;
  }

  .tools-hero-title {
    font-size: 2.25rem;
  }

  .tools-hero-subtitle {
    font-size: 1rem;
    margin-bottom: 32px;
  }

  .tools-hero-subtitle br {
    display: none;
  }

  .tools-hero-stats {
    flex-wrap: wrap;
    gap: 24px 32px;
  }

  .tools-hero-stat-number {
    font-size: 1.5rem;
  }

  .tool-featured-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .tool-featured-arrow {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
  }

  .tool-featured-card:hover .tool-featured-arrow {
    transform: translateY(-50%) translateX(4px);
  }

  .tools-grid-dynamic,
  .tools-grid-three {
    grid-template-columns: 1fr;
  }

  .tools-grid-dynamic .tool-card-highlight:first-child,
  .tools-grid-dynamic .tool-card-highlight:last-child,
  .tools-grid-three .tool-card-highlight {
    grid-column: span 1;
  }

  .tool-card-wide {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .tool-card-wide-left {
    flex-direction: column;
    gap: 12px;
  }

  .tools-section {
    padding: 60px 0;
  }

  .tools-section-spacious {
    padding: 60px 0;
  }

  .tools-grid-ai,
  .tools-grid-mixed {
    grid-template-columns: 1fr;
  }

  .tools-grid-ai .tool-card-v2.tool-card-large:first-child,
  .tools-grid-ai .tool-card-v2.tool-card-large:nth-child(4) {
    grid-column: span 1;
  }

  .tools-secondary-grid {
    grid-template-columns: 1fr;
  }

  .tools-secondary-row-2,
  .tools-secondary-row-3 {
    grid-template-columns: 1fr;
  }

  .tool-flagship-card {
    padding: 28px;
  }

  .tool-flagship-title {
    font-size: 1.5rem;
  }

  .tool-flagship-stats {
    flex-direction: column;
    gap: 20px;
  }

  .tools-grid-secondary {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .tool-card-hero {
    padding: 32px 24px;
  }

  .tool-card-hero-icon {
    font-size: 2.5rem;
  }

  .tool-card-hero-title {
    font-size: 1.35rem;
  }

  .tool-card-hero-desc {
    font-size: 0.95rem;
  }

  .tool-card-uniform {
    padding: 20px 12px;
  }

  .tool-card-uniform-icon {
    font-size: 1.75rem;
  }

  .tool-card-uniform-title {
    font-size: 0.85rem;
  }

  .tool-card-uniform-desc {
    font-size: 0.75rem;
  }

  .tool-flagship-stat-number {
    font-size: 1.5rem;
  }

  .tool-secondary-card {
    padding: 24px;
  }
}

@media (max-width: 480px) {
  .tools-hero-stats {
    flex-direction: column;
    gap: 20px;
  }

  .tools-hero-stat-divider {
    width: 60px;
    height: 1px;
  }
}

/* Legacy Tool Page Styles (for individual tool pages) */
.tool-hero {
  background: #0B0B0F;
  padding: 100px 0 40px;
  position: relative;
  overflow: hidden;
}

.tool-hero .hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(168, 85, 247, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.tool-hero .hero-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.tool-hero-container {
  position: relative;
  z-index: 1;
}

.tool-hero-content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.tool-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
}

.tool-breadcrumb a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s ease;
}

.tool-breadcrumb a:hover {
  color: rgba(168, 85, 247, 0.9);
}

.tool-breadcrumb span {
  color: rgba(255, 255, 255, 0.3);
}

.tool-breadcrumb span:last-child {
  color: rgba(255, 255, 255, 0.8);
}

.tool-hero-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.tool-hero-subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .tool-hero {
    padding: 60px 0 50px;
  }

  .tool-hero-title {
    font-size: 2rem;
  }

  .tool-hero-subtitle {
    font-size: 1rem;
  }
}

/* Individual Tool Page Styles */
.tool-main-section {
  background: #0B0B0F;
  padding: 20px 0 60px;
}

.related-tools-section {
  background: #0B0B0F;
  padding: 80px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.related-tools-section .section-header {
  margin-bottom: 40px;
}

.related-tools-section .section-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 8px;
}

.related-tools-section .section-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.related-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .related-tools-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tool-main-section {
    padding: 16px 0 40px;
  }

  .related-tools-section {
    padding: 60px 0;
  }
}

/* SECTION 7: Pricing START */
/* ===================================
   PRICING SECTION
   =================================== */

/* Section Base */
#pricing {
  background: #0B0B0F;
  color: white;
  padding: 90px 0 80px 0;
  overflow: visible;
}

/* Header */
.pricing-header {
  text-align: center;
  margin-bottom: 3rem;
}

.pricing-header h3 {
  font-size: 3.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
}

.pricing-header p {
  font-size: 1.125rem;
  color: #9CA3AF;
  max-width: 700px;
  margin: 0 auto;
  font-weight: 400;
}

/* ===================================
 BILLING TOGGLE
 =================================== */

.billing-toggle-wrapper {
  text-align: center;
  margin-bottom: 3rem;
}

.billing-toggle-container {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.375rem;
  border-radius: 0.75rem;
  gap: 0.25rem;
}

.billing-toggle {
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.billing-toggle--monthly {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.billing-toggle--yearly {
  background: transparent;
  color: #9CA3AF;
  position: relative;
}

.billing-toggle--yearly.active {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.billing-toggle--monthly.active {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.billing-toggle__badge {
  font-size: 0.75rem;
  color: #10B981;
  margin-left: 0.375rem;
}

/* ===================================
 PRICING GRID
 =================================== */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 1.5rem;
  max-width: 1140px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 30px;
}

/* ===================================
 PRICING CARDS
 =================================== */

.pricing-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
  padding: 1.5rem 1.5rem;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37), inset 0 2px 2px rgba(255, 255, 255, 0.1);
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.07) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: glass-shimmer 4s ease-in-out infinite;
  border-radius: 1rem;
  pointer-events: none;
  z-index: 1;
  clip-path: inset(0 0 0 0 round 1rem);
}

.pricing-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), transparent);
  border-radius: 1rem;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pricing-card:hover {
  box-shadow: 0 20px 40px rgba(168, 85, 247, 0.2);
  transform: translateY(-4px);
  border-color: rgba(168, 85, 247, 0.3);
}

.pricing-card:hover::after {
  opacity: 1;
}

/* Featured Card - LARGER and ALWAYS STAYS LARGE */
.pricing-card--featured {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(147, 51, 234, 0.08));
  border: 2px solid rgba(168, 85, 247, 0.3);
  padding: 3.5rem 2rem 2.5rem 2rem;
  box-shadow: 0 8px 32px rgba(168, 85, 247, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.15);
  z-index: 2;
  align-self: center;
  isolation: isolate;
}

.pricing-card--featured:hover {
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.8), 0 20px 40px rgba(168, 85, 247, 0.3);
  transform: translateY(-4px) !important;
}

/* Enterprise Section (below pricing grid) */
.enterprise-section {
  margin-top: 1.5rem;
  margin-bottom: 5rem;
  text-align: center;
}

.enterprise-section__heading {
  font-size: 1.25rem;
  color: #9CA3AF;
  margin-bottom: 1rem;
  font-weight: 500;
}

/* Enterprise Card - animated border glow */
.enterprise-card {
  position: relative;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(147, 51, 234, 0.04), rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 1rem;
  padding: 2.5rem 3rem;
  max-width: 720px;
  margin: 0 auto;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.37),
    0 0 20px rgba(168, 85, 247, 0.08),
    inset 0 2px 2px rgba(255, 255, 255, 0.1);
  transition: all 0.4s ease;
  overflow: hidden;
}

/* Animated gradient border glow behind the card */
.enterprise-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.4),
    rgba(147, 51, 234, 0.1),
    rgba(168, 85, 247, 0.3),
    transparent,
    rgba(168, 85, 247, 0.2)
  );
  background-size: 300% 300%;
  animation: enterprise-border-glow 6s ease-in-out infinite;
  border-radius: 1rem;
  z-index: -1;
  opacity: 0.5;
  transition: opacity 0.4s ease;
}

/* Glass shimmer sweep */
.enterprise-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(168, 85, 247, 0.06) 45%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(168, 85, 247, 0.06) 55%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: glass-shimmer 4s ease-in-out infinite;
  border-radius: 1rem;
  pointer-events: none;
}

.enterprise-card:hover {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(168, 85, 247, 0.12),
    0 0 80px rgba(168, 85, 247, 0.06);
  transform: translateY(-4px);
}

.enterprise-card:hover::before {
  opacity: 0.8;
}

@keyframes enterprise-border-glow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Title with gradient text */
.enterprise-card__title {
  font-size: 2.75rem;
  font-weight: 900;
  background: linear-gradient(135deg, #FFFFFF 0%, #c4b5fd 40%, #a78bfa 60%, #FFFFFF 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: enterprise-title-shimmer 4s ease-in-out infinite;
  margin-bottom: 0.5rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
}

@keyframes enterprise-title-shimmer {
  0%, 100% {
    background-position: 0% center;
  }
  50% {
    background-position: 200% center;
  }
}

.enterprise-card__subtitle {
  color: #a78bfa;
  font-size: 0.9375rem;
  margin-bottom: 1.75rem;
  position: relative;
  z-index: 1;
}

/* Divider line above features */
.enterprise-card__divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.5), transparent);
  margin: 0 auto 1.75rem;
  position: relative;
  z-index: 1;
}

.enterprise-card__features {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.75rem 2.5rem;
  justify-content: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.enterprise-card__feature {
  color: #e5e7eb;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
}

.enterprise-card__feature-icon {
  color: #a78bfa;
  font-weight: 700;
}

.enterprise-card__cta {
  display: inline-block;
  padding: 0.875rem 2.5rem;
  background: linear-gradient(135deg, #A855F7, #9333EA);
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #FFFFFF;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.35);
  position: relative;
  z-index: 1;
}

.enterprise-card__cta:hover {
  background: linear-gradient(135deg, #9333EA, #7c3aed);
  box-shadow: 0 6px 25px rgba(168, 85, 247, 0.5);
  transform: translateY(-2px);
}

.pricing-card__badge {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #A855F7, #9333EA);
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 30;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {

  0%,
  100% {
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
  }

  50% {
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.6);
  }
}

/* Card Header */
.pricing-card__header {
  text-align: center;
  position: relative;
  z-index: 2;
}

.pricing-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.pricing-card__subtitle {
  color: #9CA3AF;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

/* Price Display */
.price-container {
  margin-bottom: 2rem;
}

.price-display__amount {
  font-size: 2.75rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
}

.price-display__period {
  color: #6B7280;
  font-size: 1rem;
}

.price-display__original {
  font-size: 1.25rem;
  color: #6B7280;
  text-decoration: line-through;
}

.price-savings {
  display: inline-block;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  margin-top: 0.5rem;
  font-weight: 600;
}

/* Feature List */
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  flex: 1;
}

.pricing-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  color: #e5e7eb;
  font-size: 0.875rem;
}

.pricing-feature__icon {
  color: #10B981;
  font-size: 1rem;
  min-width: 20px;
  flex-shrink: 0;
}

/* CTA Button */
.pricing-card__button {
  width: 100%;
  padding: 0.875rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-card__button:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1));
  transform: translateY(-2px);
}

.pricing-card__button--featured {
  background: linear-gradient(135deg, #A855F7, #9333EA);
  border: 1px solid rgba(168, 85, 247, 0.5);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.pricing-card__button--featured:hover {
  background: linear-gradient(135deg, #9333EA, #7c3aed);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4);
  transform: translateY(-2px);
}

/* ===================================
 BOTTOM INFO BAR
 =================================== */

.pricing-info {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.pricing-info__item {
  color: #9CA3AF;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pricing-info__item--highlight {
  color: #e5e7eb;
}

.pricing-info__divider {
  color: #4B5563;
}

.pricing-info__countdown {
  background: rgba(168, 85, 247, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(168, 85, 247, 0.3);
  padding: 0.375rem 1rem;
  border-radius: 0.5rem;
  color: #FFFFFF;
  font-weight: 600;
}

.pricing-info__timer {
  font-family: monospace;
  font-variant-numeric: tabular-nums;
}

/* ===================================
 RESPONSIVE STYLES
 =================================== */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
  .pricing-grid {
    max-width: 1140px;
  }
}

/* Desktop (1024px - 1399px) */
@media (max-width: 1399px) {
  .pricing-grid {
    max-width: 1140px;
  }
}

/* Nest Hub (1024x600) */
@media (max-width: 1024px) and (max-height: 600px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-width: 100%;
    padding: 10px 0.75rem;
  }

  .pricing-card {
    padding: 1rem;
  }

  .pricing-card--featured {
    padding: 1.25rem 1rem;
  }

  .pricing-card__title {
    font-size: 1rem;
  }

  .price-display__amount {
    font-size: 1.75rem;
  }

  .pricing-feature {
    font-size: 0.7rem;
  }

  .pricing-card__button {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  .pricing-card__badge {
    top: -12px;
    font-size: 0.6rem;
    padding: 0.2rem 0.5rem;
  }
}

/* Tablet Large (1024px and below) */
@media (max-width: 1024px) {
  #pricing {
    padding: 70px 0;
  }

  .pricing-header h3 {
    font-size: 2.75rem;
  }

  .pricing-grid {
    padding-top: 20px;
  }

  /* Featured card stays large - NO SCALE RESET */

  .pricing-card__badge {
    top: -18px;
    font-size: 0.8125rem;
    padding: 0.35rem 0.875rem;
  }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 769px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
    gap: 1.5rem;
    margin: 0 auto;
    align-items: start;
  }

  .pricing-card--featured {
    padding: 1.75rem 1.5rem;
  }

  .pricing-card--featured:hover {
    transform: translateY(-4px);
  }
}

/* Mobile Large (768px and below) */
@media (max-width: 768px) {
  #pricing {
    padding: 60px 0 50px 0;
  }

  .pricing-header {
    margin-bottom: 2rem;
  }

  .pricing-header h3 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .pricing-header p {
    font-size: 1rem;
    padding: 0 1rem;
  }

  .billing-toggle-wrapper {
    margin-bottom: 2rem;
  }

  .billing-toggle-container {
    padding: 0.3rem;
    gap: 0.2rem;
  }

  .billing-toggle {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }

  .billing-toggle__badge {
    display: block;
    margin-top: 0.125rem;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 20px 1rem;
  }

  .pricing-card {
    padding: 1.75rem 1.5rem;
  }

  .pricing-card--featured {
    padding: 1.75rem 1.5rem;
    border: 2px solid rgba(168, 85, 247, 0.4);
  }

  .pricing-card--featured:hover {
    transform: translateY(-4px);
  }

  .pricing-card__badge {
    top: -16px;
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
  }

  .pricing-card__title {
    font-size: 1.375rem;
  }

  .pricing-card__subtitle {
    font-size: 0.8125rem;
    margin-bottom: 1.25rem;
  }

  .price-container {
    margin-bottom: 1.5rem;
  }

  .price-display__amount {
    font-size: 2.25rem;
  }

  .price-display__original {
    font-size: 1.125rem;
  }

  .pricing-features {
    margin-bottom: 1.5rem;
  }

  .pricing-feature {
    padding: 0.4rem 0;
    font-size: 0.8125rem;
  }

  .pricing-info {
    flex-direction: column;
    gap: 1rem;
    white-space: normal;
    text-align: center;
    padding: 0 1rem;
    margin-top: 2.5rem;
    display: none;
  }

  .pricing-info__divider {
    display: none;
  }

  .pricing-info__item {
    flex-direction: column;
    gap: 0.375rem;
  }

  .pricing-info__countdown {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }
}

/* Mobile Medium (640px and below) */
@media (max-width: 640px) {
  .pricing-header h3 {
    font-size: 1.75rem;
  }

  .pricing-header p {
    font-size: 0.9375rem;
  }

  .pricing-grid {
    gap: 2rem;
    /* Good spacing */
    padding: 20px 0.75rem;
  }

  .pricing-card {
    padding: 1.5rem 1.25rem;
  }

  /* Featured same size */
  .pricing-card--featured {
    padding: 1.5rem 1.25rem;
  }

  .price-display__amount {
    font-size: 2rem;
  }

  .pricing-info {
    font-size: 0.8125rem;
  }
}

/* Mobile Small (480px and below) */
@media (max-width: 480px) {
  #pricing {
    padding: 50px 0 40px 0;
  }

  .pricing-header h3 {
    font-size: 1.625rem;
    margin-bottom: 0.75rem;
  }

  .pricing-header p {
    font-size: 0.875rem;
  }

  .billing-toggle-wrapper {
    margin-bottom: 1.5rem;
  }

  .billing-toggle {
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
  }

  .pricing-grid {
    gap: 1.75rem;
    /* Good spacing */
    padding: 20px 0.5rem;
  }

  .pricing-card {
    padding: 1.25rem 1rem;
    border-radius: 0.875rem;
  }

  /* Featured same size */
  .pricing-card--featured {
    padding: 1.25rem 1rem;
  }

  .pricing-card__badge {
    top: -14px;
    font-size: 0.6875rem;
    padding: 0.25rem 0.625rem;
  }

  .pricing-card__title {
    font-size: 1.25rem;
  }

  .pricing-card__subtitle {
    font-size: 0.75rem;
    margin-bottom: 1rem;
  }

  .price-display__amount {
    font-size: 1.875rem;
  }

  .price-display__period {
    font-size: 0.875rem;
  }

  .price-display__original {
    font-size: 1rem;
  }

  .pricing-feature {
    font-size: 0.75rem;
    padding: 0.375rem 0;
  }

  .pricing-card__button {
    padding: 0.75rem;
    font-size: 0.8125rem;
  }

  .pricing-info {
    font-size: 0.75rem;
    gap: 0.875rem;
  }

  .pricing-info__countdown {
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
  }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
  .pricing-header h3 {
    font-size: 1.5rem;
  }

  .billing-toggle-container {
    width: 100%;
    max-width: 320px;
  }

  .billing-toggle {
    flex: 1;
    padding: 0.5rem 0.5rem;
  }

  .pricing-card__badge {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
  }

  .pricing-grid {
    gap: 1.5rem;
    padding: 20px 0.5rem;
  }
}

/* Enterprise section responsive */
@media (max-width: 768px) {
  .enterprise-section {
    margin-top: 1.5rem;
    margin-bottom: 4rem;
  }

  .enterprise-card {
    padding: 2rem 1.5rem;
  }

  .enterprise-card__features {
    grid-template-columns: 1fr;
    gap: 0.625rem;
  }

  .enterprise-card__cta {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .enterprise-card {
    padding: 1.5rem 1.25rem;
  }

  .enterprise-card__title {
    font-size: 2rem;
  }

  .enterprise-card__subtitle {
    font-size: 0.875rem;
  }
}

/* SECTION 7: Pricing END */

/* SECTION 8: Testimonials START */
/* ===================================
   TESTIMONIALS SECTION
   =================================== */

/* Section Base */
#testimonials {
  background: #0B0B0F;
  padding: 80px 0;
  position: relative;
}

/* Pattern Overlay */
.testimonials-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.03"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  z-index: 0;
}

/* Container */
.testimonials-container {
  position: relative;
  z-index: 1;
}

/* Section Header */
.testimonials-header {
  text-align: center;
  margin-bottom: 3rem;
}

.testimonials-header h3 {
  font-size: 3rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}

.testimonials-header p {
  color: #9CA3AF;
  font-size: 1.125rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Masonry Grid */
.testimonials-grid {
  columns: 4 320px;
  column-gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Testimonial Card */
.testimonial-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 2rem;
  border-radius: 1rem;
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
  break-inside: avoid;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37), inset 0 2px 2px rgba(255, 255, 255, 0.1);
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.07) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: glass-shimmer 4s ease-in-out infinite;
  border-radius: 1rem;
  pointer-events: none;
  z-index: 1;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(168, 85, 247, 0.3), inset 0 2px 2px rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Quote Mark */
.testimonial-quote {
  font-size: 3rem;
  color: #6B7280;
  line-height: 1;
  margin-bottom: 1rem;
  font-family: Georgia, serif;
}

/* Testimonial Text */
.testimonial-text {
  color: #e5e7eb;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Author Section */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Avatar */
.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  flex-shrink: 0;
}

/* Avatar Gradient Variants */
.testimonial-avatar--purple {
  background: linear-gradient(135deg, #A855F7, #9333EA);
}

.testimonial-avatar--green-blue {
  background: linear-gradient(135deg, #10b981, #3b82f6);
}

.testimonial-avatar--orange-red {
  background: linear-gradient(135deg, #f97316, #ef4444);
}

.testimonial-avatar--purple-pink {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.testimonial-avatar--cyan-blue {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
}

.testimonial-avatar--yellow-orange {
  background: linear-gradient(135deg, #eab308, #f97316);
}

.testimonial-avatar--teal-green {
  background: linear-gradient(135deg, #14b8a6, #10b981);
}

.testimonial-avatar--pink-red {
  background: linear-gradient(135deg, #ec4899, #ef4444);
}

.testimonial-avatar--orange-red-alt {
  background: linear-gradient(135deg, #f59e0b, #dc2626);
}

.testimonial-avatar--violet-blue {
  background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.testimonial-avatar--sky-indigo {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
}

.testimonial-avatar--emerald-cyan {
  background: linear-gradient(135deg, #059669, #0891b2);
}

.testimonial-author-name {
  color: #FFFFFF;
  font-weight: 600;
  margin: 0;
}

/* ===================================
   RESPONSIVE STYLES
   =================================== */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
  .testimonials-grid {
    columns: 4 320px;
  }
}

/* Desktop (1200px - 1399px) */
@media (max-width: 1399px) {
  .testimonials-grid {
    columns: 3 320px;
  }
}

/* Tablet (768px - 1199px) */
@media (max-width: 1199px) {
  .testimonials-header h3 {
    font-size: 2.5rem;
  }

  .testimonials-grid {
    columns: 2 300px;
    column-gap: 1.5rem;
  }

  .testimonial-card {
    padding: 1.75rem;
    margin-bottom: 1.25rem;
  }
}

/* Mobile Large (768px and below) */
@media (max-width: 768px) {
  #testimonials {
    padding: 60px 0;
  }

  .testimonials-header {
    margin-bottom: 2rem;
  }

  .testimonials-header h3 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .testimonials-header p {
    font-size: 1rem;
    padding: 0 1rem;
  }

  .testimonials-grid {
    columns: 1;
    padding: 0 1rem;
  }

  .testimonial-card {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .testimonial-quote {
    font-size: 2.5rem;
  }
}

/* Mobile Small (480px and below) */
@media (max-width: 480px) {
  #testimonials {
    padding: 50px 0;
  }

  .testimonials-header h3 {
    font-size: 1.75rem;
  }

  .testimonials-header p {
    font-size: 0.9375rem;
  }

  .testimonial-card {
    padding: 1.25rem;
  }

  .testimonial-quote {
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }

  .testimonial-text {
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
  }

  .testimonial-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
  }

  .testimonial-author-name {
    font-size: 0.9375rem;
  }

  .testimonial-author-title {
    font-size: 0.8125rem;
  }
}

/* SECTION 8: Testimonials END */

/* SECTION 9: FAQ START */

/* Section Base */
#faq {
  background: #0B0B0F;
  padding: 80px 0;
  position: relative;
}

/* Section Header */
.faq-header {
  text-align: center;
  margin-bottom: 3rem;
}

.faq-header h3 {
  font-size: 3rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}

.faq-header p {
  color: #9CA3AF;
  font-size: 1.125rem;
  max-width: 600px;
  margin: 0 auto;
}

.faq-header a {
  color: #9B5CFF;
  text-decoration: none;
  transition: color 0.2s;
}

.faq-header a:hover {
  color: #A855F7;
}

/* FAQ Container */
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

/* FAQ Item */
.faq-item {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  overflow: hidden;
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(155, 92, 255, 0.1);
}

.faq-item.active {
  background: rgba(155, 92, 255, 0.05) !important;
  border-color: rgba(155, 92, 255, 0.2) !important;
}

/* FAQ Trigger (Button) */
.faq-trigger {
  width: 100%;
  text-align: left;
  padding: 1.5rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 500;
  transition: all 0.2s;
}

.faq-trigger:hover span {
  /* color: #9B5CFF; */
}

/* FAQ Icon (Chevron) */
.faq-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #9B5CFF;
  flex-shrink: 0;
  margin-left: 1rem;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* FAQ Content (Collapsible) */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-content {
  max-height: 500px;
  /* Large enough for any FAQ answer */
}

.faq-content-inner {
  padding: 0 1.5rem 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  /* Brighter color for visibility */
  line-height: 1.6;
  font-size: 1rem;
}



.faq-content a {
  color: #9B5CFF;
  text-decoration: none;
  transition: color 0.2s;
}

.faq-content a:hover {
  color: #A855F7;
}

/* ===================================
   RESPONSIVE STYLES
   =================================== */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  .faq-header h3 {
    font-size: 2.5rem;
  }

  .faq-container {
    max-width: 700px;
  }
}

/* Mobile Large (768px and below) */
@media (max-width: 768px) {
  #faq {
    padding: 60px 0;
  }

  .faq-header {
    margin-bottom: 2rem;
  }

  .faq-header h3 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .faq-header p {
    font-size: 1rem;
    padding: 0 1rem;
  }

  .faq-container {
    padding: 0 1rem;
  }

  .faq-trigger {
    padding: 1.25rem;
    font-size: 1rem;
  }

  .faq-content-inner {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.9375rem;
  }

  .faq-icon {
    width: 20px;
    height: 20px;
  }
}

/* Mobile Small (480px and below) */
@media (max-width: 480px) {
  #faq {
    padding: 50px 0;
  }

  .faq-header h3 {
    font-size: 1.75rem;
  }

  .faq-header p {
    font-size: 0.9375rem;
  }

  .faq-trigger {
    padding: 1rem;
    font-size: 0.9375rem;
  }

  .faq-content-inner {
    padding: 0 1rem 1rem;
    font-size: 0.875rem;
  }

  .faq-icon {
    width: 18px;
    height: 18px;
    margin-left: 0.5rem;
  }
}

/* SECTION 9: FAQ END */

/* SECTION 10: Final CTA START */
/* Section Base */

/* Container */
.final-cta__container {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Heading */
.final-cta__title {
  color: white;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
}

/* Description */
.final-cta__description {
  font-size: 1.25rem;
  opacity: 0.95;
  margin-bottom: 2rem;
  color: white;
}

/* CTA Button */
.final-cta__button {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  margin-top: 1rem;
  padding: 1rem 2rem;
  border-radius: 9px;
  font-weight: 600;
  font-size: 1.125rem;
  display: inline-block;
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  text-decoration: none;
}

.final-cta__button:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

/* ===================================
   RESPONSIVE STYLES
   =================================== */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  .final-cta__title {
    font-size: 2.5rem;
  }

  .final-cta__description {
    font-size: 1.125rem;
  }
}

/* Mobile Large (768px and below) */
@media (max-width: 768px) {
  .final-cta {
    padding: 60px 0;
  }

  .final-cta__title {
    font-size: 2rem;
    line-height: 1.2;
    padding: 0 1rem;
  }

  .final-cta__description {
    font-size: 1rem;
    padding: 0 1rem;
    margin-bottom: 1.5rem;
  }

  .final-cta__button {
    font-size: 1rem;
    padding: 0.875rem 1.75rem;
  }
}

/* Mobile Small (480px and below) */
@media (max-width: 480px) {
  .final-cta {
    padding: 50px 0;
  }

  .final-cta__title {
    font-size: 1.75rem;
    padding: 0 0.5rem;
  }

  .final-cta__description {
    font-size: 0.9375rem;
    padding: 0 0.5rem;
  }

  .final-cta__button {
    font-size: 0.9375rem;
    padding: 0.875rem 1.5rem;
    margin-top: 0.5rem;
  }
}

/* SECTION 10: Final CTA END */


/* SECTION 11: Footer START */
/* Modern Aceternity-style Footer */
.modern-footer {
  background: #0B0B0F;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 80px 0 40px;
  position: relative;
  overflow: hidden;
}

/* Large Background Text Effect */
.footer-bg-text {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(80px, 15vw, 200px);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
  z-index: 0;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

.footer-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}

/* Brand Section */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.footer-logo:hover {
  opacity: 0.8;
}

.footer-logo span:first-child {
  color: #8B5CF6;
  font-weight: 700;
}

.footer-logo span:last-child {
  color: #FFFFFF;
  font-weight: 400;
}

.footer-copyright {
  color: #6B7280;
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 280px;
}

/* Social Media Icons */
.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.footer-social-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #9CA3AF;
  transition: all 0.3s ease;
  text-decoration: none;
}

.footer-social-icon:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
  color: #8B5CF6;
  transform: translateY(-2px);
}

.footer-social-icon svg {
  width: 18px;
  height: 18px;
}

/* Footer Columns */
.footer-column h5 {
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-column h5.footer-heading-stacked {
  margin-top: 28px;
}

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

.footer-column a {
  color: #9CA3AF;
  text-decoration: none;
  font-size: 0.9375rem;
  transition: all 0.2s ease;
  display: inline-block;
  position: relative;
}

.footer-column a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #8B5CF6;
  transition: width 0.3s ease;
}

.footer-column a:hover {
  color: #FFFFFF;
  transform: translateX(4px);
}

.footer-column a:hover::after {
  width: 100%;
}

/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-legal {
  display: flex;
  gap: 20px;
  align-items: center;
}

.footer-legal a {
  color: #6B7280;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: #FFFFFF;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .footer-content {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
  }

  .footer-column:nth-child(4),
  .footer-column:nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .footer-container {
    padding: 0 24px;
  }

  .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-brand {
    grid-column: span 2;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .footer-bg-text {
    font-size: 60px;
    bottom: -30px;
  }
}

@media (max-width: 480px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-brand {
    grid-column: span 1;
  }

  .modern-footer {
    padding: 60px 0 40px;
  }
}

/* SECTION 11: Footer END */

/* SECTION 12: Pop-Up START */
.proof-popup {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  background: white;
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  display: none;
  align-items: center;
  gap: 1rem;
  z-index: 50;
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

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

@media (max-width: 768px) {
  .proof-popup {
    display: none !important;
  }
}

/* SECTION 12: Pop-Up END */

/* ===================================
   TERMS OF SERVICE PAGE START
=================================== */

/* Terms of Service Specific Styles */
.tos-hero {
  background: #0B0B0F;
  background-image: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.15) 0%, transparent 50%);
  padding: 160px 0 60px 0;
  text-align: center;
}

.tos-hero h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #FFFFFF 0%, #E5E7EB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tos-hero p {
  font-size: 1.125rem;
  color: #9CA3AF;
}

.tos-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 24px;
}

.tos-content {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  padding: 3rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
}

.tos-section {
  margin-bottom: 3rem;
}

.tos-section:last-child {
  margin-bottom: 0;
}

.tos-section h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(139, 92, 246, 0.3);
}

.tos-section h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #E5E7EB;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.tos-section h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #D1D5DB;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.tos-section p {
  color: #9CA3AF;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.tos-section ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}

.tos-section ul li {
  color: #9CA3AF;
  line-height: 1.8;
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.5rem;
}

.tos-section ul li::before {
  content: "•";
  color: #8B5CF6;
  font-weight: bold;
  position: absolute;
  left: 0.5rem;
}

.tos-section ol {
  counter-reset: item;
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}

.tos-section ol li {
  color: #9CA3AF;
  line-height: 1.8;
  padding-left: 2rem;
  position: relative;
  margin-bottom: 0.5rem;
  counter-increment: item;
}

.tos-section ol li::before {
  content: counter(item) ".";
  color: #8B5CF6;
  font-weight: 600;
  position: absolute;
  left: 0.5rem;
}

.tos-section strong {
  color: #E5E7EB;
  font-weight: 600;
}

.tos-section a {
  color: #8B5CF6;
  text-decoration: none;
  transition: color 0.3s ease;
}

.tos-section a:hover {
  color: #A78BFA;
  text-decoration: underline;
}

.tos-highlight {
  background: rgba(139, 92, 246, 0.1);
  border-left: 3px solid #8B5CF6;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

.tos-highlight p {
  margin: 0;
  color: #E5E7EB;
}

.tos-updated {
  display: inline-block;
  background: rgba(139, 92, 246, 0.15);
  color: #A78BFA;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

.tos-contact {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  margin-top: 3rem;
}

.tos-contact h3 {
  margin-top: 0;
  color: #FFFFFF;
}

.tos-contact p {
  margin: 0;
}

.tos-contact a {
  color: #8B5CF6;
  font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .tos-hero {
    padding: 140px 0 40px 0;
  }

  .tos-hero h1 {
    font-size: 2.5rem;
  }

  .tos-hero p {
    font-size: 1rem;
  }

  .tos-container {
    padding: 40px 24px;
  }

  .tos-content {
    padding: 2rem 1.5rem;
  }

  .tos-section h2 {
    font-size: 1.75rem;
  }

  .tos-section h3 {
    font-size: 1.375rem;
  }

  .tos-section h4 {
    font-size: 1.125rem;
  }
}

/* ===================================
   TERMS OF SERVICE PAGE START
=================================== */

/* ===================================
   BACK TO TOP BUTTON
=================================== */

.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}

.back-to-top:hover {
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5);
}

.back-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .back-to-top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
  }
}

/* ===================================
   SIMPLIFIED NAVBAR
=================================== */

/* Force nav actions to always be visible (for simplified navbar) */
.nav-actions--always-visible {
  display: flex !important;
}

/* Shrink button on mobile */
@media (max-width: 768px) {
  .nav-actions--always-visible .nav-cta {
    padding: 0.5rem 1.06rem;
    font-size: 0.9375rem;
  }
}

/* ===================================
   COMPARISON TABLE
=================================== */

.comparison-table-section {
  padding: 4rem 0;
  background: var(--bg-dark);
}

.comparison-table-wrapper {
  overflow-x: auto;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.comparison-table thead {
  background: rgba(139, 92, 246, 0.1);
  border-bottom: 2px solid rgba(139, 92, 246, 0.3);
}

.comparison-table th {
  padding: 1.5rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}

.comparison-table__feature-col {
  width: 40%;
}

.comparison-table__ghostshorts-col,
.comparison-table__competitor-col {
  width: 30%;
  text-align: center;
}

.comparison-table__ghostshorts-col {
  background: rgba(139, 92, 246, 0.05);
}

.comparison-table__competitor-col {
  background: rgba(107, 114, 128, 0.05);
}

.comparison-table__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.125rem;
}

.comparison-table__logo {
  height: 48px;
  width: auto;
}

.comparison-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s ease;
}

.comparison-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.comparison-table td {
  padding: 1.25rem 1rem;
  color: var(--text-secondary);
}

.comparison-table__feature {
  font-weight: 500;
  color: var(--text-primary);
}

.comparison-table__value {
  text-align: center;
  font-size: 0.9375rem;
}

.comparison-table__value--ghostshorts {
  background: rgba(139, 92, 246, 0.03);
  font-weight: 500;
}

.comparison-table__value--competitor {
  background: rgba(107, 114, 128, 0.03);
}

.comparison-check {
  color: #10B981;
  font-size: 1.5rem;
  font-weight: bold;
}

.comparison-cross {
  color: #EF4444;
  font-size: 1.5rem;
  font-weight: bold;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .comparison-table th,
  .comparison-table td {
    padding: 1rem 0.75rem;
    font-size: 0.875rem;
  }

  .comparison-table__header {
    font-size: 1rem;
  }

  .comparison-table__logo {
    height: 36px;
  }

  .comparison-check,
  .comparison-cross {
    font-size: 1.25rem;
  }
}

/* ===================================
   FEATURE CARDS (Comparison Pages)
=================================== */

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.feature-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 2rem;
  transition: all 0.3s ease;
}

.feature-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-4px);
}

.feature-card__icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 1.5rem;
  display: block;
}

.feature-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.feature-card__description {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .feature-card {
    padding: 1.5rem;
  }

  .feature-card__icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }

  .feature-card__title {
    font-size: 1.25rem;
  }

  .feature-card__description {
    font-size: 0.9375rem;
  }
}

/* ===================================
   PRICING COMPARISON (Asymmetric)
=================================== */

.pricing-comparison-section {
  padding: 5rem 0;
  background: var(--bg-dark);
}

.pricing-comparison-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* GhostShorts - The Winner */
.pricing-comparison__winner {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.1));
  border: 2px solid rgba(139, 92, 246, 0.4);
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  position: relative;
  box-shadow: 0 20px 60px rgba(139, 92, 246, 0.3);
  transform: scale(1.05);
}

.pricing-winner-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--purple), var(--magenta));
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.pricing-winner-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.pricing-winner-logo img {
  height: 48px;
  width: auto;
}

.pricing-winner-price {
  text-align: center;
  margin-bottom: 2rem;
}

.price-currency {
  font-size: 2rem;
  font-weight: 600;
  color: var(--purple);
  vertical-align: top;
}

.price-amount {
  font-size: 4.5rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
}

.price-period {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.pricing-winner-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}

.pricing-winner-features li {
  padding: 0.75rem 0;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pricing-winner-features .feature-check {
  color: #10B981;
  font-size: 1.25rem;
  font-weight: bold;
  flex-shrink: 0;
}

.pricing-winner-cta {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--purple), var(--magenta));
  color: white;
  padding: 1.125rem 2rem;
  border-radius: 9999px;
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

.pricing-winner-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(139, 92, 246, 0.6);
}

/* Competitor - Muted */
.pricing-comparison__competitor {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  opacity: 0.7;
}

.pricing-competitor-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin-bottom: 1.5rem;
}

.pricing-competitor-price {
  text-align: center;
  margin-bottom: 2rem;
}

.pricing-competitor-price .price-amount {
  font-size: 3rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

.pricing-competitor-price .price-period {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.4);
}

.pricing-competitor-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-competitor-features li {
  padding: 0.625rem 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.pricing-competitor-features .feature-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.pricing-competitor-features li.feature-missing {
  opacity: 0.5;
}

.pricing-competitor-features li.feature-missing .feature-icon {
  color: #EF4444;
}

/* Mobile responsive */
@media (max-width: 968px) {
  .pricing-comparison-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .pricing-comparison__winner {
    transform: scale(1);
  }

  .pricing-winner-logo img {
    height: 40px;
  }

  .price-amount {
    font-size: 3.5rem;
  }

  .pricing-competitor-price .price-amount {
    font-size: 2.5rem;
  }
}
/* Related Comparisons Section */
.related-comparisons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.related-comparison-link {
  padding: 1.5rem 1.25rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(168, 85, 247, 0.05));
  border-radius: 0.75rem;
  border: 1px solid rgba(139, 92, 246, 0.2);
  color: white;
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  position: relative;
  overflow: hidden;
}

.related-comparison-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.related-comparison-link:hover::before {
  opacity: 1;
}

.related-comparison-link:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2);
}

.related-comparison-link span {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .related-comparisons-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .related-comparison-link {
    padding: 1.25rem 1rem;
    font-size: 0.95rem;
  }
}

/* ============================================================
   GS-NAV 2026 — glass navbar, product mega-menu, mobile sheet
   (EN Navbar.tsx; locale variants ported after design approval)
   ============================================================ */
.gs-promo { position: relative; z-index: 1001; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 40px; background: linear-gradient(90deg, rgba(168, 85, 247, 0.16), rgba(255, 61, 129, 0.16)); border-bottom: 1px solid rgba(255, 255, 255, 0.07); backdrop-filter: blur(10px); }
.gs-promo-link { font-size: 0.82rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; letter-spacing: 0.01em; }
.gs-promo-link:hover { color: #fff; }
.gs-promo-dot { width: 7px; height: 7px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 10px #ffd23f; animation: gsPulse 1.8s infinite; }
@keyframes gsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.gs-promo-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255, 255, 255, 0.55); cursor: pointer; padding: 6px; display: flex; border-radius: 6px; }
.gs-promo-x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.gs-nav { position: sticky; top: 0; z-index: 1000; background: rgba(8, 8, 14, 0.55); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid transparent; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.gs-nav.is-scrolled { background: rgba(8, 8, 14, 0.82); border-bottom-color: rgba(255, 255, 255, 0.08); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35); }
.gs-nav-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; gap: 28px; transition: height 0.3s ease; }
.gs-nav.is-scrolled .gs-nav-inner { height: 58px; }
.gs-nav-logo { display: inline-flex; align-items: center; flex: none; }
.gs-nav-logo img { height: 43px; width: auto; display: block; }

.gs-nav-menu { display: flex; align-items: center; gap: 18px; margin-inline-start: 52px; }
.gs-nav-item { position: relative; }
.gs-nav-item--mega { position: static; } /* mega anchors to .gs-nav-inner, so it can never overflow the viewport */
.gs-nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 10px 6px; border-radius: 10px; background: none; border: none; font-family: inherit; font-size: 0.95rem; font-weight: 550; letter-spacing: 0.005em; color: rgba(235, 232, 245, 0.82); text-decoration: none; cursor: pointer; transition: color 0.18s, text-shadow 0.18s; }
.gs-nav-link:hover { color: #fff; text-shadow: 0 0 16px rgba(168, 85, 247, 0.55); }
.gs-nav-caret { transition: transform 0.2s ease; }
.gs-nav-item--mega:hover .gs-nav-caret { transform: rotate(180deg); }

/* mega menu */
.gs-mega { position: absolute; top: calc(100% + 12px); inset-inline: 0; padding: 20px 18px 14px; border-radius: 20px; background: rgba(14, 14, 22, 0.92); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06); opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.98); transform-origin: top center; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; }
.gs-nav-item--mega:hover .gs-mega, .gs-nav-item--mega:focus-within .gs-mega { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.gs-mega::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } /* hover bridge */
.gs-mega-col { display: flex; flex-direction: column; gap: 2px; }
.gs-mega-col-title { margin: 0 0 8px; padding: 0 12px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); }
.gs-mega-card { display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: 12px; text-decoration: none; transition: background 0.15s; text-align: start; }
.gs-mega-card:hover { background: rgba(255, 255, 255, 0.06); }
.gs-mega-icon { width: 32px; height: 32px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--_c, #a855f7); background: color-mix(in srgb, var(--_c, #a855f7) 14%, transparent); border: 1px solid color-mix(in srgb, var(--_c, #a855f7) 30%, transparent); }
.gs-mega-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gs-mega-txt b { font-size: 0.88rem; font-weight: 700; color: rgba(255, 255, 255, 0.94); }
.gs-mega-txt small { font-size: 0.73rem; line-height: 1.35; color: rgba(255, 255, 255, 0.5); }
.gs-mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 13px 12px 3px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.gs-mega-foot-link { font-size: 0.82rem; font-weight: 600; color: rgba(255, 255, 255, 0.66); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.gs-mega-foot-link:hover { color: #fff; }
.gs-mega-foot-link--hot { color: #c084fc; }
.gs-mega-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #35e0ff; background: rgba(53, 224, 255, 0.12); border: 1px solid rgba(53, 224, 255, 0.3); padding: 2px 7px; border-radius: 999px; }

/* actions */
.gs-nav-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 22px; }
.gs-lang { position: static; }
.gs-lang-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 2px; border-radius: 10px; background: none; border: none; font-family: inherit; font-weight: 550; color: rgba(235, 232, 245, 0.74); font-size: 0.9rem; cursor: pointer; transition: color 0.18s; }
.gs-lang-btn:hover { color: #fff; }
.gs-lang-globe { flex: none; opacity: 0.85; }
.gs-lang-caret { flex: none; opacity: 0.7; transition: transform 0.2s ease; }
.gs-lang-btn[aria-expanded="true"] .gs-lang-caret { transform: rotate(180deg); }
.gs-nav-signin { font-size: 0.95rem; font-weight: 550; color: rgba(235, 232, 245, 0.82); text-decoration: none; padding: 10px 2px; margin-inline-end: 12px; transition: color 0.18s, text-shadow 0.18s; }
.gs-nav-signin:hover { color: #fff; text-shadow: 0 0 16px rgba(168, 85, 247, 0.55); }
.gs-nav-cta { font-size: 1rem; font-weight: 650; color: #fff; text-decoration: none; padding: 16px 34px; border-radius: 999px; background: linear-gradient(135deg, #b06bff, #7c3aed 55%, #6d28d9); box-shadow: 0 0 46px -6px rgba(168, 85, 247, 0.42), 0 0 92px -14px rgba(168, 85, 247, 0.5), 0 8px 30px -14px rgba(124, 58, 237, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.gs-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 0 56px -4px rgba(168, 85, 247, 0.55), 0 0 110px -12px rgba(168, 85, 247, 0.6), 0 8px 32px -14px rgba(124, 58, 237, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* Mobile carries no menu at all: the nav links, Sign In and the language control
   are desktop-only, leaving the logo and one compact CTA. */
@media (max-width: 1023px) {
  .gs-nav-menu, .gs-nav-signin, .gs-lang { display: none; }
  .gs-nav-actions { margin-inline-start: auto; } /* logical, or Arabic pushes the CTA to the wrong edge */
  /* auto-hide: slides away on scroll-down, returns on scroll-up. Mobile only -
     the desktop bar stays put. Asymmetric easing is the point: it accelerates away
     (ease-in) and glides back (ease-out-expo), which reads far smoother than one
     curve in both directions. Fades as it travels so it dissolves rather than
     snapping off the edge. */
  .gs-nav { will-change: transform; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.34s ease-out, padding 0.3s ease; }
  .gs-nav.is-hidden { transform: translateY(-118%); opacity: 0; transition: transform 0.44s cubic-bezier(0.6, 0, 0.9, 0.2), opacity 0.32s ease-in, padding 0.3s ease; }
  /* Mobile CTA: a compact capsule, NOT the big puffy pill and NOT the squircle
     that replaced it (Adam, 2026-08-20). The read we want is "a small separate
     object sitting inside the bar's capsule", so three things hold together and
     must move together if any one of them changes:
       1. fully round (999px) - a 12px radius left too much straight edge and the
          button read as a rectangle next to a capsule
       2. small enough that the bar frames it - it sits ~13px clear of the pill's
          top and bottom, and .gs-nav-inner's right padding matches that gap so
          the space around it is even on all four sides (concentric, not cramped)
       3. glow stays soft - the roundness does the work; a heavy glow at this size
          just smudges. Purple gradient unchanged, no outline (that's Chexy's
          look, not ours). */
  /* It should also read as a PHYSICAL key you press (Adam, 2026-08-20). Four
     shadow layers build that, and they only work together:
       a) the hard 2px offset in dark purple is the button's SIDE WALL - zero blur
          is what makes it a solid edge instead of a smudge. This is the whole
          illusion; blur it and the button goes flat.
       b) the blurred dark layer under it is the contact shadow the button casts
          on the bar, which is what lifts it off the surface
       c) our soft purple glow, kept
       d) the two insets light the top edge and seat the bottom, so the face
          itself looks curved rather than printed on
     margin-bottom offsets the wall: the CTA is centred by flex, and without it
     the 2px wall hangs below the button and the whole thing sits low in the bar. */
  .gs-nav-cta { font-size: 0.78rem; font-weight: 650; letter-spacing: 0.005em; line-height: 1.2; padding: 7px 18px; border-radius: 999px;
    margin-bottom: 2px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: transform 0.09s ease-out, box-shadow 0.09s ease-out;
    box-shadow: 0 2px 0 #4a1a91, 0 4px 9px -3px rgba(0, 0, 0, 0.6), 0 0 20px -8px rgba(168, 85, 247, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(0, 0, 0, 0.16); }
  /* Pressed: travel exactly the 2px of the wall, so the button bottoms out onto
     the bar rather than sliding down it. Wall collapses to 0, contact shadow
     tightens, and an inset dark wash reads as the face dipping in. */
  .gs-nav-cta:active { transform: translateY(2px);
    box-shadow: 0 0 0 #4a1a91, 0 1px 3px -1px rgba(0, 0, 0, 0.5), 0 0 13px -8px rgba(168, 85, 247, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 2px 5px -2px rgba(0, 0, 0, 0.32); }
  .gs-nav-cta:hover { box-shadow: 0 2px 0 #4a1a91, 0 5px 12px -3px rgba(0, 0, 0, 0.62), 0 0 28px -7px rgba(168, 85, 247, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(0, 0, 0, 0.16); }
  .gs-promo { padding: 8px 44px; }
  .gs-promo-link { font-size: 0.76rem; }
}
/* Touch screens latch :hover after a tap, so the desktop lift would stick to the
   button after it is pressed and fight the press-down. Touch gets :active only. */
@media (max-width: 1023px) and (hover: none) {
  .gs-nav-cta:hover { transform: none;
    box-shadow: 0 2px 0 #4a1a91, 0 4px 9px -3px rgba(0, 0, 0, 0.6), 0 0 20px -8px rgba(168, 85, 247, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(0, 0, 0, 0.16); }
  .gs-nav-cta:hover:active { transform: translateY(2px);
    box-shadow: 0 0 0 #4a1a91, 0 1px 3px -1px rgba(0, 0, 0, 0.5), 0 0 13px -8px rgba(168, 85, 247, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 2px 5px -2px rgba(0, 0, 0, 0.32); }
}

@media (prefers-reduced-motion: reduce) {
  .gs-promo-dot { animation: none; }
  .gs-mega, .gs-nav-inner, .gs-nav { transition: none; }
}

/* ==== GS-NAV beautify pass ==== */
/* CTA: the one filled element in the bar, lit from within rather than shadowed */
.gs-nav-cta { position: relative; isolation: isolate; }

/* mega panel: gradient hairline + inner glow + staggered card entrance */
.gs-mega { background: radial-gradient(120% 90% at 20% 0%, rgba(168, 85, 247, 0.1), transparent 55%), #0c0c14; }
.gs-mega::after { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 2px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #a855f7, #ff3d81, #ffd23f); opacity: 0.75; }
.gs-nav-item--mega:hover .gs-mega-card, .gs-nav-item--mega:focus-within .gs-mega-card,
.gs-nav-item--mega:hover .gs-mega-col-title, .gs-nav-item--mega:focus-within .gs-mega-col-title { opacity: 0; animation: gsCardIn 0.3s ease forwards; }
.gs-mega-col:nth-child(2) .gs-mega-card, .gs-mega-col:nth-child(2) .gs-mega-col-title { animation-delay: 0.04s; }
.gs-mega-col:nth-child(3) .gs-mega-card, .gs-mega-col:nth-child(3) .gs-mega-col-title { animation-delay: 0.08s; }
.gs-mega-col:nth-child(4) .gs-mega-card, .gs-mega-col:nth-child(4) .gs-mega-col-title { animation-delay: 0.12s; }
@keyframes gsCardIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

/* mega cards: icon glow + name color shift + hairline border on hover */
.gs-mega-card { border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; }
.gs-mega-card:hover { border-color: color-mix(in srgb, var(--_c, #a855f7) 35%, transparent); background: color-mix(in srgb, var(--_c, #a855f7) 7%, transparent); }
.gs-mega-icon { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.gs-mega-card:hover .gs-mega-icon { transform: scale(1.08); box-shadow: 0 0 18px color-mix(in srgb, var(--_c, #a855f7) 45%, transparent); }
.gs-mega-card:hover .gs-mega-txt b { color: #fff; }

/* promo strip: animated gradient hairline under it */
.gs-promo { border-bottom: none; }
.gs-promo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.7), rgba(255, 61, 129, 0.7), transparent); background-size: 200% 100%; animation: gsFlow 6s linear infinite; }
@keyframes gsFlow { from { background-position: 0% 0; } to { background-position: 200% 0; } }

/* burger hover */
@media (prefers-reduced-motion: reduce) {
  .gs-promo::after { animation: none; }
  .gs-nav-item--mega:hover .gs-mega-card, .gs-nav-item--mega:hover .gs-mega-col-title { animation: none; opacity: 1; }
}

/* ==== GS-NAV beautify II: floating pill + mega spotlight ==== */
.gs-nav { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; padding: 18px 22px 0; transition: padding 0.3s ease; }
.gs-nav.is-scrolled { background: none; border-bottom: none; box-shadow: none; padding-top: 12px; }
.gs-nav-inner { max-width: min(1520px, 89vw); height: 88px; padding-block: 0; padding-inline: 38px 28px; border-radius: 999px; background: rgba(11, 10, 20, 0.88); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(168, 85, 247, 0.32); box-shadow: 0 28px 72px rgba(0, 0, 0, 0.62), 0 8px 24px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.07); transition: height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.gs-nav.is-scrolled .gs-nav-inner { height: 74px; background: rgba(11, 10, 20, 0.94); border-color: rgba(168, 85, 247, 0.4); box-shadow: 0 26px 64px rgba(0, 0, 0, 0.66), 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* ambient purple atmosphere: a wide haze across the top of the page plus a
   brighter pool at the right-hand end, so the capsule reads as floating in
   the hero glow rather than sitting on a separate strip */
.gs-nav::after { content: ""; position: absolute; z-index: -1; top: -40px; left: 0; right: 0; height: 290px; pointer-events: none;
  background: radial-gradient(58% 100% at 50% 0%, rgba(124, 58, 237, 0.16), transparent 72%),
              radial-gradient(20% 78% at 84% 30%, rgba(168, 85, 247, 0.2), transparent 70%); }

/* The logo is a single ghost+wordmark image, so any glow applies to the whole
   lockup. A radial aura behind it read as a purple smudge once the capsule went
   opaque - a tight drop-shadow is the restrained version. */
.gs-nav-logo { position: relative; }
.gs-nav-logo img { filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.2)); }

/* mega: four category columns across the pill */
.gs-mega { inset-inline-end: auto; width: min(1000px, 100%); }
.gs-mega-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: start; }
.gs-mega-cols > * + * { border-inline-start: 1px solid rgba(255, 255, 255, 0.05); padding-inline-start: 6px; }
@media (max-width: 1023px) {
  .gs-nav { padding: 12px 14px 0; }
  .gs-nav-inner { padding-inline: 18px 12px; height: 54px; } /* right pad == the CTA's top/bottom clearance */
  .gs-nav-logo img { height: 31px; }
}

/* ==== GS-NAV: pill truly floats — page flows up behind it (no seam band) ==== */
.gs-nav { margin-bottom: -106px; pointer-events: none; } /* wrapper height: 18 pad + 88 pill */
.gs-nav-inner { pointer-events: auto; }
@media (max-width: 1023px) {
  .gs-nav { margin-bottom: -66px; } /* 12 pad + 54 pill */
}

/* The language menu IS the mega panel, just one column wide: same shell, same
   gradient hairline, same card rows. Keeping it a separate component is what made
   the two dropdowns feel unrelated. */
/* ARABIC (dir="rtl"): the layout mirrors for free from the logical properties above.
   What does NOT come for free is weight - bold Arabic script is genuinely hard to read,
   so every bold in the navbar is flattened and emphasis is carried by size and colour
   instead. This is Adam's standing Arabic rule, not a stylistic preference. */
[dir="rtl"] .gs-mega-txt b { font-weight: 400; font-size: 0.96rem; color: #fff; }
[dir="rtl"] .gs-mega-txt small { font-size: 0.78rem; }
[dir="rtl"] .gs-nav-link, [dir="rtl"] .gs-nav-signin { font-weight: 400; font-size: 1rem; }
[dir="rtl"] .gs-lang-btn { font-weight: 400; }
[dir="rtl"] .gs-nav-cta { font-weight: 500; font-size: 1rem; }
[dir="rtl"] .gs-mega-col-title { font-weight: 500; font-size: 0.76rem; letter-spacing: 0; }
[dir="rtl"] .gs-mega-badge { font-weight: 500; letter-spacing: 0; font-size: 0.68rem; }
[dir="rtl"] .gs-mega-foot-link { font-weight: 400; font-size: 0.88rem; }
[dir="rtl"] .footer-lang.is-current { font-weight: 400; }
[dir="rtl"] .gs-mega-cols { direction: rtl; }

/* Footer language switcher - the only language control on mobile, since the mobile
   navbar is deliberately logo + CTA only. */
.footer-langs { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 4px; color: rgba(255, 255, 255, 0.4); }
.footer-langs-globe { flex: none; margin-top: 3px; }
.footer-langs-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.footer-lang { font-size: 0.82rem; font-weight: 500; color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color 0.15s; }
.footer-lang:hover { color: #fff; }
.footer-lang.is-current { color: #c084fc; font-weight: 650; }

.gs-mega--lang { inset-inline-start: auto; inset-inline-end: 20px; width: 252px; padding: 14px 12px 12px; opacity: 1; visibility: visible; transform: none; }
.gs-mega--lang .gs-mega-col-title { margin-bottom: 6px; }
.gs-lang-flag { font-size: 1.05rem; line-height: 1; }
.gs-mega--lang .gs-mega-txt small { letter-spacing: 0.08em; font-weight: 700; font-size: 0.66rem; }
.gs-mega-card.is-current { background: color-mix(in srgb, var(--_c, #a855f7) 10%, transparent); border-color: color-mix(in srgb, var(--_c, #a855f7) 30%, transparent); }
.gs-mega-card.is-current .gs-mega-txt b { color: #fff; }
.gs-lang-check { flex: none; margin-inline-start: auto; color: #c084fc; }