/* Home: hero (Figma 307:3059, background 189:10913) */
.s-hero {
  position: relative; /* no z-index: the bg sits on the root's negative layer, behind the overlaid header */
  overflow-x: clip;
  padding-top: calc(var(--header-h) + var(--space-2) + var(--space-12));
  padding-bottom: var(--space-20);
  text-align: center;
}

/* Warm gradient + clouds. The header overlays the hero (navbar has -72px margin), so this sits behind it. */
.s-hero__bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 866px;
  background: linear-gradient(180deg, var(--hero-grad-top) 0%, var(--hero-grad-mid) 41.35%, transparent 100%);
  pointer-events: none;
}
/* Clouds: the wrapper carries the scroll parallax (--hero-scroll, set by js/sections/hero.js),
   the image drifts in from its edge on load and then floats. */
.s-hero__cloud-wrap {
  position: absolute;
  transform: translate3d(0, calc(var(--hero-scroll, 0) * var(--cloud-speed) * 1px), 0);
  will-change: transform;
}
.s-hero__cloud-wrap--left { --cloud-speed: 0.18; top: 0; left: 0; width: min(565px, 48vw); }
.s-hero__cloud-wrap--right { --cloud-speed: 0.3; top: 98px; right: 0; width: min(391px, 34vw); }
.s-hero__cloud { display: block; width: 100%; height: auto; }
.s-hero__cloud--left {
  --cloud-from: -48px;
  animation:
    s-hero-cloud-in 1.4s var(--ease-out) both,
    s-hero-float 9s var(--ease-in-out) 1.4s infinite alternate;
}
.s-hero__cloud--right {
  --cloud-from: 48px;
  animation:
    s-hero-cloud-in 1.4s var(--ease-out) 0.15s both,
    s-hero-float 11s var(--ease-in-out) 1.55s infinite alternate-reverse;
}
@keyframes s-hero-cloud-in {
  from { opacity: 0; transform: translate3d(var(--cloud-from), 8px, 0) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes s-hero-float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -14px, 0); }
}

/* Vertical rhythm, set per breakpoint below:
   --hero-gap between every row, --hero-badge-gap badge to title, --hero-text-gap title to text,
   --hero-cta-gap text to buttons. The badge and copy margins turn the shared gap into their own. */
.s-hero { --hero-gap: var(--space-8); --hero-badge-gap: var(--space-8); --hero-text-gap: var(--space-6); --hero-cta-gap: var(--space-8); }
.s-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hero-gap);
}
.s-hero__badge-wrap { margin-bottom: calc(var(--hero-badge-gap) - var(--hero-gap)); }

/* Badge: release announcement with a tinted icon dot */
.s-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
  height: 40px;
  padding: var(--space-2) var(--space-4) var(--space-2) 5px;
  border: 1px solid var(--black-4);
  border-radius: var(--radius-pill);
  background: var(--base-high);
  box-shadow: 0 12px 8px 0 rgb(0 0 0 / 0.03);
  color: var(--text-strong);
  font-weight: var(--fw-medium);
  font-size: var(--body-sm-size);
  line-height: 1.2;
  letter-spacing: var(--body-sm-ls);
  white-space: nowrap;
}
.s-hero__badge-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: rgb(190 162 61 / 0.2);
  color: var(--cyan-600);
}
.s-hero__badge-text { overflow: hidden; text-overflow: ellipsis; }
.s-hero__badge-new { color: var(--cyan-600); }
.s-hero__badge {
  transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease);
}
.s-hero__badge:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 3px; }
@media (hover: hover) {
  .s-hero__badge:hover { border-color: var(--black-10); transform: translateY(-1px); }
}

/* Headline + subtext */
.s-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hero-text-gap);
  margin-bottom: calc(var(--hero-cta-gap) - var(--hero-gap));
  max-width: 808px;
}
.s-hero__title { text-wrap: balance; }
.s-hero__br { display: none; }
.s-hero__text {
  max-width: 614px;
  color: var(--text-medium);
  font-size: var(--para-lg-size);
  line-height: 1.5;
  letter-spacing: var(--para-lg-ls);
}

/* CTAs: embossed dark pill + soft light pill */
.s-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  filter: drop-shadow(var(--shadow-cta));
}
.s-hero__btn {
  display: inline-flex;
  height: 56px;
  padding: 2px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.s-hero__btn:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 3px; }
.s-hero__btn:active { transform: scale(0.98); transition-duration: var(--dur-fast); }
.s-hero__btn-face {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur) var(--ease);
}
.s-hero__btn-icon { flex: none; transition: transform var(--dur-slow) var(--ease-spring); }

