/* ============================================================
   LAREVQORLAB · DESIGN SYSTEM
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Colors */
  --clr-primary:       #1a3a6b;
  --clr-primary-mid:   #1e4d8c;
  --clr-primary-light: #2563b0;
  --clr-accent:        #e85d26;
  --clr-accent-light:  #f07843;
  --clr-accent-glow:   rgba(232, 93, 38, 0.18);
  --clr-teal:          #0d9488;
  --clr-teal-light:    #14b8a6;

  --clr-bg:            #f4f6fb;
  --clr-bg-card:       #ffffff;
  --clr-bg-dark:       #0e1e3a;
  --clr-bg-dark-mid:   #142847;
  --clr-bg-grad-start: #0e1e3a;
  --clr-bg-grad-end:   #1a3a6b;

  --clr-text-dark:     #111827;
  --clr-text-body:     #374151;
  --clr-text-muted:    #6b7280;
  --clr-text-light:    #e8edf5;
  --clr-text-white:    #f9fafb;

  --clr-border:        #dde3ef;
  --clr-border-light:  rgba(255,255,255,0.12);

  /* Gradients */
  --grad-hero:     linear-gradient(135deg, #0e1e3a 0%, #1a3a6b 50%, #1e4d8c 100%);
  --grad-courses:  linear-gradient(160deg, #0e1e3a 0%, #142847 100%);
  --grad-topics:   linear-gradient(150deg, #142847 0%, #0e1e3a 100%);
  --grad-accent:   linear-gradient(135deg, #e85d26 0%, #f07843 100%);
  --grad-teal:     linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  --grad-card-hover: linear-gradient(135deg, rgba(37,99,176,0.06) 0%, rgba(232,93,38,0.04) 100%);

  /* Shadows – consistent top-left light source */
  --shadow-xs:   0 1px 3px rgba(14,30,58,0.08), 0 1px 2px rgba(14,30,58,0.06);
  --shadow-sm:   0 2px 8px rgba(14,30,58,0.10), 0 1px 4px rgba(14,30,58,0.07);
  --shadow-md:   0 4px 16px rgba(14,30,58,0.12), 0 2px 8px rgba(14,30,58,0.08);
  --shadow-lg:   0 8px 32px rgba(14,30,58,0.16), 0 4px 16px rgba(14,30,58,0.10);
  --shadow-xl:   0 16px 48px rgba(14,30,58,0.20), 0 8px 24px rgba(14,30,58,0.12);
  --shadow-accent: 0 8px 32px rgba(232,93,38,0.28), 0 2px 8px rgba(232,93,38,0.16);
  --shadow-card-hover: 0 12px 40px rgba(14,30,58,0.22), 0 4px 16px rgba(14,30,58,0.12);

  /* Typography */
  --font-main:  'Outfit', sans-serif;

  /* Spacing Scale */
  --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;

  /* Border Radius Scale */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.25rem;
  --radius-xl:   2rem;
  --radius-full: 9999px;

  /* Transitions */
  --trans-fast:   150ms ease;
  --trans-base:   250ms ease;
  --trans-slow:   400ms ease;
  --trans-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-main);
  background-color: var(--clr-bg);
  color: var(--clr-text-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-inline-size: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font-main); border: none; background: none; }
input, textarea, select { font-family: var(--font-main); }

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

/* ── Buttons ───────────────────────────────────────────────── */
.Btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 0.75rem;
  padding-inline: 1.75rem;
  border-radius: var(--radius-full);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    background var(--trans-base),
    color var(--trans-base),
    box-shadow var(--trans-base),
    transform var(--trans-spring),
    border-color var(--trans-base);
  position: relative;
  overflow: hidden;
  min-block-size: 44px;
  white-space: nowrap;
}

.Btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--trans-base);
  border-radius: inherit;
}

.Btn:hover::before { background: rgba(255,255,255,0.08); }

.Btn--primary {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.Btn--primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 40px rgba(232,93,38,0.38), 0 4px 12px rgba(232,93,38,0.22);
}
.Btn--primary:active { transform: translateY(0) scale(0.99); }

.Btn--ghost {
  background: rgba(255,255,255,0.10);
  color: var(--clr-text-white);
  border: 1.5px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(8px);
}
.Btn--ghost:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.Btn--outline {
  background: transparent;
  color: var(--clr-primary-light);
  border: 2px solid var(--clr-primary-light);
}
.Btn--outline:hover {
  background: var(--clr-primary-light);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── Section Headers ───────────────────────────────────────── */
.SectionHeader {
  text-align: center;
  margin-block-end: var(--space-12);
}

.SectionHeader-label {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-accent);
  background: var(--clr-accent-glow);
  padding-block: var(--space-1);
  padding-inline: var(--space-4);
  border-radius: var(--radius-full);
  margin-block-end: var(--space-4);
}

