/* ============================================================
   NIPAPU COLURI — MAIN STYLESHEET
   Maximalist Color Design System
   ============================================================ */


:root {
  
  --color-ink:         #1a1420;
  --color-ink-soft:    #2e2438;
  --color-paper:       #faf8f4;
  --color-paper-warm:  #f5f1ea;

  
  --color-yellow:      #f5c842;
  --color-yellow-dark: #d4a900;
  --color-coral:       #e84855;
  --color-coral-dark:  #c03040;
  --color-green:       #2d9e6b;
  --color-green-dark:  #1e7a52;
  --color-purple:      #6b4fbb;
  --color-purple-dark: #523a99;
  --color-navy:        #1a1e3c;

  
  --color-on-yellow:   #1a1420;
  --color-on-coral:    #faf8f4;
  --color-on-green:    #faf8f4;
  --color-on-purple:   #faf8f4;
  --color-on-navy:     #faf8f4;

  
  --shadow-xs:   0 1px 3px rgba(26, 20, 32, 0.08), 0 1px 2px rgba(26, 20, 32, 0.04);
  --shadow-sm:   0 4px 8px rgba(26, 20, 32, 0.10), 0 2px 4px rgba(26, 20, 32, 0.06);
  --shadow-md:   0 8px 24px rgba(26, 20, 32, 0.12), 0 4px 8px rgba(26, 20, 32, 0.06);
  --shadow-lg:   0 16px 40px rgba(26, 20, 32, 0.14), 0 6px 12px rgba(26, 20, 32, 0.08);
  --shadow-xl:   0 24px 64px rgba(26, 20, 32, 0.18), 0 8px 24px rgba(26, 20, 32, 0.10);
  --shadow-nav:  0 2px 8px rgba(26, 20, 32, 0.12);
  --shadow-nav-scroll: 0 4px 20px rgba(26, 20, 32, 0.20);

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

  
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  
  --font-body:  'Sora', sans-serif;
  --font-head:  'Sora', sans-serif;

  
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  
  --nav-height: 72px;

  
  --pace-progress-color: var(--color-coral);
}


.pace .pace-progress { background: var(--color-coral); }
.pace .pace-activity { border-top-color: var(--color-coral); border-left-color: var(--color-coral); }


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

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background-color: var(--color-paper);
  color: var(--color-ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: opacity var(--transition-base); }
ul { list-style: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--font-body); }


h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 700; }
h4 { font-size: 1.1rem; font-weight: 700; }
h5 { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; }

p { font-size: 1.05rem; line-height: 1.7; color: var(--color-ink); }
p + p { margin-top: var(--space-4); }


.SectionLabel {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-coral);
  margin-bottom: var(--space-4);
}
.SectionLabel--light { color: rgba(255,255,255,0.75); }

.SectionHeading { color: var(--color-ink); }
.SectionHeading--light { color: var(--color-paper); }


.Btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform var(--transition-spring), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base);
  min-height: 48px;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.Btn:hover { transform: translateY(-2px); }
.Btn:active { transform: translateY(0); }

.Btn--primary {
  background: var(--color-coral);
  color: #fff;
  border-color: var(--color-coral);
  box-shadow: var(--shadow-sm), 0 4px 12px rgba(232, 72, 85, 0.3);
}
.Btn--primary:hover {
  background: var(--color-coral-dark);
  border-color: var(--color-coral-dark);
  box-shadow: var(--shadow-md), 0 6px 20px rgba(232, 72, 85, 0.4);
}

.Btn--dark {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}
.Btn--dark:hover {
  background: var(--color-ink-soft);
  box-shadow: var(--shadow-md);
}

.Btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.Btn--ghost:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

.Btn--ghost-light {
  background: transparent;
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.5);
}
.Btn--ghost-light:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.9);
  color: #fff;
}

.Btn--accent {
  background: var(--color-yellow);
  color: var(--color-on-yellow);
  border-color: var(--color-yellow);
  box-shadow: var(--shadow-sm), 0 4px 12px rgba(245, 200, 66, 0.4);
}
.Btn--accent:hover {
  background: var(--color-yellow-dark);
  border-color: var(--color-yellow-dark);
  box-shadow: var(--shadow-md), 0 6px 20px rgba(245, 200, 66, 0.5);
}

.Btn--light {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
  box-shadow: var(--shadow-sm);
}
.Btn--light:hover {
  background: #fff;
  box-shadow: var(--shadow-md);
}

.Btn--sm { padding: 0.6rem 1.2rem; font-size: 0.85rem; min-height: 40px; }


.SiteHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: var(--color-ink);
  height: var(--nav-height);
  box-shadow: var(--shadow-nav);
  transition: box-shadow var(--transition-base);
}
.SiteHeader.is-scrolled { box-shadow: var(--shadow-nav-scroll); }

