/* =============================================
   YORIVMORHUB — MAIN STYLESHEET
   Aurora Glow Design System
   ============================================= */

@layer base, layout, components, utilities;


:root {
  
  --color-aurora-violet: #7c3aed;
  --color-aurora-teal: #06b6d4;
  --color-aurora-green: #10b981;
  --color-aurora-pink: #ec4899;
  --color-aurora-indigo: #4f46e5;

  --color-primary: #6d28d9;
  --color-primary-light: #8b5cf6;
  --color-primary-dark: #4c1d95;
  --color-secondary: #0891b2;
  --color-accent: #10b981;

  --color-bg: #f8f7ff;
  --color-bg-alt: #f0eeff;
  --color-surface: rgba(255, 255, 255, 0.85);
  --color-surface-glass: rgba(255, 255, 255, 0.6);
  --color-surface-dark: rgba(15, 10, 40, 0.92);

  --color-text: #1e1a3a;
  --color-text-muted: #5b5580;
  --color-text-light: #8b85aa;
  --color-text-on-dark: #e8e4ff;

  --color-border: rgba(124, 58, 237, 0.15);
  --color-border-light: rgba(124, 58, 237, 0.08);

  --color-footer-bg: #0d0920;
  --color-footer-text: #c4bde8;
  --color-footer-heading: #e8e4ff;
  --color-footer-link: #a78bfa;
  --color-footer-link-hover: #c4b5fd;

  
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;

  
  --shadow-sm: 0 1px 3px rgba(109, 40, 217, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(109, 40, 217, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(109, 40, 217, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 48px rgba(109, 40, 217, 0.2), 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 32px rgba(124, 58, 237, 0.3), 0 0 64px rgba(6, 182, 212, 0.15);
  --shadow-card: 0 2px 8px rgba(109, 40, 217, 0.08), 0 8px 24px rgba(109, 40, 217, 0.1), 0 1px 2px rgba(0,0,0,0.04);

  
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-aurora: 8000ms ease-in-out;

  
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  
  --header-height: 80px;
  --header-height-scrolled: 60px;
}


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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

img {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-primary-light);
}

ul {
  list-style: none;
}

address {
  font-style: normal;
}


.AuroraBackground {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.AuroraBackground--full {
  position: fixed;
}

.AuroraBackground--subtle .AuroraBackground-layer {
  opacity: 0.4;
}

.AuroraBackground-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.AuroraBackground-layer--one {
  inline-size: 70%;
  block-size: 70%;
  background: radial-gradient(ellipse, rgba(124, 58, 237, 0.5) 0%, rgba(79, 70, 229, 0.2) 60%, transparent 100%);
  inset-block-start: -20%;
  inset-inline-start: -10%;
  animation-name: auroraOne;
  animation-duration: 12s;
}

.AuroraBackground-layer--two {
  inline-size: 60%;
  block-size: 60%;
  background: radial-gradient(ellipse, rgba(6, 182, 212, 0.4) 0%, rgba(16, 185, 129, 0.15) 60%, transparent 100%);
  inset-block-end: -15%;
  inset-inline-end: -5%;
  animation-name: auroraTwo;
  animation-duration: 15s;
}

.AuroraBackground-layer--three {
  inline-size: 50%;
  block-size: 50%;
  background: radial-gradient(ellipse, rgba(236, 72, 153, 0.25) 0%, rgba(124, 58, 237, 0.1) 60%, transparent 100%);
  inset-block-start: 30%;
  inset-inline-start: 30%;
  animation-name: auroraThree;
  animation-duration: 18s;
}

@keyframes auroraOne {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5%, 8%) scale(1.08); }
  100% { transform: translate(-3%, 4%) scale(0.95); }
}

@keyframes auroraTwo {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6%, -5%) scale(1.1); }
  100% { transform: translate(4%, -8%) scale(0.92); }
}

@keyframes auroraThree {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(8%, -6%) scale(1.15) rotate(5deg); }
  100% { transform: translate(-4%, 10%) scale(0.9) rotate(-3deg); }
}


.Container {
  inline-size: 100%;
  max-inline-size: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}


h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  color: var(--color-text);
}


.Btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-3);
  padding-inline: var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.Btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.Btn:hover::before {
  opacity: 1;
}