.SectionHeader-label--light {
  color: var(--clr-accent-light);
  background: rgba(240,120,67,0.15);
}

.SectionHeader-heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--clr-text-dark);
  line-height: 1.2;
  margin-block-end: var(--space-4);
}

.SectionHeader--light .SectionHeader-heading {
  color: var(--clr-text-white);
}

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

.SectionHeader--light .SectionHeader-sub {
  color: rgba(232,237,245,0.75);
}

/* ── SITE HEADER ───────────────────────────────────────────── */
.SiteHeader {
  position: relative;
  z-index: 100;
  background: rgba(14,30,58,0.98);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--clr-border-light);
}

.SiteHeader-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  gap: var(--space-6);
}

.SiteHeader-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.SiteHeader-logoImg {
  inline-size: 36px;
  block-size: 36px;
}

.SiteHeader-logoText {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--clr-text-white);
  letter-spacing: -0.02em;
}

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

.SiteHeader-navLink {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(232,237,245,0.8);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  transition: color var(--trans-base), background var(--trans-base);
  position: relative;
}

.SiteHeader-navLink::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 2px;
  background: var(--clr-accent);
  border-radius: var(--radius-full);
  transition: inline-size var(--trans-base), inset-inline-start var(--trans-base);
}

.SiteHeader-navLink:hover {
  color: var(--clr-text-white);
  background: rgba(255,255,255,0.06);
}

.SiteHeader-navLink:hover::after {
  inline-size: 80%;
  inset-inline-start: 10%;
}

.SiteHeader-navLink--cta {
  background: var(--grad-accent);
  color: #fff !important;
  padding-inline: var(--space-5);
  box-shadow: var(--shadow-accent);
}

.SiteHeader-navLink--cta::after { display: none; }

.SiteHeader-navLink--cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(232,93,38,0.35);
  background: var(--grad-accent) !important;
}

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

.SiteHeader-hamburger span {
  display: block;
  inline-size: 22px;
  block-size: 2px;
  background: var(--clr-text-white);
  border-radius: var(--radius-full);
  transition: transform var(--trans-base), opacity var(--trans-base);
}

.SiteHeader-hamburger:hover { background: rgba(255,255,255,0.08); }

/* ── MOBILE MENU ───────────────────────────────────────────── */
.MobileMenu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--grad-hero);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--trans-slow);
}

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

.MobileMenu-close {
  position: absolute;
  inset-block-start: var(--space-6);
  inset-inline-end: var(--space-6);
  color: var(--clr-text-white);
  font-size: 1.75rem;
  padding: var(--space-3);
  min-block-size: 44px;
  min-inline-size: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: background var(--trans-base), transform var(--trans-spring);
}

.MobileMenu-close:hover {
  background: rgba(255,255,255,0.12);
  transform: rotate(90deg);
}

.MobileMenu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.MobileMenu-link {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 700;
  color: var(--clr-text-white);
  letter-spacing: -0.02em;
  position: relative;
  transition: color var(--trans-base), transform var(--trans-spring);
}

.MobileMenu-link::after {
  content: '';
  position: absolute;
  inset-block-end: -4px;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 3px;
  background: var(--grad-accent);
  border-radius: var(--radius-full);
  transition: inline-size var(--trans-base);
}

.MobileMenu-link:hover {
  color: var(--clr-accent-light);
  transform: translateX(8px);
}

.MobileMenu-link:hover::after { inline-size: 100%; }

/* ── PAGE HERO ─────────────────────────────────────────────── */
.PageHero {
  position: relative;
  padding-block: var(--space-24) var(--space-20);
  overflow: hidden;
  min-block-size: 90vh;
  display: flex;
  align-items: center;
}

.PageHero-bg {
  position: absolute;
  inset: 0;
  background: var(--grad-hero);
  z-index: 0;
}

.PageHero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(37,99,176,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(232,93,38,0.12) 0%, transparent 60%);
}

.PageHero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.PageHero-particle {
  position: absolute;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
  animation: floatParticle 8s ease-in-out infinite;
}

