:root {
  --color-bg-dark: rgb(26, 11, 46);
  --color-bg-white: #ffffff;
  --color-primary-yellow: rgb(255, 224, 22);
  --color-text-main: rgb(26, 11, 46);
  --color-text-light: rgba(26, 11, 46, 0.7);
  --color-border-light: rgba(26, 11, 46, 0.1);
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --spacing-section: 80px;
  --container-width: 1200px;
}

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

body {
  line-height: 1.6;
  background-color: var(--color-bg-white);
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-body);
  color: var(--color-text-main);
}

.page-wrapper {
  position: relative;
  overflow: clip;
  /* Fixes sticky positioning while keeping overflow safety */
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
}

.main-wrapper {
  position: relative;
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}

a:hover {
  opacity: 0.8;
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.button-primary {
  background-color: var(--color-primary-yellow);
  color: var(--color-bg-dark);
}

.button-outline {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-bg-dark);
  padding: 15px 0;
  z-index: 1000;
  border-bottom: 0px solid transparent;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.logo-icon {
  height: 34px;
  width: auto;
  margin-right: 0;
}

.logo span {
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.8;
  font-family: var(--font-body);
}

.nav-links {
  display: flex;
  gap: 20px;
  color: #fff;
  font-size: 0.95rem;
  align-items: center;
}

.nav-links a {
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.nav-links a:visited,
.nav-links a:active,
.nav-links a:focus {
  color: #ffffff !important;
}

.nav-links a:hover {
  opacity: 0.8;
}

.nav-links a.active {
  color: #ffffff !important;
  font-weight: 700;
  border-bottom: 2px solid var(--color-primary-yellow);
}

/* Navigation Actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Language Dropdown */
.lang-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.lang-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
}

.lang-menu {
  display: block;
  /* Always block but hidden via opacity/visibility for anim */
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: calc(100% + 15px);
  /* Spacing from button */
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: rgba(18, 18, 18, 0.95);
  /* Deep dark bg */
  backdrop-filter: blur(10px);
  /* Glass effect */
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Subtle border */
  border-radius: 12px;
  padding: 6px;
  min-width: 140px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bridge the gap so mouse doesn't leave hover area */
.lang-menu::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: transparent;
}

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

.lang-menu a {
  display: block;
  padding: 10px 16px;
  color: #ccc;
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 8px;
  transition: all 0.2s;
  text-align: center;
  margin-bottom: 2px;
}

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


.nav-phone-pill {
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 50px;
  color: #fff;
  font-size: 0.9rem;
}

/* Hero Section */
.hero {
  background-color: rgb(19, 4, 32);
  background-image: radial-gradient(circle at 50% 120%, rgba(138, 43, 226, 0.4) 0%, rgba(26, 11, 46, 0) 60%);
  /* Keeping a subtle effect, but main is dark green */
  color: #fff;
  padding: 160px 0 100px;
  position: relative;
  overflow: hidden;
  text-align: left;
}

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

.hero-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 24px;
}

.hero h1 {
  font-size: 4rem;
  line-height: 1.1;
  margin-bottom: 24px;
  font-weight: 700;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 40px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 540px;
  line-height: 1.6;
}

.hero-cta {
  display: flex;
  gap: 15px;
  align-items: center;
}

.hero-cta .button-primary {
  background-color: var(--color-bg-dark);
  /* Dark button */
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 14px 28px;
}

.hero-cta .button-primary:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.hero-cta .button-secondary {
  background-color: var(--color-primary-yellow);
  color: var(--color-bg-dark);
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.hero-cta .button-secondary:hover {
  opacity: 0.9;
}

.reviews {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 40px;
  /* Separated from buttons */
}

.stars {
  color: var(--color-primary-yellow);
}

.hero-image-wrapper {
  position: relative;
  z-index: 2;
}

.hero-image-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 0;
  /* Removing border radius for this screenshot style */
  box-shadow: none;
  transform: scale(1.25);
  transform-origin: center center;
}

html[lang="zh"] .hero-image-wrapper img {
  transform: scale(1.45);
}

