/* ==========================================================================
   home.css — Home page section styles
   --------------------------------------------------------------------------
   Page-scoped styles only. Global tokens/components live in /core. Each Home
   section is added here as its build unit is completed and verified.
   Section background alternation (per §4 rule 7) is orchestrated here so no
   two adjacent sections share a flat, uniform fill.
   ========================================================================== */

/* Page wrapper (kept minimal; sections manage their own backgrounds) */
.home { isolation: isolate; }

/* === Unit 1: Hero ========================================================= */
.hero {
  position: relative;
  background: var(--grad-hero);
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(3.5rem, 2rem + 6vw, 6.5rem);
  overflow: hidden;
}

/* Decorative blobs — soothing, asymmetric, never a grid pattern */
.hero__blob--1 {
  inset-block-start: -120px;
  inset-inline-end: -80px;
  inline-size: 420px;
  block-size: 420px;
  background: radial-gradient(circle at 30% 30%, #e6d8ea, rgba(230, 216, 234, 0));
}
.hero__blob--2 {
  inset-block-end: -140px;
  inset-inline-start: -100px;
  inline-size: 380px;
  block-size: 380px;
  background: radial-gradient(circle at 50% 50%, #f3cfce, rgba(243, 207, 206, 0));
  opacity: 0.4;
}

/* Two-column layout: copy + portrait. Mobile-first single column. */
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}
/* Tablet & up — keep the hero a two-column layout (do not wrap to one column
   until mobile, per responsive rules). */
@media (min-width: 768px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* --- Copy column --- */
.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: 1.4;
  color: var(--color-heading);
  letter-spacing: -0.01em;
  max-inline-size: 18ch;
}
.hero__subtitle {
  margin-block-start: var(--space-md);
  font-size: var(--fs-lead);
  color: var(--color-body);
  line-height: var(--lh-body);
  max-inline-size: 52ch;
}
.hero__cta { margin-block-start: var(--space-lg); }

/* --- Media column --- */
.hero__media {
  position: relative;
  justify-self: center;
  inline-size: 100%;
  max-inline-size: 440px;
}
.hero__portrait {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-deep);
  border: 6px solid var(--color-surface);
  background: var(--color-secondary-200);
  aspect-ratio: 4 / 5;          /* Calm, consistent crop regardless of source */
}
.hero__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 20%;     /* Keep face in frame on tall crops */
}

/* Floating glass trust badge */
.hero__badge {
  position: absolute;
  inset-block-end: clamp(-18px, -1vw, -10px);
  inset-inline-start: clamp(-14px, -1vw, -8px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}
.hero__badge-num {
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: 1;
}
.hero__badge-label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-body);
  max-inline-size: 16ch;
}

/* Calm scroll cue */
.hero__scroll {
  position: absolute;
  inset-block-end: 18px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 26px;
  block-size: 44px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border-strong);
  display: none;
}
.hero__scroll-dot {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: calc(50% - 5px);
  transform: translateX(-50%);
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: hero-scroll 1.8s var(--ease-in-out) infinite;
}
@keyframes hero-scroll {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 16px); }
}
@media (min-width: 880px) {
  .hero__scroll { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-dot { animation: none; }
}

/* Mobile — center hero copy, CTAs and portrait (short-form intro). */
@media (max-width: 767px) {
  .hero__content { text-align: center; }
  .hero__title { margin-inline: auto; }
  .hero__subtitle { margin-inline: auto; }
  .hero__cta { justify-content: center; }
}

/* === Unit 2: Problem ====================================================== */
/* Distinct soft background from the hero (per §4 rule 7 — never uniform). */
.problem {
  background:
    radial-gradient(70% 55% at 100% 0%, #f1eaf4 0%, rgba(241, 234, 244, 0) 55%),
    linear-gradient(180deg, #fbfaff 0%, #f5f1fa 100%);
}
.problem__blob {
  inset-block-start: 12%;
  inset-inline-start: -120px;
  inline-size: 360px;
  block-size: 360px;
  background: radial-gradient(circle at 50% 50%, #f3cfce, rgba(243, 207, 206, 0));
  opacity: 0.35;
}

/* Two-column: narrative + feelings list. Single column on mobile. */
.problem__layout {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 768px) {
  .problem__layout {
    grid-template-columns: 1fr 1fr;
  }
}

/* Narrative prose */
.problem__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.problem__intro p {
  font-size: var(--fs-lead);
  color: var(--color-body);
  line-height: var(--lh-body);
  max-inline-size: 52ch;
}

/* Feelings list */
.problem__feelings-label {
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  font-size: var(--fs-h4);
  margin-block-end: var(--space-md);
}
.feelings-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.feeling {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.feeling:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-raised);
}
.feeling__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-secondary-200);
  color: var(--color-primary);
}
.feeling__text {
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-snug);
}

