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

html {
  scroll-behavior: smooth;
}

/* Design System - CSS Custom Properties */
:root {
  /* Colors */
  --color-primary: #1a3a2e;
  --color-accent: #d4654a;
  --color-secondary: #7e968a;
  --color-light: #f5f5f5;
  --color-muted: #b8c5b8;

  /* Spacing Scale (Golden Ratio) */
  --space-5xs: 0.146rem;
  --space-4xs: 0.236rem;
  --space-3xs: 0.382rem;
  --space-2xs: 0.486rem;
  --space-xs: 0.618rem;
  --space-sm: 0.786rem;
  --space-md-sm: 0.886rem;
  --space-base: 1rem;
  --space-md: 1.129rem;
  --space-md-lg: 1.272rem;
  --space-lg: 1.618rem;
  --space-xl: 2.058rem;
  --space-2xl: 2.618rem;
  --space-3xl: 4.236rem;

  /* Container Widths */
  --container-sm: 38.2rem;
  --container-md: 61.8rem;
  --container-lg: 100rem;
  --container-xl: 161.8rem;

  /* Border Radius */
  --radius-xs: 0.236rem;
  --radius-sm: 0.382rem;
  --radius-md: 0.618rem;
  --radius-lg: 1rem;
  --radius-xl: 1.618rem;
  --radius-2xl: 2.618rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 0.236rem 0.382rem 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 0.382rem 0.618rem 0 rgba(0, 0, 0, 0.08);
  --shadow-md: 0 0.618rem 1rem 0 rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 1rem 1.618rem 0 rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 1.618rem 2.618rem 0 rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 2.618rem 4.236rem 0 rgba(0, 0, 0, 0.18);
  --shadow-accent-sm: 0 0.382rem 0.618rem 0 rgba(212, 101, 74, 0.2);
  --shadow-accent-md: 0 0.618rem 1rem 0 rgba(212, 101, 74, 0.25);
  --shadow-accent-lg: 0 1rem 1.618rem 0 rgba(212, 101, 74, 0.3);

  /* Grid Gaps */
  --gap-xs: 0.618rem;
  --gap-sm: 0.786rem;
  --gap-md: 1.272rem;
  --gap-lg: 1.618rem;
  --gap-xl: 2.618rem;

  /* Aspect Ratios */
  --aspect-square: 1 / 1;
  --aspect-sm: 1.129 / 1;
  --aspect-md: 1.272 / 1;
  --aspect-golden: 1.618 / 1;
  --aspect-wide: 2.058 / 1;
  --aspect-ultra: 2.618 / 1;
  --aspect-cinema: 4.236 / 1;
  --aspect-portrait: 1 / 1.272;
  --aspect-tall: 1 / 1.618;
  --aspect-story: 1 / 2.058;

  /* Typography Scale - Standard Styles */
  --font-display-1: 4.235rem;
  --font-display-2: 2.618rem;
  --font-title-1: 2.058rem;
  --font-title-2: 1.618rem;
  --font-title-3: 1.272rem;
  --font-heading: 1.129rem;
  --font-subheading: 0.885rem;
  --font-body: 1rem;
  --font-callout: 0.943rem;
  --font-label: 0.835rem;
  --font-caption: 0.786rem;
  --font-overline: 0.786rem;

  /* Line Heights */
  --lh-tight: 1.129;
  --lh-normal: 1.272;
  --lh-relaxed: 1.618;

  /* Letter Spacing */
  --ls-display: -0.022em;
  --ls-title-2: -0.02em;
  --ls-title-3: -0.017em;
  --ls-heading: -0.014em;
  --ls-body: -0.011em;
  --ls-callout: -0.009em;
  --ls-subheading: -0.007em;
  --ls-caption: -0.007em;
  --ls-label: -0.004em;
  --ls-overline: 0.0618em;

  /* Breakpoints */
  --breakpoint-xs: 23.5rem;
  --breakpoint-sm: 38.2rem;
  --breakpoint-md: 61.8rem;
  --breakpoint-lg: 100rem;
  --breakpoint-xl: 161.8rem;

  /* Color Variations */
  --color-accent-hover: #c25a42;
  --color-glass-bg: rgba(51, 75, 74, 0.3);
  --color-glass-border: rgba(245, 245, 245, 0.1);
}

body {
  background: var(--color-primary);
  font-family: "PT Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: var(--lh-relaxed);
  font-size: var(--font-body);
  color: #2d3748;
  margin: 0;
  padding: 0;
}

/* Navigation - Design System Applied */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: var(--color-primary);
  z-index: 1000;
  padding: var(--space-md-lg) 0;
  transition: all 0.3s ease;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-md);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  height: var(--space-2xl);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.logo-icon {
  width: var(--space-2xl);
  height: var(--space-2xl);
  flex-shrink: 0;
  display: block;
  animation: logoSpin 15s ease-in-out 2s infinite;
}

@keyframes logoSpin {
  0% {
    transform: rotate(0deg);
  }
  17.5% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.logo-text {
  font-family: "Inter", sans-serif;
  font-weight: 200;
  font-size: var(--font-title-3);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-heading);
  color: var(--color-light);
}

.nav-links {
  display: flex;
  gap: var(--space-xl);
  list-style: none;
  align-items: center;
}

.nav-links li {
  display: flex;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: var(--color-muted);
  font-family: "PT Sans", sans-serif;
  font-weight: 200;
  font-size: var(--font-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: var(--color-light);
}

.nav-cta {
  background: var(--color-accent) !important;
  color: white !important;
  padding: var(--space-xs) var(--space-xl);
  border-radius: var(--radius-md);
  font-weight: 400;
  font-size: var(--font-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.nav-cta:hover {
  background: var(--color-accent-hover) !important;
  transform: translateY(calc(var(--space-5xs) * -1));
  box-shadow: var(--shadow-accent-md);
}

.nav-cta:active {
  background: var(--color-accent-hover) !important;
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Hamburger Menu */
.hamburger {
  display: none;
  flex-direction: column;
  gap: var(--space-4xs);
  cursor: pointer;
  padding: var(--space-xs);
  background: transparent;
  border: none;
  z-index: 1001;
  transition: transform 0.3s ease;
}

.hamburger:hover {
  transform: scale(1.05);
}

.hamburger-line {
  width: var(--space-xl);
  height: 2px;
  background: var(--color-light);
  border-radius: var(--radius-xs);
  transition: all 0.3s ease;
}

.hamburger.active .hamburger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

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

.hamburger.active .hamburger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: calc(var(--space-3xl) + var(--space-2xl));
  right: -100%;
  width: 17.5rem;
  max-width: calc(100vw - var(--space-xl));
  background: var(--color-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  padding: var(--space-md-lg);
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  border: 1px solid var(--color-glass-border);
}

.mobile-menu.active {
  right: var(--space-md-lg);
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
}

.mobile-menu li {
  width: 100%;
}

.mobile-menu a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-muted);
  text-decoration: none;
  font-family: "PT Sans", sans-serif;
  font-size: var(--font-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
}

.mobile-menu a:hover {
  background: rgba(245, 245, 245, 0.05);
  color: var(--color-light);
  transform: translateX(var(--space-4xs));
}

.mobile-menu .nav-cta {
  background: var(--color-accent);
  color: white !important;
  text-align: center;
  margin-top: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.mobile-menu .nav-cta:hover {
  background: var(--color-accent-hover);
  transform: translateX(0) translateY(calc(var(--space-5xs) * -1));
}

/* Menu Overlay */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 58, 46, 0.8);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 998;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Responsive Navigation - Golden Ratio Breakpoints */

/* Small Mobile - 376px and below */
@media (max-width: 23.5rem) {
  :root {
    font-size: 14px;
  }

  .logo-icon {
    width: var(--space-xl);
    height: var(--space-xl);
  }

  .logo-text {
    font-size: var(--font-body);
  }

  .logo {
    gap: var(--space-3xs);
  }

  .nav-content {
    padding: 0 var(--space-sm);
  }

  .mobile-menu {
    padding: var(--space-base);
    top: calc(var(--space-3xl) + var(--space-lg));
    width: calc(100% - var(--space-sm) * 2);
    left: auto;
    right: -100%;
    max-width: none;
    border-radius: var(--radius-lg);
  }

  .mobile-menu.active {
    right: var(--space-sm);
    left: var(--space-sm);
  }

  .mobile-menu a {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-callout);
  }
}

/* Mobile - 377px to 611px */
@media (min-width: 23.51rem) and (max-width: 38.2rem) {
  :root {
    font-size: 15px;
  }

  .nav-content {
    padding: 0 var(--space-base);
  }

  .nav-links {
    display: none;
  }

  .logo-icon {
    width: var(--space-xl);
    height: var(--space-xl);
  }

  .logo-text {
    font-size: var(--font-body);
  }

  .logo {
    gap: var(--space-3xs);
  }

  .mobile-menu {
    padding: var(--space-md);
    top: calc(var(--space-3xl) + var(--space-xl));
    width: 16rem;
  }

  .mobile-menu.active {
    right: var(--space-base);
  }
}

/* Tablet Portrait - 612px to 989px */
@media (min-width: 38.21rem) and (max-width: 61.8rem) {
  .nav-content {
    padding: 0 var(--space-md-lg);
  }

  .nav-links {
    gap: var(--space-lg);
  }

  .mobile-menu {
    width: 18.75rem;
    padding: var(--space-lg);
    top: calc(var(--space-3xl) + var(--space-2xl) + var(--space-xs));
  }

  .mobile-menu.active {
    right: var(--space-lg);
  }

  .mobile-menu a {
    padding: var(--space-md-sm) var(--space-md-lg);
  }
}

/* Show hamburger menu below 990px */
@media (max-width: 61.8rem) {
  .hamburger {
    display: flex;
  }

  .nav-links {
    display: none;
  }
}

/* Large Tablet/Small Desktop - 990px to 1279px */
@media (min-width: 61.81rem) and (max-width: 79.99rem) {
  :root {
    font-size: clamp(16px, 1.03vw, 16.5px);
  }

  .nav-content {
    max-width: min(75rem, 95vw);
    padding: 0 var(--space-xl);
  }

  .nav-links {
    gap: var(--space-xl);
  }
}

/* Desktop - 1280px to 1599px */
@media (min-width: 80rem) and (max-width: 99.99rem) {
  :root {
    font-size: clamp(16.5px, 1.06vw, 17px);
  }

  .nav-content {
    max-width: min(85rem, 90vw);
    padding: 0 var(--space-xl);
  }

  .nav-links {
    gap: var(--space-xl);
  }
}

/* Large Desktop - 1600px and up */
@media (min-width: 100rem) {
  :root {
    font-size: clamp(17px, 1.125vw, 18px);
  }

  .nav-content {
    max-width: min(var(--container-lg), 85vw);
    padding: 0 var(--space-2xl);
  }

  .nav-links {
    gap: var(--space-2xl);
  }
}

@media (min-width: 120rem) {
  :root {
    font-size: clamp(18px, 1.04vw, 20px);
  }

  .nav-content {
    max-width: 100rem;
    padding: 0 var(--space-3xl);
  }
}

/* Hero Section - Design System Applied */
.hero-section-new {
  background: var(--color-primary);
  min-height: 37.5rem;
  height: 100vh;
  padding-top: calc(
    var(--space-3xl) + var(--space-2xl)
  ); /* Account for fixed nav */
  padding-bottom: var(--space-2xl);
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
  margin-bottom: var(--space-3xl);
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.hero-container {
  max-width: var(--container-md);
  margin: 0 auto;
  display: flex;
  gap: var(--space-2xl);
  align-items: flex-start;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.hero-left {
  flex: 1; /* 1:1 division */
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-top: var(--space-2xl);
}

.hero-text-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md-lg);
}

.hero-heading {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-size: var(--font-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--color-light);
  margin: 0;
}

.hero-description {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-heading);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-heading);
  color: var(--color-muted);
  margin: 0;
  max-width: 24.8rem;
}

.hero-buttons {
  display: flex;
  gap: var(--space-base);
  align-items: center;
}

.hero-btn-primary {
  background: var(--color-accent);
  color: white;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-family: "PT Sans", sans-serif;
  font-weight: 500;
  font-size: var(--font-callout);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-callout);
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}

.hero-btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(calc(var(--space-5xs) * -1));
  box-shadow: var(--shadow-accent-md);
}

.hero-btn-primary:active {
  background: var(--color-accent-hover);
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.hero-btn-secondary {
  background: transparent;
  color: var(--color-light);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-family: "PT Sans", sans-serif;
  font-weight: 500;
  font-size: var(--font-callout);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-callout);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.hero-btn-secondary:hover {
  border-color: rgba(245, 245, 245, 0.3);
  transform: translateY(calc(var(--space-5xs) * -1));
  box-shadow: var(--shadow-sm);
}

.hero-btn-secondary:active {
  border-color: rgba(245, 245, 245, 0.4);
  background: rgba(245, 245, 245, 0.05);
  transform: translateY(0);
}

.hero-stats {
  display: flex;
  gap: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-glass-border);
}

.hero-stats .stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
}

.hero-stats .stat-number {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-size: var(--font-title-3);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-title-3);
  color: var(--color-light);
}

.hero-stats .stat-label {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-label);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-label);
  color: var(--color-muted);
}

.hero-right {
  flex: 1; /* 1:1 division */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-xl);
  min-height: 0;
}

.hero-image-container {
  position: relative;
  width: 100%;
  max-width: 38rem;
  max-height: calc(
    100vh - var(--space-3xl) - var(--space-2xl) - var(--space-2xl) -
      var(--space-2xl) - var(--space-xl)
  );
  aspect-ratio: var(--aspect-portrait);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  object-fit: contain;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: heroVideoFadeIn 1.5s ease-in-out;
}

/* Fade in on page load */
@keyframes heroVideoFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.hero-event-card {
  position: absolute;
  bottom: var(--space-xl);
  left: var(--space-xl);
  max-width: 22.5rem;
  background: #ffedd4;
  border-radius: var(--radius-xl);
  padding: var(--space-md-lg);
  box-shadow: var(--shadow-lg);
}

.event-date {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-label);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-label);
  color: #f54900;
  margin-bottom: var(--space-3xs);
}

.event-title {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-size: var(--font-heading);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-heading);
  color: #1e2939;
  margin: 0 0 var(--space-sm) 0;
}