.PageHero-particle:nth-child(1) { inline-size: 300px; block-size: 300px; inset-block-start: -100px; inset-inline-end: -50px; animation-delay: 0s; }
.PageHero-particle:nth-child(2) { inline-size: 200px; block-size: 200px; inset-block-start: 60%; inset-inline-end: 15%; animation-delay: 2s; }
.PageHero-particle:nth-child(3) { inline-size: 150px; block-size: 150px; inset-block-start: 20%; inset-inline-start: 5%; animation-delay: 4s; }
.PageHero-particle:nth-child(4) { inline-size: 80px; block-size: 80px; inset-block-start: 40%; inset-inline-start: 25%; animation-delay: 1s; }
.PageHero-particle:nth-child(5) { inline-size: 120px; block-size: 120px; inset-block-end: 10%; inset-inline-start: 40%; animation-delay: 3s; }

@keyframes floatParticle {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.06; }
  50% { transform: translateY(-20px) scale(1.05); opacity: 0.10; }
}

.PageHero-inner {
  position: relative;
  z-index: 2;
  max-inline-size: 820px;
}

.PageHero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-accent-light);
  background: rgba(232,93,38,0.15);
  border: 1px solid rgba(232,93,38,0.3);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border-radius: var(--radius-full);
  margin-block-end: var(--space-6);
  backdrop-filter: blur(8px);
}

.PageHero-heading {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 800;
  color: var(--clr-text-white);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-block-end: var(--space-6);
}

.PageHero-typed-wrapper {
  display: block;
  min-block-size: 1.2em;
}

.PageHero-typed {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.PageHero-subheading {
  font-size: clamp(1rem, 2vw, 1.1875rem);
  color: rgba(232,237,245,0.82);
  line-height: 1.75;
  max-inline-size: 620px;
  margin-block-end: var(--space-10);
}

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

.PageHero-stats {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding-block-start: var(--space-8);
  border-block-start: 1px solid rgba(255,255,255,0.12);
}

.PageHero-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(232,237,245,0.75);
  transition: color var(--trans-base), transform var(--trans-spring);
}

.PageHero-stat:hover {
  color: var(--clr-text-white);
  transform: translateY(-2px);
}

.PageHero-stat i {
  color: var(--clr-teal-light);
  font-size: 1.125rem;
}

/* ── BENEFITS SECTION ──────────────────────────────────────── */
.BenefitsSection {
  padding-block: var(--space-24);
  background: var(--clr-bg);
}

.BenefitsSection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}

.BenefitCard {
  background: var(--clr-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1.5px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--trans-spring),
    box-shadow var(--trans-slow),
    border-color var(--trans-base);
  cursor: default;
}

.BenefitCard::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  block-size: 3px;
  background: var(--grad-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--trans-slow);
}

.BenefitCard:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(37,99,176,0.3);
}

.BenefitCard:hover::before { transform: scaleX(1); }

.BenefitCard-icon {
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(37,99,176,0.10) 0%, rgba(232,93,38,0.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--clr-primary-light);
  margin-block-end: var(--space-5);
  transition: background var(--trans-base), transform var(--trans-spring), color var(--trans-base);
}

.BenefitCard:hover .BenefitCard-icon {
  background: var(--grad-accent);
  color: #fff;
  transform: scale(1.1) rotate(-3deg);
}

.BenefitCard-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--clr-text-dark);
  margin-block-end: var(--space-3);
  transition: color var(--trans-base);
}

.BenefitCard:hover .BenefitCard-title { color: var(--clr-primary-light); }

.BenefitCard-body {
  font-size: 0.9375rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
}

.BenefitCard-hover {
  margin-block-start: var(--space-5);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-accent);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--trans-base), transform var(--trans-base);
}

.BenefitCard:hover .BenefitCard-hover {
  opacity: 1;
  transform: translateY(0);
}

/* ── COURSES SECTION ───────────────────────────────────────── */
.CoursesSection {
  position: relative;
  padding-block: var(--space-24);
  overflow: hidden;
}

.CoursesSection-bg {
  position: absolute;
  inset: 0;
  background: var(--grad-courses);
  z-index: 0;
}

.CoursesSection-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37,99,176,0.3) 0%, transparent 60%);
}

.CoursesSection .Container,
.CoursesSection .SectionHeader { position: relative; z-index: 1; }

.CoursesSection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  position: relative;
  z-index: 1;
}

.CourseCard {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--trans-spring),
    box-shadow var(--trans-slow),
    background var(--trans-base),
    border-color var(--trans-base);
}

