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

/* ============================================================
   CSS CUSTOM PROPERTIES — Candy Gradient Palette
   Using color-mix() for derived shades
   ============================================================ */
:root {
  --c-pink:    #f472b6;
  --c-purple:  #a855f7;
  --c-teal:    #2dd4bf;
  --c-blue:    #60a5fa;

  --c-pink-light:   color-mix(in oklch, var(--c-pink), white 60%);
  --c-pink-soft:    color-mix(in oklch, var(--c-pink), white 80%);
  --c-purple-light: color-mix(in oklch, var(--c-purple), white 60%);
  --c-purple-soft:  color-mix(in oklch, var(--c-purple), white 82%);
  --c-teal-light:   color-mix(in oklch, var(--c-teal), white 60%);
  --c-teal-soft:    color-mix(in oklch, var(--c-teal), white 82%);
  --c-blue-light:   color-mix(in oklch, var(--c-blue), white 60%);
  --c-blue-soft:    color-mix(in oklch, var(--c-blue), white 82%);

  --c-pink-dark:    color-mix(in oklch, var(--c-pink), black 25%);
  --c-purple-dark:  color-mix(in oklch, var(--c-purple), black 20%);

  --bg-page:   #faf8ff;
  --bg-card:   #ffffff;
  --bg-subtle: color-mix(in oklch, var(--c-purple), white 94%);

  --text-primary:   #1e1030;
  --text-secondary: #4a3f6b;
  --text-muted:     #7c6fa0;
  --text-light:     #b8aed4;

  --grad-main:   linear-gradient(135deg, var(--c-pink) 0%, var(--c-purple) 45%, var(--c-blue) 100%);
  --grad-soft:   linear-gradient(135deg, var(--c-pink-soft) 0%, var(--c-purple-soft) 50%, var(--c-teal-soft) 100%);
  --grad-hero:   linear-gradient(135deg, #fce7f3 0%, #ede9fe 40%, #dbeafe 100%);
  --grad-cta:    linear-gradient(135deg, var(--c-pink) 0%, var(--c-purple) 100%);
  --grad-text:   linear-gradient(90deg, var(--c-pink) 0%, var(--c-purple) 50%, var(--c-blue) 100%);

  --radius-sm:  6px;
  --radius-md:  14px;
  --radius-lg:  24px;
  --radius-xl:  40px;
  --radius-full: 9999px;

  --shadow-sm:  0 1px 3px color-mix(in oklch, var(--c-purple), transparent 88%), 0 1px 2px color-mix(in oklch, var(--c-purple), transparent 94%);
  --shadow-md:  0 4px 16px color-mix(in oklch, var(--c-purple), transparent 82%), 0 2px 6px color-mix(in oklch, var(--c-pink), transparent 90%);
  --shadow-lg:  0 10px 40px color-mix(in oklch, var(--c-purple), transparent 78%), 0 4px 12px color-mix(in oklch, var(--c-pink), transparent 86%);
  --shadow-glow: 0 0 30px color-mix(in oklch, var(--c-purple), transparent 70%);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --header-h: 72px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-page);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition), opacity var(--transition); }
ul, ol { list-style: none; }
address { font-style: normal; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
h4 { font-size: 1.1rem; }

p { color: var(--text-secondary); margin-bottom: 0; }
p + p { margin-top: 1rem; }

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

/* ============================================================
   GLOBAL HEADER
   ============================================================ */
.global-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s, box-shadow 0.3s;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px color-mix(in oklch, var(--c-purple), transparent 88%);
  border-bottom: 1px solid color-mix(in oklch, var(--c-purple), transparent 92%);
}

.global-header.is-visible {
  transform: translateY(0);
}

.global-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.global-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.global-header__logo:hover { opacity: 0.85; }

.global-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}

.global-header__nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-full);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.global-header__nav-link:hover,
.global-header__nav-link.active {
  color: var(--c-purple);
  background: var(--c-purple-soft);
}