.event-link {
  font-family: "PT Sans", sans-serif;
  font-weight: 500;
  font-size: var(--font-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: #f54900;
  text-decoration: none;
  transition: all 0.3s ease;
}

.event-link:hover {
  opacity: 0.8;
  transform: translateX(var(--space-4xs));
}

/* Hero Responsive - Golden Ratio Breakpoints */

/* Small Mobile Hero - 376px and below */
@media (max-width: 23.5rem) {
  .hero-section-new {
    min-height: auto;
    height: auto;
    padding-top: calc(var(--space-3xl) + var(--space-xl));
    padding-bottom: var(--space-xl);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .hero-container {
    flex-direction: column;
    gap: var(--space-lg);
    flex: initial;
    min-height: initial;
  }

  .hero-left {
    padding-top: 0;
    text-align: center;
    align-items: center;
    order: 2;
  }

  .hero-right {
    order: 1;
    padding-top: 0;
    padding-bottom: 0;
    min-height: initial;
    width: 100%;
    align-items: center;
  }

  .hero-image-container {
    max-height: none;
    max-width: 100%;
  }

  .hero-heading {
    font-size: var(--font-display-2);
  }

  .hero-description {
    max-width: 100%;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md-lg);
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--font-body);
    width: auto;
  }

  .hero-stats {
    gap: var(--space-lg);
    justify-content: center;
  }

  .hero-stats .stat-item {
    align-items: center;
  }

  .hero-stats .stat-number {
    font-size: var(--font-heading);
  }

  .hero-image-container {
    max-width: 100%;
  }

  .hero-event-card {
    bottom: var(--space-sm);
    left: var(--space-sm);
    right: var(--space-sm);
    max-width: none;
  }
}

/* Mobile Hero - 377px to 611px */
@media (min-width: 23.51rem) and (max-width: 38.2rem) {
  .hero-section-new {
    min-height: auto;
    height: auto;
    padding-top: calc(var(--space-3xl) + var(--space-2xl));
    padding-bottom: var(--space-xl);
    padding-left: var(--space-base);
    padding-right: var(--space-base);
  }

  .hero-container {
    flex-direction: column;
    gap: var(--space-xl);
    flex: initial;
    min-height: initial;
  }

  .hero-left {
    padding-top: 0;
    text-align: center;
    align-items: center;
    order: 2;
  }

  .hero-right {
    order: 1;
    padding-top: 0;
    padding-bottom: 0;
    min-height: initial;
    width: 100%;
    align-items: center;
  }

  .hero-image-container {
    max-height: none;
    max-width: 100%;
  }

  .hero-heading {
    font-size: var(--font-display-2);
  }

  .hero-description {
    max-width: 100%;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--font-body);
    width: auto;
  }

  .hero-stats {
    gap: var(--space-xl);
    justify-content: center;
  }

  .hero-stats .stat-item {
    align-items: center;
  }

  .hero-image-container {
    max-width: 100%;
  }

  .hero-event-card {
    bottom: var(--space-base);
    left: var(--space-base);
    right: var(--space-base);
    max-width: none;
  }
}

/* Tablet Hero - 612px to 989px - Keep Horizontal */
@media (min-width: 38.21rem) and (max-width: 61.8rem) {
  .hero-section-new {
    padding-left: var(--space-md-lg);
    padding-right: var(--space-md-lg);
  }

  .hero-container {
    flex-direction: row; /* Keep horizontal */
    gap: var(--space-lg);
    flex: 1;
    min-height: 0;
  }

  .hero-left,
  .hero-right {
    flex: 1;
    padding-top: var(--space-xl);
  }

  .hero-right {
    padding-bottom: var(--space-lg);
    min-height: 0;
  }

  .hero-left {
    gap: var(--space-md-lg);
    padding-top: var(--space-xl);
  }

  .hero-heading {
    font-size: var(--font-title-1);
    line-height: var(--lh-tight);
  }

  .hero-description {
    font-size: var(--font-body);
    max-width: 22rem;
  }

  .hero-buttons {
    gap: var(--space-sm);
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    padding: var(--space-xs) var(--space-lg);
    font-size: var(--font-label);
  }

  .hero-stats {
    gap: var(--space-md);
    padding-top: var(--space-md-lg);
  }

  .hero-stats .stat-number {
    font-size: var(--font-heading);
  }

  .hero-stats .stat-label {
    font-size: var(--font-caption);
  }

  .hero-image-container {
    max-width: 32rem;
  }

  .hero-event-card {
    bottom: var(--space-md);
    left: var(--space-md);
    max-width: 18rem;
    padding: var(--space-sm);
  }

  .event-title {
    font-size: var(--font-body);
  }

  .event-date {
    font-size: var(--font-caption);
  }
}

/* Large Tablet/Small Desktop Hero - 990px to 1279px */
@media (min-width: 61.81rem) and (max-width: 79.99rem) {
  .hero-section-new {
    min-height: clamp(38rem, 40vw, 42rem);
    height: 100vh;
    padding-left: clamp(var(--space-lg), 2vw, var(--space-xl));
    padding-right: clamp(var(--space-lg), 2vw, var(--space-xl));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .hero-container {
    max-width: min(75rem, 92vw);
    gap: clamp(var(--space-xl), 2.5vw, var(--space-2xl));
    flex: 1;
    min-height: 0;
  }

  .hero-heading {
    font-size: clamp(
      var(--font-display-2),
      3vw,
      calc(var(--font-display-2) * 1.15)
    );
  }

  .hero-description {
    font-size: clamp(var(--font-heading), 1.2vw, var(--font-title-3));
    max-width: min(28rem, 40vw);
  }

  .hero-image-container {
    max-width: min(42rem, 50vw);
  }

  .hero-stats .stat-number {
    font-size: clamp(var(--font-title-3), 1.4vw, var(--font-title-2));
  }
}

/* Desktop Hero - 1280px to 1599px */
@media (min-width: 80rem) and (max-width: 99.99rem) {
  .hero-section-new {
    min-height: clamp(42rem, 42vw, 45rem);
    height: 100vh;
    padding-left: clamp(var(--space-xl), 2.5vw, var(--space-2xl));
    padding-right: clamp(var(--space-xl), 2.5vw, var(--space-2xl));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .hero-container {
    max-width: min(85rem, 88vw);
    gap: clamp(var(--space-xl), 2.5vw, var(--space-2xl));
    flex: 1;
    min-height: 0;
  }

  .hero-heading {
    font-size: clamp(
      calc(var(--font-display-2) * 1.15),
      3.2vw,
      calc(var(--font-display-2) * 1.3)
    );
  }

  .hero-description {
    font-size: clamp(var(--font-heading), 1.25vw, var(--font-title-3));
    max-width: min(30rem, 38vw);
  }

  .hero-buttons {
    gap: clamp(var(--space-base), 1.2vw, var(--space-md-lg));
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    padding: clamp(var(--space-sm), 0.8vw, var(--space-md))
      clamp(var(--space-lg), 1.8vw, var(--space-xl));
    font-size: clamp(var(--font-callout), 0.9vw, var(--font-heading));
  }

  .hero-stats {
    gap: clamp(var(--space-lg), 1.8vw, var(--space-xl));
  }

  .hero-stats .stat-number {
    font-size: clamp(var(--font-title-2), 1.6vw, var(--font-title-1));
  }

  .hero-stats .stat-label {
    font-size: clamp(var(--font-label), 0.85vw, var(--font-callout));
  }

  .hero-image-container {
    max-width: min(46rem, 48vw);
  }

  .hero-event-card {
    bottom: var(--space-xl);
    left: var(--space-xl);
    max-width: 25rem;
    padding: var(--space-md-lg);
  }

  .event-title {
    font-size: var(--font-title-3);
  }
}

/* Large Desktop Hero - 1600px and up */
@media (min-width: 100rem) {
  .hero-section-new {
    min-height: clamp(45rem, 45vw, 50rem);
    height: 100vh;
    padding-top: clamp(
      calc(var(--space-3xl) + var(--space-2xl)),
      8vw,
      calc(var(--space-3xl) + var(--space-3xl))
    );
    padding-bottom: clamp(var(--space-2xl), 3vw, var(--space-3xl));
    padding-left: clamp(var(--space-xl), 2.5vw, var(--space-2xl));
    padding-right: clamp(var(--space-xl), 2.5vw, var(--space-2xl));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .hero-container {
    max-width: min(var(--container-lg), 85vw);
    gap: clamp(var(--space-2xl), 3vw, var(--space-3xl));
    flex: 1;
    min-height: 0;
  }

  .hero-left {
    gap: clamp(var(--space-xl), 2.2vw, var(--space-2xl));
    padding-top: clamp(var(--space-2xl), 3vw, var(--space-3xl));
  }

  .hero-right {
    padding-top: clamp(var(--space-2xl), 3vw, var(--space-3xl));
    padding-bottom: clamp(var(--space-lg), 2vw, var(--space-xl));
    min-height: 0;
  }

  .hero-text-content {
    gap: clamp(var(--space-md-lg), 1.5vw, var(--space-lg));
  }

  .hero-heading {
    font-size: clamp(
      calc(var(--font-display-2) * 1.3),
      3.6vw,
      var(--font-display-1)
    );
  }

  .hero-description {
    font-size: clamp(var(--font-heading), 1.3vw, var(--font-title-3));
    max-width: min(32rem, 36vw);
  }

  .hero-buttons {
    gap: clamp(var(--space-md-lg), 1.5vw, var(--space-lg));
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    padding: clamp(var(--space-sm), 1vw, var(--space-md))
      clamp(var(--space-lg), 2vw, var(--space-xl));
    font-size: clamp(var(--font-callout), 1vw, var(--font-heading));
  }

  .hero-stats {
    gap: clamp(var(--space-xl), 2vw, var(--space-2xl));
    padding-top: clamp(var(--space-xl), 2vw, var(--space-2xl));
  }

  .hero-stats .stat-number {
    font-size: clamp(var(--font-title-1), 1.8vw, var(--font-title-1));
  }

  .hero-stats .stat-label {
    font-size: clamp(var(--font-callout), 1vw, var(--font-heading));
  }

  .hero-image-container {
    max-width: min(50rem, 46vw);
  }

  .hero-event-card {
    bottom: clamp(var(--space-xl), 2vw, var(--space-2xl));
    left: clamp(var(--space-xl), 2vw, var(--space-2xl));
    max-width: min(28rem, 40vw);
    padding: clamp(var(--space-md-lg), 1.5vw, var(--space-lg));
  }

  .event-title {
    font-size: clamp(var(--font-title-3), 1.2vw, var(--font-title-3));
  }

  .event-date {
    font-size: clamp(var(--font-callout), 1vw, var(--font-heading));
  }
}

@media (min-width: 120rem) {
  .hero-section-new {
    min-height: clamp(50rem, 48vw, 56.25rem);
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .hero-container {
    max-width: min(100rem, 82vw);
    flex: 1;
    min-height: 0;
  }

  .hero-image-container {
    max-width: min(56rem, 44vw);
  }
}

/* About Section - What is Sila Vdoha */
.about-section {
  background: var(--color-primary);
  padding: var(--space-3xl) var(--space-lg);
  margin-bottom: var(--space-3xl);
  position: relative;
}

.about-container {
  max-width: var(--container-md);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.about-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.about-title,
.membership-title,
.requirements-title,
.testimonials-section-title {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-size: var(--font-title-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--color-light);
  margin: 0 0 var(--space-lg) 0;
}

.about-description,
.membership-description,
.requirements-description,
.testimonials-section-description {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-heading);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-secondary);
  margin: 0 auto;
  max-width: var(--container-sm);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.about-card {
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-xl);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  text-align: center;
  transition: all 0.3s ease;
  overflow: hidden;
}

.about-card:hover {
  transform: translateY(calc(var(--space-5xs) * -2));
  border-color: rgba(245, 245, 245, 0.2);
  box-shadow: var(--shadow-md);
}

.about-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin-bottom: 0;
}

.about-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

.about-card:hover .about-card-image img {
  transform: scale(1.05);
}

.about-card-description {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-secondary);
  margin: 0;
  flex: 1;
  padding: var(--space-lg) var(--space-xl) var(--space-base) var(--space-xl);
}

.about-card-link {
  font-family: "PT Sans", sans-serif;
  font-weight: 600;
  font-size: var(--font-body);
  line-height: var(--lh-normal);
  color: var(--color-accent);
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 0 var(--space-xl) var(--space-lg) var(--space-xl);
  display: block;
  width: 100%;
}

.about-card-link:hover {
  color: var(--color-light);
  transform: translateX(var(--space-5xs));
}

/* About Section CTA */
.about-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-2xl);
}

/* Secondary Button (Outline Style) */
.btn-secondary {
  font-family: "PT Sans", sans-serif;
  font-weight: 600;
  font-size: var(--font-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  color: var(--color-accent);
  background: transparent;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-xl);
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-secondary:hover {
  background: var(--color-accent);
  color: var(--color-light);
  transform: translateY(calc(var(--space-5xs) * -1));
  box-shadow: var(--shadow-md);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Primary Button (Solid Style) */
.btn-primary {
  background: var(--color-accent);
  color: white;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-family: "PT Sans", sans-serif;
  font-weight: 600;
  font-size: var(--font-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  transition: all 0.3s ease;
  display: inline-block;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(calc(var(--space-5xs) * -1));
  box-shadow: var(--shadow-accent-md);
}

.btn-primary:active {
  background: var(--color-accent-hover);
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Benefits Section - Figma Design */
.benefits-section {
  background: var(--color-primary);
  padding: var(--space-3xl) var(--space-lg);
  position: relative;
}

.benefits-container {
  max-width: var(--container-md);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.benefits-header {
  text-align: center;
}

.benefits-title {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-size: var(--font-title-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--color-light);
  margin: 0 0 var(--space-lg) 0;
}

.benefits-description {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-heading);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-secondary);
  margin: 0 auto;
  max-width: var(--container-sm);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.benefit-card {
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  transition: all 0.3s ease;
}

.benefit-card:hover {
  transform: translateY(calc(var(--space-5xs) * -2));
  border-color: rgba(245, 245, 245, 0.2);
  box-shadow: var(--shadow-md);
}

.benefit-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--space-xl);
}

.benefit-icon svg {
  width: var(--space-xl);
  height: var(--space-xl);
}

.benefit-title {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-size: var(--font-title-3);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-title-3);
  color: var(--color-light);
  margin: 0;
  text-align: center;
}

h3.benefit-title {
  font-family: "pt sans", sans-serif;
}

.benefit-description {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-secondary);
  margin: 0;
  text-align: center;
}

/* Responsive About Section */