.CourseCard:hover {
  transform: translateY(-8px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 20px 60px rgba(14,30,58,0.5), 0 8px 24px rgba(14,30,58,0.3);
}

.CourseCard--featured {
  background: rgba(255,255,255,0.09);
  border-color: rgba(232,93,38,0.4);
  box-shadow: 0 0 0 1px rgba(232,93,38,0.2), var(--shadow-lg);
}

.CourseCard--featured:hover {
  border-color: rgba(232,93,38,0.65);
  box-shadow: 0 0 0 1px rgba(232,93,38,0.35), var(--shadow-xl);
}

.CourseCard-badge {
  position: absolute;
  inset-block-start: var(--space-5);
  inset-inline-end: var(--space-5);
  background: var(--grad-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-accent);
}

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

.CourseCard-icon {
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  color: var(--clr-accent-light);
  flex-shrink: 0;
  transition: background var(--trans-base), transform var(--trans-spring);
}

.CourseCard:hover .CourseCard-icon {
  background: var(--grad-accent);
  transform: scale(1.08);
}

.CourseCard-level {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-teal-light);
  background: rgba(13,148,136,0.15);
  padding-block: 2px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
}

.CourseCard-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-text-white);
  margin-block-end: var(--space-4);
  line-height: 1.3;
}

.CourseCard-desc {
  font-size: 0.9375rem;
  color: rgba(232,237,245,0.72);
  line-height: 1.7;
  margin-block-end: var(--space-6);
}

.CourseCard-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-end: var(--space-8);
}

.CourseCard-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9rem;
  color: rgba(232,237,245,0.8);
}

.CourseCard-list li i {
  color: var(--clr-teal-light);
  font-size: 0.875rem;
  margin-block-start: 3px;
  flex-shrink: 0;
}

/* ── METHOD SECTION ────────────────────────────────────────── */
.MethodSection {
  padding-block: var(--space-24);
  background: var(--clr-bg);
}

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

.MethodSection-content .SectionHeader-label {
  text-align: left;
}

.MethodSection-heading {
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 800;
  color: var(--clr-text-dark);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-block-end: var(--space-5);
}

.MethodSection-text {
  font-size: 1rem;
  color: var(--clr-text-muted);
  line-height: 1.75;
  margin-block-end: var(--space-4);
}

.MethodSection-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-block-start: var(--space-8);
}

.MethodStep {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--clr-border);
  background: var(--clr-bg-card);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--trans-spring),
    box-shadow var(--trans-slow),
    border-color var(--trans-base),
    background var(--trans-base);
}

.MethodStep:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(37,99,176,0.3);
  background: var(--grad-card-hover);
}

.MethodStep-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--clr-accent);
  line-height: 1;
  min-inline-size: 40px;
  opacity: 0.6;
  transition: opacity var(--trans-base);
}

.MethodStep:hover .MethodStep-num { opacity: 1; }

.MethodStep-body h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text-dark);
  margin-block-end: var(--space-2);
}

.MethodStep-body p {
  font-size: 0.9rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

/* Method Visual */
.MethodVisual {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1;
  max-inline-size: 420px;
  margin-inline: auto;
}

.MethodVisual-center {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 140px;
  block-size: 140px;
  background: var(--grad-hero);
  border-radius: var(--radius-full);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-xl);
  border: 3px solid rgba(255,255,255,0.12);
  z-index: 2;
  transition: transform var(--trans-spring), box-shadow var(--trans-slow);
}

.MethodVisual:hover .MethodVisual-center {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 20px 60px rgba(14,30,58,0.4);
}

.MethodVisual-center i {
  font-size: 1.75rem;
  color: var(--clr-accent-light);
}

.MethodVisual-center span {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(232,237,245,0.85);
  text-align: center;
  padding-inline: var(--space-3);
  line-height: 1.3;
}

.MethodVisual-card {
  position: absolute;
  inline-size: 120px;
  block-size: 80px;
  background: var(--clr-bg-card);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--clr-border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-text-body);
  text-align: center;
  padding-inline: var(--space-3);
  transition:
    transform var(--trans-spring),
    box-shadow var(--trans-slow),
    border-color var(--trans-base);
  z-index: 1;
}

.MethodVisual-card i {
  font-size: 1.25rem;
  color: var(--clr-primary-light);
}

.MethodVisual-card:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-lg);
  border-color: rgba(37,99,176,0.35);
}

.MethodVisual-card--1 { inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%); }
.MethodVisual-card--2 { inset-block-start: 50%; inset-inline-end: 0; transform: translateY(-50%); }
.MethodVisual-card--3 { inset-block-end: 0; inset-inline-start: 50%; transform: translateX(-50%); }
.MethodVisual-card--4 { inset-block-start: 50%; inset-inline-start: 0; transform: translateY(-50%); }