/* How It Works */
.section {
  padding: var(--spacing-section) 0;
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title h2 {
  font-size: 2.5rem;
  color: var(--color-bg-dark);
}

.section-title p {
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 40px;
}

.step-card {
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  border: 1px solid var(--color-border-light);
  transition: transform 0.3s;
}

.step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.step-icon {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

/* Features Split */
.feature-split {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 80px;
}

.feature-split.reverse {
  flex-direction: row-reverse;
}

.feature-content {
  flex: 1;
}

.feature-image {
  flex: 1;
  background-color: #f5f5f5;
  border-radius: 24px;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.feature-image img {
  max-width: 100%;
  height: auto;
}

/* Grid Features */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: center;
}

.feature-item {
  padding: 20px;
}

/* FAQ */
.faq-section {
  background-color: var(--color-bg-white);
  padding: 100px 0;
}

.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
  align-items: start;
  /* Fix: Prevent stretch behavior */
}

.faq-item {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 24px 32px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
  transform: translateY(-2px);
}

.faq-question {
  color: #080808;
  font-size: 1.25rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.faq-question span {
  color: #F53900;
  /* Voiply Red/Orange */
  font-size: 1.5rem;
  font-weight: 400;
  transition: transform 0.3s;
}

.faq-item.active .faq-question span {
  transform: rotate(45deg);
}

.faq-answer {
  margin-top: 16px;
  color: #585858;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  display: none;
  /* JS toggles this */
}

.faq-item.active .faq-answer {
  display: block;
}

/* Responsive FAQ */
@media (max-width: 768px) {
  .faq-list {
    grid-template-columns: 1fr;
  }
}

/* Footer */
/* Footer Premium Redesign */
footer {
  background-color: var(--color-bg-dark);
  color: #fff;
  padding: 80px 0 40px;
  /* Restored generous spacing for premium feel */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.footer-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.footer-top-grid {
  margin-bottom: 60px;
  /* Spacious separation */
}

.footer-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* Exactly equal width for all 5 columns */
  gap: 40px;
  /* Consistent spacing */
}

/* Premium Headers */
.footer-column h4 {
  color: #fff;
  font-size: 0.85rem;
  /* Smaller but sharper */
  font-weight: 700;
  text-transform: uppercase;
  /* Premium touch */
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.footer-logo-col .logo {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 0px;
  /* Logo stands alone */
}

/* Premium Links */
.footer-column a {
  display: block;
  color: #999;
  /* Sophisticated grey */
  font-size: 0.95rem;
  line-height: 2.2;
  /* Taller line height for easy reading */
  text-decoration: none;
  transition: all 0.2s ease;
}

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

/* Footer Bottom Strip */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  font-size: 0.85rem;
}

.footer-left-group {
  display: flex;
  align-items: center;
  gap: 40px;
}

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

.footer-legal-links a {
  color: #666;
  text-decoration: none;
  transition: color 0.2s;
}

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

/* Social Icons */
.footer-social-icons {
  display: flex;
  gap: 12px;
}

.social-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
  /* Subtle border */
}

.social-icon-link:hover {
  background: #fff;
  /* Invert on hover for premium feel */
  border-color: #fff;
  transform: translateY(-2px);
}

.social-icon-link:hover img {
  filter: brightness(0);
  /* Black icon on white bg */
}

.social-icon-link img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
  transition: all 0.3s;
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-nav-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .footer-logo-col {
    grid-column: 1 / -1;
    margin-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .footer-nav-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
  }

  .footer-top-grid {
    gap: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .footer-left-group {
    flex-direction: column;
    gap: 15px;
  }

  .footer-legal-links {
    justify-content: center;
  }
}

/* Logo Strip */
.logo-strip {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  padding: 40px 0;
  overflow: hidden;
}

.logo-reel {
  display: flex;
  gap: 60px;
  animation: scrollReel 40s linear infinite;
  white-space: nowrap;
}

.logo-reel img {
  height: 30px;
  opacity: 0.8;
  filter: none;
  /* Make logos dark/original */
  transition: opacity 0.3s;
}

.logo-reel img:hover {
  opacity: 1;
}

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

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

/* Get Even More Carousel */
.features-carousel-wrapper {
  position: relative;
  overflow: hidden;
  padding: 10px 0 40px 0;
  /* Space for shadow and buttons */
}

.features-track {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}

.features-slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  /* 3 rows */
  gap: 24px;
  padding: 0 5px;
  /* Prevent shadow cut-off on edges */
}

.carousel-nav {
  display: flex;
  justify-content: flex-end;
  /* Align to right like Voiply? Or Center? Voiply usually right bottom */
  gap: 15px;
  margin-top: 30px;
  padding-right: 10px;
}

.nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-size: 1.2rem;
  color: #333;
}

.nav-btn:hover {
  border-color: #ddd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .features-slide {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    /* Dynamic rows */
  }
}

@media (max-width: 600px) {
  .features-slide {
    grid-template-columns: 1fr;
  }
}

.feature-card-small {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #f4f4f4;
  box-shadow: 0 -1px 10px rgba(172, 171, 171, 0.3);
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: transform 0.2s;
  text-align: left;
}