.s-hero__btn--primary {
  background: linear-gradient(180deg, transparent 0%, var(--amber-950) 100%), var(--btn-emboss-ring);
  color: var(--text-negative);
  font-size: var(--body-md-size);
  letter-spacing: var(--body-md-ls);
}
.s-hero__btn--primary .s-hero__btn-face {
  gap: var(--space-10);
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-8);
  background: linear-gradient(180deg, transparent 0%, var(--btn-emboss-glow) 100%), var(--amber-950);
}
/* Thin divider centred in the gap between label and arrow */
.s-hero__btn--primary .s-hero__btn-face > span { position: relative; }
.s-hero__btn--primary .s-hero__btn-face > span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--space-5));
  width: 1px;
  height: 20px;
  background: var(--btn-emboss-divider);
  transform: translateY(-50%);
}
/* Arrow slides out to the right and comes back in from the left */
.s-hero__btn--primary .s-hero__btn-icon { overflow: visible; }
@keyframes s-hero-arrow {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(10px); opacity: 0; }
  46% { transform: translateX(-10px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.s-hero__btn--secondary {
  /* Thin even outline, same as the light pricing button (.btn--cta-light) */
  background: linear-gradient(180deg, var(--white-40) 45.5%, var(--btn-soft-ring) 100%), var(--base-high);
  box-shadow: 0 0 0 0.5px var(--border-thin), 0 2px 3px var(--black-10);
  color: var(--text-strong);
  font-size: var(--body-sm-size);
  letter-spacing: var(--body-sm-ls);
}
.s-hero__btn--secondary .s-hero__btn-face {
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5);
  background: linear-gradient(180deg, var(--btn-soft-inner) 0%, var(--white-10) 100%), var(--stone-50);
}
@media (hover: hover) {
  .s-hero__btn:hover { transform: translateY(-1px); }
  .s-hero__btn:active { transform: translateY(0) scale(0.98); }
  .s-hero__btn--primary:hover { box-shadow: 0 10px 24px -8px rgb(70 25 1 / 0.4); }
  .s-hero__btn--primary:hover .s-hero__btn-face { background-color: var(--orange-900); }
  .s-hero__btn--primary:hover .s-hero__btn-icon { animation: s-hero-arrow var(--dur-slow) var(--ease-out); }
  .s-hero__btn--secondary:hover { box-shadow: 0 0 0 0.5px var(--border-thin), var(--shadow-md); }
  .s-hero__btn--secondary:hover .s-hero__btn-face { background-color: var(--base-high); }
  .s-hero__btn--secondary:hover .s-hero__btn-icon { transform: scale(1.18); }
}

/* Feature chips + rating */
.s-hero__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.s-hero__chips {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  justify-items: start;
  gap: var(--space-3) var(--space-6);
}
.s-hero__chip,
.s-hero__rating-text {
  color: var(--text-medium);
  font-size: var(--para-md-size);
  line-height: 1.5;
  letter-spacing: var(--para-md-ls);
  white-space: nowrap;
}
.s-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.s-hero__chip svg { flex: none; color: var(--base-negative); }
.s-hero__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
}
.s-hero__stars {
  display: inline-flex;
  gap: var(--space-1);
  color: var(--yellow-600);
}

/* Trust points: icons sit in a soft tile; a short hairline separates them from the rating */
.s-hero__chip { color: var(--text-strong); }
.s-hero__chip svg {
  box-sizing: content-box; width: 13px; height: 13px; padding: 5px;
  border-radius: var(--radius-pill); background: var(--peach-100); color: var(--amber-800);
}
.s-hero__rating { position: relative; padding-top: var(--space-6); }
.s-hero__rating::before { content: ""; position: absolute; top: 0; left: 50%; width: 48px; height: 1px; translate: -50% 0; background: var(--border-thin); }
.s-hero__rating-text strong { font-weight: var(--fw-semibold); color: var(--text-strong); }

@media (min-width: 640px) {
  .s-hero__br { display: inline; }
}

@media (min-width: 768px) {
  .s-hero { padding-top: calc(var(--header-h) + var(--space-2) + var(--space-16)); padding-bottom: var(--space-24); }
  .s-hero { --hero-gap: var(--space-10); --hero-badge-gap: 16px; --hero-text-gap: 16px; --hero-cta-gap: 30px; }
  .s-hero__meta { gap: var(--space-8); }
  .s-hero__chips { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); }
  .s-hero__chip + .s-hero__chip { position: relative; }
  .s-hero__chip + .s-hero__chip::before { content: ""; position: absolute; left: calc(var(--space-8) / -2); top: 50%; width: 1px; height: 18px; translate: 0 -50%; background: var(--border-thin); }
  .s-hero__chip,
  .s-hero__rating-text {
    font-size: var(--para-lg-size);
    letter-spacing: var(--para-lg-ls);
  }
}

/* Desktop: 150px top/bottom as in the frame (includes the 72px overlaid header) */
@media (min-width: 1024px) {
  .s-hero {
    padding-top: 150px;
    padding-bottom: 110px;
  }
}

@media (min-width: 1280px) {
  .s-hero { --hero-badge-gap: 20px; --hero-text-gap: 20px; --hero-cta-gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .s-hero__cloud { animation: none; }
  .s-hero__cloud-wrap { transform: none; }
  .s-hero__btn,
  .s-hero__badge { transition: none; }
  .s-hero__btn:hover,
  .s-hero__btn:active,
  .s-hero__badge:hover { transform: none; }
  .s-hero__btn:hover .s-hero__btn-icon { animation: none; }
}