.MethodVisual-card--1:hover { transform: translateX(-50%) scale(1.08); }
.MethodVisual-card--2:hover { transform: translateY(-50%) scale(1.08); }
.MethodVisual-card--3:hover { transform: translateX(-50%) scale(1.08); }
.MethodVisual-card--4:hover { transform: translateY(-50%) scale(1.08); }

/* ── TOPICS SECTION ────────────────────────────────────────── */
.TopicsSection {
  position: relative;
  padding-block: var(--space-24);
  overflow: hidden;
}

.TopicsSection-bg {
  position: absolute;
  inset: 0;
  background: var(--grad-topics);
  z-index: 0;
}

.TopicsSection-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 70% at 80% 50%, rgba(13,148,136,0.15) 0%, transparent 60%);
}

.TopicsSection .Container,
.TopicsSection .SectionHeader { position: relative; z-index: 1; }

.TopicsSection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  position: relative;
  z-index: 1;
}

.TopicCard {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  transition:
    transform var(--trans-spring),
    background var(--trans-base),
    border-color var(--trans-base),
    box-shadow var(--trans-slow);
  position: relative;
  overflow: hidden;
}

.TopicCard::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background: var(--grad-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--trans-slow);
}

.TopicCard:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(20,184,166,0.3);
  box-shadow: 0 16px 48px rgba(14,30,58,0.45), 0 4px 16px rgba(13,148,136,0.12);
}

.TopicCard:hover::after { transform: scaleX(1); }

.TopicCard-icon {
  inline-size: 50px;
  block-size: 50px;
  border-radius: var(--radius-md);
  background: rgba(13,148,136,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  color: var(--clr-teal-light);
  margin-block-end: var(--space-5);
  transition: background var(--trans-base), transform var(--trans-spring);
}

.TopicCard:hover .TopicCard-icon {
  background: var(--grad-teal);
  color: #fff;
  transform: scale(1.1);
}

.TopicCard-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--clr-text-white);
  margin-block-end: var(--space-3);
}

.TopicCard-body {
  font-size: 0.9rem;
  color: rgba(232,237,245,0.68);
  line-height: 1.7;
}

/* ── LOCATION SECTION ──────────────────────────────────────── */
.LocationSection {
  padding-block: var(--space-24);
  background: var(--clr-bg);
}

.LocationSection-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-10);
  align-items: start;
}

.ContactDetail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--clr-border);
  background: var(--clr-bg-card);
  box-shadow: var(--shadow-xs);
  margin-block-end: var(--space-4);
  transition:
    transform var(--trans-spring),
    box-shadow var(--trans-slow),
    border-color var(--trans-base);
}

.ContactDetail:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(37,99,176,0.3);
}

.ContactDetail-icon {
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(37,99,176,0.10), rgba(232,93,38,0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  color: var(--clr-primary-light);
  flex-shrink: 0;
  transition: background var(--trans-base), color var(--trans-base);
}

.ContactDetail:hover .ContactDetail-icon {
  background: var(--grad-accent);
  color: #fff;
}

.ContactDetail-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ContactDetail-body strong {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-text-muted);
}

.ContactDetail-body span,
.ContactDetail-body a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--clr-text-dark);
  line-height: 1.5;
  transition: color var(--trans-base);
}

.ContactDetail-body a:hover { color: var(--clr-accent); }

.LocationSection-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1.5px solid var(--clr-border);
  transition: box-shadow var(--trans-slow), transform var(--trans-spring);
}

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

.LocationSection-map iframe {
  display: block;
  inline-size: 100%;
}

/* ── CONTACT SECTION ───────────────────────────────────────── */
.ContactSection {
  position: relative;
  padding-block: var(--space-24);
  overflow: hidden;
}

.ContactSection-bg {
  position: absolute;
  inset: 0;
  background: var(--grad-hero);
  z-index: 0;
}

.ContactSection-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 30% 60%, rgba(37,99,176,0.25) 0%, transparent 60%);
}

.ContactSection .Container,
.ContactSection .SectionHeader { position: relative; z-index: 1; }

.ContactSection-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.ContactForm-wrapper {
  inline-size: 100%;
  max-inline-size: 600px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: 0 20px 60px rgba(14,30,58,0.4);
}

.FormSteps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-block-end: var(--space-8);
}

.FormStep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.FormStep-num {
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(232,237,245,0.6);
  transition: all var(--trans-base);
}

.FormStep--active .FormStep-num {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-accent);
}

.FormStep-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(232,237,245,0.5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color var(--trans-base);
}