.global-header__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.global-header__burger:hover { background: var(--c-purple-soft); }
.global-header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.global-header__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.global-header__burger.is-open span:nth-child(2) { opacity: 0; }
.global-header__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.global-header__mobile-menu {
  display: none;
  flex-direction: column;
  border-top: 1px solid color-mix(in oklch, var(--c-purple), transparent 90%);
  background: rgba(255,255,255,0.99);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s;
}
.global-header__mobile-menu.is-open {
  max-height: 400px;
  padding: var(--space-sm) 0;
}
.global-header__mobile-link {
  display: block;
  padding: 0.75rem var(--space-md);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition), background var(--transition);
}
.global-header__mobile-link:hover,
.global-header__mobile-link.active {
  color: var(--c-purple);
  background: var(--c-purple-soft);
}

/* ============================================================
   GLOBAL CTA BUTTONS
   ============================================================ */
.global-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 600;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}
.global-cta:hover { transform: translateY(-2px); }

.global-cta--primary {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in oklch, var(--c-purple), transparent 60%);
}
.global-cta--primary:hover {
  box-shadow: 0 8px 28px color-mix(in oklch, var(--c-purple), transparent 50%);
  opacity: 0.92;
}

.global-cta--ghost {
  background: transparent;
  color: var(--c-purple);
  border: 2px solid var(--c-purple);
}
.global-cta--ghost:hover {
  background: var(--c-purple-soft);
}

.global-cta--ghost-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
}
.global-cta--ghost-white:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}

.global-cta--outline {
  background: transparent;
  color: var(--c-purple);
  border: 2px solid color-mix(in oklch, var(--c-purple), transparent 60%);
}
.global-cta--outline:hover {
  border-color: var(--c-purple);
  background: var(--c-purple-soft);
}

.global-cta--white {
  background: #fff;
  color: var(--c-purple);
  box-shadow: var(--shadow-md);
}
.global-cta--white:hover {
  box-shadow: var(--shadow-lg);
  background: var(--c-purple-soft);
}

/* ============================================================
   GLOBAL FOOTER
   ============================================================ */
.global-footer {
  background: var(--text-primary);
  color: rgba(255,255,255,0.75);
  margin-top: auto;
}

.global-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-xl);
}

.global-footer__brand img { margin-bottom: var(--space-sm); filter: brightness(0) invert(1); opacity: 0.9; }
.global-footer__brand p { font-size: 0.9rem; color: rgba(255,255,255,0.6); margin-bottom: var(--space-sm); }
.global-footer__brand address { font-size: 0.85rem; color: rgba(255,255,255,0.55); line-height: 1.8; }
.global-footer__brand address a { color: rgba(255,255,255,0.7); }
.global-footer__brand address a:hover { color: var(--c-pink-light); }

.global-footer__nav h4,
.global-footer__legal h4 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-sm);
}
.global-footer__nav a,
.global-footer__legal a {
  display: block;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  padding: 0.25rem 0;
  transition: color var(--transition);
}
.global-footer__nav a:hover,
.global-footer__legal a:hover { color: var(--c-pink-light); }

.global-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  padding: var(--space-md);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
}

/* ============================================================
   HOME HERO
   ============================================================ */
.home-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
}

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

.home-hero__bg::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse, color-mix(in oklch, var(--c-pink), transparent 70%) 0%, transparent 70%);
  pointer-events: none;
}
.home-hero__bg::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: 50%;
  height: 60%;
  background: radial-gradient(ellipse, color-mix(in oklch, var(--c-teal), transparent 75%) 0%, transparent 70%);
  pointer-events: none;
}

.home-hero__content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  width: 100%;
}

.home-hero__content > * { grid-column: 1; }
.home-hero__visual { grid-column: 2; grid-row: 1 / 5; }

.home-hero__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-purple);
  background: color-mix(in oklch, var(--c-purple), white 88%);
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

.home-hero__title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.15;
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.home-hero__title-grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.home-hero__sub {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: var(--text-secondary);
  max-width: 520px;
  margin-bottom: var(--space-lg);
  line-height: 1.7;
}

.home-hero__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.home-hero__visual {
  position: relative;
  z-index: 2;
}

.home-hero__img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 6px rgba(255,255,255,0.6);
}