/* Small Mobile - 376px and below */
@media (max-width: 23.5rem) {
  .about-section {
    padding: var(--space-2xl) var(--space-sm);
  }

 

  .about-title {
    font-size: var(--font-title-1);
    margin-bottom: var(--space-base);
  }

  .about-description {
    font-size: var(--font-body);
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .about-card-description {
    padding: var(--space-base) var(--space-lg) var(--space-xs) var(--space-lg);
  }

  .about-card-link {
    padding: 0 var(--space-lg) var(--space-base) var(--space-lg);
  }
}

/* Mobile - 377px to 611px */
@media (min-width: 23.51rem) and (max-width: 38.2rem) {
  .about-section {
    padding: var(--space-2xl) var(--space-base);
  }


  .about-title {
    font-size: var(--font-title-1);
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .about-card-description {
    padding: var(--space-base) var(--space-lg) var(--space-xs) var(--space-lg);
  }

  .about-card-link {
    padding: 0 var(--space-lg) var(--space-base) var(--space-lg);
  }
}

/* Tablet - 612px to 989px */
@media (min-width: 38.21rem) and (max-width: 61.8rem) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .about-title {
    font-size: var(--font-title-2);
  }
}

/* Large Tablet to Desktop - 990px to 1279px */
@media (min-width: 61.81rem) and (max-width: 79.99rem) {
  .about-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =================================
   MEMBERSHIP FEATURES SECTION
   ================================= */

.membership-section {
  background: var(--color-primary);
  padding: var(--space-3xl) var(--space-lg);
  margin-bottom: var(--space-3xl);
  position: relative;
}

.membership-container {
  max-width: var(--container-md);
  margin: 0 auto;
}

.membership-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}

.membership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.membership-card {
  background: var(--color-light);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: var(--space-md-sm);
  box-shadow: var(--shadow-md);
}

.membership-card:hover {
  transform: translateY(calc(var(--space-4xs) * -1));
  box-shadow: var(--shadow-lg);
}

.membership-number {
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-size: var(--font-title-2);
  line-height: 1;
  color: var(--color-accent);
  opacity: 1;
  margin-bottom: 0;
}

.membership-card-title {
  font-family: "PT Sans", serif;
  font-weight: 700;
  font-size: var(--font-title-3);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-title-3);
  color: var(--color-primary);
  margin: 0;
}

.membership-card-description {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-secondary);
  margin: 0;
  flex-grow: 1;
}

.membership-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
}

/* =================================
   REQUIREMENTS SECTION
   ================================= */

.requirements-section {
  background: var(--color-primary);
  padding: var(--space-3xl) var(--space-lg);
  margin-bottom: var(--space-3xl);
  position: relative;
}

.requirements-container {
  max-width: var(--container-md);
  margin: 0 auto;
}

.requirements-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}

.requirements-description {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-heading);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-secondary);
  margin: 0 auto;
}

.requirements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.requirements-card {
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  transition: all 0.3s ease;
  text-align: center;
}

.requirements-card:hover {
  border-color: rgba(245, 245, 245, 0.2);
  transform: translateY(calc(var(--space-5xs) * -1));
  box-shadow: var(--shadow-md);
}

.requirements-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.requirements-card-title {
  font-family: "PT Sans", serif;
  font-weight: 400;
  font-size: var(--font-title-3);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-title-3);
  color: var(--color-light);
  margin: 0 0 var(--space-md-lg) 0;
}

.requirements-card-description {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-secondary);
  margin: 0;
}

.requirements-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
}

.requirements-card-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

/* =================================
   PRICING SECTION
   ================================= */

.pricing-section {
  background-color: #1a3a2e;
  padding: var(--space-3xl) var(--space-lg);
  padding-bottom: calc(var(--space-3xl) * 1.5);
  margin-bottom: 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.pricing-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 2000 1400%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-200%25%22 y=%22-200%25%22 width=%22500%25%22 height=%22500%25%22%3E%3CfeGaussianBlur in=%22SourceGraphic%22 stdDeviation=%2220%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath fill=%22%231a3a2e%22 d=%22M0 0h2000v1400H0z%22%2F%3E%3Cellipse cx=%22109.297%22 cy=%2220.353%22 rx=%221.495%22 ry=%221.11%22 fill=%22%23334b4a%22 opacity=%22.142%22%2F%3E%3Cellipse cx=%22334.747%22 cy=%22107.912%22 rx=%221.654%22 ry=%221.288%22 fill=%22%23334b4a%22 opacity=%22-.049%22%2F%3E%3Cellipse cx=%22513.079%22 cy=%2248.396%22 rx=%221.714%22 ry=%221.238%22 fill=%22%23334b4a%22 opacity=%22.425%22%2F%3E%3Cellipse cx=%22778.399%22 cy=%2278.989%22 rx=%221.835%22 ry=%221.502%22 fill=%22%23334b4a%22 opacity=%22.503%22%2F%3E%3Cellipse cx=%22883.273%22 cy=%22109.071%22 rx=%221.761%22 ry=%221.353%22 fill=%22%23334b4a%22 opacity=%22-.174%22%2F%3E%3Cellipse cx=%221111.11%22 cy=%2215.202%22 rx=%221.639%22 ry=%221.177%22 fill=%22%23334b4a%22 opacity=%22.082%22%2F%3E%3Cellipse cx=%221241.06%22 cy=%2280.77%22 rx=%222.27%22 ry=%221.86%22 fill=%22%23334b4a%22 opacity=%22.149%22%2F%3E%3Cellipse cx=%221413.69%22 cy=%2210.946%22 rx=%221.863%22 ry=%221.678%22 fill=%22%23334b4a%22 opacity=%22-.004%22%2F%3E%3Cellipse cx=%221740.054%22 cy=%2216.176%22 rx=%221.444%22 ry=%221.263%22 fill=%22%23334b4a%22 opacity=%22.083%22%2F%3E%3Cellipse cx=%221835.625%22 cy=%227.426%22 rx=%221.294%22 ry=%221.026%22 fill=%22%23334b4a%22 opacity=%22.109%22%2F%3E%3Cellipse cx=%22101.88%22 cy=%22274.768%22 rx=%221.994%22 ry=%221.62%22 fill=%22%23334b4a%22 opacity=%22-.101%22%2F%3E%3Cellipse cx=%22321.859%22 cy=%22140.806%22 rx=%221.439%22 ry=%221.171%22 fill=%22%23334b4a%22 opacity=%22.432%22%2F%3E%3Cellipse cx=%22426.566%22 cy=%22177.801%22 rx=%221.214%22 ry=%221.098%22 fill=%22%23334b4a%22 opacity=%22.48%22%2F%3E%3Cellipse cx=%22764.263%22 cy=%22174.091%22 rx=%221.457%22 ry=%221.026%22 fill=%22%23334b4a%22 opacity=%22.06%22%2F%3E%3Cellipse cx=%22989.065%22 cy=%22220.623%22 rx=%221.987%22 ry=%221.71%22 fill=%22%23334b4a%22 opacity=%22.286%22%2F%3E%3Cellipse cx=%221152.135%22 cy=%22261.819%22 rx=%221.805%22 ry=%221.376%22 fill=%22%23334b4a%22 opacity=%22.68%22%2F%3E%3Cellipse cx=%221269.538%22 cy=%22279.149%22 rx=%222.212%22 ry=%221.737%22 fill=%22%23334b4a%22 opacity=%22.071%22%2F%3E%3Cellipse cx=%221592.429%22 cy=%22217.412%22 rx=%221.779%22 ry=%221.594%22 fill=%22%23334b4a%22 opacity=%22.478%22%2F%3E%3Cellipse cx=%221731.154%22 cy=%22264.845%22 rx=%222.131%22 ry=%221.773%22 fill=%22%23334b4a%22 opacity=%22.944%22%2F%3E%3Cellipse cx=%221872.753%22 cy=%22158.966%22 rx=%222.081%22 ry=%221.671%22 fill=%22%23334b4a%22 opacity=%22.273%22%2F%3E%3Cellipse cx=%22126.749%22 cy=%22344.274%22 rx=%222.265%22 ry=%221.823%22 fill=%22%23334b4a%22 opacity=%22.626%22%2F%3E%3Cellipse cx=%22291.847%22 cy=%22374.644%22 rx=%221.062%22 ry=%221.052%22 fill=%22%23334b4a%22 opacity=%22.23%22%2F%3E%3Cellipse cx=%22559.419%22 cy=%22381.988%22 rx=%221.713%22 ry=%221.295%22 fill=%22%23334b4a%22 opacity=%22.838%22%2F%3E%3Cellipse cx=%22780.579%22 cy=%22322.065%22 rx=%221.554%22 ry=%221.364%22 fill=%22%23334b4a%22 opacity=%22-.005%22%2F%3E%3Cellipse cx=%22905.633%22 cy=%22334.056%22 rx=%221.399%22 ry=%221.357%22 fill=%22%23334b4a%22 opacity=%22.506%22%2F%3E%3Cellipse cx=%221033.583%22 cy=%22320.773%22 rx=%221.603%22 ry=%221.599%22 fill=%22%23334b4a%22 opacity=%22.461%22%2F%3E%3Cellipse cx=%221378.426%22 cy=%22300.386%22 rx=%222.028%22 ry=%221.694%22 fill=%22%23334b4a%22 opacity=%22.523%22%2F%3E%3Cellipse cx=%221415.536%22 cy=%22308.157%22 rx=%221.911%22 ry=%221.49%22 fill=%22%23334b4a%22 opacity=%22-.089%22%2F%3E%3Cellipse cx=%221703.399%22 cy=%22404.557%22 rx=%221.455%22 ry=%221.435%22 fill=%22%23334b4a%22 opacity=%22.142%22%2F%3E%3Cellipse cx=%221949.772%22 cy=%22280.271%22 rx=%221.37%22 ry=%221.292%22 fill=%22%23334b4a%22 opacity=%22.529%22%2F%3E%3Cellipse cx=%22174.736%22 cy=%22549.167%22 rx=%221.565%22 ry=%221.128%22 fill=%22%23334b4a%22 opacity=%22.183%22%2F%3E%3Cellipse cx=%22211.196%22 cy=%22441.481%22 rx=%221.771%22 ry=%221.566%22 fill=%22%23334b4a%22 opacity=%22.423%22%2F%3E%3Cellipse cx=%22524.223%22 cy=%22428.829%22 rx=%221.441%22 ry=%221.111%22 fill=%22%23334b4a%22 opacity=%22-.049%22%2F%3E%3Cellipse cx=%22618.658%22 cy=%22515.25%22 rx=%221.627%22 ry=%221.189%22 fill=%22%23334b4a%22 opacity=%22-.142%22%2F%3E%3Cellipse cx=%22826.59%22 cy=%22459.06%22 rx=%221.888%22 ry=%221.443%22 fill=%22%23334b4a%22 opacity=%22.345%22%2F%3E%3Cellipse cx=%221153.045%22 cy=%22551.025%22 rx=%221.818%22 ry=%221.704%22 fill=%22%23334b4a%22 opacity=%22-.162%22%2F%3E%3Cellipse cx=%221201.239%22 cy=%22522.015%22 rx=%221.454%22 ry=%221.226%22 fill=%22%23334b4a%22 opacity=%22.617%22%2F%3E%3Cellipse cx=%221597.366%22 cy=%22540.839%22 rx=%221.456%22 ry=%221.224%22 fill=%22%23334b4a%22 opacity=%22.784%22%2F%3E%3Cellipse cx=%221674.211%22 cy=%22473.968%22 rx=%221.772%22 ry=%221.726%22 fill=%22%23334b4a%22 opacity=%22-.064%22%2F%3E%3Cellipse cx=%221916.417%22 cy=%22519.978%22 rx=%221.697%22 ry=%221.566%22 fill=%22%23334b4a%22 opacity=%22.267%22%2F%3E%3Cellipse cx=%22139.39%22 cy=%22681.72%22 rx=%221.71%22 ry=%221.547%22 fill=%22%23334b4a%22 opacity=%22-.166%22%2F%3E%3Cellipse cx=%22263.6%22 cy=%22595.48%22 rx=%221.42%22 ry=%221.328%22 fill=%22%23334b4a%22 opacity=%22.574%22%2F%3E%3Cellipse cx=%22579.573%22 cy=%22643.947%22 rx=%221.424%22 ry=%221.004%22 fill=%22%23334b4a%22 opacity=%22.605%22%2F%3E%3Cellipse cx=%22772.639%22 cy=%22688.345%22 rx=%221.233%22 ry=%221.191%22 fill=%22%23334b4a%22 opacity=%22.007%22%2F%3E%3Cellipse cx=%22887.849%22 cy=%22659.944%22 rx=%222.167%22 ry=%221.967%22 fill=%22%23334b4a%22 opacity=%22.084%22%2F%3E%3Cellipse cx=%221132.099%22 cy=%22578.277%22 rx=%221.831%22 ry=%221.629%22 fill=%22%23334b4a%22 opacity=%22.705%22%2F%3E%3Cellipse cx=%221288.395%22 cy=%22678.171%22 rx=%221.651%22 ry=%221.577%22 fill=%22%23334b4a%22 opacity=%22.76%22%2F%3E%3Cellipse cx=%221581.363%22 cy=%22564.257%22 rx=%222.063%22 ry=%221.586%22 fill=%22%23334b4a%22 opacity=%22.782%22%2F%3E%3Cellipse cx=%221673.162%22 cy=%22597.152%22 rx=%221.914%22 ry=%221.619%22 fill=%22%23334b4a%22 opacity=%22.294%22%2F%3E%3Cellipse cx=%221963.175%22 cy=%22693.366%22 rx=%221.386%22 ry=%221.117%22 fill=%22%23334b4a%22 opacity=%22.671%22%2F%3E%3Cellipse cx=%2213.173%22 cy=%22736.222%22 rx=%221.604%22 ry=%221.366%22 fill=%22%23334b4a%22 opacity=%22.311%22%2F%3E%3Cellipse cx=%22349.223%22 cy=%22716.658%22 rx=%221.384%22 ry=%221.068%22 fill=%22%23334b4a%22 opacity=%22.302%22%2F%3E%3Cellipse cx=%22491.725%22 cy=%22809.379%22 rx=%222.308%22 ry=%221.896%22 fill=%22%23334b4a%22 opacity=%22.791%22%2F%3E%3Cellipse cx=%22728.822%22 cy=%22779.363%22 rx=%222.089%22 ry=%221.907%22 fill=%22%23334b4a%22 opacity=%22.362%22%2F%3E%3Cellipse cx=%22865.772%22 cy=%22784.516%22 rx=%221.792%22 ry=%221.579%22 fill=%22%23334b4a%22 opacity=%22.396%22%2F%3E%3Cellipse cx=%221131.455%22 cy=%22821.579%22 rx=%221.769%22 ry=%221.76%22 fill=%22%23334b4a%22 opacity=%22.015%22%2F%3E%3Cellipse cx=%221393.616%22 cy=%22794.912%22 rx=%221.905%22 ry=%221.464%22 fill=%22%23334b4a%22 opacity=%22.9%22%2F%3E%3Cellipse cx=%221509.267%22 cy=%22784.017%22 rx=%221.447%22 ry=%221.364%22 fill=%22%23334b4a%22 opacity=%22.619%22%2F%3E%3Cellipse cx=%221632.19%22 cy=%22826.465%22 rx=%221.796%22 ry=%221.526%22 fill=%22%23334b4a%22 opacity=%22.024%22%2F%3E%3Cellipse cx=%221801.026%22 cy=%22820.056%22 rx=%221.975%22 ry=%221.598%22 fill=%22%23334b4a%22 opacity=%22-.013%22%2F%3E%3Cellipse cx=%2291.566%22 cy=%22966.62%22 rx=%221.465%22 ry=%221.022%22 fill=%22%23334b4a%22 opacity=%22.49%22%2F%3E%3Cellipse cx=%22238.344%22 cy=%22949.616%22 rx=%221.929%22 ry=%221.549%22 fill=%22%23334b4a%22 opacity=%22.875%22%2F%3E%3Cellipse cx=%22578.8%22 cy=%22908.324%22 rx=%221.559%22 ry=%221.201%22 fill=%22%23334b4a%22 opacity=%22.119%22%2F%3E%3Cellipse cx=%22798.391%22 cy=%22942.075%22 rx=%221.825%22 ry=%221.753%22 fill=%22%23334b4a%22 opacity=%22.652%22%2F%3E%3Cellipse cx=%22834.011%22 cy=%22954.179%22 rx=%221.434%22 ry=%221.201%22 fill=%22%23334b4a%22 opacity=%22.133%22%2F%3E%3Cellipse cx=%221022.87%22 cy=%22868.941%22 rx=%222.191%22 ry=%221.744%22 fill=%22%23334b4a%22 opacity=%22.31%22%2F%3E%3Cellipse cx=%221326.742%22 cy=%22848.981%22 rx=%221.829%22 ry=%221.331%22 fill=%22%23334b4a%22 opacity=%22-.01%22%2F%3E%3Cellipse cx=%221467.998%22 cy=%22911.516%22 rx=%221.725%22 ry=%221.669%22 fill=%22%23334b4a%22 opacity=%22.194%22%2F%3E%3Cellipse cx=%221720.173%22 cy=%22962.782%22 rx=%222.091%22 ry=%221.661%22 fill=%22%23334b4a%22 opacity=%22.585%22%2F%3E%3Cellipse cx=%221929.215%22 cy=%22979.644%22 rx=%221.354%22 ry=%221.117%22 fill=%22%23334b4a%22 opacity=%22.325%22%2F%3E%3Cellipse cx=%22146.594%22 cy=%221078.343%22 rx=%221.216%22 ry=%221.143%22 fill=%22%23334b4a%22 opacity=%22.427%22%2F%3E%3Cellipse cx=%22303.071%22 cy=%221049.438%22 rx=%221.32%22 ry=%221.158%22 fill=%22%23334b4a%22 opacity=%22.348%22%2F%3E%3Cellipse cx=%22460.561%22 cy=%221028.454%22 rx=%221.144%22 ry=%221.041%22 fill=%22%23334b4a%22 opacity=%22.372%22%2F%3E%3Cellipse cx=%22740.511%22 cy=%221070.782%22 rx=%221.71%22 ry=%221.319%22 fill=%22%23334b4a%22 opacity=%22.454%22%2F%3E%3Cellipse cx=%22950.59%22 cy=%22983.702%22 rx=%222.068%22 ry=%221.658%22 fill=%22%23334b4a%22 opacity=%22.588%22%2F%3E%3Cellipse cx=%221167.853%22 cy=%221013.313%22 rx=%221.404%22 ry=%221.296%22 fill=%22%23334b4a%22 opacity=%22.444%22%2F%3E%3Cellipse cx=%221362.313%22 cy=%221108.959%22 rx=%221.943%22 ry=%221.485%22 fill=%22%23334b4a%22 opacity=%22.689%22%2F%3E%3Cellipse cx=%221504.628%22 cy=%22989.711%22 rx=%221.93%22 ry=%221.72%22 fill=%22%23334b4a%22 opacity=%22.057%22%2F%3E%3Cellipse cx=%221722.224%22 cy=%221018.928%22 rx=%222.292%22 ry=%221.875%22 fill=%22%23334b4a%22 opacity=%22.223%22%2F%3E%3Cellipse cx=%221924.762%22 cy=%221051.444%22 rx=%221.355%22 ry=%221.326%22 fill=%22%23334b4a%22 opacity=%22.403%22%2F%3E%3Cellipse cx=%22143.928%22 cy=%221150.1%22 rx=%221.969%22 ry=%221.796%22 fill=%22%23334b4a%22 opacity=%22.79%22%2F%3E%3Cellipse cx=%22273.241%22 cy=%221234.074%22 rx=%222.001%22 ry=%221.956%22 fill=%22%23334b4a%22 opacity=%22-.096%22%2F%3E%3Cellipse cx=%22413.764%22 cy=%221153.686%22 rx=%221.234%22 ry=%221.167%22 fill=%22%23334b4a%22 opacity=%22.478%22%2F%3E%3Cellipse cx=%22675%22 cy=%221204.127%22 rx=%221.487%22 ry=%221.187%22 fill=%22%23334b4a%22 opacity=%22.003%22%2F%3E%3Cellipse cx=%22888.565%22 cy=%221185.5%22 rx=%221.449%22 ry=%221.046%22 fill=%22%23334b4a%22 opacity=%22.769%22%2F%3E%3Cellipse cx=%221039.348%22 cy=%221148.62%22 rx=%221.621%22 ry=%221.139%22 fill=%22%23334b4a%22 opacity=%22.069%22%2F%3E%3Cellipse cx=%221262.747%22 cy=%221214.572%22 rx=%221.483%22 ry=%221.46%22 fill=%22%23334b4a%22 opacity=%22-.174%22%2F%3E%3Cellipse cx=%221596.621%22 cy=%221184.243%22 rx=%221.131%22 ry=%221.101%22 fill=%22%23334b4a%22 opacity=%22-.092%22%2F%3E%3Cellipse cx=%221699.39%22 cy=%221234.959%22 rx=%221.523%22 ry=%221.164%22 fill=%22%23334b4a%22 opacity=%22-.099%22%2F%3E%3Cellipse cx=%221848.588%22 cy=%221200.107%22 rx=%221.671%22 ry=%221.507%22 fill=%22%23334b4a%22 opacity=%22.257%22%2F%3E%3Cellipse cx=%2230.869%22 cy=%221382.067%22 rx=%221.378%22 ry=%221.194%22 fill=%22%23334b4a%22 opacity=%22.563%22%2F%3E%3Ccircle cx=%22247.011%22 cy=%221308.532%22 fill=%22%23334b4a%22 opacity=%22.695%22 r=%221.415%22%2F%3E%3Cellipse cx=%22497.871%22 cy=%221299.852%22 rx=%221.369%22 ry=%221.064%22 fill=%22%23334b4a%22 opacity=%22.269%22%2F%3E%3Cellipse cx=%22714.2%22 cy=%221307.435%22 rx=%222.139%22 ry=%221.943%22 fill=%22%23334b4a%22 opacity=%22.53%22%2F%3E%3Cellipse cx=%22920.071%22 cy=%221266.043%22 rx=%221.815%22 ry=%221.417%22 fill=%22%23334b4a%22 opacity=%22.836%22%2F%3E%3Cellipse cx=%221180.176%22 cy=%221375.476%22 rx=%221.598%22 ry=%221.479%22 fill=%22%23334b4a%22 opacity=%22.495%22%2F%3E%3Cellipse cx=%221352.258%22 cy=%221341.895%22 rx=%222.107%22 ry=%221.627%22 fill=%22%23334b4a%22 opacity=%22.125%22%2F%3E%3Cellipse cx=%221489.427%22 cy=%221390.535%22 rx=%221.54%22 ry=%221.49%22 fill=%22%23334b4a%22 opacity=%22-.026%22%2F%3E%3Cellipse cx=%221727.652%22 cy=%221343.146%22 rx=%221.305%22 ry=%221.012%22 fill=%22%23334b4a%22 opacity=%22-.024%22%2F%3E%3Cellipse cx=%221936.424%22 cy=%221364.862%22 rx=%221.699%22 ry=%221.685%22 fill=%22%23334b4a%22 opacity=%22.265%22%2F%3E%3Cg transform=%22rotate(-62.994 1073.004 -949.915)%22%3E%3Cdefs%3E%3ClinearGradient id=%22a%22 x1=%220%22 y1=%221%22 x2=%22235.57%22 y2=%221%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop stop-color=%22%23d4654a%22%2F%3E%3Cstop offset=%22.3%22 stop-color=%22%23d44a96%22 stop-opacity=%22.1%22%2F%3E%3Cstop offset=%22.7%22 stop-color=%22%23d44a96%22 stop-opacity=%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect x=%22-11.779%22 y=%22-9.7%22 width=%2294.228%22 height=%2219.4%22 rx=%2219.4%22 ry=%2219.4%22 fill=%22url(%23a)%22 filter=%22url(%23b)%22 opacity=%22.4%22%2F%3E%3Crect width=%22141.342%22 height=%225.2%22 rx=%225.2%22 ry=%225.2%22 fill=%22url(%23a)%22%2F%3E%3C%2Fg%3E%3Cg transform=%22rotate(-64.865 1387.28 -916.643)%22 fill=%22url(%23a)%22%3E%3Crect x=%22-13.532%22 y=%22-9.7%22 width=%22108.26%22 height=%2219.4%22 rx=%2219.4%22 ry=%2219.4%22 filter=%22url(%23b)%22 opacity=%22.4%22%2F%3E%3Crect width=%22162.39%22 height=%225.2%22 rx=%225.2%22 ry=%225.2%22%2F%3E%3C%2Fg%3E%3Cg transform=%22rotate(-60.694 1486.174 -630.17)%22 fill=%22url(%23a)%22%3E%3Crect x=%22-12.275%22 y=%22-9.7%22 width=%2298.198%22 height=%2219.4%22 rx=%2219.4%22 ry=%2219.4%22 filter=%22url(%23b)%22 opacity=%22.4%22%2F%3E%3Crect width=%22147.297%22 height=%225.2%22 rx=%225.2%22 ry=%225.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  z-index: -2;
}