.FormStep--active .FormStep-label { color: rgba(232,237,245,0.9); }

.FormStep-line {
  flex: 1;
  block-size: 2px;
  background: rgba(255,255,255,0.15);
  margin-block-end: 20px;
  min-inline-size: 60px;
}

.FormPanel {
  display: none;
}

.FormPanel--active { display: block; }

.FormField {
  margin-block-end: var(--space-5);
}

.FormField-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(232,237,245,0.85);
  margin-block-end: var(--space-2);
}

.FormField-label span {
  color: var(--clr-accent-light);
}

.FormField-input {
  inline-size: 100%;
  padding-block: 0.875rem;
  padding-inline: 1rem;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  color: var(--clr-text-white);
  font-size: 0.9375rem;
  font-family: var(--font-main);
  transition: border-color var(--trans-base), background var(--trans-base), box-shadow var(--trans-base);
  min-block-size: 44px;
}

.FormField-input::placeholder { color: rgba(232,237,245,0.4); }

.FormField-input:focus {
  outline: none;
  border-color: rgba(232,93,38,0.6);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 3px rgba(232,93,38,0.15);
}

.FormField-select option {
  background: var(--clr-bg-dark);
  color: var(--clr-text-white);
}

.FormField-textarea {
  resize: vertical;
  min-block-size: 120px;
}

.FormField--checkbox {
  margin-block-start: var(--space-4);
}

.FormField-checkLabel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.875rem;
  color: rgba(232,237,245,0.75);
  cursor: pointer;
  line-height: 1.6;
}

.FormField-checkLabel input[type="checkbox"] {
  inline-size: 18px;
  block-size: 18px;
  flex-shrink: 0;
  margin-block-start: 2px;
  accent-color: var(--clr-accent);
  cursor: pointer;
}

.FormField-checkLabel a {
  color: var(--clr-accent-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.FormField-checkLabel a:hover { color: #fff; }

.FormActions {
  display: flex;
  gap: var(--space-4);
  justify-content: flex-end;
  margin-block-start: var(--space-6);
  flex-wrap: wrap;
}

/* intl-tel-input dark theme fix */
.iti__flag-container { z-index: 10; }
.iti__country-list {
  background: var(--clr-bg-dark-mid);
  color: var(--clr-text-white);
  border-color: rgba(255,255,255,0.15);
}
.iti__country:hover { background: rgba(255,255,255,0.08); }
.iti__dial-code { color: rgba(232,237,245,0.6); }

/* ── SITE FOOTER ───────────────────────────────────────────── */
.SiteFooter {
  background: var(--clr-bg-dark);
  border-block-start: 1px solid rgba(255,255,255,0.07);
}

.SiteFooter-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-16);
  padding-block: var(--space-16) var(--space-12);
  align-items: start;
}

.SiteFooter-ctaHeading {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--clr-text-white);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-block-end: var(--space-4);
}

.SiteFooter-ctaText {
  font-size: 1rem;
  color: rgba(232,237,245,0.65);
  line-height: 1.65;
  margin-block-end: var(--space-6);
}

.SiteFooter-newsletter {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-end: var(--space-4);
}

.SiteFooter-newsletterInput {
  flex: 1;
  min-inline-size: 200px;
  padding-block: 0.875rem;
  padding-inline: 1.125rem;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-full);
  color: var(--clr-text-white);
  font-size: 0.9375rem;
  font-family: var(--font-main);
  transition: border-color var(--trans-base), background var(--trans-base);
  min-block-size: 44px;
}

.SiteFooter-newsletterInput::placeholder { color: rgba(232,237,245,0.4); }

.SiteFooter-newsletterInput:focus {
  outline: none;
  border-color: rgba(232,93,38,0.5);
  background: rgba(255,255,255,0.10);
}

.SiteFooter-ctaNote {
  font-size: 0.8125rem;
  color: rgba(232,237,245,0.4);
}

.SiteFooter-ctaNote a {
  color: rgba(232,237,245,0.6);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--trans-base);
}

.SiteFooter-ctaNote a:hover { color: var(--clr-accent-light); }

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

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

.SiteFooter-linkGroup h4 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232,237,245,0.45);
  margin-block-end: var(--space-2);
}

.SiteFooter-linkGroup a {
  font-size: 0.9rem;
  color: rgba(232,237,245,0.65);
  transition: color var(--trans-base), transform var(--trans-spring);
  display: inline-block;
  position: relative;
  padding-block-end: 1px;
}

.SiteFooter-linkGroup a::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 1px;
  background: var(--clr-accent-light);
  transition: inline-size var(--trans-base);
}