.home-hero__badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  background: #fff;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.home-hero__badge--1 {
  top: 10%;
  left: -5%;
  color: var(--c-purple);
}
.home-hero__badge--1 i { color: var(--c-purple); }
.home-hero__badge--2 {
  bottom: 12%;
  right: -4%;
  color: var(--c-pink-dark);
}
.home-hero__badge--2 i { color: var(--c-pink); }

.home-hero__sentinel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ============================================================
   HOME PROBLEM STRIP
   ============================================================ */
.home-problem {
  background: var(--bg-card);
  padding: var(--space-xl) var(--space-md);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  padding-bottom: calc(var(--space-xl) + 4rem);
}

.home-problem__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.home-problem__lead {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

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

.home-problem__card {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border-left: 3px solid var(--c-pink);
  transition: transform var(--transition), box-shadow var(--transition);
}
.home-problem__card:nth-child(2) { border-left-color: var(--c-purple); }
.home-problem__card:nth-child(3) { border-left-color: var(--c-blue); }
.home-problem__card:nth-child(4) { border-left-color: var(--c-teal); }
.home-problem__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.home-problem__card i {
  font-size: 1.4rem;
  margin-bottom: var(--space-xs);
  display: block;
  color: var(--c-pink);
}
.home-problem__card:nth-child(2) i { color: var(--c-purple); }
.home-problem__card:nth-child(3) i { color: var(--c-blue); }
.home-problem__card:nth-child(4) i { color: var(--c-teal); }

.home-problem__card p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ============================================================
   HOME ABOUT
   ============================================================ */
.home-about {
  padding: var(--space-2xl) var(--space-md);
  background: var(--bg-page);
  margin-top: -2rem;
}

.home-about__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.home-about__label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-teal);
  background: var(--c-teal-soft);
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

.home-about__title {
  margin-bottom: var(--space-md);
}

.home-about__text p {
  margin-bottom: var(--space-sm);
}

.home-about__text .global-cta { margin-top: var(--space-md); }

.home-about__img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   HOME FEATURES — CSS Counter
   ============================================================ */
.home-features {
  background: var(--bg-subtle);
  padding: var(--space-2xl) var(--space-md);
  clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
  padding-top: calc(var(--space-2xl) + 3rem);
  padding-bottom: calc(var(--space-2xl) + 3rem);
}

.home-features__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.home-features__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.home-features__title {
  margin-bottom: var(--space-xs);
}

.home-features__sub {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 500px;
  margin: 0 auto;
}

.home-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  counter-reset: features-counter;
}

.home-features__item {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  counter-increment: features-counter;
}
.home-features__item::before {
  content: counter(features-counter, decimal-leading-zero);
  position: absolute;
  top: var(--space-sm);
  right: var(--space-md);
  font-size: 2.5rem;
  font-weight: 800;
  color: color-mix(in oklch, var(--c-purple), transparent 88%);
  line-height: 1;
}
.home-features__item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.home-features__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--grad-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}
.home-features__icon i {
  font-size: 1.2rem;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.home-features__item h3 {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.home-features__item p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================================
   HOME COURSES
   ============================================================ */
.home-courses {
  padding: var(--space-2xl) var(--space-md);
  background: var(--bg-page);
  margin-top: -2rem;
}

.home-courses__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.home-courses__header {
  margin-bottom: var(--space-xl);
}

.home-courses__header h2 { margin-bottom: 0.5rem; }
.home-courses__header p { color: var(--text-muted); }

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

.home-courses__card {
  display: flex;
  gap: var(--space-md);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid color-mix(in oklch, var(--c-purple), transparent 90%);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.home-courses__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in oklch, var(--c-purple), transparent 70%);
}

.home-courses__card-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--grad-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-courses__card-icon i {
  font-size: 1.3rem;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.home-courses__card-body h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.home-courses__card-body p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }

.home-courses__cta { text-align: center; }

/* ============================================================
   HOME AUDIENCE
   ============================================================ */
.home-audience {
  background: linear-gradient(135deg, #fdf4ff 0%, #f0f4ff 100%);
  padding: var(--space-2xl) var(--space-md);
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
  padding-top: calc(var(--space-2xl) + 3rem);
  padding-bottom: calc(var(--space-2xl) + 3rem);
}

.home-audience__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.home-audience__img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.home-audience__label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-pink-dark);
  background: var(--c-pink-soft);
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

.home-audience__title { margin-bottom: var(--space-md); }

.home-audience__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: var(--space-md);
}
.home-audience__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.home-audience__list li i {
  color: var(--c-teal);
  margin-top: 3px;
  flex-shrink: 0;
}