.pricing-container {
  max-width: var(--container-md);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
}

.pricing-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}

.pricing-title {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-size: var(--font-title-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--color-light);
  margin: 0 0 var(--space-lg) 0;
}

.pricing-description {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-heading);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-secondary);
  margin: 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
  justify-items: center;
  align-items: stretch;
  width: 100%;
}

.pricing-card {
  background: white;
  border: 2px solid rgba(26, 58, 46, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl) var(--space-xl) var(--space-2xl);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-width: 17.5rem;
  max-width: 22rem;
  min-height: 32.5rem;
  box-sizing: border-box;
}

.pricing-card:hover {
  transform: translateY(calc(var(--space-5xs) * -1));
  box-shadow: var(--shadow-xl);
}

.pricing-card-featured {
  border-color: var(--color-accent);
  border-width: 2px;
  box-shadow: var(--shadow-accent-md);
}

.pricing-card-featured:hover {
  box-shadow: var(--shadow-accent-lg);
}

.pricing-badge {
  position: absolute;
  top: var(--space-lg);
  /* right: var(--space-lg); */
  margin: 0 auto;
  background: var(--color-accent);
  color: white;
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-family: "PT Sans", sans-serif;
  font-weight: 600;
  font-size: var(--font-caption);
  line-height: 1;
  letter-spacing: var(--ls-caption);
}

.pricing-card-header {
  margin-bottom: var(--space-xl);
}

.pricing-card-title {
  font-family: "PT Sans", serif;
  font-weight: 400;
  font-size: var(--font-title-2);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-title-2);
  color: var(--color-primary);
  margin: 0 0 var(--space-lg) 0;
}

.pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-4xs);
}

.pricing-currency {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-size: var(--font-title-3);
  line-height: 1;
  color: var(--color-primary);
}

.pricing-amount {
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-size: var(--font-display-2);
  line-height: 1;
  letter-spacing: var(--ls-display-1);
  color: var(--color-primary);
}

/* Reduce font size for text-based pricing (non-numeric) */
.pricing-card:not(.pricing-card-featured) .pricing-amount {
  font-size: var(--font-display-2);
  letter-spacing: var(--ls-title-1);
}

.pricing-period {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-heading);
  line-height: 1;
  color: var(--color-secondary);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl) 0;
  flex-grow: 1;
}

.pricing-features li {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-secondary);
  padding: var(--space-sm) 0;
  padding-left: var(--space-xl);
  position: relative;
}

.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
  font-size: var(--font-heading);
}

.pricing-cta {
  width: 100%;
  text-align: center;
}

/* Responsive: Stack cards on mobile/tablet */
@media (max-width: 61.8rem) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .pricing-card {
    min-width: auto;
    max-width: 100%;
    min-height: auto;
  }
}

/* =================================
   SECTION DIVIDERS
   ================================= */

.section-divider {
  line-height: 0;
  position: relative;
}

#divider-1 {
  background-color: #2c4a48; /* Telegram section background */
}

#divider-2 {
  background-color: var(--color-primary); /* Footer background */
}

.section-divider svg {
  display: block;
  width: 100%;
  height: 80px;
}

.section-divider .shape-fill-pricing {
  fill: #1a3a2e; /* Pricing section background */
}

.section-divider .shape-fill-telegram {
  fill: hsla(
    157,
    38%,
    16%,
    1
  ); /* Telegram section background - matches gradient base */
}

@keyframes aurora-animation {
  0% {
    background-position: 0% 50%, 50% 50%, 100% 50%;
  }
  50% {
    background-position: 100% 50%, 0% 50%, 50% 50%;
  }
  100% {
    background-position: 0% 50%, 50% 50%, 100% 50%;
  }
}

/* =================================
   TELEGRAM CTA SECTION
   ================================= */