.Btn--primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-aurora-violet) 50%, var(--color-secondary) 100%);
  color: #fff;
  box-shadow: var(--shadow-md), 0 0 20px rgba(124, 58, 237, 0.3);
}

.Btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(124, 58, 237, 0.4);
  color: #fff;
}

.Btn--ghost {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
  backdrop-filter: blur(8px);
}

.Btn--ghost:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
  transform: translateY(-2px);
}

.Btn--outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.Btn--outline:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}

.Btn--sm {
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  font-size: 0.875rem;
}

.Btn--lg {
  padding-block: var(--space-4);
  padding-inline: var(--space-8);
  font-size: 1.05rem;
}

.Btn--full {
  inline-size: 100%;
  justify-content: center;
}


.SiteHeader {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000;
  background: rgba(248, 247, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-block-end: 1px solid var(--color-border);
  transition: all var(--transition-slow);
  padding-block: var(--space-5);
}

.SiteHeader.is-scrolled {
  padding-block: var(--space-3);
  background: rgba(248, 247, 255, 0.92);
  box-shadow: var(--shadow-md);
}

.SiteHeader-inner {
  max-inline-size: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.SiteHeader-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.SiteHeader-logoImg {
  block-size: 44px;
  inline-size: auto;
  transition: block-size var(--transition-slow);
}

.SiteHeader.is-scrolled .SiteHeader-logoImg {
  block-size: 34px;
}

.SiteHeader-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.SiteHeader-navLink {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  position: relative;
}

.SiteHeader-navLink:hover,
.SiteHeader-navLink.is-active {
  color: var(--color-primary);
  background: rgba(124, 58, 237, 0.08);
}

.SiteHeader-navCta {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff !important;
  padding-block: var(--space-2);
  padding-inline: var(--space-5);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.SiteHeader-navCta:hover {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.SiteHeader-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  min-block-size: 44px;
  min-inline-size: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: background var(--transition-base);
}

.SiteHeader-hamburger:hover {
  background: rgba(124, 58, 237, 0.08);
}

.SiteHeader-hamburger span {
  display: block;
  inline-size: 24px;
  block-size: 2px;
  background: var(--color-text);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}


.MobileMenu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}

.MobileMenu.is-open {
  pointer-events: all;
}

.MobileMenu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 40, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.MobileMenu.is-open .MobileMenu-overlay {
  opacity: 1;
}

.MobileMenu-panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(360px, 85vw);
  block-size: 100vh;
  background: linear-gradient(160deg, #1a0d40 0%, #0d1a3a 50%, #0a2020 100%);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  box-shadow: -8px 0 40px rgba(0,0,0,0.4);
}

.MobileMenu.is-open .MobileMenu-panel {
  transform: translateX(0);
}

.MobileMenu-close {
  align-self: flex-end;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all var(--transition-base);
}

.MobileMenu-close:hover {
  background: rgba(255,255,255,0.2);
}

.MobileMenu-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.MobileMenu-link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.8);
  padding-block: var(--space-4);
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  border-block-end: 1px solid rgba(255,255,255,0.08);
  transition: all var(--transition-base);
}

.MobileMenu-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
  padding-inline-start: var(--space-6);
}

.MobileMenu-linkCta {
  margin-block-start: var(--space-4);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  text-align: center;
  border-block-end: none;
  border-radius: var(--radius-full);
}

.MobileMenu-linkCta:hover {
  padding-inline-start: var(--space-4);
  opacity: 0.9;
}

.MobileMenu-footer {
  margin-block-start: auto;
  padding-block-start: var(--space-6);
  border-block-start: 1px solid rgba(255,255,255,0.1);
}

.MobileMenu-footer p {
  color: rgba(255,255,255,0.5);
  font-size: 0.875rem;
  margin-block-end: var(--space-1);
}


.PageHero {
  position: relative;
  min-block-size: 100svh;
  display: flex;
  align-items: center;
  padding-block-start: var(--header-height);
  overflow: hidden;
  background: linear-gradient(135deg, #f0eeff 0%, #e8f4ff 50%, #edfff8 100%);
}

.PageHero-inner {
  position: relative;
  z-index: 1;
  max-inline-size: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  padding-block: var(--space-20);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  inline-size: 100%;
}

.PageHero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: var(--color-primary);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-heading);
  margin-block-end: var(--space-6);
  backdrop-filter: blur(8px);
}