.home-audience__note {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
  border-left: 3px solid var(--c-pink);
  padding-left: var(--space-sm);
}

/* ============================================================
   HOME PROCESS
   ============================================================ */
.home-process {
  padding: var(--space-2xl) var(--space-md);
  background: var(--bg-page);
}

.home-process__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.home-process__title {
  text-align: center;
  margin-bottom: var(--space-xl);
}

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

.home-process__steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--grad-main);
  opacity: 0.3;
  z-index: 0;
}

.home-process__step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.home-process__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--grad-cta);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 auto var(--space-sm);
  box-shadow: 0 4px 16px color-mix(in oklch, var(--c-purple), transparent 60%);
}

.home-process__step h3 {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.home-process__step p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ============================================================
   HOME PARTNER TEASER
   ============================================================ */
.home-partner-teaser {
  background: var(--bg-card);
  padding: var(--space-2xl) var(--space-md);
  border-top: 1px solid color-mix(in oklch, var(--c-purple), transparent 92%);
  border-bottom: 1px solid color-mix(in oklch, var(--c-purple), transparent 92%);
}

.home-partner-teaser__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.home-partner-teaser__label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-blue);
  background: var(--c-blue-soft);
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

.home-partner-teaser__title { margin-bottom: var(--space-md); }
.home-partner-teaser__text p { margin-bottom: var(--space-md); }

.home-partner-teaser__img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   HOME FAQ
   ============================================================ */
.home-faq {
  padding: var(--space-2xl) var(--space-md);
  background: var(--bg-page);
}

.home-faq__inner {
  max-width: 800px;
  margin: 0 auto;
}

.home-faq__title {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.home-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-faq__item {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklch, var(--c-purple), transparent 90%);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.home-faq__item:hover { box-shadow: var(--shadow-sm); }
.home-faq__item[open] {
  border-color: color-mix(in oklch, var(--c-purple), transparent 70%);
  box-shadow: var(--shadow-sm);
}

.home-faq__q {
  padding: var(--space-md);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  transition: color var(--transition);
}
.home-faq__q:hover { color: var(--c-purple); }
.home-faq__q::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.home-faq__item[open] .home-faq__q::after {
  transform: rotate(180deg);
}

.home-faq__a {
  padding: 0 var(--space-md) var(--space-md);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
}
.home-faq__a a {
  color: var(--c-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   HOME CTA FINAL
   ============================================================ */
.home-cta-final {
  background: var(--grad-cta);
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--space-2xl) + 4rem);
}

.home-cta-final__inner {
  max-width: 600px;
  margin: 0 auto;
}

.home-cta-final__title {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: var(--space-sm);
}

.home-cta-final__sub {
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-lg);
  font-size: 1rem;
}

.home-cta-final__btns {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   INNER PAGE HEROES
   ============================================================ */
.about-hero,
.services-hero,
.partner-hero,
.contact-hero {
  padding: calc(var(--header-h) + var(--space-2xl)) var(--space-md) var(--space-2xl);
  background: var(--grad-hero);
  position: relative;
  overflow: hidden;
}

.about-hero::after,
.services-hero::after,
.partner-hero::after,
.contact-hero::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 50%;
  height: 100%;
  background: radial-gradient(ellipse, color-mix(in oklch, var(--c-pink), transparent 75%) 0%, transparent 70%);
  pointer-events: none;
}

.about-hero__inner,
.services-hero__inner,
.partner-hero__inner,
.contact-hero__inner {
  max-width: 800px;
  position: relative;
  z-index: 1;
}

.about-hero__eyebrow,
.services-hero__eyebrow,
.partner-hero__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-purple);
  background: color-mix(in oklch, var(--c-purple), white 88%);
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

.about-hero__title,
.services-hero__title,
.partner-hero__title,
.contact-hero__title {
  margin-bottom: var(--space-md);
}