.SiteFooter-linkGroup a:hover {
  color: var(--clr-text-white);
  transform: translateX(3px);
}

.SiteFooter-linkGroup a:hover::after { inline-size: 100%; }

.SiteFooter-bottom {
  border-block-start: 1px solid rgba(255,255,255,0.07);
  padding-block: var(--space-5);
}

.SiteFooter-bottom .Container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.SiteFooter-bottom span {
  font-size: 0.8125rem;
  color: rgba(232,237,245,0.35);
}

/* ── BACK TO TOP ───────────────────────────────────────────── */
.BackToTop {
  position: fixed;
  inset-block-end: var(--space-8);
  inset-inline-end: var(--space-8);
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-full);
  background: var(--grad-accent);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-accent);
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  pointer-events: none;
  transition:
    opacity var(--trans-base),
    transform var(--trans-spring),
    box-shadow var(--trans-base);
  z-index: 500;
}

.BackToTop.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.BackToTop:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 12px 32px rgba(232,93,38,0.45);
}

/* ── COOKIE CONSENT ────────────────────────────────────────── */
.CookieConsent {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-start: var(--space-6);
  z-index: 9000;
  inline-size: min(320px, calc(100vw - 3rem));
  background: var(--clr-bg-dark-mid);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(16px);
  transform: translateX(calc(-100% - 2rem));
  opacity: 0;
  transition: transform var(--trans-slow), opacity var(--trans-slow);
}

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

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

.CookieConsent-icon {
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-md);
  background: rgba(232,93,38,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-accent-light);
  font-size: 1rem;
  flex-shrink: 0;
}

.CookieConsent-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--clr-text-white);
}

.CookieConsent-text {
  font-size: 0.8125rem;
  color: rgba(232,237,245,0.65);
  line-height: 1.6;
  margin-block-end: var(--space-5);
}

.CookieConsent-text a {
  color: var(--clr-accent-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.CookieConsent-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.CookieConsent-btn {
  flex: 1;
  min-inline-size: 80px;
  padding-block: 0.625rem;
  padding-inline: 1rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 700;
  font-family: var(--font-main);
  transition: all var(--trans-base);
  min-block-size: 44px;
  cursor: pointer;
  border: none;
}

.CookieConsent-btn--accept {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}

.CookieConsent-btn--accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(232,93,38,0.4);
}

.CookieConsent-btn--settings {
  background: rgba(255,255,255,0.08);
  color: rgba(232,237,245,0.8);
  border: 1px solid rgba(255,255,255,0.15);
}

.CookieConsent-btn--settings:hover {
  background: rgba(255,255,255,0.14);
  color: var(--clr-text-white);
}

/* Cookie Modal */
.CookieModal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(14,30,58,0.85);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--trans-base);
}

.CookieModal.is-open {
  opacity: 1;
  pointer-events: all;
}

.CookieModal-card {
  inline-size: min(560px, 100%);
  background: var(--clr-bg-dark-mid);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-xl);
  max-block-size: 90vh;
  overflow-y: auto;
}

.CookieModal-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--clr-text-white);
  margin-block-end: var(--space-2);
}

.CookieModal-sub {
  font-size: 0.875rem;
  color: rgba(232,237,245,0.6);
  margin-block-end: var(--space-6);
  line-height: 1.6;
}

.CookieModal-category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-block-end: 1px solid rgba(255,255,255,0.08);
}

.CookieModal-category:last-of-type { border-block-end: none; }

.CookieModal-categoryInfo h4 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--clr-text-white);
  margin-block-end: var(--space-2);
}

.CookieModal-categoryInfo p {
  font-size: 0.8125rem;
  color: rgba(232,237,245,0.6);
  line-height: 1.6;
}

.CookieToggle {
  position: relative;
  inline-size: 44px;
  block-size: 24px;
  flex-shrink: 0;
}

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

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

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

.CookieToggle input:checked + .CookieToggle-slider { background: var(--clr-accent); }
.CookieToggle input:checked + .CookieToggle-slider::before { transform: translateX(20px); }
.CookieToggle input:disabled + .CookieToggle-slider { opacity: 0.6; cursor: not-allowed; }

.CookieModal-actions {
  display: flex;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  flex-wrap: wrap;
}

/* ── LEGAL PAGES BASE ──────────────────────────────────────── */
.LegalPage {
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
}

.LegalPage main {
  flex: 1;
  padding-block: var(--space-16);
}

.LegalContent {
  max-inline-size: 780px;
  margin-inline: auto;
}