.PageHero-heading {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  margin-block-end: var(--space-6);
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary) 50%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.PageHero-subheading {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-block-end: var(--space-8);
  max-inline-size: 520px;
}

.PageHero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.PageHero-actions .Btn--ghost {
  background: rgba(109, 40, 217, 0.08);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.PageHero-actions .Btn--ghost:hover {
  background: var(--color-primary);
  color: #fff;
}

.PageHero-visual {
  position: relative;
}

.PageHero-visualFrame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl), var(--shadow-glow);
}

.PageHero-visualImg {
  inline-size: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.PageHero-visualGlow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,58,237,0.2) 0%, transparent 60%);
  pointer-events: none;
}

.PageHero-floatCard {
  position: absolute;
  background: var(--color-surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
  white-space: nowrap;
}

.PageHero-floatCard i {
  color: var(--color-primary);
  font-size: 1.1rem;
}

.PageHero-floatCard--top {
  inset-block-start: -16px;
  inset-inline-end: -16px;
}

.PageHero-floatCard--bottom {
  inset-block-end: -16px;
  inset-inline-start: -16px;
}


.IntroStrip {
  position: relative;
  z-index: 2;
  background: var(--color-surface);
  backdrop-filter: blur(20px);
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-8);
}

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

.IntroStrip-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.IntroStrip-icon {
  font-size: 1.5rem;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-block-start: 2px;
}

.IntroStrip-item strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
  margin-block-end: var(--space-1);
}

.IntroStrip-item p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}


.SectionHeader {
  text-align: center;
  margin-block-end: var(--space-12);
}

.SectionHeader-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  margin-block-end: var(--space-4);
  color: var(--color-text);
}

.SectionHeader-sub {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-inline-size: 600px;
  margin-inline: auto;
  line-height: var(--leading-relaxed);
}


.FeatureSection {
  padding-block: var(--space-24);
  background: var(--color-bg);
}

.FeatureBlock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  margin-block-end: var(--space-24);
}

.FeatureBlock:last-child {
  margin-block-end: 0;
}

.FeatureBlock--reversed {
  direction: rtl;
}

.FeatureBlock--reversed > * {
  direction: ltr;
}

.FeatureBlock-visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  position: relative;
}

.FeatureBlock-img {
  inline-size: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.FeatureBlock-visual:hover .FeatureBlock-img {
  transform: scale(1.03);
}

.FeatureBlock-icon {
  inline-size: 56px;
  block-size: 56px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  margin-block-end: var(--space-4);
  box-shadow: var(--shadow-md);
}

.FeatureBlock-title {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 700;
  margin-block-end: var(--space-4);
  color: var(--color-text);
}

.FeatureBlock-text {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-block-end: var(--space-4);
  font-size: 1.02rem;
}


.CarouselSection {
  padding-block: var(--space-24);
  background: var(--color-bg-alt);
  overflow: hidden;
}

.SnapCarousel {
  position: relative;
  margin-block-start: var(--space-8);
}

.SnapCarousel-track {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-6);
  padding-inline: var(--space-6);
  padding-block: var(--space-4) var(--space-8);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.SnapCarousel-track::-webkit-scrollbar {
  display: none;
}

.SnapCarousel-track:active {
  cursor: grabbing;
}

.CourseCard {
  flex-shrink: 0;
  inline-size: min(360px, 85vw);
  scroll-snap-align: start;
  background: var(--color-surface);
  backdrop-filter: blur(16px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  overflow: hidden;
}

.CourseCard::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.CourseCard:hover::before {
  opacity: 1;
}

.CourseCard--featured {
  background: linear-gradient(160deg, rgba(124,58,237,0.08) 0%, rgba(6,182,212,0.05) 100%);
  border-color: rgba(124,58,237,0.3);
  box-shadow: var(--shadow-xl), 0 0 40px rgba(124,58,237,0.15);
}

.CourseCard-badge {
  display: inline-block;
  background: rgba(124,58,237,0.1);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-heading);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  margin-block-end: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.CourseCard-badge--featured {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
}

.CourseCard-icon {
  font-size: 2rem;
  color: var(--color-primary);
  margin-block-end: var(--space-4);
}

.CourseCard-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-block-end: var(--space-3);
  color: var(--color-text);
}

.CourseCard-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-block-end: var(--space-5);
}

.CourseCard-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-6);
}