.SiteHeader-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-8);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.SiteHeader-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}
.SiteHeader-logoImg { width: 36px; height: 36px; }
.SiteHeader-logoText {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-paper);
  letter-spacing: -0.01em;
}

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

.SiteHeader-navLink {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(250,248,244,0.75);
  border-radius: var(--radius-sm);
  transition: color var(--transition-base), background var(--transition-base);
  min-height: 44px;
}
.SiteHeader-navLink:hover,
.SiteHeader-navLink.is-active {
  color: var(--color-paper);
  background: rgba(255,255,255,0.08);
}

.SiteHeader-navLink--cta {
  background: var(--color-coral);
  color: #fff !important;
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-full);
  margin-left: var(--space-3);
  box-shadow: 0 2px 8px rgba(232,72,85,0.3);
}
.SiteHeader-navLink--cta:hover {
  background: var(--color-coral-dark) !important;
  box-shadow: 0 4px 16px rgba(232,72,85,0.45);
  transform: translateY(-1px);
}

.SiteHeader-menuToggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
}
.SiteHeader-menuBar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-paper);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}


.MobileMenu {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
}
.MobileMenu.is-open {
  pointer-events: all;
  opacity: 1;
  visibility: visible;
}

.MobileMenu-left {
  width: 55%;
  background: var(--color-ink);
  padding: var(--space-8) var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateX(-100%);
  transition: transform var(--transition-slow) cubic-bezier(0.4,0,0.2,1);
}
.MobileMenu.is-open .MobileMenu-left { transform: translateX(0); }

.MobileMenu-right {
  width: 45%;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform var(--transition-slow) cubic-bezier(0.4,0,0.2,1);
}
.MobileMenu.is-open .MobileMenu-right { transform: translateX(0); }

.MobileMenu-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.MobileMenu-close {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  color: var(--color-paper);
  border-radius: var(--radius-md);
  font-size: 1.2rem;
  transition: background var(--transition-base);
}
.MobileMenu-close:hover { background: rgba(255,255,255,0.2); }

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

.MobileMenu-link {
  display: block;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  color: rgba(250,248,244,0.6);
  letter-spacing: -0.02em;
  padding: var(--space-2) 0;
  transition: color var(--transition-base), transform var(--transition-base);
  line-height: 1.2;
}
.MobileMenu-link:hover {
  color: var(--color-paper);
  transform: translateX(var(--space-2));
}


.PageHero {
  position: relative;
  min-height: 100vh;
  background: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-height) + var(--space-16)) var(--space-8) var(--space-16);
  overflow: hidden;
}

.PageHero-iconGrid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--space-6);
  padding: var(--space-8);
  pointer-events: none;
  overflow: hidden;
}
.PageHero-iconGrid i {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.PageHero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
}

.PageHero-badge {
  display: inline-block;
  background: var(--color-yellow);
  color: var(--color-on-yellow);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

.PageHero-heading {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 800;
  color: var(--color-paper);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
}
.PageHero-heading em {
  font-style: normal;
  color: var(--color-yellow);
}

.PageHero-sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(250,248,244,0.75);
  max-width: 600px;
  margin: 0 auto var(--space-10);
  line-height: 1.65;
}

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


.IntroSection {
  background: var(--color-paper-warm);
  padding: var(--space-24) var(--space-8);
}
.IntroSection-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.IntroSection-text { display: flex; flex-direction: column; gap: var(--space-5); }
.IntroSection-visual { position: relative; }
.IntroSection-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.IntroSection-floatCard {
  position: absolute;
  bottom: -var(--space-6);
  left: -var(--space-6);
  bottom: calc(-1 * var(--space-4));
  left: calc(-1 * var(--space-6));
  background: var(--color-yellow);
  color: var(--color-on-yellow);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-size: 0.9rem;
}
.IntroSection-floatCard i { font-size: 1.2rem; }


.TriggersSection {
  background: var(--color-ink);
  padding: var(--space-24) var(--space-8);
}
.TriggersSection-inner { max-width: 1200px; margin: 0 auto; }
.TriggersSection-header {
  text-align: center;
  margin-bottom: var(--space-16);
}
.TriggersSection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.TriggerCard {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: transform var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
  cursor: default;
  overflow: hidden;
  position: relative;
}
.TriggerCard:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.09);
  box-shadow: var(--shadow-lg);
}