.telegram-cta-section-new {
  background-color: #1a3a2e;
  padding: calc(var(--space-3xl) * 2) var(--space-lg);
  margin-top: 0;
  /* margin-bottom: var(--space-3xl); */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* Layered background: SVG texture + fade gradient + enhanced radial glows */
.telegram-cta-section-new::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image:
    /* SVG texture from pricing section at the bottom */ url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 2000 1400%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-200%25%22 y=%22-200%25%22 width=%22500%25%22 height=%22500%25%22%3E%3CfeGaussianBlur in=%22SourceGraphic%22 stdDeviation=%2220%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath fill=%22%231a3a2e%22 d=%22M0 0h2000v1400H0z%22%2F%3E%3Cellipse cx=%22109.297%22 cy=%2220.353%22 rx=%221.495%22 ry=%221.11%22 fill=%22%23334b4a%22 opacity=%22.142%22%2F%3E%3Cellipse cx=%22334.747%22 cy=%22107.912%22 rx=%221.654%22 ry=%221.288%22 fill=%22%23334b4a%22 opacity=%22-.049%22%2F%3E%3Cellipse cx=%22513.079%22 cy=%2248.396%22 rx=%221.714%22 ry=%221.238%22 fill=%22%23334b4a%22 opacity=%22.425%22%2F%3E%3Cellipse cx=%22778.399%22 cy=%2278.989%22 rx=%221.835%22 ry=%221.502%22 fill=%22%23334b4a%22 opacity=%22.503%22%2F%3E%3Cellipse cx=%22883.273%22 cy=%22109.071%22 rx=%221.761%22 ry=%221.353%22 fill=%22%23334b4a%22 opacity=%22-.174%22%2F%3E%3Cellipse cx=%221111.11%22 cy=%2215.202%22 rx=%221.639%22 ry=%221.177%22 fill=%22%23334b4a%22 opacity=%22.082%22%2F%3E%3Cellipse cx=%221241.06%22 cy=%2280.77%22 rx=%222.27%22 ry=%221.86%22 fill=%22%23334b4a%22 opacity=%22.149%22%2F%3E%3Cellipse cx=%221413.69%22 cy=%2210.946%22 rx=%221.863%22 ry=%221.678%22 fill=%22%23334b4a%22 opacity=%22-.004%22%2F%3E%3Cellipse cx=%221740.054%22 cy=%2216.176%22 rx=%221.444%22 ry=%221.263%22 fill=%22%23334b4a%22 opacity=%22.083%22%2F%3E%3Cellipse cx=%221835.625%22 cy=%227.426%22 rx=%221.294%22 ry=%221.026%22 fill=%22%23334b4a%22 opacity=%22.109%22%2F%3E%3Cellipse cx=%22101.88%22 cy=%22274.768%22 rx=%221.994%22 ry=%221.62%22 fill=%22%23334b4a%22 opacity=%22-.101%22%2F%3E%3Cellipse cx=%22321.859%22 cy=%22140.806%22 rx=%221.439%22 ry=%221.171%22 fill=%22%23334b4a%22 opacity=%22.432%22%2F%3E%3Cellipse cx=%22426.566%22 cy=%22177.801%22 rx=%221.214%22 ry=%221.098%22 fill=%22%23334b4a%22 opacity=%22.48%22%2F%3E%3Cellipse cx=%22764.263%22 cy=%22174.091%22 rx=%221.457%22 ry=%221.026%22 fill=%22%23334b4a%22 opacity=%22.06%22%2F%3E%3Cellipse cx=%22989.065%22 cy=%22220.623%22 rx=%221.987%22 ry=%221.71%22 fill=%22%23334b4a%22 opacity=%22.286%22%2F%3E%3Cellipse cx=%221152.135%22 cy=%22261.819%22 rx=%221.805%22 ry=%221.376%22 fill=%22%23334b4a%22 opacity=%22.68%22%2F%3E%3Cellipse cx=%221269.538%22 cy=%22279.149%22 rx=%222.212%22 ry=%221.737%22 fill=%22%23334b4a%22 opacity=%22.071%22%2F%3E%3Cellipse cx=%221592.429%22 cy=%22217.412%22 rx=%221.779%22 ry=%221.594%22 fill=%22%23334b4a%22 opacity=%22.478%22%2F%3E%3Cellipse cx=%221731.154%22 cy=%22264.845%22 rx=%222.131%22 ry=%221.773%22 fill=%22%23334b4a%22 opacity=%22.944%22%2F%3E%3Cellipse cx=%221872.753%22 cy=%22158.966%22 rx=%222.081%22 ry=%221.671%22 fill=%22%23334b4a%22 opacity=%22.273%22%2F%3E%3Cellipse cx=%22126.749%22 cy=%22344.274%22 rx=%222.265%22 ry=%221.823%22 fill=%22%23334b4a%22 opacity=%22.626%22%2F%3E%3Cellipse cx=%22291.847%22 cy=%22374.644%22 rx=%221.062%22 ry=%221.052%22 fill=%22%23334b4a%22 opacity=%22.23%22%2F%3E%3Cellipse cx=%22559.419%22 cy=%22381.988%22 rx=%221.713%22 ry=%221.295%22 fill=%22%23334b4a%22 opacity=%22.838%22%2F%3E%3Cellipse cx=%22780.579%22 cy=%22322.065%22 rx=%221.554%22 ry=%221.364%22 fill=%22%23334b4a%22 opacity=%22-.005%22%2F%3E%3Cellipse cx=%22905.633%22 cy=%22334.056%22 rx=%221.399%22 ry=%221.357%22 fill=%22%23334b4a%22 opacity=%22.506%22%2F%3E%3Cellipse cx=%221033.583%22 cy=%22320.773%22 rx=%221.603%22 ry=%221.599%22 fill=%22%23334b4a%22 opacity=%22.461%22%2F%3E%3Cellipse cx=%221378.426%22 cy=%22300.386%22 rx=%222.028%22 ry=%221.694%22 fill=%22%23334b4a%22 opacity=%22.523%22%2F%3E%3Cellipse cx=%221415.536%22 cy=%22308.157%22 rx=%221.911%22 ry=%221.49%22 fill=%22%23334b4a%22 opacity=%22-.089%22%2F%3E%3Cellipse cx=%221703.399%22 cy=%22404.557%22 rx=%221.455%22 ry=%221.435%22 fill=%22%23334b4a%22 opacity=%22.142%22%2F%3E%3Cellipse cx=%221949.772%22 cy=%22280.271%22 rx=%221.37%22 ry=%221.292%22 fill=%22%23334b4a%22 opacity=%22.529%22%2F%3E%3Cellipse cx=%22174.736%22 cy=%22549.167%22 rx=%221.565%22 ry=%221.128%22 fill=%22%23334b4a%22 opacity=%22.183%22%2F%3E%3Cellipse cx=%22211.196%22 cy=%22441.481%22 rx=%221.771%22 ry=%221.566%22 fill=%22%23334b4a%22 opacity=%22.423%22%2F%3E%3Cellipse cx=%22524.223%22 cy=%22428.829%22 rx=%221.441%22 ry=%221.111%22 fill=%22%23334b4a%22 opacity=%22-.049%22%2F%3E%3Cellipse cx=%22618.658%22 cy=%22515.25%22 rx=%221.627%22 ry=%221.189%22 fill=%22%23334b4a%22 opacity=%22-.142%22%2F%3E%3Cellipse cx=%22826.59%22 cy=%22459.06%22 rx=%221.888%22 ry=%221.443%22 fill=%22%23334b4a%22 opacity=%22.345%22%2F%3E%3Cellipse cx=%221153.045%22 cy=%22551.025%22 rx=%221.818%22 ry=%221.704%22 fill=%22%23334b4a%22 opacity=%22-.162%22%2F%3E%3Cellipse cx=%221201.239%22 cy=%22522.015%22 rx=%221.454%22 ry=%221.226%22 fill=%22%23334b4a%22 opacity=%22.617%22%2F%3E%3Cellipse cx=%221597.366%22 cy=%22540.839%22 rx=%221.456%22 ry=%221.224%22 fill=%22%23334b4a%22 opacity=%22.784%22%2F%3E%3Cellipse cx=%221674.211%22 cy=%22473.968%22 rx=%221.772%22 ry=%221.726%22 fill=%22%23334b4a%22 opacity=%22-.064%22%2F%3E%3Cellipse cx=%221916.417%22 cy=%22519.978%22 rx=%221.697%22 ry=%221.566%22 fill=%22%23334b4a%22 opacity=%22.267%22%2F%3E%3Cellipse cx=%22139.39%22 cy=%22681.72%22 rx=%221.71%22 ry=%221.547%22 fill=%22%23334b4a%22 opacity=%22-.166%22%2F%3E%3Cellipse cx=%22263.6%22 cy=%22595.48%22 rx=%221.42%22 ry=%221.328%22 fill=%22%23334b4a%22 opacity=%22.574%22%2F%3E%3Cellipse cx=%22579.573%22 cy=%22643.947%22 rx=%221.424%22 ry=%221.004%22 fill=%22%23334b4a%22 opacity=%22.605%22%2F%3E%3Cellipse cx=%22772.639%22 cy=%22688.345%22 rx=%221.233%22 ry=%221.191%22 fill=%22%23334b4a%22 opacity=%22.007%22%2F%3E%3Cellipse cx=%22887.849%22 cy=%22659.944%22 rx=%222.167%22 ry=%221.967%22 fill=%22%23334b4a%22 opacity=%22.084%22%2F%3E%3Cellipse cx=%221132.099%22 cy=%22578.277%22 rx=%221.831%22 ry=%221.629%22 fill=%22%23334b4a%22 opacity=%22.705%22%2F%3E%3Cellipse cx=%221288.395%22 cy=%22678.171%22 rx=%221.651%22 ry=%221.577%22 fill=%22%23334b4a%22 opacity=%22.76%22%2F%3E%3Cellipse cx=%221581.363%22 cy=%22564.257%22 rx=%222.063%22 ry=%221.586%22 fill=%22%23334b4a%22 opacity=%22.782%22%2F%3E%3Cellipse cx=%221673.162%22 cy=%22597.152%22 rx=%221.914%22 ry=%221.619%22 fill=%22%23334b4a%22 opacity=%22.294%22%2F%3E%3Cellipse cx=%221963.175%22 cy=%22693.366%22 rx=%221.386%22 ry=%221.117%22 fill=%22%23334b4a%22 opacity=%22.671%22%2F%3E%3Cellipse cx=%2213.173%22 cy=%22736.222%22 rx=%221.604%22 ry=%221.366%22 fill=%22%23334b4a%22 opacity=%22.311%22%2F%3E%3Cellipse cx=%22349.223%22 cy=%22716.658%22 rx=%221.384%22 ry=%221.068%22 fill=%22%23334b4a%22 opacity=%22.302%22%2F%3E%3Cellipse cx=%22491.725%22 cy=%22809.379%22 rx=%222.308%22 ry=%221.896%22 fill=%22%23334b4a%22 opacity=%22.791%22%2F%3E%3Cellipse cx=%22728.822%22 cy=%22779.363%22 rx=%222.089%22 ry=%221.907%22 fill=%22%23334b4a%22 opacity=%22.362%22%2F%3E%3Cellipse cx=%22865.772%22 cy=%22784.516%22 rx=%221.792%22 ry=%221.579%22 fill=%22%23334b4a%22 opacity=%22.396%22%2F%3E%3Cellipse cx=%221131.455%22 cy=%22821.579%22 rx=%221.769%22 ry=%221.76%22 fill=%22%23334b4a%22 opacity=%22.015%22%2F%3E%3Cellipse cx=%221393.616%22 cy=%22794.912%22 rx=%221.905%22 ry=%221.464%22 fill=%22%23334b4a%22 opacity=%22.9%22%2F%3E%3Cellipse cx=%221509.267%22 cy=%22784.017%22 rx=%221.447%22 ry=%221.364%22 fill=%22%23334b4a%22 opacity=%22.619%22%2F%3E%3Cellipse cx=%221632.19%22 cy=%22826.465%22 rx=%221.796%22 ry=%221.526%22 fill=%22%23334b4a%22 opacity=%22.024%22%2F%3E%3Cellipse cx=%221801.026%22 cy=%22820.056%22 rx=%221.975%22 ry=%221.598%22 fill=%22%23334b4a%22 opacity=%22-.013%22%2F%3E%3Cellipse cx=%2291.566%22 cy=%22966.62%22 rx=%221.465%22 ry=%221.022%22 fill=%22%23334b4a%22 opacity=%22.49%22%2F%3E%3Cellipse cx=%22238.344%22 cy=%22949.616%22 rx=%221.929%22 ry=%221.549%22 fill=%22%23334b4a%22 opacity=%22.875%22%2F%3E%3Cellipse cx=%22578.8%22 cy=%22908.324%22 rx=%221.559%22 ry=%221.201%22 fill=%22%23334b4a%22 opacity=%22.119%22%2F%3E%3Cellipse cx=%22798.391%22 cy=%22942.075%22 rx=%221.825%22 ry=%221.753%22 fill=%22%23334b4a%22 opacity=%22.652%22%2F%3E%3Cellipse cx=%22834.011%22 cy=%22954.179%22 rx=%221.434%22 ry=%221.201%22 fill=%22%23334b4a%22 opacity=%22.133%22%2F%3E%3Cellipse cx=%221022.87%22 cy=%22868.941%22 rx=%222.191%22 ry=%221.744%22 fill=%22%23334b4a%22 opacity=%22.31%22%2F%3E%3Cellipse cx=%221326.742%22 cy=%22848.981%22 rx=%221.829%22 ry=%221.331%22 fill=%22%23334b4a%22 opacity=%22-.01%22%2F%3E%3Cellipse cx=%221467.998%22 cy=%22911.516%22 rx=%221.725%22 ry=%221.669%22 fill=%22%23334b4a%22 opacity=%22.194%22%2F%3E%3Cellipse cx=%221720.173%22 cy=%22962.782%22 rx=%222.091%22 ry=%221.661%22 fill=%22%23334b4a%22 opacity=%22.585%22%2F%3E%3Cellipse cx=%221929.215%22 cy=%22979.644%22 rx=%221.354%22 ry=%221.117%22 fill=%22%23334b4a%22 opacity=%22.325%22%2F%3E%3Cellipse cx=%22146.594%22 cy=%221078.343%22 rx=%221.216%22 ry=%221.143%22 fill=%22%23334b4a%22 opacity=%22.427%22%2F%3E%3Cellipse cx=%22303.071%22 cy=%221049.438%22 rx=%221.32%22 ry=%221.158%22 fill=%22%23334b4a%22 opacity=%22.348%22%2F%3E%3Cellipse cx=%22460.561%22 cy=%221028.454%22 rx=%221.144%22 ry=%221.041%22 fill=%22%23334b4a%22 opacity=%22.372%22%2F%3E%3Cellipse cx=%22740.511%22 cy=%221070.782%22 rx=%221.71%22 ry=%221.319%22 fill=%22%23334b4a%22 opacity=%22.454%22%2F%3E%3Cellipse cx=%22950.59%22 cy=%22983.702%22 rx=%222.068%22 ry=%221.658%22 fill=%22%23334b4a%22 opacity=%22.588%22%2F%3E%3Cellipse cx=%221167.853%22 cy=%221013.313%22 rx=%221.404%22 ry=%221.296%22 fill=%22%23334b4a%22 opacity=%22.444%22%2F%3E%3Cellipse cx=%221362.313%22 cy=%221108.959%22 rx=%221.943%22 ry=%221.485%22 fill=%22%23334b4a%22 opacity=%22.689%22%2F%3E%3Cellipse cx=%221504.628%22 cy=%22989.711%22 rx=%221.93%22 ry=%221.72%22 fill=%22%23334b4a%22 opacity=%22.057%22%2F%3E%3Cellipse cx=%221722.224%22 cy=%221018.928%22 rx=%222.292%22 ry=%221.875%22 fill=%22%23334b4a%22 opacity=%22.223%22%2F%3E%3Cellipse cx=%221924.762%22 cy=%221051.444%22 rx=%221.355%22 ry=%221.326%22 fill=%22%23334b4a%22 opacity=%22.403%22%2F%3E%3Cellipse cx=%22143.928%22 cy=%221150.1%22 rx=%221.969%22 ry=%221.796%22 fill=%22%23334b4a%22 opacity=%22.79%22%2F%3E%3Cellipse cx=%22273.241%22 cy=%221234.074%22 rx=%222.001%22 ry=%221.956%22 fill=%22%23334b4a%22 opacity=%22-.096%22%2F%3E%3Cellipse cx=%22413.764%22 cy=%221153.686%22 rx=%221.234%22 ry=%221.167%22 fill=%22%23334b4a%22 opacity=%22.478%22%2F%3E%3Cellipse cx=%22675%22 cy=%221204.127%22 rx=%221.487%22 ry=%221.187%22 fill=%22%23334b4a%22 opacity=%22.003%22%2F%3E%3Cellipse cx=%22888.565%22 cy=%221185.5%22 rx=%221.449%22 ry=%221.046%22 fill=%22%23334b4a%22 opacity=%22.769%22%2F%3E%3Cellipse cx=%221039.348%22 cy=%221148.62%22 rx=%221.621%22 ry=%221.139%22 fill=%22%23334b4a%22 opacity=%22.069%22%2F%3E%3Cellipse cx=%221262.747%22 cy=%221214.572%22 rx=%221.483%22 ry=%221.46%22 fill=%22%23334b4a%22 opacity=%22-.174%22%2F%3E%3Cellipse cx=%221596.621%22 cy=%221184.243%22 rx=%221.131%22 ry=%221.101%22 fill=%22%23334b4a%22 opacity=%22-.092%22%2F%3E%3Cellipse cx=%221699.39%22 cy=%221234.959%22 rx=%221.523%22 ry=%221.164%22 fill=%22%23334b4a%22 opacity=%22-.099%22%2F%3E%3Cellipse cx=%221848.588%22 cy=%221200.107%22 rx=%221.671%22 ry=%221.507%22 fill=%22%23334b4a%22 opacity=%22.257%22%2F%3E%3Cellipse cx=%2230.869%22 cy=%221382.067%22 rx=%221.378%22 ry=%221.194%22 fill=%22%23334b4a%22 opacity=%22.563%22%2F%3E%3Ccircle cx=%22247.011%22 cy=%221308.532%22 fill=%22%23334b4a%22 opacity=%22.695%22 r=%221.415%22%2F%3E%3Cellipse cx=%22497.871%22 cy=%221299.852%22 rx=%221.369%22 ry=%221.064%22 fill=%22%23334b4a%22 opacity=%22.269%22%2F%3E%3Cellipse cx=%22714.2%22 cy=%221307.435%22 rx=%222.139%22 ry=%221.943%22 fill=%22%23334b4a%22 opacity=%22.53%22%2F%3E%3Cellipse cx=%22920.071%22 cy=%221266.043%22 rx=%221.815%22 ry=%221.417%22 fill=%22%23334b4a%22 opacity=%22.836%22%2F%3E%3Cellipse cx=%221180.176%22 cy=%221375.476%22 rx=%221.598%22 ry=%221.479%22 fill=%22%23334b4a%22 opacity=%22.495%22%2F%3E%3Cellipse cx=%221352.258%22 cy=%221341.895%22 rx=%222.107%22 ry=%221.627%22 fill=%22%23334b4a%22 opacity=%22.125%22%2F%3E%3Cellipse cx=%221489.427%22 cy=%221390.535%22 rx=%221.54%22 ry=%221.49%22 fill=%22%23334b4a%22 opacity=%22-.026%22%2F%3E%3Cellipse cx=%221727.652%22 cy=%221343.146%22 rx=%221.305%22 ry=%221.012%22 fill=%22%23334b4a%22 opacity=%22-.024%22%2F%3E%3Cellipse cx=%221936.424%22 cy=%221364.862%22 rx=%221.699%22 ry=%221.685%22 fill=%22%23334b4a%22 opacity=%22.265%22%2F%3E%3Cg transform=%22rotate(-62.994 1073.004 -949.915)%22%3E%3Cdefs%3E%3ClinearGradient id=%22a%22 x1=%220%22 y1=%221%22 x2=%22235.57%22 y2=%221%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop stop-color=%22%23d4654a%22%2F%3E%3Cstop offset=%22.3%22 stop-color=%22%23d44a96%22 stop-opacity=%22.1%22%2F%3E%3Cstop offset=%22.7%22 stop-color=%22%23d44a96%22 stop-opacity=%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect x=%22-11.779%22 y=%22-9.7%22 width=%2294.228%22 height=%2219.4%22 rx=%2219.4%22 ry=%2219.4%22 fill=%22url(%23a)%22 filter=%22url(%23b)%22 opacity=%22.4%22%2F%3E%3Crect width=%22141.342%22 height=%225.2%22 rx=%225.2%22 ry=%225.2%22 fill=%22url(%23a)%22%2F%3E%3C%2Fg%3E%3Cg transform=%22rotate(-64.865 1387.28 -916.643)%22 fill=%22url(%23a)%22%3E%3Crect x=%22-13.532%22 y=%22-9.7%22 width=%22108.26%22 height=%2219.4%22 rx=%2219.4%22 ry=%2219.4%22 filter=%22url(%23b)%22 opacity=%22.4%22%2F%3E%3Crect width=%22162.39%22 height=%225.2%22 rx=%225.2%22 ry=%225.2%22%2F%3E%3C%2Fg%3E%3Cg transform=%22rotate(-60.694 1486.174 -630.17)%22 fill=%22url(%23a)%22%3E%3Crect x=%22-12.275%22 y=%22-9.7%22 width=%2298.198%22 height=%2219.4%22 rx=%2219.4%22 ry=%2219.4%22 filter=%22url(%23b)%22 opacity=%22.4%22%2F%3E%3Crect width=%22147.297%22 height=%225.2%22 rx=%225.2%22 ry=%225.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  pointer-events: none;
  opacity: 0.4;
  z-index: -2;
}