.feature-card-small:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  /* Slight lift on hover */
}

.feature-card-small img {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}

.feature-card-small h3 {
  font-size: 1.25rem;
  margin-bottom: 5px;
  font-weight: 500;
  color: #080808;
}

.feature-card-small p {
  font-size: 1rem;
  color: #585858;
  line-height: 1.5;
  font-weight: 400;
}

/* Remove link styling if not used or make invisible */
.feature-card-small a {
  display: none;
}

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

@media (max-width: 600px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* Yellow Banner Section */
.yellow-banner-section {
  background: linear-gradient(199deg, rgba(255, 255, 255, 0) 45.9%, #FFF 112.01%), #FFE016;
  padding: 80px 0;
  overflow: hidden;
  position: relative;
}

.banner-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.banner-content {
  flex: 1;
}

.banner-content h2 {
  font-size: 3rem;
  line-height: 1.1;
  color: var(--color-bg-dark);
  margin-bottom: 30px;
}

.banner-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.banner-image img {
  max-width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  transform: rotate(-5deg);
}

/* Responsive */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }

  .feature-split {
    flex-direction: column;
  }

  .feature-split.reverse {
    flex-direction: column;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .tabs-wrapper {
    flex-direction: column;
  }

  .tabs-list {
    flex: auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
}

/* Benefits Tabs Component */
.tabs-component {
  background-color: #fafafa;
  padding: 100px 0;
}

.tabs-wrapper {
  display: flex;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.tabs-list {
  flex: 0 0 40%;
  padding: 60px;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  background: #fdfdfd;
}

.tabs-list h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: var(--color-bg-dark);
}

.tab-item {
  padding: 24px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.5;
}

.tab-item:last-child {
  border-bottom: none;
}

.tab-item.active {
  opacity: 1;
}

.tab-item h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tab-indicator {
  height: 20px;
  width: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.3s;
}

.tab-item.active .tab-indicator {
  border-color: var(--color-bg-dark);
  background-color: var(--color-bg-dark);
}

.tabs-content {
  flex: 1;
  background-color: var(--color-bg-dark);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-pane {
  display: none;
  width: 100%;
  height: 100%;
  padding: 40px;
  animation: fadeIn 0.5s ease;
  flex-direction: column;
  justify-content: center;
}

.tab-pane.active {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.tab-pane img {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
}

/* Pricing Section */
.pricing-section {
  background-color: var(--color-bg-dark);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 120px 0;
}

.pricing-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://cdn.prod.website-files.com/678d02bf3966a86060a3c142/68efa8fbb479c535d21c6aec_cce8f50bb19df7ba05561afb17274c8a_pricing-bg.webp') center/cover no-repeat;
  opacity: 0.4;
  z-index: 1;
}

.pricing-content {
  position: relative;
  z-index: 2;
}

.pricing-title span.fair-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pricing-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px;
  border-radius: 50px;
  margin: 40px 0;
}

.toggle-btn {
  padding: 8px 24px;
  border-radius: 40px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
}

.toggle-btn.active {
  background: var(--color-primary-yellow);
  color: var(--color-bg-dark);
}

.price-display {
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 40px rgba(74, 222, 128, 0.4);
  margin-bottom: 20px;
  font-family: var(--font-heading);
}

/* Why Allo Cards */
.why-allo-card {
  background: #fdfdfd;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  text-align: left;
  transition: transform 0.3s;
}

.why-allo-card:hover {
  transform: translateY(-5px);
}

.card-image {
  background: #f5f5f5;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  padding: 30px;
}

/* Bento Grid Layout - WithAllo Style */
.bento-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  /* Optimized ratio */
  grid-template-rows: repeat(2, minmax(280px, auto));
  /* Taller rows */
  gap: 24px;
  margin-top: 40px;
}

.bento-card {
  background: #ffffff;
  border-radius: 32px;
  /* Larger radius */
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 48px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.1);
}