.CourseCard-features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.CourseCard-features li i {
  color: var(--color-accent);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.SnapCarousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding-block-end: var(--space-4);
}

.SnapCarousel-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.SnapCarousel-dot.is-active {
  background: var(--color-primary);
  inline-size: 24px;
}


.CompareSection {
  padding-block: var(--space-24);
  background: var(--color-bg);
}

.CompareTable-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.CompareTable {
  inline-size: 100%;
  min-inline-size: 600px;
  border-collapse: collapse;
  background: var(--color-surface);
}

.CompareTable thead tr {
  background: linear-gradient(135deg, rgba(124,58,237,0.06) 0%, rgba(6,182,212,0.04) 100%);
}

.CompareTable-featureCol {
  text-align: start;
  padding: var(--space-6);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  inline-size: 40%;
}

.CompareTable-tierCol {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  vertical-align: top;
  position: relative;
}

.CompareTable-tierCol--featured {
  background: linear-gradient(180deg, rgba(124,58,237,0.08) 0%, rgba(6,182,212,0.04) 100%);
  border-inline: 2px solid rgba(124,58,237,0.2);
}

.CompareTable-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-heading);
  padding-block: 2px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-block-end: var(--space-2);
  display: block;
}

.CompareTable-tierName {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text);
  margin-block-end: var(--space-1);
}

.CompareTable-tierDesc {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.CompareTable tbody tr {
  border-block-start: 1px solid var(--color-border-light);
  transition: background var(--transition-fast);
}

.CompareTable tbody tr:hover {
  background: rgba(124,58,237,0.02);
}

.CompareTable-feature {
  padding: var(--space-4) var(--space-6);
  font-size: 0.95rem;
  color: var(--color-text);
}

.CompareTable-cell {
  text-align: center;
  padding: var(--space-4);
  font-size: 1.1rem;
}

.CompareTable-cell--featured {
  background: rgba(124,58,237,0.03);
}

.CompareTable-yes {
  color: var(--color-accent);
}

.CompareTable-no {
  color: var(--color-text-light);
  font-size: 0.9rem;
}

.CompareTable-ctaRow td {
  padding-block: var(--space-6);
  border-block-start: 2px solid var(--color-border);
}


.BadgesSection {
  position: relative;
  padding-block: var(--space-24);
  overflow: hidden;
  background: var(--color-bg-alt);
}

.BadgesGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
}

.BadgeCard {
  background: var(--color-surface-glass);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  z-index: 1;
}

.BadgeCard:hover {
  box-shadow: var(--shadow-xl);
}

.BadgeCard-icon {
  inline-size: 56px;
  block-size: 56px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  margin-inline: auto;
  margin-block-end: var(--space-4);
  box-shadow: 0 4px 16px rgba(124,58,237,0.3);
}

.BadgeCard-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  margin-block-end: var(--space-2);
}

.BadgeCard-desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}


.HowSection {
  padding-block: var(--space-24);
  background: var(--color-bg);
}

.HowGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  position: relative;
}

.HowGrid::before {
  content: '';
  position: absolute;
  inset-block-start: 28px;
  inset-inline: 12.5%;
  block-size: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity: 0.3;
}

.HowStep {
  position: relative;
  padding-block-start: var(--space-4);
}

.HowStep-number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-block-end: var(--space-4);
  position: relative;
  z-index: 1;
}

.HowStep-number::before {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 56px;
  block-size: 56px;
  background: rgba(124,58,237,0.08);
  border-radius: var(--radius-full);
  z-index: -1;
}

.HowStep-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-block-end: var(--space-3);
  color: var(--color-text);
}

.HowStep-text {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}


.AudiencePreview {
  padding-block: var(--space-24);
  background: var(--color-bg-alt);
}

.AudiencePreview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.AudiencePreview-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  margin-block-end: var(--space-5);
}

.AudiencePreview-text {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-block-end: var(--space-4);
}

.AudiencePreview-visual {
  position: relative;
}

.AudiencePreview-img {
  inline-size: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.AudiencePreview-card {
  position: absolute;
  inset-block-end: -20px;
  inset-inline-start: -20px;
  background: var(--color-surface-glass);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-inline-size: 280px;
  box-shadow: var(--shadow-lg);
}

.AudiencePreview-card i {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-block-end: var(--space-2);
  display: block;
}

.AudiencePreview-card p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  font-style: italic;
}