/* Enhanced radial glow overlay for eye-catching effect */
.telegram-cta-section-new::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image:
    radial-gradient(ellipse at bottom, hsla(151, 68%, 71%, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, hsla(117, 81%, 71%, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, hsla(160, 81%, 71%, 0.25) 0%, transparent 50%);
  background-size: 200% 200%;
  animation: aurora-animation 10s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

.telegram-aurora-layer-2 {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image:
    radial-gradient(ellipse at bottom, hsla(151, 68%, 71%, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at bottom right, hsla(117, 81%, 71%, 0.1) 0%, transparent 30%),
    radial-gradient(ellipse at bottom left, hsla(160, 81%, 71%, 0.1) 0%, transparent 30%);
  background-size: 200% 200%;
  animation: aurora-animation 5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  animation-delay: 3s;
}

.telegram-cta-wrapper {
  max-width: var(--container-sm);
  margin: 0 auto;
}

.telegram-cta-card {
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-2xl);
  text-align: center;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.telegram-cta-image {
  width: calc(var(--font-display-1) * 3);
  height: calc(var(--font-display-1) * 3);
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-muted);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-lg);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

.telegram-cta-heading {
  font-family: "PT Sans", serif;
  font-size: var(--font-title-1);
  color: var(--color-light);
  margin-bottom: var(--space-md-lg);
}

.telegram-cta-text {
  font-size: var(--font-heading);
  color: var(--color-muted);
  margin-bottom: var(--space-xl);
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
}

.telegram-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-accent-hover);
  border: var(--color-accent-hover) 3px solid;
  color: var(--color-light);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--font-body);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.telegram-cta-btn:hover {
  background: var(--color-light);
  transform: translateY(calc(var(--space-5xs) * -1));
  box-shadow: var(--shadow-accent-md);
  color: var(--color-accent-hover);
}

.telegram-cta-btn:active {
  background: var(--color-light);
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
  color: var(--color-accent-hover);
}

.telegram-cta-note {
  font-size: var(--font-caption);
  color: var(--color-secondary);
  margin-top: var(--space-md-lg);
}

/* Responsive Telegram CTA - Design System Compliant */

/* Tablet Portrait - 612px to 989px */
@media (min-width: 38.21rem) and (max-width: 61.8rem) {
  .telegram-cta-section-new {
    padding: var(--space-3xl) var(--space-xl);
    min-height: 85vh;
  }

  .telegram-cta-card {
    padding: var(--space-xl);
  }

  .telegram-cta-image {
    width: calc(var(--font-display-1) * 2.5);
    height: calc(var(--font-display-1) * 2.5);
  }
}

/* Mobile - 377px to 611px */
@media (min-width: 23.51rem) and (max-width: 38.2rem) {
  .telegram-cta-section-new {
    padding: var(--space-2xl) var(--space-lg);
    min-height: 80vh;
  }

  .telegram-cta-card {
    padding: var(--space-xl) var(--space-lg);
  }

  .telegram-cta-image {
    width: calc(var(--font-display-1) * 2);
    height: calc(var(--font-display-1) * 2);
  }

  .telegram-cta-heading {
    font-size: var(--font-title-2);
  }

  .telegram-cta-text {
    font-size: var(--font-body);
    line-height: var(--lh-relaxed);
  }
}

/* Small Mobile - 376px and below */
@media (max-width: 23.5rem) {
  .telegram-cta-section-new {
    padding: var(--space-xl) var(--space-base);
    min-height: 75vh;
  }

  .telegram-cta-card {
    padding: var(--space-lg) var(--space-md-lg);
  }

  .telegram-cta-image {
    width: calc(var(--font-display-1) * 1.8);
    height: calc(var(--font-display-1) * 1.8);
  }

  .telegram-cta-heading {
    font-size: var(--font-title-2);
  }

  .telegram-cta-text {
    font-size: var(--font-callout);
    line-height: var(--lh-relaxed);
  }

  .telegram-cta-btn {
    padding: var(--space-xs) var(--space-lg);
    font-size: var(--font-callout);
  }
}

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

.footer-section {
  background-color: var(--color-primary);
  padding: var(--space-3xl) var(--space-lg);
  color: var(--color-muted);
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(245, 245, 245, 0.08);
}

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

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.footer-logo-icon {
  width: var(--space-2xl);
  height: var(--space-2xl);
  background-image: url("assets/logo/SILAVDOHA--logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.footer-logo-text {
  font-family: "Inter", sans-serif;
  font-weight: 200;
  font-size: var(--font-title-3);
  color: var(--color-light);
}

.footer-description {
  font-size: var(--font-body);
  line-height: var(--lh-relaxed);
  max-width: 25rem;
}

.footer-social {
  display: flex;
  gap: var(--space-lg);
}

.social-link svg {
  transition: all 0.3s ease;
}

.social-link:hover svg path,
.social-link:hover svg rect,
.social-link:hover svg circle {
  stroke: var(--color-accent);
}
.social-link:hover svg path[fill] {
  fill: var(--color-accent);
}

.footer-column-title {
  font-family: "PT Sans", serif;
  font-size: var(--font-heading);
  color: var(--color-light);
  margin-bottom: var(--space-lg);
}

.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-links a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--color-light);
}

.footer-bottom {
  border-top: 1px solid var(--color-glass-border);
  padding-top: var(--space-xl);
  text-align: center;
  font-size: var(--font-caption);
  color: var(--color-secondary);
}

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

@media (max-width: 61.8rem) {
  .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
    align-items: center;
  }
  .footer-brand {
    align-items: center;
  }
  .footer-social {
    justify-content: center;
  }
}

@media (max-width: 38.2rem) {
  /* Compress inter-section spacing on mobile */
  .hero-section-new,
  .about-section,
  .membership-section,
  .requirements-section,
  .testimonials-section-new,
  .pricing-section {
    margin-bottom: var(--space-2xl); /* Reduce from space-3xl */
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .requirements-grid {
    grid-template-columns: 1fr;
  }
  .telegram-cta-section-new,
  .footer-section,
  .pricing-section {
    padding-left: var(--space-base);
    padding-right: var(--space-base);
  }
}

/* Pricing Bottom Section: Community & Trust */
.pricing-bottom {
  display: flex;
  flex-direction: row;
  gap: var(--space-xl);
  justify-content: center;
  align-items: stretch;
  margin-top: var(--space-2xl);
  width: 100%;
}

.pricing-community {
  padding: var(--space-lg) var(--space-xl);
  background: linear-gradient(135deg, rgba(212, 101, 74, 0.15) 0%, rgba(212, 101, 74, 0.08) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 101, 74, 0.2);
  border-radius: var(--radius-lg);
  flex: 1;
  max-width: 42rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
}

.pricing-community-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md-lg);
  width: 100%;
}

/* Trust Section */
.pricing-trust {
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-glass-bg);
  border-radius: var(--radius-lg);
  flex: 1;
  max-width: 42rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
}

.pricing-trust-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
  width: 100%;
}

.trust-certification {
  flex-shrink: 0;
}

.trust-badge {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  background-color: var(--color-muted);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-muted);
}

.trust-instructor {
  flex-shrink: 0;
}

.trust-instructor-photo {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1px solid var(--color-muted);
  box-shadow: var(--shadow-sm);
}

.trust-text {
  flex: 1;
}

.trust-title {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-size: var(--font-body);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-body);
  color: var(--color-light);
  margin: 0 0 var(--space-xs) 0;
}

.trust-description {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-sm);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-muted);
  margin: 0;
}

.pricing-community-avatars {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  height: 3.5rem;
  flex-shrink: 0;
}

.community-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-light);
  box-shadow: var(--shadow-sm);
  margin-left: calc(var(--space-xs) * -1); /* Tighter overlap */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.community-avatar:first-child {
  margin-left: 0;
}

.community-avatar:hover {
  transform: translateY(-0.25rem) scale(1.05);
  box-shadow: var(--shadow-md);
  z-index: 10;
}

.pricing-community p {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-light);
  margin: 0;
  text-align: left;
  flex: 1;
}

/* Responsive: Tablet and below */
@media (max-width: 61.8rem) {
  .pricing-bottom {
    flex-direction: column;
    gap: var(--space-lg);
    align-items: center;
  }

  .pricing-community,
  .pricing-trust {
    width: 100%;
    max-width: 100%;
  }
}

/* Mobile - 377px to 611px */
@media (min-width: 23.51rem) and (max-width: 38.2rem) {
  .pricing-bottom {
    gap: var(--space-md);
  }

  .pricing-community,
  .pricing-trust {
    padding: var(--space-md) var(--space-lg);
  }

  /* Community section - stack vertically on mobile */
  .pricing-community-content {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }

  .pricing-community-avatars {
    margin: 0 auto;
  }

  .pricing-community p {
    text-align: center;
  }

  /* Trust section - keep horizontal on mobile */
  .pricing-trust-content {
    flex-direction: row;
    gap: var(--space-sm);
    align-items: center;
  }

  .trust-badge,
  .trust-instructor-photo {
    width: 3.5rem;
    height: 3.5rem;
  }

  .trust-text {
    text-align: left;
  }

  .trust-title {
    font-size: var(--font-sm);
  }

  .trust-description {
    font-size: var(--font-xs);
  }
}

/* Very small mobile */
@media (max-width: 23.5rem) {
  .pricing-bottom {
    gap: var(--space-sm);
  }

  .trust-badge,
  .trust-instructor-photo {
    width: 3rem;
    height: 3rem;
  }
}

/* =================================
   FREE TRIAL SECTION
   ================================= */

.free-trial-section {
  background: linear-gradient(135deg, var(--color-primary) 0%, #234038 100%);
  padding: var(--space-3xl) var(--space-lg);
  position: relative;
}

.free-trial-container {
  max-width: var(--container-md);
  margin: 0 auto;
}

.free-trial-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}

.free-trial-title {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-size: var(--font-title-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--color-light);
  margin: 0 0 var(--space-lg) 0;
}