.bento-card h3 {
  font-size: 1.75rem;
  margin-bottom: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bento-card p {
  font-size: 1.1rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 0;
}

.bento-card.large {
  grid-row: span 2;
  background: linear-gradient(135deg, #fff 0%, #fefefe 100%);
  justify-content: flex-end;
  /* Align content to bottom */
}

/* Specific styling for the large privacy card */
.bento-card.large .card-content-wrapper {
  z-index: 2;
  position: relative;
}

.bento-card.large .bento-image-bg {
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%) scale(1.1);
  width: 60%;
  height: auto;
  opacity: 0.1;
  /* Subtle background effect */
  pointer-events: none;
  transition: transform 0.4s ease;
}

.bento-card.large:hover .bento-image-bg {
  transform: translateY(-50%) scale(1.15) rotate(-5deg);
  opacity: 0.15;
}

.bento-icon {
  font-size: 3rem;
  margin-bottom: 24px;
  display: inline-block;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

@media (max-width: 900px) {
  .bento-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .bento-card.large {
    grid-row: auto;
    min-height: 400px;
  }
}

/* Full Width White Header Section */
.section-header-white {
  background-color: var(--color-bg-white);
  padding: 100px 0;
  /* Matched to FAQ Section Height */
  width: 100%;
}

.section-header-white h2 {
  color: var(--color-text-main);
  font-size: 2.5rem;
  /* Matched to FAQ Title Font Size (2.5rem) */
  text-align: center;
  margin-bottom: 20px;
  font-weight: 700;
}

.section-header-white p {
  color: var(--color-text-light);
  /* Assuming this variable exists, or use #666 */
  font-size: 1.25rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Hushed.com Style Horizontal Accordion */
.tabs-info-section {
  padding: 60px 0 100px;
  /* Reduced top padding since header is separate */
  width: 100%;
  /* Keep StarPhone Dark Theme or use Hushed Peach? 
       User said "Style completely identical", let's use the layout mechanics but keep it readable. 
       Actually, "Everything completely identical" usually implies copying colors too, but standard practice is to adapt to brand.
       I will use the Layout/Animation fidelity first. */
  background-color: var(--color-bg-white);
  overflow: hidden;
}

.tabs-info__wrap {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 600px;
  /* Fixed height for the accordion */
  border-radius: 40px;
  overflow: hidden;
  gap: 0;
  /* No gaps, they touch like Hushed */
}

.tabs-info__item {
  position: relative;
  height: 100%;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  flex: 0 0 80px;
  /* Collapsed width */
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

/* Active State - Expands to fill available space */
.tabs-info__item.active {
  flex: 1;
  /* Grow to fill rest */
  cursor: default;
}

/* Specific Colors for Tabs (Matching or complementing StarPhone) */
.tabs-info__item:nth-child(1) {
  background-color: #551121;
}

/* Dark Red */
.tabs-info__item:nth-child(2) {
  background-color: #252a50;
}

/* Dark Blue */
.tabs-info__item:nth-child(3) {
  background-color: #1a0b2e;
}

/* Deep Purple */
.tabs-info__item:nth-child(4) {
  background-color: #3e265c;
}

/* Lighter Purple */
.tabs-info__item:nth-child(5) {
  background-color: #8f65ff;
}

/* Accent Purple */
.tabs-info__item:nth-child(6) {
  background-color: #114b5f;
}

/* Dark Teal for 6th item */

/* The Internal Content Structure */
.tabs-info__content-wrap {
  width: 100%;
  /* Ensures content stays wide even when container is narrow */
  min-width: 800px;
  /* Prevent text wrapping during transition */
  height: 100%;
  padding: 60px;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
  pointer-events: none;
}

.tabs-info__item.active .tabs-info__content-wrap {
  opacity: 1;
  pointer-events: all;
}

.tabs-info__text {
  flex: 0 0 45%;
  padding-right: 40px;
  color: #fff;
}

.tabs-info__text h3 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.tabs-info__text p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.8);
}

.tabs-info__image {
  flex: 1;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.tabs-info__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The Vertical Title for Collapsed State */
.tabs-info__title-wrap {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center center;
  white-space: nowrap;
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: opacity 0.3s;
  width: 400px;
  /* Ensure space for long text rotation */
  text-align: right;
}

.tabs-info__item.active .tabs-info__title-wrap {
  opacity: 0;
  /* Hide vertical title when active */
}


/* Mobile: Stack them instead of accordion */
@media (max-width: 900px) {
  .tabs-info__wrap {
    flex-direction: column;
    height: auto;
  }

  .tabs-info__item {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .tabs-info__item.active {
    flex: 0 0 auto;
  }

  .tabs-info__content-wrap {
    position: relative;
    opacity: 1;
    min-width: 0;
    flex-direction: column;
    padding: 40px 20px;
  }

  .tabs-info__title-wrap {
    position: relative;
    transform: none;
    left: 0;
    bottom: 0;
    padding: 20px;
    text-align: left;
    width: 100%;
    color: #fff;
  }

  .tabs-info__item.active .tabs-info__title-wrap {
    display: none;
  }

  .tabs-info__text {
    padding-right: 0;
    margin-bottom: 30px;
  }

  .tabs-info__image {
    height: 300px;
    width: 100%;
  }
}