.about-hero__sub,
.services-hero__sub,
.partner-hero__sub,
.contact-hero__sub {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.7;
}

/* ============================================================
   ABOUT STORY
   ============================================================ */
.about-story {
  padding: var(--space-2xl) var(--space-md);
  background: var(--bg-page);
}

.about-story__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.about-story__text h2 { margin-bottom: var(--space-md); }
.about-story__text p { color: var(--text-secondary); }

.about-story__img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   ABOUT APPROACH
   ============================================================ */
.about-approach {
  background: var(--bg-subtle);
  padding: var(--space-2xl) var(--space-md);
}

.about-approach__inner {
  max-width: 1200px;
  margin: 0 auto;
}

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

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

.about-approach__card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}
.about-approach__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.about-approach__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--grad-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}
.about-approach__icon i {
  font-size: 1.2rem;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-approach__card h3 { margin-bottom: 0.5rem; }
.about-approach__card p { font-size: 0.9rem; color: var(--text-muted); }

/* ============================================================
   ABOUT VALUES
   ============================================================ */
.about-values {
  padding: var(--space-2xl) var(--space-md);
  background: var(--bg-page);
}

.about-values__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.about-values__img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.about-values__text h2 { margin-bottom: var(--space-md); }
.about-values__text p { color: var(--text-secondary); }

/* ============================================================
   ABOUT TOPICS
   ============================================================ */
.about-topics {
  background: var(--bg-subtle);
  padding: var(--space-2xl) var(--space-md);
}

.about-topics__inner {
  max-width: 900px;
  margin: 0 auto;
}

.about-topics__title { margin-bottom: var(--space-xl); }

.about-topics__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about-topics__item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}
.about-topics__item:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-sm);
}

.about-topics__num {
  font-size: 1.8rem;
  font-weight: 800;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  flex-shrink: 0;
  width: 3rem;
}

.about-topics__item h3 { margin-bottom: 0.35rem; font-size: 1rem; }
.about-topics__item p { font-size: 0.875rem; color: var(--text-muted); }

/* ============================================================
   ABOUT CTA
   ============================================================ */
.about-cta {
  background: var(--grad-cta);
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
}

.about-cta__inner { max-width: 600px; margin: 0 auto; }
.about-cta__inner h2 { color: #fff; margin-bottom: var(--space-sm); }
.about-cta__inner p { color: rgba(255,255,255,0.8); margin-bottom: var(--space-lg); }

/* ============================================================
   SERVICES GRID
   ============================================================ */
.services-grid {
  padding: var(--space-2xl) var(--space-md);
  background: var(--bg-page);
}

.services-grid__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  counter-reset: services-counter;
}

.services-grid__card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid color-mix(in oklch, var(--c-purple), transparent 90%);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  counter-increment: services-counter;
  position: relative;
  overflow: hidden;
}
.services-grid__card::before {
  content: counter(services-counter, decimal-leading-zero);
  position: absolute;
  top: var(--space-sm);
  right: var(--space-md);
  font-size: 3rem;
  font-weight: 800;
  color: color-mix(in oklch, var(--c-purple), transparent 90%);
  line-height: 1;
  pointer-events: none;
}
.services-grid__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in oklch, var(--c-purple), transparent 65%);
}

.services-grid__card-top {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.services-grid__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--grad-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}
.services-grid__icon i {
  font-size: 1.3rem;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.services-grid__card h2 { font-size: 1.15rem; }

.services-grid__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-purple);
  background: var(--c-purple-soft);
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full);
}

.services-grid__card-body { flex: 1; }
.services-grid__card-body p { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: var(--space-sm); }

.services-grid__topics {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--space-sm);
}
.services-grid__topics li {
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding-left: 1.2rem;
  position: relative;
}
.services-grid__topics li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--c-pink);
  font-size: 0.8rem;
}

.services-grid__note {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  border-top: 1px solid color-mix(in oklch, var(--c-purple), transparent 92%);
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
}

.services-grid__card .global-cta { align-self: flex-start; }

/* ============================================================
   SERVICES PROCESS
   ============================================================ */
.services-process {
  background: var(--bg-subtle);
  padding: var(--space-2xl) var(--space-md);
}