.TriggerCard-icon {
  width: 56px;
  height: 56px;
  background: var(--color-yellow);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--color-on-yellow);
  margin-bottom: var(--space-5);
  transition: background var(--transition-base), transform var(--transition-spring);
}
.TriggerCard:nth-child(2) .TriggerCard-icon { background: var(--color-coral); color: #fff; }
.TriggerCard:nth-child(3) .TriggerCard-icon { background: var(--color-green); color: #fff; }
.TriggerCard:hover .TriggerCard-icon { transform: scale(1.1) rotate(-3deg); }

.TriggerCard-title {
  font-size: 1.4rem;
  color: var(--color-paper);
  margin-bottom: var(--space-3);
}
.TriggerCard-body {
  color: rgba(250,248,244,0.7);
  font-size: 0.95rem;
  line-height: 1.65;
}

.TriggerCard-reveal {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), opacity var(--transition-slow), margin var(--transition-slow);
  opacity: 0;
  margin-top: 0;
}
.TriggerCard:hover .TriggerCard-reveal {
  max-height: 120px;
  opacity: 1;
  margin-top: var(--space-4);
}
.TriggerCard-reveal p {
  color: rgba(250,248,244,0.6);
  font-size: 0.88rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-4);
}


.StickySection {
  background: var(--color-yellow);
  padding: var(--space-24) var(--space-8);
}
.StickySection-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.StickySection-visual {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-8));
}
.StickySection-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}
.StickySection-badge {
  margin-top: var(--space-5);
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
}

.StickySection-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-4);
}
.StickySection-block {
  background: rgba(255,255,255,0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), background var(--transition-base);
}
.StickySection-block:hover {
  transform: translateX(var(--space-2));
  background: rgba(255,255,255,0.6);
}
.StickySection-block h3 {
  font-size: 1.1rem;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}
.StickySection-block p { color: var(--color-ink-soft); font-size: 0.95rem; }


.FeaturesSection {
  background: var(--color-paper-warm);
  padding: var(--space-24) var(--space-8);
}
.FeaturesSection-inner { max-width: 1200px; margin: 0 auto; }
.FeaturesSection-header {
  text-align: center;
  margin-bottom: var(--space-16);
}
.FeaturesSection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.FeatureItem {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-7) var(--space-6);
  border-bottom: 1px solid rgba(26,20,32,0.08);
  transition: background var(--transition-base);
}
.FeatureItem:nth-child(odd) { border-right: 1px solid rgba(26,20,32,0.08); }
.FeatureItem:nth-last-child(-n+2) { border-bottom: none; }
.FeatureItem:hover { background: rgba(26,20,32,0.03); }

.FeatureItem-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--color-coral);
  color: #fff;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
}
.FeatureItem:hover .FeatureItem-icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: var(--shadow-sm), 0 4px 12px rgba(232,72,85,0.3);
}
.FeatureItem:nth-child(2n) .FeatureItem-icon { background: var(--color-purple); }
.FeatureItem:nth-child(3n) .FeatureItem-icon { background: var(--color-green); }
.FeatureItem:nth-child(4n) .FeatureItem-icon { background: var(--color-yellow); color: var(--color-on-yellow); }
.FeatureItem:nth-child(5n) .FeatureItem-icon { background: var(--color-ink); }