.CtaBanner {
  position: relative;
  padding-block: var(--space-24);
  overflow: hidden;
  background: linear-gradient(135deg, #0d0920 0%, #1a0d40 50%, #0d2040 100%);
}

.CtaBanner-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-inline-size: 700px;
  margin-inline: auto;
}

.CtaBanner-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: #fff;
  margin-block-end: var(--space-4);
  line-height: var(--leading-snug);
}

.CtaBanner-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  margin-block-end: var(--space-8);
  line-height: var(--leading-relaxed);
}

.CtaBanner-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}


.SiteFooter {
  background: var(--color-footer-bg);
  padding-block: var(--space-20);
  border-block-start: 1px solid rgba(255,255,255,0.05);
}

.SiteFooter-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-block-end: var(--space-12);
}

.SiteFooter-logo {
  block-size: 40px;
  inline-size: auto;
  margin-block-end: var(--space-4);
  filter: brightness(0) invert(1);
}

.SiteFooter-tagline {
  font-size: 0.9rem;
  color: var(--color-footer-text);
  line-height: var(--leading-relaxed);
  margin-block-end: var(--space-4);
}

.SiteFooter-address {
  font-size: 0.875rem;
  color: rgba(196,189,232,0.6);
}

.SiteFooter-heading {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-footer-heading);
  margin-block-end: var(--space-4);
}

.SiteFooter-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.SiteFooter-links a {
  font-size: 0.9rem;
  color: var(--color-footer-link);
  transition: color var(--transition-base);
  padding-block: var(--space-1);
}

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

.SiteFooter-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.SiteFooter-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.875rem;
  color: var(--color-footer-text);
}

.SiteFooter-contact li i {
  color: var(--color-footer-link);
  margin-block-start: 2px;
  flex-shrink: 0;
}

.SiteFooter-contact a {
  color: var(--color-footer-link);
}

.SiteFooter-contact a:hover {
  color: var(--color-footer-link-hover);
}

.SiteFooter-bottom {
  padding-block-start: var(--space-8);
  border-block-start: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.SiteFooter-bottom p {
  font-size: 0.85rem;
  color: rgba(196,189,232,0.5);
}


.InnerHero {
  position: relative;
  padding-block: var(--space-32) var(--space-20);
  padding-block-start: calc(var(--header-height) + var(--space-20));
  overflow: hidden;
  background: linear-gradient(135deg, #f0eeff 0%, #e8f4ff 100%);
  text-align: center;
}

.InnerHero-content {
  position: relative;
  z-index: 1;
  max-inline-size: 700px;
  margin-inline: auto;
}

.InnerHero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-block-end: var(--space-4);
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.InnerHero-sub {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}


.OfferIntro {
  padding-block: var(--space-20);
  background: var(--color-bg);
}

.OfferIntro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.OfferIntro-text h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  margin-block-end: var(--space-4);
}

.OfferIntro-text p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-block-end: var(--space-4);
}

.OfferIntro-img {
  inline-size: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.CourseCatalog {
  padding-block: var(--space-20);
  background: var(--color-bg-alt);
}

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

.CatalogCard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  overflow: hidden;
}

.CatalogCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.CatalogCard--featured {
  border-color: rgba(124,58,237,0.3);
  background: linear-gradient(160deg, rgba(124,58,237,0.05) 0%, rgba(6,182,212,0.03) 100%);
  grid-column: span 1;
}

.CatalogCard-featuredBadge {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-heading);
  padding-block: 3px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.CatalogCard-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.CatalogCard-icon {
  font-size: 1.5rem;
  color: var(--color-primary);
}

.CatalogCard-level {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
}

.CatalogCard-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-block-end: var(--space-3);
}

.CatalogCard-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-block-end: var(--space-4);
}

.CatalogCard-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.CatalogCard-topics span {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-heading);
  background: rgba(124,58,237,0.08);
  color: var(--color-primary);
  padding-block: 3px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
}

.MethodSection {
  position: relative;
  padding-block: var(--space-20);
  overflow: hidden;
  background: var(--color-bg);
}

.MethodGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  position: relative;
  z-index: 1;
}

.MethodItem {
  display: flex;
  gap: var(--space-5);
  background: var(--color-surface-glass);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

.MethodItem-num {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  opacity: 0.4;
  flex-shrink: 0;
  line-height: 1;
}

.MethodItem-body h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-block-end: var(--space-2);
}