/* Relief pivot card — calm, reassuring, accent-bordered */
.problem__relief {
  position: relative;
  margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  background: linear-gradient(135deg, #ffffff 0%, #f6eef6 100%);
  border: 1px solid var(--color-border);
  border-inline-start: 5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.problem__relief-q {
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  color: var(--color-heading);
  margin-block-end: var(--space-md);
}
.relief-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: var(--space-md);
}
.relief-list li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-lead);
  color: var(--color-body);
}
.relief-list svg {
  flex-shrink: 0;
  color: var(--color-accent);
}
.problem__relief-final {
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  line-height: var(--lh-body);
  max-inline-size: 60ch;
}

/* Mobile — center the relief card's short lines; intro stays start-aligned
   via the global .longform opt-out. */
@media (max-width: 767px) {
  .problem__feelings-label { text-align: center; }
  .problem__relief { border-inline-start: none; border-block-start: 5px solid var(--color-accent); }
  .problem__relief-q { text-align: center; }
  .relief-list li { justify-content: center; }
  .problem__relief-final { text-align: center; margin-inline: auto; }
}

/* === Unit 3: Method ======================================================= */
/* Distinct background: reversed lavender wash + soft blue blob. */
.method {
  background: linear-gradient(180deg, #f2ecf8 0%, #fbfaff 70%);
}
.method__blob {
  inset-block-start: -80px;
  inset-inline-end: -110px;
  inline-size: 380px;
  block-size: 380px;
  background: radial-gradient(circle at 50% 50%, #d8d4ef, rgba(216, 212, 239, 0));
  opacity: 0.5;
}

/* Intro paragraphs under the centered title */
.method__intro {
  margin-block-start: var(--space-md);
}
.method__intro p {
  font-size: var(--fs-lead);
  color: var(--color-body);
  line-height: var(--lh-body);
}
.method__intro-lead {
  margin-block-start: var(--space-sm);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

/* The 5 calm steps — responsive auto-fit so it shows a steady row on wide
   screens and stacks gracefully on small ones. */
.method__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-md);
  margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-raised);
}
.step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 60px;
  block-size: 60px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-300) 100%);
  box-shadow: 0 8px 20px rgba(30, 32, 83, 0.22);
}
.step__text {
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-snug);
  max-inline-size: 24ch;
}