.FeatureItem-title {
  font-size: 1.05rem;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.FeatureItem-text { font-size: 0.92rem; color: #4a3f5a; line-height: 1.6; }


.OverlapSection {
  position: relative;
  overflow: visible;
}
.OverlapSection-top {
  background: var(--color-green);
  padding: var(--space-20) var(--space-8) calc(var(--space-24) + 80px);
  text-align: center;
}
.OverlapSection-topContent { max-width: 700px; margin: 0 auto; }
.OverlapSection-topContent p { color: rgba(255,255,255,0.8); font-size: 1.1rem; margin-top: var(--space-4); }

.OverlapSection-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 1100px;
  margin: -80px auto 0;
  padding: 0 var(--space-8);
}

.StepCard {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
}
.StepCard:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.StepCard-number {
  font-size: 4rem;
  font-weight: 800;
  color: rgba(26,20,32,0.06);
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  line-height: 1;
  letter-spacing: -0.04em;
}
.StepCard-icon {
  width: 52px;
  height: 52px;
  background: var(--color-green);
  color: #fff;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: var(--space-5);
  transition: transform var(--transition-spring);
}
.StepCard:nth-child(2) .StepCard-icon { background: var(--color-coral); }
.StepCard:nth-child(3) .StepCard-icon { background: var(--color-purple); }
.StepCard:hover .StepCard-icon { transform: scale(1.1) rotate(-5deg); }

.StepCard-title {
  font-size: 1.5rem;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}
.StepCard-body { font-size: 0.92rem; color: #4a3f5a; line-height: 1.65; }

.OverlapSection-bottom {
  background: var(--color-paper-warm);
  padding: calc(var(--space-16) + 60px) var(--space-8) var(--space-24);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  max-width: 100%;
  align-items: center;
}
.OverlapSection-img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  max-width: 540px;
  margin: 0 auto;
}
.OverlapSection-cta { max-width: 500px; }
.OverlapSection-cta h3 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.OverlapSection-cta p { color: #4a3f5a; margin-bottom: var(--space-6); }


.WhySection {
  background: var(--color-purple);
  padding: var(--space-24) var(--space-8);
}
.WhySection-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.WhySection-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}
.WhySection-text { display: flex; flex-direction: column; gap: var(--space-5); }
.WhySection-text p { color: rgba(255,255,255,0.82); }


.InnerHero {
  padding: calc(var(--nav-height) + var(--space-16)) var(--space-8) var(--space-16);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  max-width: 100%;
  overflow: hidden;
}

.InnerHero--yellow { background: var(--color-yellow); }
.InnerHero--coral { background: var(--color-coral); }
.InnerHero--green { background: var(--color-green); }
.InnerHero--purple { background: var(--color-purple); }

.InnerHero-inner { max-width: 560px; padding-left: calc((100vw - 1200px) / 2); }
@media (max-width: 1240px) { .InnerHero-inner { padding-left: 0; } }

.InnerHero--yellow .SectionLabel { color: rgba(26,20,32,0.6); }
.InnerHero--coral .SectionLabel,
.InnerHero--green .SectionLabel,
.InnerHero--purple .SectionLabel { color: rgba(255,255,255,0.7); }

.InnerHero-heading {
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.05;
  margin-bottom: var(--space-5);
}
.InnerHero--yellow .InnerHero-heading { color: var(--color-ink); }
.InnerHero--coral .InnerHero-heading,
.InnerHero--green .InnerHero-heading,
.InnerHero--purple .InnerHero-heading { color: #fff; }

.InnerHero-sub {
  font-size: 1.05rem;
  line-height: 1.65;
}
.InnerHero--yellow .InnerHero-sub { color: rgba(26,20,32,0.7); }
.InnerHero--coral .InnerHero-sub,
.InnerHero--green .InnerHero-sub,
.InnerHero--purple .InnerHero-sub { color: rgba(255,255,255,0.8); }

.InnerHero-image { overflow: hidden; border-radius: var(--radius-xl); max-width: 540px; margin-left: auto; }
.InnerHero-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}


.InnerHero--green { grid-template-columns: 1fr; max-width: 1200px; margin: 0 auto; }
.InnerHero--purple { grid-template-columns: 1fr; max-width: 1200px; margin: 0 auto; }


.AboutPhilosophy {
  background: var(--color-paper-warm);
  padding: var(--space-24) var(--space-8);
}
.AboutPhilosophy-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-16);
  align-items: start;
}
.AboutPhilosophy-text { display: flex; flex-direction: column; gap: var(--space-5); }

.PullQuote {
  background: var(--color-yellow);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}
.PullQuote p {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
.PullQuote cite {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(26,20,32,0.6);
  font-style: normal;
}


.AboutApproach {
  background: var(--color-coral);
  padding: var(--space-24) var(--space-8);
}
.AboutApproach-inner { max-width: 1200px; margin: 0 auto; }
.AboutApproach-inner > h2 { margin-bottom: var(--space-12); }

.ApproachGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.ApproachCard {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  transition: transform var(--transition-spring), background var(--transition-base);
}
.ApproachCard:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.2);
}
.ApproachCard-icon {
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: var(--space-4);
}
.ApproachCard-title {
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: var(--space-3);
}
.ApproachCard p { color: rgba(255,255,255,0.8); font-size: 0.93rem; }


.AboutValues {
  background: var(--color-paper-warm);
  padding: var(--space-24) var(--space-8);
}
.AboutValues-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.AboutValues-img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.ValuesList { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.ValuesList-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: rgba(255,255,255,0.7);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.ValuesList-item:hover {
  transform: translateX(var(--space-2));
  box-shadow: var(--shadow-sm);
}
.ValuesList-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--color-purple);
  color: #fff;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.ValuesList-item strong { display: block; color: var(--color-ink); margin-bottom: var(--space-1); }