.MethodItem-body p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}


.AudienceSection {
  padding-block: var(--space-20);
  background: var(--color-bg);
}

.AudienceSection-intro {
  max-inline-size: 760px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--space-16);
}

.AudienceSection-intro p {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

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

.AudienceCard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.AudienceCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.AudienceCard--featured {
  border-color: rgba(124,58,237,0.3);
  background: linear-gradient(160deg, rgba(124,58,237,0.06) 0%, rgba(6,182,212,0.03) 100%);
}

.AudienceCard-icon {
  inline-size: 60px;
  block-size: 60px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  margin-block-end: var(--space-5);
  box-shadow: 0 4px 16px rgba(124,58,237,0.3);
}

.AudienceCard-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-block-end: var(--space-4);
}

.AudienceCard-text {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-block-end: var(--space-4);
}

.AudienceCard-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.AudienceCard-list li {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding-inline-start: var(--space-4);
  position: relative;
}

.AudienceCard-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 6px;
  block-size: 6px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  opacity: 0.6;
}

.FitSection {
  position: relative;
  padding-block: var(--space-20);
  overflow: hidden;
  background: var(--color-bg-alt);
}

.FitSection-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.FitSection-col {
  background: var(--color-surface-glass);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
}

.FitSection-heading {
  font-size: 1.1rem;
  font-weight: 700;
  margin-block-end: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.FitSection-heading--yes {
  color: var(--color-accent);
}

.FitSection-heading--no {
  color: var(--color-secondary);
}

.FitList {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.FitList li {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  padding-inline-start: var(--space-5);
  position: relative;
  line-height: var(--leading-snug);
}

.FitList--yes li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.FitList--no li::before {
  content: '○';
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-text-light);
}

.ProfileSection {
  padding-block: var(--space-20);
  background: var(--color-bg);
}

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

.ProfileCard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.ProfileCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.ProfileCard-img {
  inline-size: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.ProfileCard-body {
  padding: var(--space-6);
}

.ProfileCard-name {
  font-size: 1rem;
  font-weight: 700;
  margin-block-end: var(--space-3);
  color: var(--color-text);
}

.ProfileCard p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}


.ContactInfoSection {
  padding-block: var(--space-20);
  background: var(--color-bg);
}

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

.ContactInfoCard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.ContactInfoCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.ContactInfoCard-icon {
  inline-size: 64px;
  block-size: 64px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  margin-inline: auto;
  margin-block-end: var(--space-4);
  box-shadow: 0 4px 20px rgba(124,58,237,0.35);
}

.ContactInfoCard-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-block-end: var(--space-2);
}

.ContactInfoCard-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-block-end: var(--space-3);
}

.ContactInfoCard-link {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.95rem;
  word-break: break-all;
}

.FaqSection {
  padding-block: var(--space-20);
  background: var(--color-bg-alt);
}

.FaqGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.FaqItem {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.FaqItem-q {
  font-size: 0.95rem;
  font-weight: 700;
  margin-block-end: var(--space-3);
  color: var(--color-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.FaqItem-q i {
  color: var(--color-primary);
  margin-block-start: 2px;
  flex-shrink: 0;
}

.FaqItem-a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  padding-inline-start: calc(1rem + var(--space-3));
}


.ContactPage {
  position: relative;
  min-block-size: 100svh;
  padding-block-start: var(--header-height);
  background: linear-gradient(135deg, #f0eeff 0%, #e8f4ff 50%, #edfff8 100%);
}

.ContactPage-inner {
  position: relative;
  z-index: 1;
  max-inline-size: 680px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  padding-block: var(--space-16) var(--space-20);
}

.ContactPage-header {
  text-align: center;
  margin-block-end: var(--space-12);
}

.ContactPage-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  margin-block-end: var(--space-3);
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ContactPage-sub {
  color: var(--color-text-muted);
  font-size: 1rem;
}

.ContactForm {
  background: var(--color-surface);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-xl);
  margin-block-end: var(--space-10);
}

.ContactForm-field {
  margin-block-end: var(--space-6);
}

.ContactForm-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-text);
  margin-block-end: var(--space-2);
}

.ContactForm-input {
  inline-size: 100%;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: rgba(255,255,255,0.8);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  outline: none;
}

.ContactForm-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
  background: #fff;
}

.ContactForm-input.is-error {
  border-color: #e11d48;
}