/* Turtle-metaphor emphasis card — deep, calming contrast block */
.method__philosophy {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  flex-wrap: wrap;
  padding: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
  background: var(--grad-deep);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.method__philosophy::after {
  /* Soft accent glow, never a flat fill */
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: -10%;
  inline-size: 50%;
  block-size: 160%;
  background: var(--grad-accent-glow);
  pointer-events: none;
}
.method__turtle {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(110px, 14vw, 150px);
  block-size: clamp(110px, 14vw, 150px);
  border-radius: var(--radius-pill);
  color: var(--color-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.method__philosophy-body {
  position: relative;
  flex: 1 1 320px;
}
.method__statement {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-on-dark);
  line-height: var(--lh-snug);
}
.method__turtle-line {
  margin-block-start: var(--space-md);
  font-size: var(--fs-lead);
  color: var(--color-secondary);
  line-height: var(--lh-body);
}
.method__philosophy .cta-row {
  margin-block-start: var(--space-lg);
}

/* Mobile — center the deep card content and turtle */
@media (max-width: 767px) {
  .method__philosophy {
    flex-direction: column;
    text-align: center;
  }
  .method__statement,
  .method__turtle-line {
    text-align: center;
  }
  .method__philosophy .cta-row {
    justify-content: center;
  }
}

/* === Unit 4: Services ===================================================== */
/* Distinct background from the method section. */
.services {
  background:
    radial-gradient(60% 50% at 0% 0%, #f1eaf4 0%, rgba(241, 234, 244, 0) 55%),
    linear-gradient(180deg, #fbfaff 0%, #f6f2fb 100%);
}
.services__blob {
  inset-block-end: 4%;
  inset-inline-end: -120px;
  inline-size: 400px;
  block-size: 400px;
  background: radial-gradient(circle at 50% 50%, #e2dcf2, rgba(226, 220, 242, 0));
  opacity: 0.5;
}

/* 2×2 grid on tablet & up; single column on mobile. */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
}
@media (min-width: 768px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Service card — flex column so the CTA pins to the bottom regardless of
   differing body lengths (keeps a clean baseline across the row). */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-raised);
}

.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 60px;
  block-size: 60px;
  border-radius: var(--radius);
  color: var(--color-primary);
  background: var(--color-secondary-200);
  margin-block-end: var(--space-md);
}
.service-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-snug);
}
.service-card__slogan {
  margin-block-start: var(--space-2xs);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-600);
}
.service-card__body {
  margin-block-start: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* Grow so the "لمن؟" line, note and CTA settle as a bottom cluster,
     aligning CTAs across cards of differing length within a row. */
  flex-grow: 1;
}
.service-card__body p {
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-body);
}
.service-card__for {
  margin-block-start: var(--space-md);
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-body);
}
.service-card__for-label {
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

/* VIP note — gentle accent callout */
.service-card__note {
  margin-block-start: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent-200);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  color: #8a3b3a;
  line-height: var(--lh-body);
}
.service-card__note-label { font-weight: var(--fw-bold); }

/* CTA — consistent gap above; body's flex-grow keeps it at the card bottom. */
.service-card__btn {
  margin-block-start: var(--space-lg);
  align-self: flex-start;
  inline-size: 100%;
}

/* Featured (VIP) tier — accent ring + subtle tinted surface */
.service-card--featured {
  background: linear-gradient(180deg, #ffffff 0%, #faf4fb 100%);
  border-color: rgba(242, 132, 130, 0.45);
  box-shadow: 0 18px 48px rgba(242, 132, 130, 0.16);
}
.service-card--featured .service-card__icon {
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-600) 100%);
}
.service-card__flag {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  padding-block: 0.3rem;
  padding-inline: 0.75rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
}

/* Helper banner — glassy pill linking to contact */
.services__helper {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  padding: var(--space-md) clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.services__helper:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-raised);
}
.services__helper-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-300) 100%);
}
.services__helper-text {
  flex: 1;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  line-height: var(--lh-snug);
}
.services__helper-arrow {
  flex-shrink: 0;
  color: var(--color-accent);
  transition: transform var(--dur-fast) var(--ease-out);
}
.services__helper:hover .services__helper-arrow { transform: translateX(-4px); }

/* Pagination dots — hidden on desktop, shown on the mobile slider. */
.services__dots { display: none; }

/* Mobile — center card headers/icons/CTA; bodies stay start-aligned. */
@media (max-width: 767px) {
  .service-card__icon { margin-inline: auto; }
  .service-card__title,
  .service-card__slogan { text-align: center; }
  .service-card__btn { align-self: stretch; text-align: center; }
  .services__helper {
    flex-direction: column;
    text-align: center;
    border-radius: var(--radius-lg);
  }
  .services__helper-arrow { transform: rotate(90deg); }
  .services__helper:hover .services__helper-arrow { transform: rotate(90deg) translateX(-4px); }

  /* ----- Mobile slider ------------------------------------------------ */
  /* Track becomes a horizontal flex rail. The .services__track rule wins
     over the .services__grid grid rule (declared later, same specificity). */
  .services__track {
    display: flex;
    gap: var(--space-md);
    align-items: stretch;          /* equal slide heights → stable dot row */
    will-change: transform;        /* compositor hint, single element */
    touch-action: pan-y;           /* we handle horizontal; browser keeps vertical */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .services__track.is-dragging { cursor: grabbing; }

  /* Each card is a slide: ~84% width so the neighbours peek at the edges. */
  .services__track > .service-card {
    flex: 0 0 84%;
    scroll-snap-align: center;     /* used by the no-JS scroll-snap fallback */
  }

  /* No-JS / no-GSAP fallback: native horizontal scroll-snap (still fluid). */
  .services__slider:not(.slider-ready) .services__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .services__slider:not(.slider-ready) .services__viewport::-webkit-scrollbar {
    display: none;
  }
  .services__slider:not(.slider-ready) .services__track {
    will-change: auto;
  }

  /* Premium pagination dots — 24px touch targets, elongating active pill. */
  .services__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-block-start: var(--space-lg);
  }
  .slider-dot {
    inline-size: 24px;
    block-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
  }
  .slider-dot::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--radius-pill);
    background: var(--color-secondary-400);
    transition: inline-size var(--dur-slow) var(--ease-out),
                background-color var(--dur-slow) var(--ease-out);
  }
  .slider-dot.is-active::before {
    inline-size: 26px;
    background: var(--color-accent);
  }

  @media (prefers-reduced-motion: reduce) {
    .slider-dot::before { transition: none; }
  }
}