.ValuesList-item p { font-size: 0.9rem; color: #4a3f5a; margin-top: 0; }


.AboutCTA {
  background: var(--color-navy);
  padding: var(--space-20) var(--space-8);
  text-align: center;
}
.AboutCTA-inner { max-width: 700px; margin: 0 auto; }
.AboutCTA-inner p { color: rgba(255,255,255,0.75); margin: var(--space-5) 0 var(--space-8); }
.AboutCTA-btns { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }


.PhaseSection { padding: var(--space-24) var(--space-8); }
.PhaseSection--light { background: var(--color-paper-warm); }
.PhaseSection--accent { background: var(--color-ink); }

.PhaseSection-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-12);
  align-items: start;
}
.PhaseSection-label { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.PhaseSection-number {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(26,20,32,0.1);
}
.PhaseSection--accent .PhaseSection-number { color: rgba(255,255,255,0.1); }
.PhaseSection-content { display: flex; flex-direction: column; gap: var(--space-5); }

.PhaseSection-content h2 { margin-bottom: var(--space-2); }
.PhaseSection-subtitle {
  font-size: 1.1rem;
  font-weight: 500;
  color: #4a3f5a;
  letter-spacing: 0;
}
.PhaseSection-subtitle--light { color: rgba(255,255,255,0.65); }
.PhaseSection--accent .PhaseSection-content p { color: rgba(255,255,255,0.8); }
.PhaseSection--accent h4 { color: rgba(255,255,255,0.9); }

.PhaseTool-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.PhaseTool-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.95rem;
  color: #4a3f5a;
}
.PhaseSection--accent .PhaseTool-list li { color: rgba(255,255,255,0.75); }
.PhaseTool-list li i {
  color: var(--color-green);
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.PhaseSection--accent .PhaseTool-list li i { color: var(--color-yellow); }

.PauseTool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.PauseTool-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: background var(--transition-base), transform var(--transition-base);
}
.PauseTool-card:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-3px);
}
.PauseTool-card i {
  font-size: 1.4rem;
  color: var(--color-yellow);
  margin-bottom: var(--space-3);
}
.PauseTool-card h5 {
  color: #fff;
  margin-bottom: var(--space-2);
  font-size: 0.95rem;
}
.PauseTool-card p { font-size: 0.85rem; color: rgba(255,255,255,0.65); margin: 0; }


.HowItWorksTools {
  background: var(--color-purple);
  padding: var(--space-24) var(--space-8);
}
.HowItWorksTools-inner { max-width: 1100px; margin: 0 auto; }
.HowItWorksTools-inner > h2 { margin-bottom: var(--space-12); }

.ToolsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.ToolCard {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  transition: transform var(--transition-spring), background var(--transition-base);
}
.ToolCard:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.18);
}
.ToolCard i {
  font-size: 1.8rem;
  color: var(--color-yellow);
  margin-bottom: var(--space-4);
}
.ToolCard h3 { color: #fff; margin-bottom: var(--space-3); font-size: 1.1rem; }
.ToolCard p { color: rgba(255,255,255,0.75); font-size: 0.92rem; }


.HowCTA {
  background: var(--color-paper-warm);
  padding: var(--space-24) var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.HowCTA-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.HowCTA-text { max-width: 480px; }
.HowCTA-text h2 { margin-bottom: var(--space-5); }
.HowCTA-text p { margin-bottom: var(--space-8); }


.FaqSection {
  background: var(--color-paper-warm);
  padding: var(--space-20) var(--space-8);
}
.FaqSection-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.FaqSection-group { display: flex; flex-direction: column; gap: var(--space-2); }
.FaqGroup-title {
  font-size: 1.4rem;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-coral);
}

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

.FaqItem {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base);
}
.FaqItem:hover { box-shadow: var(--shadow-sm); }

.FaqItem-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
  gap: var(--space-4);
  min-height: 56px;
  transition: background var(--transition-base), color var(--transition-base);
}
.FaqItem-question:hover { background: rgba(26,20,32,0.03); }
.FaqItem-question[aria-expanded="true"] {
  background: var(--color-ink);
  color: var(--color-paper);
}
.FaqItem-question i {
  flex-shrink: 0;
  transition: transform var(--transition-base);
  font-size: 0.85rem;
}
.FaqItem-question[aria-expanded="true"] i { transform: rotate(180deg); }