.ContactForm-textarea {
  resize: vertical;
  min-block-size: 150px;
}

.ContactForm-helper {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-light);
  margin-block-start: var(--space-1);
}

.ContactForm-error {
  display: block;
  font-size: 0.8rem;
  color: #e11d48;
  margin-block-start: var(--space-1);
  min-block-size: 1.2em;
}

.ContactForm-field--checkbox {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ContactForm-checkLabel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.ContactForm-checkbox {
  margin-block-start: 2px;
  accent-color: var(--color-primary);
  inline-size: 18px;
  block-size: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.ContactForm-checkmark {
  display: none;
}

.ContactForm-submit {
  margin-block-start: var(--space-4);
}


.NewsletterBlock {
  margin-block-end: var(--space-10);
}

.NewsletterBlock-inner {
  background: linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(6,182,212,0.05) 100%);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
}

.NewsletterBlock-icon {
  font-size: 2rem;
  color: var(--color-primary);
  margin-block-end: var(--space-4);
}

.NewsletterBlock-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-block-end: var(--space-3);
}

.NewsletterBlock-text {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-block-end: var(--space-5);
  line-height: var(--leading-relaxed);
}

.NewsletterForm {
  display: flex;
  gap: var(--space-3);
  max-inline-size: 480px;
  margin-inline: auto;
}

.NewsletterForm-input {
  flex: 1;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition-base);
  background: rgba(255,255,255,0.8);
}

.NewsletterForm-input:focus {
  border-color: var(--color-primary);
}

.NewsletterForm-btn {
  border-radius: var(--radius-full);
  white-space: nowrap;
}


.MapBlock {
  text-align: center;
}

.MapBlock-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-block-end: var(--space-1);
}

.MapBlock-sub {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-block-end: var(--space-5);
}

.MapBlock-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.MapBlock-frame iframe {
  display: block;
}


.ThanksPage {
  position: relative;
  min-block-size: 80svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--header-height) var(--space-20);
  background: linear-gradient(135deg, #f0eeff 0%, #e8f4ff 100%);
}

.ThanksPage-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-inline-size: 560px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.ThanksPage-animation {
  margin-block-end: var(--space-8);
}

.ThanksPage-svg {
  inline-size: 120px;
  block-size: 120px;
  margin-inline: auto;
}

.ThanksPage-circle {
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  animation: drawCircle 1s ease forwards;
}

.ThanksPage-check {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: drawCheck 0.5s ease forwards 0.9s;
}

@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}

@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

.ThanksPage-content {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUpIn 0.6s ease forwards 1.4s;
}

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

.ThanksPage-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  margin-block-end: var(--space-4);
  color: var(--color-text);
}

.ThanksPage-text {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-block-end: var(--space-8);
}

.ThanksPage-text a {
  color: var(--color-primary);
  font-weight: 600;
}


.LegalHero {
  padding-block: calc(var(--header-height) + var(--space-12)) var(--space-10);
  background: linear-gradient(135deg, #f0eeff 0%, #e8f4ff 100%);
  border-block-end: 1px solid var(--color-border);
}

.LegalHero-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--color-text);
  margin-block-end: var(--space-2);
}

.LegalHero-meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.LegalContent {
  padding-block: var(--space-16) var(--space-20);
  background: var(--color-bg);
}

.LegalDoc {
  max-inline-size: 800px;
}

.LegalDoc-intro {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-block-end: var(--space-8);
  padding: var(--space-5);
  background: rgba(124,58,237,0.04);
  border-inline-start: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.LegalDoc-section {
  margin-block-end: var(--space-8);
}

.LegalDoc-section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--color-border-light);
}

.LegalDoc-section p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}


.CookieConsent {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-end: var(--space-5);
  z-index: 9999;
  inline-size: 320px;
  max-inline-size: calc(100vw - var(--space-8));
  background: rgba(15, 10, 40, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl), 0 0 40px rgba(124,58,237,0.2);
  transform: translateY(120%);
  opacity: 0;
  transition: transform var(--transition-slow), opacity var(--transition-slow);
  overflow: hidden;
}

.CookieConsent.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.CookieConsent-icon {
  text-align: center;
  font-size: 2rem;
  padding-block: var(--space-5) var(--space-2);
  color: var(--color-primary-light);
}