/* === Unit 5: Why Hala — "The Trust Ledger" (pinned focus narrative) ======= */
.why {
  background:
    radial-gradient(55% 45% at 100% 100%, #eef0fb 0%, rgba(238, 240, 251, 0) 55%),
    linear-gradient(180deg, #f7f4fb 0%, #fbfaff 100%);
}
.why__blob {
  inset-block-start: -90px;
  inset-inline-start: -120px;
  inline-size: 360px;
  block-size: 360px;
  background: radial-gradient(circle at 50% 50%, #e0dbf3, rgba(224, 219, 243, 0));
  opacity: 0.5;
}

.why__stage { position: relative; z-index: 1; }
.why__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: start;
}

/* --- Anchor (portrait + title + progress) --- */
.why__anchor {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.why__portrait {
  position: relative;
  margin: 0;
  inline-size: 100%;
  max-inline-size: 300px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-deep);
  border: 6px solid var(--color-surface);
  background: var(--color-secondary-200);
  aspect-ratio: 4 / 5;
}
.why__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 80%;
}
.why__id {
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) var(--space-md);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.why__id-name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-extrabold);
  color: var(--color-heading);
  line-height: 1.2;
}
.why__id-role {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-600);
}

/* Scroll progress (revealed on desktop pinned mode) */
.why__progress { display: none; }
.why__track {
  position: relative;
  display: block;
  block-size: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-secondary-400);
  overflow: hidden;
}
.why__track-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right center;      /* RTL: fill grows from the start (right) */
  will-change: transform;
}
[dir="ltr"] .why__track-fill { transform-origin: left center; }
.why__counter {
  margin-block-start: var(--space-sm);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: var(--fw-extrabold);
}
.why__counter-now { font-size: var(--fs-h3); color: var(--color-accent-600); }
.why__counter-sep,
.why__counter-total { color: var(--color-muted); }

/* --- Focus stack --- */
/* Default (mobile / no-JS fallback): clean stacked cards in normal flow. */
.why__stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.why__index { display: none; }
.reason-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.reason-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 60px;
  block-size: 60px;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-300) 100%);
  box-shadow: 0 8px 18px rgba(30, 32, 83, 0.2);
  margin-block-end: var(--space-md);
}
.reason-panel__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-snug);
}
.reason-panel__text {
  margin-block-start: var(--space-sm);
  font-size: var(--fs-lead);
  color: var(--color-body);
  line-height: var(--lh-body);
  max-inline-size: 52ch;
}

/* Mobile — center the stacked cards. */
@media (max-width: 767px) {
  .why__anchor {
    max-inline-size: 320px;
    margin-inline: auto;
    align-items: center;
    text-align: center;
  }
  .why__head { text-align: center; }
  .reason-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .reason-panel__text { text-align: center; margin-inline: auto; }
}

/* --- Desktop: two-column stage --- */
@media (min-width: 768px) {
  .why__grid {
    grid-template-columns: 0.82fr 1.18fr;
    align-items: center;
  }
  .why__progress { display: block; margin-top: 10px; }
  .reason-panel__title { font-size: var(--fs-h2); }
}

