/* ==========================================================================
   ZARREL — Homepage story sections (AKQA-inspired rhythm)
   Illustration → content → illustration → content, then final CTA.
   ========================================================================== */

/* --- Story band ---------------------------------------------------------- */
.stories {
  width: 100%;
  max-width: var(--story-max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 10vw, 7.5rem);
  padding-block: clamp(3rem, 8vw, 6rem) 0;
}

.story {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}

.story__media {
  width: 100%;
  border-radius: var(--radius-illu);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-illu);
  background:
    radial-gradient(80% 70% at 20% 10%, rgba(37, 99, 235, 0.08) 0%, transparent 55%),
    radial-gradient(70% 60% at 90% 80%, rgba(37, 99, 235, 0.06) 0%, transparent 50%),
    linear-gradient(165deg, #f4f7fb 0%, #e8eef7 100%);
  aspect-ratio: var(--illu-aspect);
  position: relative;
}

.story__media svg {
  width: 100%;
  height: 100%;
  display: block;
}

.story__copy {
  width: 100%;
  max-width: 38rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-inline: clamp(0.15rem, 1vw, 0.5rem);
}

.story__title {
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-dark);
  max-width: 16ch;
}

.story__text {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-dark-muted);
  max-width: 42ch;
}

/* --- Final CTA ----------------------------------------------------------- */
.cta {
  width: 100%;
  max-width: var(--story-max-width);
  margin-inline: auto;
  padding-block: clamp(5rem, 12vw, 9rem) clamp(3rem, 8vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
}

.cta__title {
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-dark);
  max-width: 12ch;
}

.cta__text {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-dark-muted);
  max-width: 36ch;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: var(--space-sm);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-btn);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-primary-strong);
  box-shadow: var(--shadow-btn-hover);
}

.btn--ghost {
  background: var(--glass-bg);
  color: var(--color-ink-dark);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(var(--blur-idle));
  backdrop-filter: blur(var(--blur-idle));
  box-shadow: var(--shadow-nav);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--glass-border-strong);
  background: var(--glass-bg-scrolled);
}