.FaqItem-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), padding var(--transition-slow);
  padding: 0 var(--space-6);
}
.FaqItem-answer.is-open {
  max-height: 400px;
  padding: var(--space-5) var(--space-6);
}
.FaqItem-answer p { font-size: 0.95rem; color: #4a3f5a; }
.FaqItem-answer p + p { margin-top: var(--space-3); }
.FaqItem-answer a { color: var(--color-coral); text-decoration: underline; }

.FaqCTA {
  background: var(--color-navy);
  padding: var(--space-20) var(--space-8);
  text-align: center;
}
.FaqCTA-inner { max-width: 600px; margin: 0 auto; }
.FaqCTA-inner p { color: rgba(255,255,255,0.75); margin: var(--space-5) 0 var(--space-8); }


.ContactSection {
  background: var(--color-paper-warm);
  padding: var(--space-20) var(--space-8);
}
.ContactSection-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.ContactForm-wrap h2 { margin-bottom: var(--space-3); }
.ContactForm-intro { color: #4a3f5a; font-size: 0.95rem; margin-bottom: var(--space-8); }
.ContactForm-intro a { color: var(--color-coral); text-decoration: underline; }

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

.ContactForm-progress { margin-bottom: var(--space-4); }
.ContactForm-step-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.ContactForm-step-dot {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(26,20,32,0.1);
  color: rgba(26,20,32,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  transition: background var(--transition-base), color var(--transition-base);
}
.ContactForm-step-dot.is-active {
  background: var(--color-coral);
  color: #fff;
  box-shadow: 0 2px 8px rgba(232,72,85,0.4);
}
.ContactForm-step-line {
  flex: 1;
  height: 2px;
  background: rgba(26,20,32,0.1);
  max-width: 60px;
}
.ContactForm-step-label { font-size: 0.82rem; font-weight: 600; color: #4a3f5a; }

.ContactForm-panel { display: flex; flex-direction: column; gap: var(--space-5); }
.ContactForm-panel.is-hidden { display: none; }

.FormGroup { display: flex; flex-direction: column; gap: var(--space-2); }
.FormGroup-label { font-size: 0.85rem; font-weight: 600; color: var(--color-ink); }
.FormGroup-input {
  padding: 0.85rem 1rem;
  border: 2px solid rgba(26,20,32,0.15);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: #fff;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  min-height: 48px;
}
.FormGroup-input:focus {
  outline: none;
  border-color: var(--color-coral);
  box-shadow: 0 0 0 3px rgba(232,72,85,0.15);
}
.FormGroup-textarea { min-height: 140px; resize: vertical; }

.FormGroup--checkbox { }
.FormGroup-checkLabel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.88rem;
  color: #4a3f5a;
  cursor: pointer;
  line-height: 1.5;
}
.FormGroup-checkLabel input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  accent-color: var(--color-coral);
  cursor: pointer;
}
.FormGroup-checkLabel a { color: var(--color-coral); text-decoration: underline; }

.ContactForm-btns {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}

.ContactInfo-wrap h2 { margin-bottom: var(--space-6); }
.ContactInfo-cards { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
.ContactInfo-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.ContactInfo-card i {
  font-size: 1.2rem;
  color: var(--color-coral);
  width: 24px;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.ContactInfo-card strong { display: block; font-size: 0.85rem; color: var(--color-ink); margin-bottom: var(--space-1); }
.ContactInfo-card p { font-size: 0.92rem; color: #4a3f5a; margin: 0; }
.ContactInfo-card a { color: var(--color-coral); }


.ContactFaq {
  background: var(--color-ink);
  padding: var(--space-20) var(--space-8);
}
.ContactFaq-inner { max-width: 1100px; margin: 0 auto; }
.ContactFaq-inner h2 { color: var(--color-paper); margin-bottom: var(--space-4); }
.ContactFaq-intro { color: rgba(255,255,255,0.7); margin-bottom: var(--space-10); }
.ContactFaq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.ContactFaq-item {
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: background var(--transition-base), transform var(--transition-base);
}
.ContactFaq-item:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-3px);
}
.ContactFaq-item h3 {
  font-size: 1rem;
  color: var(--color-yellow);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ContactFaq-item p { color: rgba(255,255,255,0.7); font-size: 0.92rem; }
.ContactFaq-item a { color: var(--color-yellow); }


.ThanksHero {
  background: linear-gradient(135deg, var(--color-coral) 0%, var(--color-purple) 60%, var(--color-navy) 100%);
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-height) + var(--space-16)) var(--space-8) var(--space-16);
  text-align: center;
}
.ThanksHero-inner { max-width: 640px; }
.ThanksHero-icon {
  font-size: 4rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--space-6);
}
.ThanksHero-heading {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
  margin-bottom: var(--space-5);
}
.ThanksHero-sub { color: rgba(255,255,255,0.8); font-size: 1.1rem; }

.ThanksNext {
  background: var(--color-paper);
  padding: var(--space-20) var(--space-8);
}
.ThanksNext-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.ThanksNext-inner h2 { margin-bottom: var(--space-10); }
.ThanksNext-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}
.ThanksNext-card {
  background: var(--color-paper-warm);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  text-align: left;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
  display: block;
  text-decoration: none;
}
.ThanksNext-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.ThanksNext-card i {
  font-size: 1.6rem;
  color: var(--color-coral);
  margin-bottom: var(--space-4);
}
.ThanksNext-card h3 { font-size: 1.05rem; color: var(--color-ink); margin-bottom: var(--space-2); }
.ThanksNext-card p { font-size: 0.88rem; color: #4a3f5a; }
.ThanksNext-home { margin-top: var(--space-4); }


.LegalHero {
  background: var(--color-ink);
  padding: calc(var(--nav-height) + var(--space-12)) var(--space-8) var(--space-12);
}
.LegalHero--terms { background: var(--color-navy); }
.LegalHero--cookies { background: var(--color-purple); }
.LegalHero-inner { max-width: 860px; margin: 0 auto; }
.LegalHero-heading {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-paper);
  margin-bottom: var(--space-3);
}
.LegalHero-meta { font-size: 0.85rem; color: rgba(255,255,255,0.55); }