.free-trial-description {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-heading);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-muted);
  margin: 0;
}

.free-trial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.free-trial-card {
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.free-trial-card:hover {
  transform: translateY(calc(var(--space-5xs) * -1));
  box-shadow: var(--shadow-xl);
  border-color: rgba(245, 245, 245, 0.2);
}

.free-trial-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.free-trial-card-title {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-size: var(--font-title-2);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-title-2);
  color: var(--color-light);
  margin: 0 0 var(--space-md-lg) 0;
}

.free-trial-card-description {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: var(--font-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-muted);
  margin: 0 0 var(--space-xl) 0;
  flex-grow: 1;
}

.free-trial-btn {
  font-family: "PT Sans", sans-serif;
  font-weight: 600;
  font-size: var(--font-body);
  color: var(--color-primary);
  background: var(--color-light);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-lg);
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}

.free-trial-btn:hover {
  background: var(--color-accent);
  color: white;
  transform: translateY(calc(var(--space-5xs) * -1));
  box-shadow: var(--shadow-accent-md);
}

/* Responsive Benefits Section */

/* Small Mobile - 376px and below */
@media (max-width: 23.5rem) {
  .benefits-section {
    padding: var(--space-2xl) var(--space-sm);
  }

  .benefits-container {
    gap: var(--space-2xl);
  }

  .benefits-title {
    font-size: var(--font-title-1);
    margin-bottom: var(--space-base);
  }

  .benefits-description {
    font-size: var(--font-body);
  }

  .benefits-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .benefit-card {
    padding: var(--space-lg);
  }
}

/* Mobile - 377px to 611px */
@media (min-width: 23.51rem) and (max-width: 38.2rem) {
  .benefits-section {
    padding: var(--space-2xl) var(--space-base);
  }

  .benefits-container {
    gap: var(--space-2xl);
  }

  .benefits-title {
    font-size: var(--font-title-1);
  }

  .benefits-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .benefit-card {
    padding: var(--space-lg);
  }
}

/* Tablet - 612px to 989px */
@media (min-width: 38.21rem) and (max-width: 61.8rem) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .benefits-title {
    font-size: var(--font-title-2);
  }
}

/* Large Tablet to Desktop - 990px to 1279px */
@media (min-width: 61.81rem) and (max-width: 79.99rem) {
  .benefits-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Course Section - Figma Design */
.course-section-new {
  background: var(--color-primary);
  padding: var(--space-3xl) var(--space-base);
  position: relative;
}

.course-section-container {
  max-width: var(--container-md);
  margin: 0 auto;
  background: var(--color-glass-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl) var(--space-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  align-items: center;
}

.course-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
  text-align: center;
  width: 100%;
}

.course-section-title {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--font-title-1);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-display);
  color: var(--color-light);
  margin: 0;
}

.course-section-description {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--font-heading);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-secondary);
  margin: 0;
  max-width: 40rem;
}

.course-cards-grid {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.course-card-new {
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-lg);
  width: 19.3rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.course-card-new:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 245, 245, 0.2);
}

.course-card-image {
  position: relative;
  height: 12rem;
  overflow: hidden;
}

.course-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

.course-badge {
  position: absolute;
  top: var(--space-base);
  left: var(--space-base);
  background: var(--color-accent);
  color: white;
  padding: var(--space-5xs) var(--space-xs);
  border-radius: var(--radius-sm);
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--font-caption);
  line-height: var(--lh-normal);
}

.course-card-content {
  padding: var(--space-lg) var(--space-md-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.course-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--font-title-3);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-light);
  margin: 0;
}

.course-card-description {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--font-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-secondary);
  margin: 0;
  min-height: 6rem;
}

.course-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-meta-item {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--font-label);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-label);
  color: var(--color-secondary);
}

.course-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-card-price {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--font-title-3);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-title-3);
  color: var(--color-accent);
}

.course-card-button {
  background: var(--color-accent);
  color: white;
  padding: var(--space-2xs) var(--space-base);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--font-label);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-label);
  transition: all 0.3s ease;
}

.course-card-button:hover {
  background: var(--color-accent-hover);
  transform: translateY(calc(var(--space-5xs) * -1));
  box-shadow: var(--shadow-accent-md);
}

.course-card-button:active {
  background: var(--color-accent-hover);
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Responsive Course Section - Design System Compliant */

/* Tablet Portrait - 612px to 989px */
@media (min-width: 38.21rem) and (max-width: 61.8rem) {
  .course-section-new {
    padding: var(--space-3xl) var(--space-lg);
  }

  .course-section-container {
    padding: var(--space-2xl) var(--space-lg);
    gap: var(--space-2xl);
  }

  .course-cards-grid {
    flex-direction: column;
    align-items: center;
  }

  .course-card-new {
    width: 100%;
    max-width: 25rem;
  }
}

/* Mobile - 377px to 611px */
@media (min-width: 23.51rem) and (max-width: 38.2rem) {
  .course-section-new {
    padding: var(--space-2xl) var(--space-base);
  }

  .course-section-container {
    padding: var(--space-2xl) var(--space-base);
    gap: var(--space-2xl);
  }

  .course-section-title {
    font-size: var(--font-title-2);
    line-height: var(--lh-normal);
  }

  .course-section-description {
    font-size: var(--font-body);
    line-height: var(--lh-relaxed);
  }

  .course-cards-grid {
    flex-direction: column;
    align-items: center;
  }

  .course-card-new {
    width: 100%;
    max-width: 100%;
  }

  .course-card-image {
    height: 11rem;
  }
}

/* Small Mobile - 376px and below */
@media (max-width: 23.5rem) {
  .course-section-new {
    padding: var(--space-xl) var(--space-sm);
  }

  .course-section-container {
    padding: var(--space-lg) var(--space-sm);
    gap: var(--space-lg);
  }

  .course-section-title {
    font-size: var(--font-title-2);
    line-height: var(--lh-normal);
  }

  .course-section-description {
    font-size: var(--font-callout);
    line-height: var(--lh-relaxed);
  }

  .course-cards-grid {
    flex-direction: column;
    gap: var(--space-md-lg);
  }

  .course-card-new {
    width: 100%;
  }

  .course-card-content {
    padding: var(--space-md-lg) var(--space-md);
  }

  .course-card-image {
    height: 10rem;
  }
}

/* Testimonials Section - Figma Design */
.testimonials-section-new {
  background: var(--color-primary);
  padding: var(--space-3xl) var(--space-lg);
  margin-bottom: var(--space-3xl);
  position: relative;
}

.testimonials-section-container {
  max-width: var(--container-md);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.testimonials-section-header {
  text-align: center;
}

.testimonials-cards-grid {
  display: flex;
  gap: var(--space-xl);
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.testimonial-card-new {
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  width: 19.3rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  transition: all 0.3s ease;
}

.testimonial-card-new:hover {
  transform: translateY(calc(var(--space-4xs) * -1));
  border-color: rgba(245, 245, 245, 0.2);
}

.testimonial-stars {
  display: flex;
  gap: var(--space-5xs);
  align-items: center;
}

.testimonial-quote-new {
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: var(--font-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--color-secondary);
  margin: 0;
  flex: 1;
}

.testimonial-author-new {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

.author-avatar-new {
  width: var(--space-3xl);
  height: var(--space-3xl);
  background: var(--color-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: var(--color-secondary) 1px solid;
}

.author-info-new {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.author-name-new {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--font-label);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-label);
  color: var(--color-light);
}

.author-role-new {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--font-caption);
  line-height: var(--lh-normal);
  color: var(--color-secondary);
}

.author-avatar-new img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

/* Responsive Testimonials Section - Design System Compliant */

/* Desktop and Higher - 990px+ */
@media (min-width: 61.81rem) {
  .testimonials-cards-grid {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
  }

  .testimonial-card-new {
    width: 19.3rem;
    flex-shrink: 0;
  }
}

/* Tablet Portrait - 612px to 989px */
@media (min-width: 38.21rem) and (max-width: 61.8rem) {
  .testimonials-section-new {
    padding: var(--space-3xl) var(--space-lg);
  }

  .testimonials-section-container {
    gap: var(--space-2xl);
  }

  .testimonials-cards-grid {
    flex-direction: column;
    align-items: center;
  }

  .testimonial-card-new {
    width: 100%;
    max-width: 25rem;
  }
}

/* Mobile - 377px to 611px */
@media (min-width: 23.51rem) and (max-width: 38.2rem) {
  .testimonials-section-new {
    padding: var(--space-2xl) var(--space-base);
  }

  .testimonials-section-container {
    gap: var(--space-2xl);
  }

  .testimonials-section-title {
    font-size: var(--font-title-2);
    line-height: var(--lh-normal);
  }

  .testimonials-section-description {
    font-size: var(--font-body);
    line-height: var(--lh-relaxed);
  }

  .testimonials-cards-grid {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }

  .testimonial-card-new {
    width: 100%;
  }
}

/* Small Mobile - 376px and below */
@media (max-width: 23.5rem) {
  .testimonials-section-new {
    padding: var(--space-xl) var(--space-sm);
  }

  .testimonials-section-container {
    gap: var(--space-lg);
  }

  .testimonials-section-title {
    font-size: var(--font-title-2);
    line-height: var(--lh-normal);
  }

  .testimonials-section-description {
    font-size: var(--font-callout);
    line-height: var(--lh-relaxed);
  }

  .testimonials-cards-grid {
    flex-direction: column;
    gap: var(--space-md-lg);
  }

  .testimonial-card-new {
    width: 100%;
    padding: var(--space-md-lg);
  }
}

/* Performance optimization - will-change for animations */
.hero-section-new,
.course-section-new,
.testimonials-section-new {
  will-change: transform, opacity;
}

/* Video Hero */

#rec1036804186 .t-cover__filter::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    120deg,
    rgba(255, 214, 250, 0.22) 0%,
    rgba(241, 48, 48, 0.06) 100%
  );
}

/* Hero Title */

#rec1036804186 .t001__title {
  background: linear-gradient(90deg, #d13edf 0%, #ffd6fa 60%, #9a2db8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* For Firefox */
  color: transparent;
  /* Optional: Add a subtle text shadow for readability */
  text-shadow: 0 2px 12px rgba(209, 62, 223, 0.08);
}

/* Buttons */

.sd-button-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.sd-button {
  background: linear-gradient(90deg, #d13edf 0%, #9a2db8 100%);
  color: #fff;
  border: none;
  border-radius: 99px;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 24px rgba(209, 62, 223, 0.25);
  cursor: pointer;
  transition: background 0.25s, transform 0.18s, box-shadow 0.18s;
  outline: none;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  font-family: "Noto Sans Display", sans-serif;
}

.sd-button:hover,
.sd-button:focus {
  background: linear-gradient(90deg, #9a2db8 0%, #d13edf 100%);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 32px rgba(209, 62, 223, 0.35);
}

.sd-button-secondary {
  background: linear-gradient(90deg, #fff 0%, #ffd6fa 100%);
  color: #9a2db8;
  border: 1px solid #d13edf;
  border-radius: 99px;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 12px rgba(209, 62, 223, 0.1);
  cursor: pointer;
  transition: background 0.25s, color 0.18s, border-color 0.18s,
    box-shadow 0.18s, transform 0.18s;
  outline: none;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
}

.sd-button-secondary:hover,
.sd-button-secondary:focus {
  background: linear-gradient(90deg, #ffd6fa 0%, #fff 100%);
  color: #d13edf;
  border-color: #9a2db8;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 24px rgba(209, 62, 223, 0.18);
}

/* Target the button inside your specific block */

/* TertiaryButton */

.uc-hero .t-btn {
  font-size: 18px !important;
  padding: 0.1618em 0.234em;
}

#rec1036804186 .t001__btn {
  background: transparent !important;
  color: #9a2db8 !important;
  border: 1.5px solid #d13edf !important;
  border-radius: 30px !important;
  font-family: "Noto Sans Display", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.5 !important;
  padding: 12px 48px;
  transition: color 0.18s, border-color 0.18s, background 0.18s,
    box-shadow 0.18s !important;
}

.sd-button-tertiary {
  background: transparent;
  color: #9a2db8;
  border: 1.5px solid #d13edf;
  border-radius: 30px;
  font-family: "Noto Sans Display", sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  padding: 12px 48px;
  transition: color 0.18s, border-color 0.18s, background 0.18s,
    box-shadow 0.18s;
}

#rec1036804186 .t001__btn:hover,
#rec1036804186 .t001__btn:focus {
  background: rgba(255, 214, 250, 0.13) !important;
  color: #ffd6fa !important;
  border-color: #d13edf !important;
  box-shadow: 0 2px 12px rgba(209, 62, 223, 0.1) !important;
}

.sd-button-tertiary:hover,
.sd-button-tertiary:focus {
  background: rgba(255, 214, 250, 0.13);
  color: #ffd6fa;
  border-color: #d13edf;
  box-shadow: 0 2px 12px rgba(209, 62, 223, 0.1);
}

.sd-button-quaternary {
  background: transparent;
  color: #9a2db8;
  border: 1.5px solid #d13edf;
  border-radius: 99px;
  font-family: "Noto Sans Display", sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(209, 62, 223, 0.1);
  transition: background 0.25s, color 0.18s, border-color 0.18s,
    box-shadow 0.18s, transform 0.18s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  gap: 0.5em;
  outline: none;
  position: relative;
  overflow: hidden;
}

.sd-button-quaternary:hover,
.sd-button-quaternary:focus {
  background: linear-gradient(90deg, #ffd6fa 0%, #ffd6fa 50%, #ffd6fa 100%);
  color: #9a2db8;
  border-color: #9a2db8;
  box-shadow: 0 4px 24px rgba(209, 62, 223, 0.18);
  transform: translateY(-2px) scale(1.04);
  border: 0px;
}

/* HeroArrow START */

.t-cover__arrow-svg {
  width: 38px;
  height: 19px;
  fill: #7d4e7d !important; /* or #f6e8ea if you want light arrow */
  /* Dark, soft shadow */
  filter: drop-shadow(0 4px 12px rgba(40, 10, 60, 0.32));
  transition: filter 0.25s;
}

/* Optional: Slightly stronger shadow on hover/focus */
.t-cover__arrow-wrapper_animated:hover .t-cover__arrow-svg,
.t-cover__arrow-wrapper_animated:focus .t-cover__arrow-svg {
  filter: drop-shadow(0 8px 24px rgba(40, 10, 60, 0.45));
}

/* HeroArrow END */

/* About Section Cards */

.pattern-yoga {
  width: 100px;
  height: 100px;
  border-radius: 9%;
  overflow: hidden;
  background: linear-gradient(0deg, #ffd6fa 0%, #edb4ea 100%);
  position: relative;
  box-shadow: 0 4px 16px rgba(125, 78, 125, 0.08),
    0 1.5px 6px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s cubic-bezier(0.4, 2, 0.3, 1),
    transform 0.25s cubic-bezier(0.4, 2, 0.3, 1);
}

.pattern-yoga::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(209, 62, 223, 0.07) 6px 14px,
    transparent 14px 20px
  );
  border-radius: 9%;
  pointer-events: none;

  /* Smoother, longer vertical fade */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 35%,
    rgba(0, 0, 0, 1) 35%,
    rgba(0, 0, 0, 0.3) 55%,
    transparent 75%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 35%,
    rgba(0, 0, 0, 1) 35%,
    rgba(0, 0, 0, 0.3) 55%,
    transparent 75%
  );
}

.pattern-yoga:hover,
.pattern-strength:hover,
.pattern-breath:hover {
  box-shadow: 0 8px 32px rgba(125, 78, 125, 0.16),
    0 4px 16px rgba(209, 62, 223, 0.12);
  transform: translateY(-6px) scale(1.025);
  cursor: pointer;
}

.pattern-strength {
  width: 100px;
  height: 100px;
  border-radius: 9%;
  overflow: hidden;
  background: linear-gradient(0deg, #ffdad3 0%, #ffd6fa 100%);
  position: relative;
  box-shadow: 0 4px 16px rgba(125, 78, 125, 0.08),
    0 1.5px 6px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s cubic-bezier(0.4, 2, 0.3, 1),
    transform 0.25s cubic-bezier(0.4, 2, 0.3, 1);
}

.pattern-strength::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle,
      rgba(125, 78, 125, 0.08) 1.5px,
      transparent 2.5px
    ),
    radial-gradient(circle, rgba(241, 48, 48, 0.06) 1.5px, transparent 2.5px);
  background-size: 18px 18px, 18px 18px;
  background-position: 0 0, 9px 9px;
  border-radius: 9%;
  pointer-events: none;

  /* Smoother, longer vertical fade */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 35%,
    rgba(0, 0, 0, 1) 35%,
    rgba(0, 0, 0, 0.3) 55%,
    transparent 75%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 35%,
    rgba(0, 0, 0, 1) 35%,
    rgba(0, 0, 0, 0.3) 55%,
    transparent 75%
  );
}