.services-process__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.services-process__title { margin-bottom: 0.5rem; }
.services-process__sub { color: var(--text-muted); margin-bottom: var(--space-xl); }

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

.services-process__step {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.services-process__step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.services-process__step-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--grad-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
}
.services-process__step-icon i { font-size: 1.2rem; color: #fff; }

.services-process__step h3 { margin-bottom: 0.5rem; font-size: 1rem; }
.services-process__step p { font-size: 0.875rem; color: var(--text-muted); }

/* ============================================================
   SERVICES VISUAL BLOCK
   ============================================================ */
.services-visual-block {
  padding: var(--space-2xl) var(--space-md);
  background: var(--bg-page);
}

.services-visual-block__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.services-visual-block__img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.services-visual-block__text h2 { margin-bottom: var(--space-md); }
.services-visual-block__text p { color: var(--text-secondary); }
.services-visual-block__text .global-cta { margin-top: var(--space-md); }

/* ============================================================
   PARTNER PAGE
   ============================================================ */
.partner-who {
  padding: var(--space-2xl) var(--space-md);
  background: var(--bg-page);
}

.partner-who__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.partner-who__title { margin-bottom: var(--space-xl); }

.partner-who__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.partner-who__card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid color-mix(in oklch, var(--c-blue), transparent 88%);
  transition: transform var(--transition), box-shadow var(--transition);
}
.partner-who__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.partner-who__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--c-blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}
.partner-who__icon i { font-size: 1.2rem; color: var(--c-blue); }

.partner-who__card h3 { margin-bottom: 0.4rem; }
.partner-who__card p { font-size: 0.875rem; color: var(--text-muted); }

/* ============================================================
   PARTNER BENEFITS
   ============================================================ */
.partner-benefits {
  background: var(--bg-subtle);
  padding: var(--space-2xl) var(--space-md);
}

.partner-benefits__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.partner-benefits__img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.partner-benefits__text h2 { margin-bottom: var(--space-md); }
.partner-benefits__text p { color: var(--text-secondary); margin-bottom: var(--space-md); }

.partner-benefits__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: var(--space-md);
}
.partner-benefits__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.partner-benefits__list li i { color: var(--c-teal); margin-top: 2px; flex-shrink: 0; }

/* ============================================================
   PARTNER HOW
   ============================================================ */
.partner-how {
  padding: var(--space-2xl) var(--space-md);
  background: var(--bg-page);
}

.partner-how__inner {
  max-width: 900px;
  margin: 0 auto;
}

.partner-how__title { margin-bottom: var(--space-xl); }

.partner-how__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.partner-how__step {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}
.partner-how__step:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-sm);
}

.partner-how__step-num {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--grad-cta);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.partner-how__step h3 { margin-bottom: 0.3rem; font-size: 1rem; }
.partner-how__step p { font-size: 0.875rem; color: var(--text-muted); }

.partner-how__cta { text-align: center; }

/* ============================================================
   PARTNER FAQ
   ============================================================ */
.partner-faq {
  background: var(--bg-subtle);
  padding: var(--space-2xl) var(--space-md);
}

.partner-faq__inner {
  max-width: 800px;
  margin: 0 auto;
}

.partner-faq__title { margin-bottom: var(--space-xl); }
.partner-faq__list { display: flex; flex-direction: column; gap: var(--space-xs); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-form-section {
  padding: var(--space-2xl) var(--space-md);
  background: var(--bg-page);
}

.contact-form-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.contact-form-section__form-title { margin-bottom: 0.5rem; }
.contact-form-section__form-note { color: var(--text-muted); font-size: 0.9rem; margin-bottom: var(--space-lg); }

.contact-form-section__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--space-md);
}

.contact-form-section__field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.contact-form-section__field input,
.contact-form-section__field textarea {
  padding: 0.8rem 1rem;
  border: 1.5px solid color-mix(in oklch, var(--c-purple), transparent 80%);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-card);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  resize: vertical;
}
.contact-form-section__field input:focus,
.contact-form-section__field textarea:focus {
  border-color: var(--c-purple);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-purple), transparent 85%);
}