.CookieConsent-body {
  padding-inline: var(--space-5);
  padding-block-end: var(--space-5);
}

.CookieConsent-title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-on-dark);
  margin-block-end: var(--space-2);
}

.CookieConsent-text {
  font-size: 0.8rem;
  color: rgba(196,189,232,0.8);
  line-height: var(--leading-snug);
  margin-block-end: var(--space-4);
}

.CookieConsent-text a {
  color: var(--color-primary-light);
}

.CookieConsent-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.CookieConsent-btn {
  inline-size: 100%;
  padding-block: var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all var(--transition-base);
}

.CookieConsent-btn--accept {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
}

.CookieConsent-btn--accept:hover {
  opacity: 0.9;
}

.CookieConsent-btn--customize {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.15);
}

.CookieConsent-btn--customize:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.CookieConsent-btn--reject {
  background: transparent;
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
}

.CookieConsent-btn--reject:hover {
  color: rgba(255,255,255,0.7);
}

.CookieConsent-toggles {
  display: none;
  padding-inline: var(--space-5);
  padding-block-end: var(--space-4);
  border-block-start: 1px solid rgba(255,255,255,0.08);
  margin-block-start: var(--space-3);
}

.CookieConsent-toggles.is-open {
  display: block;
}

.CookieToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
  border-block-end: 1px solid rgba(255,255,255,0.06);
}

.CookieToggle:last-child {
  border-block-end: none;
}

.CookieToggle-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-heading);
  font-weight: 600;
}

.CookieToggle-sublabel {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  display: block;
}

.CookieToggle-switch {
  position: relative;
  inline-size: 36px;
  block-size: 20px;
  flex-shrink: 0;
}

.CookieToggle-switch input {
  opacity: 0;
  inline-size: 0;
  block-size: 0;
}

.CookieToggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-base);
}

.CookieToggle-slider::before {
  content: '';
  position: absolute;
  block-size: 14px;
  inline-size: 14px;
  inset-inline-start: 3px;
  inset-block-start: 3px;
  background: #fff;
  border-radius: var(--radius-full);
  transition: transform var(--transition-base);
}

input:checked + .CookieToggle-slider {
  background: var(--color-primary);
}

input:checked + .CookieToggle-slider::before {
  transform: translateX(16px);
}

input:disabled + .CookieToggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}


.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}


.iti__flag-container {
  z-index: 10;
}

.iti__country-list {
  z-index: 100;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}



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

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

@media (max-width: 900px) {
  .SiteHeader-nav {
    display: none;
  }

  .SiteHeader-hamburger {
    display: flex;
  }

  .PageHero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    text-align: center;
    padding-block: var(--space-16);
  }

  .PageHero-subheading {
    max-inline-size: 100%;
    margin-inline: auto;
  }

  .PageHero-actions {
    justify-content: center;
  }

  .PageHero-floatCard--top {
    inset-block-start: -12px;
    inset-inline-end: 0;
  }

  .PageHero-floatCard--bottom {
    inset-block-end: -12px;
    inset-inline-start: 0;
  }

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

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

  .FeatureBlock--reversed {
    direction: ltr;
  }

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

  .HowGrid::before {
    display: none;
  }

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

  .AudiencePreview-card {
    position: static;
    margin-block-start: var(--space-4);
    max-inline-size: 100%;
  }

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

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

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

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

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

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

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

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

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

  .CompareTable-featureCol {
    inline-size: auto;
  }
}

@media (max-width: 600px) {
  :root {
    --space-6: 1.25rem;
  }

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

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

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

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

  .SiteFooter-bottom {
    flex-direction: column;
    text-align: center;
  }

  .CtaBanner-actions {
    flex-direction: column;
    align-items: center;
  }

  .PageHero-actions {
    flex-direction: column;
    align-items: center;
  }

  .NewsletterForm {
    flex-direction: column;
  }

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

  .ContactForm {
    padding: var(--space-6);
  }

  .CookieConsent {
    inset-inline-end: var(--space-3);
    inset-block-end: var(--space-3);
    inline-size: calc(100vw - var(--space-6));
  }

  .PageHero-floatCard {
    display: none;
  }

  .LegalHero {
    padding-block-start: calc(var(--header-height) + var(--space-8));
  }
}

@media (max-width: 400px) {
  .InnerHero {
    padding-block-start: calc(var(--header-height) + var(--space-12));
  }
}