.pattern-breath {
  width: 100px;
  height: 100px;
  border-radius: 9%;
  overflow: hidden;
  background: linear-gradient(0deg, #ffdad6 0%, #ffd6fa 100%);
  position: relative;
  box-shadow: 0 4px 16px rgba(125, 78, 125, 0.08),
    0 1.5px 6px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s cubic-bezier(0.4, 2, 0.3, 1),
    transform 0.25s cubic-bezier(0.4, 2, 0.3, 1);
}

.pattern-breath::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
      0deg,
      rgba(125, 78, 125, 0.06) 0 6px,
      transparent 6px 24px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(241, 48, 48, 0.04) 0 4px,
      transparent 4px 20px
    );
  border-radius: 9%;
  pointer-events: none;
  opacity: 0.8;

  /* Smoother, longer vertical fade */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 35%,
    rgba(0, 0, 0, 1) 35%,
    rgba(0, 0, 0, 0.3) 55%,
    transparent 75%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 35%,
    rgba(0, 0, 0, 1) 35%,
    rgba(0, 0, 0, 0.3) 55%,
    transparent 75%
  );
}

.card-svg-yoga {
  mix-blend-mode: difference; /* or try soft-light, overlay, etc. */
  opacity: 0.95; /* Optional: further soften the effect */
}

.card-svg-strength {
  mix-blend-mode: difference; /* or try soft-light, overlay, etc. */
  opacity: 0.99; /* Optional: further soften the effect */
}

.card-svg-breath {
  mix-blend-mode: difference; /* or try soft-light, overlay, etc. */
  opacity: 0.95; /* Optional: further soften the effect */
}

.sun-small {
  background: linear-gradient(135deg, #edb4ea 40%, #f13030 100%);
  border-radius: 40% 60% 60% 40% / 50% 40% 60% 50%;
  padding: 0.168rem;
  color: #63535a;
  animation: blob-morph 8s ease-in-out infinite alternate;
}

@keyframes blob-morph {
  0% {
    border-radius: 40% 60% 60% 40% / 50% 40% 60% 50%;
  }
  50% {
    border-radius: 60% 40% 50% 60% / 40% 60% 50% 60%;
  }
  100% {
    border-radius: 40% 60% 60% 40% / 50% 40% 60% 50%;
  }
}

.trust-symbols-bg {
  background: linear-gradient(120deg, #f6e8ea 0%, #ffd6fa 100%);
  border-radius: 24px;
  padding: 2em 1.5em;
  box-shadow: 0 4px 24px rgba(154, 45, 184, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  margin: 2em auto;
  max-width: 700px;
}

.scene-background {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(0deg, #ffd6fa 0%, #edb4ea 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(125, 78, 125, 0.08),
    0 1.5px 6px rgba(0, 0, 0, 0.04);

  /* Elliptical radial gradient for stronger top/bottom fade */
  -webkit-mask-image: radial-gradient(
    ellipse 60% 40% at 50% 50%,
    #fff 40%,
    rgba(255, 255, 255, 0.92) 55%,
    rgba(255, 255, 255, 0.7) 65%,
    rgba(255, 255, 255, 0.45) 75%,
    rgba(255, 255, 255, 0.18) 85%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 60% 40% at 50% 50%,
    #fff 40%,
    rgba(255, 255, 255, 0.92) 55%,
    rgba(255, 255, 255, 0.7) 65%,
    rgba(255, 255, 255, 0.45) 75%,
    rgba(255, 255, 255, 0.18) 85%,
    transparent 100%
  );
}

.scene-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(209, 62, 223, 0.018) 6px 14px,
    transparent 14px 20px
  );
  pointer-events: none;
}

.scene-background-tools {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(0deg, #ffd6fa 0%, #edb4ea 150%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(125, 78, 125, 0.08),
    0 1.5px 6px rgba(0, 0, 0, 0.04);

  /* Elliptical radial gradient for stronger top/bottom fade */
  -webkit-mask-image: radial-gradient(
    ellipse 60% 40% at 50% 50%,
    #fff 40%,
    rgba(255, 255, 255, 0.92) 55%,
    rgba(255, 255, 255, 0.7) 65%,
    rgba(255, 255, 255, 0.45) 75%,
    rgba(255, 255, 255, 0.18) 85%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 60% 40% at 50% 50%,
    #fff 40%,
    rgba(255, 255, 255, 0.92) 55%,
    rgba(255, 255, 255, 0.7) 65%,
    rgba(255, 255, 255, 0.45) 75%,
    rgba(255, 255, 255, 0.18) 85%,
    transparent 100%
  );
}

.scene-background-tools::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(125, 78, 125, 0.03) 0.8px,
    transparent 1.2px
  );
  background-size: 16px 16px;
  pointer-events: none;
}

.bg-vertical-lines {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(209, 62, 223, 0.025) 0 8px,
    transparent 8px 16px
  );
  overflow: visible;
  border-radius: 30px;
  transition: box-shadow 0.25s cubic-bezier(0.4, 2, 0.3, 1),
    transform 0.25s cubic-bezier(0.4, 2, 0.3, 1);
  box-shadow: 0 2px 12px rgba(125, 78, 125, 0.07),
    0 1.5px 6px rgba(0, 0, 0, 0.04);
}

.bg-vertical-lines:hover {
  box-shadow: 0 8px 32px rgba(125, 78, 125, 0.16),
    0 4px 16px rgba(209, 62, 223, 0.12);
  transform: translateY(-6px) scale(1.025);
  cursor: pointer;
}

.free-try-card--telegram {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 2px 2px 2px 18px;
  box-shadow: 0 2px 12px rgba(125, 78, 125, 0.07);
  transition: box-shadow 0.22s, transform 0.22s;
  border-top: 4px solid transparent;
  background: linear-gradient(135deg, #fff0f5 0%, #ffd6d9 100%);
  background-size: 300% 100%; /* 3 cards horizontally */
  background-position: left center;
}

.free-try-card--telegram:hover {
  box-shadow: 0 8px 32px rgba(125, 78, 125, 0.14),
    0 4px 16px rgba(209, 62, 223, 0.1);
  transform: translateY(-6px) scale(1.025);
  cursor: pointer;
  border-top: 4px solid #229ed9;
}

.free-try-card--youtube {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 2px 2px 2px 2px;
  box-shadow: 0 2px 12px rgba(125, 78, 125, 0.07);
  transition: box-shadow 0.22s, transform 0.22s;
  border-top: 4px solid transparent;
  background: linear-gradient(135deg, #fff0f5 0%, #ffd6d9 100%);
  background-size: 300% 100%; /* 3 cards horizontally */
  background-position: center center;
}

.free-try-card--youtube:hover {
  box-shadow: 0 8px 32px rgba(125, 78, 125, 0.14),
    0 4px 16px rgba(209, 62, 223, 0.1);
  transform: translateY(-6px) scale(1.025);
  cursor: pointer;
  border-top: 4px solid #ff4343;
}

.free-try-card--courses {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 2px 2px 18px 2px;
  box-shadow: 0 2px 12px rgba(125, 78, 125, 0.07);
  transition: box-shadow 0.22s, transform 0.22s;
  border-top: 4px solid transparent;
  background: linear-gradient(135deg, #fff0f5 0%, #ffd6d9 100%);
  background-size: 300% 100%; /* 3 cards horizontally */
  background-position: right center;
}

.free-try-card--courses:hover {
  box-shadow: 0 8px 32px rgba(125, 78, 125, 0.14),
    0 4px 16px rgba(209, 62, 223, 0.1);
  transform: translateY(-6px) scale(1.025);
  cursor: pointer;
  border-top: 4px solid #7d4e7d;
}

/* REVIEW CONTAINER */

.review-container {
  position: relative;
  width: 100vw;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
  z-index: 5;
  overflow-x: auto;
  white-space: nowrap; /* or display: flex; */
}

.scroll-row {
  overflow-x: auto; /* Enable horizontal scroll */
  scroll-snap-type: x mandatory; /* Optional for smoother snapping */
  width: 100%; /* Ensure the row takes full width */
  z-index: 10;
}

.scroll-item {
  flex: 0 0 auto;
  min-width: 300px;
  /*flex-shrink: 0;*/
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  backdrop-filter: blur(10px); /* main blur effect */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
}

.button-container {
  /*position: relative;*/ /* Place absolutely within the Zero Block */
  z-index: 30; /* Ensure buttons are above row */
}

/* ==========================================================================
   Z — Footer
   ========================================================================== */

.sun {
  background: linear-gradient(135deg, #d13edf 40%, #f13030 100%);
  border-radius: 40% 60% 60% 40% / 50% 40% 60% 50%;
  padding: 2rem;
  color: #63535a;
  animation: blob-morph 8s ease-in-out infinite alternate;
  /* Sun glow effect */
  box-shadow: 0 0 32px 8px #f1303088,
    /* outer warm glow */ 0 0 64px 16px #ffd6fa66,
    /* pastel/pinkish halo */ 0 0 8px 2px #fff2; /* subtle white core */
  animation: blob-morph 8s ease-in-out infinite alternate,
    sun-glow 3s ease-in-out infinite alternate;
}

@keyframes sun-glow {
  0% {
    box-shadow: 0 0 32px 8px #f1303088, 0 0 64px 16px #ffd6fa66,
      0 0 8px 2px #fff2;
  }
  100% {
    box-shadow: 0 0 48px 16px #f13030aa, 0 0 96px 32px #ffd6fa99,
      0 0 16px 4px #fff4;
  }
}

/* BIRD */

.hero-section {
  position: relative; /* container for absolute positioning */
  overflow: visible;
}

.bird {
  position: absolute;
  top: 35%;
  left: -40px; /* start just off left */
  width: 32px;
  height: 16px;
  z-index: 10;
  pointer-events: none;
  animation: fly 18s linear infinite;
}

/* Bird body */
.body {
  position: absolute;
  left: 10px;
  top: 6px;
  width: 12px;
  height: 8px;
  background: #9a2db8;
  border-radius: 50% 50% 60% 60%;
  z-index: 2;
  box-shadow: 1px 2px 5px rgba(40, 10, 60, 0.14);
  opacity: 0.2;
}

/* Wings */
.wing {
  position: absolute;
  top: 7px;
  width: 12px;
  height: 12px;
  background: transparent;
  border-top: 4px solid #352e34;
  border-radius: 50% 50% 0 0;
  transform-origin: left bottom;
  animation: flap 0.7s ease-in-out infinite alternate;
  z-index: 1;
  opacity: 0.2;
}

.wing.right {
  left: 14px;
  transform-origin: right bottom;
  border-top: 4px solid #352e34;
  animation-delay: 0.35s;
}

.wing.left {
  left: 2px;
}

@keyframes flap {
  0% {
    transform: rotate(24deg);
  }
  100% {
    transform: rotate(-28deg);
  }
}

@keyframes fly {
  0% {
    left: -40px;
    opacity: 0;
  }
  10% {
    left: 0px;
    opacity: 1;
  }
  75% {
    left: 100%;
    opacity: 1;
  }
  90% {
    left: 115%;
    opacity: 0;
  }
  100% {
    left: 115%;
    opacity: 0;
  }
}
/* Mobile - 377px to 611px */
@media (min-width: 23.51rem) and (max-width: 38.2rem) {
  /* Membership Section */
  .membership-section {
    padding: var(--space-2xl) var(--space-base);
  }

  .membership-header {
    margin-bottom: var(--space-2xl);
  }

  .membership-title {
    font-size: var(--font-title-1);
  }

  .membership-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Requirements Section */
  .requirements-section {
    padding: var(--space-2xl) var(--space-base);
  }

  .requirements-header {
    margin-bottom: var(--space-2xl);
  }

  .requirements-title {
    font-size: var(--font-title-1);
  }

  .requirements-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Pricing Section */
  .pricing-section {
    padding: var(--space-2xl) var(--space-base);
  }

  .pricing-header {
    margin-bottom: var(--space-2xl);
  }

  .pricing-title {
    font-size: var(--font-title-1);
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .pricing-amount {
    font-size: var(--font-display-2);
  }

  /* Free Trial Section */
  .free-trial-section {
    padding: var(--space-2xl) var(--space-base);
  }

  .free-trial-header {
    margin-bottom: var(--space-2xl);
  }

  .free-trial-title {
    font-size: var(--font-title-1);
  }

  .free-trial-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* Tablet - 612px to 989px */
@media (min-width: 38.21rem) and (max-width: 61.8rem) {
  /* Membership Section */
  .membership-title {
    font-size: var(--font-title-2);
  }

  .membership-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Requirements Section */
  .requirements-title {
    font-size: var(--font-title-2);
  }

  .requirements-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  /* Pricing Section */
  .pricing-title {
    font-size: var(--font-title-2);
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Free Trial Section */
  .free-trial-title {
    font-size: var(--font-title-2);
  }

  .free-trial-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* Large Tablet/Desktop - 990px to 1279px */
@media (min-width: 61.81rem) and (max-width: 79.99rem) {
  /* Membership Section */
  .membership-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Requirements Section */
  .requirements-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pricing Section */
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Free Trial Section */
  .free-trial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}