.contact-form-section__privacy {
  margin-bottom: var(--space-md);
}

.contact-form-section__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1.5;
}
.contact-form-section__checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--c-purple);
  cursor: pointer;
}
.contact-form-section__checkbox-label a {
  color: var(--c-purple);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-form-section__submit {
  width: 100%;
  justify-content: center;
}

.contact-form-section__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-form-section__info-block {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border: 1px solid color-mix(in oklch, var(--c-purple), transparent 90%);
  transition: box-shadow var(--transition);
}
.contact-form-section__info-block:hover { box-shadow: var(--shadow-sm); }

.contact-form-section__info-block h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-purple);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-form-section__info-block p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.contact-form-section__info-block a {
  color: var(--c-purple);
  transition: color var(--transition);
}
.contact-form-section__info-block a:hover { color: var(--c-pink); }

/* ============================================================
   CONTACT MAP
   ============================================================ */
.contact-map-section {
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
  background: var(--bg-page);
}

.contact-map-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.contact-map-section__title { margin-bottom: var(--space-lg); }

.contact-map-section__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* ============================================================
   THANKS PAGE
   ============================================================ */
.thanks-page { display: flex; flex-direction: column; min-height: 100vh; }
.thanks-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-md);
  background: var(--grad-hero);
}

.thanks-content {
  text-align: center;
  max-width: 500px;
}

.thanks-icon {
  font-size: 4rem;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-md);
}

.thanks-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--space-sm);
}

.thanks-sub {
  color: var(--text-muted);
  margin-bottom: var(--space-xl);
  font-size: 1rem;
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-page { display: flex; flex-direction: column; min-height: 100vh; }

.legal-main {
  flex: 1;
  padding-top: var(--header-h);
}

.legal-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.legal-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--space-md));
}

.legal-sidebar__mobile-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border: 1px solid color-mix(in oklch, var(--c-purple), transparent 85%);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transition);
}
.legal-sidebar__mobile-toggle:hover { background: var(--c-purple-soft); }
.legal-sidebar__mobile-toggle i { transition: transform var(--transition); }
.legal-sidebar__mobile-toggle.is-open i { transform: rotate(180deg); }

.legal-sidebar__toc {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklch, var(--c-purple), transparent 88%);
  padding: var(--space-sm) 0;
  overflow: hidden;
}

.legal-sidebar__link {
  display: block;
  padding: 0.5rem var(--space-md);
  font-size: 0.82rem;
  color: var(--text-muted);
  transition: color var(--transition), background var(--transition), border-left-color var(--transition);
  border-left: 3px solid transparent;
  line-height: 1.4;
}
.legal-sidebar__link:hover {
  color: var(--c-purple);
  background: var(--c-purple-soft);
  border-left-color: var(--c-purple);
}
.legal-sidebar__link.is-active {
  color: var(--c-purple);
  background: var(--c-purple-soft);
  border-left-color: var(--c-purple);
  font-weight: 600;
}

.legal-content__header {
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid color-mix(in oklch, var(--c-purple), transparent 88%);
  margin-bottom: var(--space-xl);
}

.legal-content__header h1 { margin-bottom: 0.5rem; }

.legal-content__date {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.legal-content section {
  margin-bottom: var(--space-xl);
  scroll-margin-top: calc(var(--header-h) + var(--space-md));
}

.legal-content h2 {
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in oklch, var(--c-purple), transparent 92%);
}

.legal-content h3 {
  font-size: 1rem;
  margin-top: var(--space-md);
  margin-bottom: 0.5rem;
  color: var(--c-purple-dark);
}

.legal-content p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-sm);
}

.legal-content ul, .legal-content ol {
  padding-left: var(--space-md);
  margin-bottom: var(--space-sm);
}
.legal-content ul li, .legal-content ol li {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 0.35rem;
  list-style: disc;
}
.legal-content ol li { list-style: decimal; }