.LegalContent h1 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--clr-text-dark);
  margin-block-end: var(--space-3);
}

.LegalContent .LegalDate {
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  margin-block-end: var(--space-10);
  display: block;
}

.LegalContent h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-text-dark);
  margin-block-start: var(--space-8);
  margin-block-end: var(--space-4);
}

.LegalContent h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--clr-text-dark);
  margin-block-start: var(--space-5);
  margin-block-end: var(--space-3);
}

.LegalContent p {
  font-size: 0.9375rem;
  color: var(--clr-text-body);
  line-height: 1.75;
  margin-block-end: var(--space-4);
}

.LegalContent ul, .LegalContent ol {
  padding-inline-start: var(--space-6);
  margin-block-end: var(--space-4);
}

.LegalContent ul { list-style: disc; }
.LegalContent ol { list-style: decimal; }

.LegalContent li {
  font-size: 0.9375rem;
  color: var(--clr-text-body);
  line-height: 1.7;
  margin-block-end: var(--space-2);
}

.LegalContent a {
  color: var(--clr-primary-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--trans-base);
}

.LegalContent a:hover { color: var(--clr-accent); }

.LegalContent table {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block-end: var(--space-6);
  font-size: 0.9rem;
}

.LegalContent table th,
.LegalContent table td {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  border: 1px solid var(--clr-border);
  vertical-align: top;
}

.LegalContent table th {
  background: var(--clr-bg);
  font-weight: 700;
  color: var(--clr-text-dark);
}

.LegalContent table td {
  color: var(--clr-text-body);
}

/* ── THANKS PAGE ───────────────────────────────────────────── */
.ThanksPage {
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
}

.ThanksPage-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-16);
}

.ThanksQuote {
  max-inline-size: 640px;
  text-align: center;
  padding: var(--space-12);
  background: var(--clr-bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1.5px solid var(--clr-border);
  position: relative;
  overflow: hidden;
}

.ThanksQuote::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  block-size: 4px;
  background: var(--grad-accent);
}

.ThanksQuote-icon {
  font-size: 2.5rem;
  color: var(--clr-accent);
  margin-block-end: var(--space-6);
  opacity: 0.6;
}

.ThanksQuote-text {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 500;
  color: var(--clr-text-dark);
  line-height: 1.65;
  font-style: italic;
  margin-block-end: var(--space-4);
}

.ThanksQuote-author {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-block-end: var(--space-8);
}

.ThanksQuote-heading {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--clr-text-dark);
  margin-block-end: var(--space-3);
}

.ThanksQuote-sub {
  font-size: 0.9375rem;
  color: var(--clr-text-muted);
  margin-block-end: var(--space-8);
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .MethodSection-inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .MethodVisual {
    max-inline-size: 340px;
  }

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

  .SiteFooter-links {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

  .PageHero {
    padding-block: var(--space-16) var(--space-12);
    min-block-size: auto;
  }

  .PageHero-stats {
    gap: var(--space-5);
  }

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

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

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

  .LocationSection-inner {
    grid-template-columns: 1fr;
  }

  .SiteFooter-inner {
    gap: var(--space-8);
  }

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

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

  .FormStep-line {
    min-inline-size: 30px;
  }

  .MethodVisual {
    display: none;
  }

  .BackToTop {
    inset-block-end: var(--space-5);
    inset-inline-end: var(--space-5);
  }

  .CookieConsent {
    inset-block-end: var(--space-4);
    inset-inline-start: var(--space-4);
    inline-size: calc(100vw - 2rem);
  }
}

@media (max-width: 480px) {
  .Container { padding-inline: var(--space-4); }

  .PageHero-actions {
    flex-direction: column;
  }

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

  .PageHero-stats {
    flex-direction: column;
    gap: var(--space-4);
  }

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

  .SiteFooter-newsletter {
    flex-direction: column;
  }

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

  .FormActions {
    flex-direction: column;
  }

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

  .CookieConsent-actions {
    flex-direction: column;
  }
}

/* ── IMPRESSUM SPECIFIC ────────────────────────────────────── */
.ImpressumTable {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block-end: var(--space-5);
}

.ImpressumTable th,
.ImpressumTable td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--clr-border);
  font-size: 0.9rem;
  vertical-align: top;
}

.ImpressumTable th {
  background: var(--clr-bg);
  font-weight: 600;
  color: var(--clr-text-dark);
  inline-size: 35%;
}

.ImpressumTable td {
  color: var(--clr-text-body);
}

/* ── UTILITY ───────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Smooth padding for space-7 */
:root { --space-7: 1.75rem; }

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}