.LegalContent {
  background: var(--color-paper);
  padding: var(--space-16) var(--space-8);
}
.LegalContent-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.LegalContent-inner h2 {
  font-size: 1.3rem;
  color: var(--color-ink);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(26,20,32,0.08);
}
.LegalContent-inner h3 {
  font-size: 1.1rem;
  color: var(--color-ink);
  margin-top: var(--space-3);
}
.LegalContent-inner p { font-size: 0.95rem; color: #3a2f4a; }
.LegalContent-inner ul {
  padding-left: var(--space-5);
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.LegalContent-inner ul li { font-size: 0.93rem; color: #3a2f4a; }
.LegalContent-inner a { color: var(--color-coral); text-decoration: underline; }
.LegalContent-inner code {
  background: rgba(26,20,32,0.06);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.88em;
  font-family: monospace;
}

.LegalTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  box-shadow: var(--shadow-xs);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.LegalTable th {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.LegalTable td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(26,20,32,0.06);
  color: #3a2f4a;
  vertical-align: top;
}
.LegalTable tr:last-child td { border-bottom: none; }
.LegalTable tr:nth-child(even) td { background: rgba(26,20,32,0.02); }

.LegalDL {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-1) var(--space-6);
  font-size: 0.93rem;
  background: var(--color-paper-warm);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid rgba(26,20,32,0.06);
}
.LegalDL dt {
  font-weight: 700;
  color: var(--color-ink);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(26,20,32,0.06);
}
.LegalDL dd {
  color: #3a2f4a;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(26,20,32,0.06);
}
.LegalDL dt:last-of-type,
.LegalDL dd:last-child {
  border-bottom: none;
}


.SiteFooter {
  background: var(--color-ink);
  padding: var(--space-16) var(--space-8) 0;
  margin-top: auto;
}
.SiteFooter-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-6);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.FooterCard {
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.FooterCard-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.FooterCard-logoImg { width: 32px; height: 32px; }
.FooterCard-logo span {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-paper);
}
.FooterCard-desc {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.FooterCard-address {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.FooterCard-address i { margin-top: 0.2rem; color: var(--color-coral); }
.FooterCard-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-4);
}
.FooterCard-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.FooterCard-list li a {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  transition: color var(--transition-base);
}
.FooterCard-list li a:hover { color: var(--color-paper); }

.FooterCard-list--contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
}
.FooterCard-list--contact li i {
  color: var(--color-yellow);
  width: 16px;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.FooterCard-list--contact li a { color: rgba(255,255,255,0.65); }
.FooterCard-list--contact li a:hover { color: var(--color-paper); }

.SiteFooter-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.SiteFooter-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.3); }


.CookieConsent {
  position: fixed;
  bottom: var(--space-5);
  left: var(--space-5);
  z-index: 9999;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  max-width: 360px;
  width: calc(100% - var(--space-10));
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(26,20,32,0.06);
  display: none;
  flex-direction: column;
  gap: var(--space-3);
}
.CookieConsent.is-visible { display: flex; }

.CookieConsent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.CookieConsent-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.CookieConsent-title i { color: var(--color-yellow); }
.CookieConsent-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26,20,32,0.06);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--color-ink);
  transition: background var(--transition-base);
}
.CookieConsent-close:hover { background: rgba(26,20,32,0.12); }

.CookieConsent-text { font-size: 0.82rem; color: #4a3f5a; line-height: 1.55; }

.CookieConsent-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.CookieConsent-manage {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-coral);
  text-align: left;
  padding: var(--space-1) 0;
  transition: opacity var(--transition-base);
}
.CookieConsent-manage:hover { opacity: 0.75; }

.CookieConsent-expand {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid rgba(26,20,32,0.08);
  padding-top: var(--space-3);
}
.CookieConsent-expand.is-open { display: flex; }

.CookieConsent-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.85rem;
  color: var(--color-ink);
  cursor: pointer;
}
.CookieConsent-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-coral);
  cursor: pointer;
}
.CookieConsent-toggle input:disabled { opacity: 0.5; cursor: not-allowed; }