.legal-content a {
  color: var(--c-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-content a:hover { color: var(--c-pink); }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
}
.legal-table th {
  background: var(--c-purple-soft);
  color: var(--c-purple-dark);
  font-weight: 600;
  padding: 0.6rem 0.8rem;
  text-align: left;
  border-bottom: 2px solid color-mix(in oklch, var(--c-purple), transparent 80%);
}
.legal-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid color-mix(in oklch, var(--c-purple), transparent 92%);
  color: var(--text-secondary);
  vertical-align: top;
}
.legal-table tr:hover td { background: color-mix(in oklch, var(--c-purple), transparent 97%); }

/* ============================================================
   ANIMATION UTILITIES
   ============================================================ */
.anim-fade-up {
  opacity: 0;
  transform: translateY(30px);
}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width: 1024px) {
  .home-hero__content {
    grid-template-columns: 1fr;
  }
  .home-hero__content > * { grid-column: 1; }
  .home-hero__visual {
    grid-column: 1;
    grid-row: auto;
  }
  .home-hero__img { height: 360px; }

  .home-problem__cards { grid-template-columns: repeat(2, 1fr); }
  .home-features__grid { grid-template-columns: repeat(2, 1fr); }
  .home-process__steps { grid-template-columns: repeat(2, 1fr); }
  .home-process__steps::before { display: none; }

  .about-story__inner,
  .about-values__inner,
  .home-about__inner,
  .home-audience__inner,
  .home-partner-teaser__inner,
  .services-visual-block__inner,
  .partner-benefits__inner { grid-template-columns: 1fr; }

  .services-grid__inner { grid-template-columns: 1fr; }
  .services-process__steps { grid-template-columns: 1fr; }
  .about-approach__grid { grid-template-columns: 1fr; }
  .partner-who__grid { grid-template-columns: 1fr; }

  .home-courses__list { grid-template-columns: 1fr; }

  .contact-form-section__inner { grid-template-columns: 1fr; }

  .legal-layout { grid-template-columns: 1fr; }
  .legal-sidebar { position: static; }
  .legal-sidebar__mobile-toggle { display: flex; }
  .legal-sidebar__toc {
    display: none;
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
  .legal-sidebar__toc.is-open { display: block; }

  .global-footer__inner { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --space-2xl: 4rem;
    --space-xl: 2.5rem;
  }

  .global-header__nav { display: none; }
  .global-header__burger { display: flex; }
  .global-header__mobile-menu { display: flex; }

  .home-hero {
    padding: calc(var(--header-h) + var(--space-xl)) var(--space-md) var(--space-xl);
    min-height: auto;
  }

  .home-hero__badge { display: none; }

  .home-problem__cards { grid-template-columns: 1fr; }
  .home-features__grid { grid-template-columns: 1fr; }
  .home-process__steps { grid-template-columns: 1fr; }
  .home-courses__list { grid-template-columns: 1fr; }

  .home-problem { clip-path: none; padding-bottom: var(--space-xl); }
  .home-features { clip-path: none; padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
  .home-audience { clip-path: none; padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
  .home-cta-final { clip-path: none; padding-top: var(--space-2xl); }

  .home-about__img,
  .about-story__img,
  .about-values__img,
  .home-audience__img,
  .home-partner-teaser__img,
  .services-visual-block__img,
  .partner-benefits__img { height: 260px; }

  .home-hero__img { height: 280px; }

  .home-hero__actions { flex-direction: column; }
  .home-hero__actions .global-cta { width: 100%; justify-content: center; }

  .home-cta-final__btns { flex-direction: column; align-items: center; }

  .global-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-xl) var(--space-md);
  }

  .about-approach__grid { grid-template-columns: 1fr; }
  .partner-who__grid { grid-template-columns: 1fr; }

  .home-courses__card { flex-direction: column; }

  .about-hero,
  .services-hero,
  .partner-hero,
  .contact-hero {
    padding: calc(var(--header-h) + var(--space-xl)) var(--space-md) var(--space-xl);
  }

  .legal-layout { padding: var(--space-lg) var(--space-md); }
}

@media (max-width: 480px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }

  .global-cta { padding: 0.7rem 1.4rem; font-size: 0.9rem; }

  .home-features__item::before { font-size: 1.8rem; }
  .services-grid__card::before { font-size: 2rem; }

  .about-topics__item { flex-direction: column; gap: var(--space-xs); }
  .about-topics__num { width: auto; }
}