/* --- Desktop PINNED mode (class added by JS only when GSAP is active) --- */
@media (min-width: 768px) {
  .why--pinned .why__stage {
    min-block-size: 100svh;
    display: flex;
    align-items: center;
  }
  .why--pinned .why__grid { inline-size: 100%; }

  /* Stack becomes a fixed focal area; panels overlap in one spot. */
  .why--pinned .why__stack {
    display: block;
    min-block-size: 60vh;
  }
  .why--pinned .why__index {
    display: block;
    position: absolute;
    inset-block-start: -3.5rem;
    inset-inline-end: 0;
    font-size: clamp(7rem, 13vw, 11rem);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
  }
  /* In focus mode panels lose card chrome — pure editorial content. */
  .why--pinned .reason-panel {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .why--pinned .reason-panel__icon {
    inline-size: 68px;
    block-size: 68px;
  }
}

/* === Unit 6: Numbers & Proof — asymmetric count-up bento ================== */
.numbers {
  background:
    radial-gradient(50% 45% at 0% 0%, #f1eaf4 0%, rgba(241, 234, 244, 0) 55%),
    linear-gradient(180deg, #fbfaff 0%, #f4f1fa 100%);
}
.numbers__blob {
  inset-block-end: -120px;
  inset-inline-end: -100px;
  inline-size: 360px;
  block-size: 360px;
  background: radial-gradient(circle at 50% 50%, #e7e1f5, rgba(231, 225, 245, 0));
  opacity: 0.5;
}

/* Bento: 1 col (mobile) → 2 col (small) → asymmetric 6-col (desktop). */
.numbers__bento {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .numbers__bento { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .numbers__bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr;
  }
  /* Feature tile occupies a tall 3×2 block; the rest fill the 6-col grid. */
  .stat--feature { grid-column: span 3; grid-row: span 2; }
  .stat { grid-column: span 3; }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.stat:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-raised);
}
.stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--radius);
  color: var(--color-primary);
  background: var(--color-secondary-200);
  margin-block-end: var(--space-2xs);
}
.stat__num {
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3rem);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.01em;
}
.stat__label {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-body);
  line-height: var(--lh-snug);
}