.reveal-section { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-section.is-revealed { opacity: 1; transform: translateY(0); }
.reveal-item { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal-item.is-revealed { opacity: 1; transform: translateY(0); }
.reveal-item:nth-child(2) { transition-delay: 0.1s; }
.reveal-item:nth-child(3) { transition-delay: 0.2s; }
.reveal-item:nth-child(4) { transition-delay: 0.3s; }
.reveal-item:nth-child(5) { transition-delay: 0.4s; }
.reveal-item:nth-child(6) { transition-delay: 0.5s; }

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

@media (max-width: 1100px) {
  .SiteFooter-inner { grid-template-columns: 1fr 1fr; }
  .TriggersSection-grid { grid-template-columns: 1fr; }
  .OverlapSection-cards { grid-template-columns: 1fr; max-width: 480px; margin-top: -40px; }
  .OverlapSection-bottom { grid-template-columns: 1fr; padding-top: var(--space-12); text-align: center; }
  .OverlapSection-cta { max-width: 100%; }
  .PhaseSection-inner { grid-template-columns: 100px 1fr; gap: var(--space-8); }
  .PauseTool-grid { grid-template-columns: 1fr; }
  .HowCTA { grid-template-columns: 1fr; max-width: 600px; }
  .HowCTA-img { height: 260px; }
}

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

  .IntroSection-inner { grid-template-columns: 1fr; }
  .IntroSection-img { height: 320px; }
  .StickySection-inner { grid-template-columns: 1fr; }
  .StickySection-visual { position: static; }
  .StickySection-img { height: 300px; }
  .WhySection-inner { grid-template-columns: 1fr; }
  .WhySection-img { height: 300px; }
  .InnerHero { grid-template-columns: 1fr; }
  .InnerHero-image { max-width: 100%; }
  .AboutPhilosophy-inner { grid-template-columns: 1fr; }
  .ApproachGrid { grid-template-columns: 1fr; }
  .AboutValues-inner { grid-template-columns: 1fr; }
  .AboutValues-img { height: 280px; }
  .FeaturesSection-grid { grid-template-columns: 1fr; }
  .FeatureItem:nth-child(odd) { border-right: none; }
  .FeatureItem:nth-last-child(-n+2) { border-bottom: 1px solid rgba(26,20,32,0.08); }
  .FeatureItem:last-child { border-bottom: none; }
  .ContactSection-inner { grid-template-columns: 1fr; }
  .ContactFaq-grid { grid-template-columns: 1fr; }
  .ToolsGrid { grid-template-columns: 1fr; }
  .ThanksNext-grid { grid-template-columns: 1fr; }
  .LegalDL { grid-template-columns: 1fr; }
  .LegalDL dt { border-bottom: none; padding-bottom: 0; }
  .LegalDL dd { padding-top: 0; }
  .PhaseSection-inner { grid-template-columns: 1fr; }
  .PhaseSection-label { flex-direction: row; align-items: center; }
  .PhaseSection-number { font-size: 3rem; }
}

@media (max-width: 640px) {
  :root { --nav-height: 64px; }
  .SiteHeader-inner { padding: 0 var(--space-5); }
  .SiteHeader-logoText { font-size: 0.95rem; }

  .PageHero-iconGrid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(8, 1fr); }
  .PageHero { padding-top: calc(var(--nav-height) + var(--space-10)); padding-bottom: var(--space-10); }
  .PageHero-actions { flex-direction: column; align-items: stretch; }
  .PageHero-actions .Btn { justify-content: center; }

  .IntroSection,
  .TriggersSection,
  .StickySection,
  .FeaturesSection,
  .WhySection,
  .AboutPhilosophy,
  .AboutApproach,
  .AboutValues,
  .AboutCTA,
  .PhaseSection,
  .HowItWorksTools,
  .HowCTA,
  .FaqSection,
  .FaqCTA,
  .ContactSection,
  .ContactFaq,
  .ThanksNext,
  .LegalContent { padding-left: var(--space-5); padding-right: var(--space-5); }

  .MobileMenu-left { width: 100%; }
  .MobileMenu-right { display: none; }

  .OverlapSection-cards { padding: 0 var(--space-5); }
  .OverlapSection-bottom { padding: var(--space-8) var(--space-5) var(--space-12); }

  .SiteFooter { padding: var(--space-10) var(--space-5) 0; }
  .SiteFooter-inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .SiteFooter-bottom { flex-direction: column; text-align: center; }

  .InnerHero { padding: calc(var(--nav-height) + var(--space-8)) var(--space-5) var(--space-8); }
  .InnerHero-img { height: 260px; }

  .LegalTable { font-size: 0.78rem; }
  .LegalTable th, .LegalTable td { padding: var(--space-2) var(--space-3); }

  .ContactForm-btns { flex-direction: column; }
  .ContactForm-btns .Btn { width: 100%; justify-content: center; }

  .AboutCTA-btns { flex-direction: column; align-items: stretch; }
  .AboutCTA-btns .Btn { justify-content: center; }

  .PageHero-badge { font-size: 0.7rem; }
}

@media (max-width: 400px) {
  .CookieConsent { left: var(--space-3); bottom: var(--space-3); width: calc(100% - var(--space-6)); }
}