/* Background diversity (per design-taste: bento cells must not be uniform). */
.stat--tint-lav {
  background: linear-gradient(135deg, #ffffff 0%, #f1eaf4 100%);
}
.stat--tint-coral {
  background: linear-gradient(135deg, #ffffff 0%, #fbe7e6 100%);
}
.stat--tint-coral .stat__icon {
  color: var(--color-accent-600);
  background: var(--color-accent-200);
}

/* Feature tile — deep, calming contrast; the headline metric. */
.stat--feature {
  justify-content: space-between;
  gap: var(--space-md);
  background: var(--grad-deep);
  border: none;
  color: var(--color-on-dark);
  box-shadow: var(--shadow-deep);
}
.stat--feature .stat__icon {
  color: var(--color-secondary);
  background: rgba(255, 255, 255, 0.1);
  inline-size: 54px;
  block-size: 54px;
}
.stat--feature .stat__num {
  color: #fff;
  font-size: clamp(3rem, 2rem + 4vw, 4.75rem);
}
.stat--feature .stat__label {
  color: var(--color-secondary);
  font-size: var(--fs-lead);
}

/* Honest closing note */
.numbers__note {
  margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  max-inline-size: 56ch;
  margin-inline: auto;
  text-align: center;
}
.numbers__note-lead {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-snug);
}
.numbers__note-fine {
  margin-block-start: var(--space-md);
  font-size: var(--fs-lead);
  color: var(--color-body);
  line-height: var(--lh-body);
}

/* === Unit 7: Beliefs — "myth → truth" accordion ========================== */
.beliefs {
  background:
    radial-gradient(55% 45% at 100% 0%, #f3dedd 0%, rgba(243, 222, 221, 0) 55%),
    linear-gradient(180deg, #fbfaff 0%, #f4eff7 100%);
}
.beliefs__blob {
  inset-block-start: 8%;
  inset-inline-start: -120px;
  inline-size: 340px;
  block-size: 340px;
  background: radial-gradient(circle at 50% 50%, #e6dcf2, rgba(230, 220, 242, 0));
  opacity: 0.5;
}

.beliefs__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Accordion item */
.belief {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.belief.is-open {
  border-inline-start-color: var(--color-accent);
  box-shadow: var(--shadow-raised);
}
.belief h3 { margin: 0; }

/* Header (the myth, tappable) */
.belief__head {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.35rem) clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  text-align: start;
  font-family: var(--font-primary);
  color: var(--color-heading);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.belief__head:hover { background-color: rgba(30, 32, 83, 0.025); }

.belief__myth {
  flex: 1;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* Myth / truth markers */
.belief__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--radius-pill);
}
.belief__mark--myth {
  color: var(--color-accent-600);
  background: var(--color-accent-200);
}
.belief__mark--truth {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-300) 100%);
}

/* Chevron rotates when open */
.belief__chevron {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-muted);
  transition: transform var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.belief.is-open .belief__chevron {
  transform: rotate(180deg);
  color: var(--color-accent);
}

/* Expanding panel — animated via grid-template-rows (0fr → 1fr). No JS
   height measurement; transform/opacity-friendly, reduced-motion safe. */
.belief__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.belief.is-open .belief__panel {
  grid-template-rows: 1fr;
}
.belief__panel-inner {
  overflow: hidden;
}
.belief__truth {
  display: flex;
  gap: var(--space-sm);
  padding: 0 clamp(1rem, 0.85rem + 0.8vw, 1.5rem) clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-body);
}
.belief__truth > span:last-child {
  /* Align the truth text with the myth text above (myth marker + gap width) */
  padding-block-start: 2px;
}

/* Closing CTA */
.beliefs__cta {
  display: flex;
  justify-content: center;
  margin-block-start: clamp(2rem, 1.2rem + 2.5vw, 3rem);
}

/* Reduced motion — open/close instantly. */
@media (prefers-reduced-motion: reduce) {
  .belief__panel { transition: none; }
  .belief__chevron { transition: none; }
}

/* === Unit 8: Closing CTA — deep, warm conversion moment ================== */
.closing {
  position: relative;
  padding-block: clamp(4.5rem, 3rem + 7vw, 8rem);
  background: var(--grad-deep);
  color: var(--color-on-dark);
  overflow: hidden;
  text-align: center;
}
/* Soft coral glow — warmth, never a flat fill (rhythm vs the deep footer). */
.closing__glow {
  position: absolute;
  inset-block-start: -10%;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: min(680px, 90%);
  block-size: 60%;
  background: var(--grad-accent-glow);
  pointer-events: none;
  z-index: 0;
}

.closing__inner {
  position: relative;
  z-index: 1;
  max-inline-size: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Turtle medallion (callback to the method section) */
.closing__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 92px;
  block-size: 92px;
  border-radius: var(--radius-pill);
  color: var(--color-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  margin-block-end: var(--space-lg);
}

.closing__title {
  font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.75rem);
  font-weight: var(--fw-extrabold);
  color: #fff;
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-inline-size: 20ch;
}
.closing__text {
  margin-block-start: var(--space-md);
  font-size: var(--fs-lead);
  color: var(--color-on-dark-muted);
  line-height: var(--lh-body);
  max-inline-size: 52ch;
}
.closing__text--lead {
  color: var(--color-secondary);
  font-weight: var(--fw-semibold);
}

/* Scroll-drawn journey path */
.closing__path {
  color: var(--color-accent);
  margin-block: clamp(2rem, 1.2rem + 2.5vw, 3rem);
  opacity: 0.9;
}

/* Primary CTA with a nested "island" icon (button-in-button) */
.closing__cta { margin-block-start: var(--space-sm); }
.closing__btn {
  gap: var(--space-sm);
  padding-inline-end: 0.5rem;        /* tighten so the icon island sits flush */
}
.closing__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.22);
  transition: transform var(--dur-fast) var(--ease-out);
}
.closing__btn:hover .closing__btn-icon {
  transform: translateX(-4px);       /* RTL: nudges toward the start */
}
[dir="ltr"] .closing__btn:hover .closing__btn-icon {
  transform: translateX(4px);
}

/* WhatsApp helper line */
.closing__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-lg);
  padding-block: var(--space-2xs);
  font-size: var(--fs-body);
  color: var(--color-on-dark-muted);
  transition: color var(--dur-fast) var(--ease-out);
  max-inline-size: 48ch;
}
.closing__whatsapp:hover { color: #fff; }
.closing__whatsapp-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: #25d366;               /* WhatsApp green — recognizable affordance */
}

/* Mobile — tighten the WhatsApp line layout */
@media (max-width: 767px) {
  .closing__whatsapp {
    flex-direction: column;
    text-align: center;
    gap: var(--space-xs);
  }
}