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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-body-weight);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line);
  color: var(--color-ink);
  background: var(--color-surface);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section { padding-block: var(--space-16); }
.section--dark { background: var(--color-dark-surface); color: var(--color-on-dark); }

.section-header { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); }

.section-title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-h2-weight);
  font-size: var(--font-h2-size);
  line-height: var(--font-h2-line);
  color: var(--color-ink);
}
.section--dark .section-title { color: var(--color-on-dark); }

.section-lead {
  font-family: var(--font-family-body);
  font-weight: var(--font-body-weight);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line);
  color: var(--color-muted);
}
.section--dark .section-lead { color: var(--color-on-dark-muted); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
.card--outline {
  background: transparent;
  border-color: rgba(251, 251, 252, 0.16);
}

.card-title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-h3-weight);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line);
  color: var(--color-ink);
}
.section--dark .card-title { color: var(--color-on-dark); }

.card-desc {
  font-family: var(--font-family-body);
  font-weight: var(--font-body-weight);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line);
  color: var(--color-muted);
}
.section--dark .card-desc { color: var(--color-on-dark-muted); }

.badge-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-badge);
  display: grid;
  place-items: center;
  background: var(--color-border);
  flex-shrink: 0;
}
.badge-icon img { width: 24px; height: 24px; }
.badge-icon--flush { background: transparent; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-badge);
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 16px;
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  border: none;
}
.btn--primary { background: var(--color-accent); color: var(--color-on-dark); }

@media (min-width: 768px) {
  .container { padding-inline: 40px; }
  .section { padding-block: 80px; }
}
@media (min-width: 1024px) {
  .container { padding-inline: 64px; }
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
}
.navbar__logo img { height: 24px; width: auto; }
.navbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.navbar__toggle img { width: 24px; height: 24px; }

.navbar__links {
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-6);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.navbar__links.is-open { transform: translateX(0); }
.navbar__links a {
  padding: var(--space-4);
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-ink);
  border-radius: 8px;
}
.navbar__links a:hover { background: var(--color-border); }

@media (min-width: 768px) {
  .navbar__toggle { display: none; }
  .navbar__links {
    position: static;
    inset: auto;
    flex-direction: row;
    align-items: center;
    background: none;
    padding: 0;
    transform: none;
    gap: var(--space-6);
  }
  .navbar__links a { padding: var(--space-2) var(--space-3); font-size: 16px; }
}

.hero__inner { display: flex; flex-direction: column; gap: var(--space-8); }

.hero__title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-hero-weight);
  font-size: var(--font-hero-size);
  line-height: var(--font-hero-line);
  display: flex;
  flex-direction: column;
  color: var(--color-ink);
}
.hero__title-accent { color: var(--color-accent); }

.hero__subtitle { margin-top: var(--space-4); color: var(--color-muted); max-width: 42ch; }
.hero__subtitle strong { color: var(--color-ink); font-weight: 700; }

.hero__stats {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-3);
  margin-top: var(--space-6);
}
.hero__stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; }
.hero__stat-value {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: var(--font-h2-size);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.hero__stat-value--rating img { width: 20px; height: 20px; }
.hero__stat-label {
  font-family: var(--font-family-body);
  font-weight: var(--font-label-weight);
  font-size: var(--font-label-size);
  color: var(--color-muted);
}

.hero__media { display: flex; justify-content: center; }
.hero__media img { width: 100%; max-width: 420px; }

@media (min-width: 1024px) {
  .hero__inner { flex-direction: row; align-items: center; gap: var(--space-16); }
  .hero__content { flex: 0 0 55%; }
  .hero__stats { justify-content: flex-start; }
}

.hero__stores {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
  /* Keep the full-width mobile button column clear of the fixed
     floating-actions stack (64px wide, 24px inset, bottom-right), which
     otherwise visually overlaps these buttons on many phone viewports. */
}

.store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-4);
  background: var(--color-ink);
  border-radius: 16px; /* Matches Figma's explicit 16px radius for app store buttons */
  transition: opacity 0.15s ease;
}
.store-btn:hover { opacity: 0.85; }

.store-btn__icon { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }

.store-btn__text { display: flex; flex-direction: column; gap: var(--space-1); white-space: nowrap; }

.store-btn__label {
  font-family: var(--font-family-body);
  font-weight: var(--font-label-weight);
  font-size: var(--font-label-size);
  color: var(--color-on-dark);
}

.store-btn__wordmark { height: 18px; width: auto; }

@media (min-width: 768px) {
  .hero__stores { flex-direction: row; padding-right: 0; }
  .store-btn { flex: 0 0 auto; }
}

.why__grid { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.why__card { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--space-3); }

@media (min-width: 768px) {
  .why__card { flex: 1 1 calc(50% - var(--space-4)); max-width: calc(50% - var(--space-4)); }
}
@media (min-width: 1024px) {
  .why__grid { justify-content: center; }
  .why__card { flex: 1 1 calc(33.333% - var(--space-4)); max-width: calc(33.333% - var(--space-4)); }
}

.benefits__grid { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.benefits__card { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--space-3); }

@media (min-width: 768px) {
  .benefits__card { flex: 1 1 calc(50% - var(--space-4)); max-width: calc(50% - var(--space-4)); }
}
@media (min-width: 1024px) {
  .benefits__grid { justify-content: center; }
  .benefits__card { flex: 1 1 calc(33.333% - var(--space-4)); max-width: calc(33.333% - var(--space-4)); }
}

.features__list { display: flex; flex-direction: column; gap: var(--space-16); }
.features__item { display: flex; flex-direction: column; gap: var(--space-6); }
.features__image { width: 100%; height: auto; border-radius: 16px; }
.features__bullets { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.features__bullets li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--color-muted);
}
.features__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

@media (min-width: 768px) {
  .features__item { flex-direction: row-reverse; align-items: center; gap: var(--space-8); }
  .features__image { flex: 0 0 45%; width: 30%; height: auto; border-radius: 16px;}
  .features__content { flex: 1; }
}


.about__header { max-width: 640px; }
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.about__card { display: flex; flex-direction: column; gap: var(--space-3); }

@media (min-width: 768px) {
  .about__grid { grid-template-columns: repeat(3, 1fr); }
}

.reviews__carousel { overflow: hidden; }
.reviews__track { display: flex; transition: transform 0.4s ease; }
.reviews__card { flex: 0 0 100%; width: 100%; display: flex; flex-direction: column; gap: var(--space-4); }

@media (min-width: 768px) {
  .reviews__track { gap: var(--space-6); }
  .reviews__card { flex: 0 0 calc((100% - var(--space-6)) / 2); width: calc((100% - var(--space-6)) / 2); }
}
@media (min-width: 1024px) {
  .reviews__card { flex: 0 0 calc((100% - (2 * var(--space-6))) / 3); width: calc((100% - (2 * var(--space-6))) / 3); }
}
.reviews__stars { display: flex; gap: var(--space-1); }
.reviews__stars img { width: 16px; height: 16px; }
.reviews__quote { color: var(--color-ink); }
.reviews__author { display: flex; align-items: center; gap: var(--space-3); }
.reviews__avatar { width: 48px; height: 48px; border-radius: var(--radius-pill); object-fit: cover; }
.reviews__name { font-weight: 700; color: var(--color-ink); }
.reviews__role { font-family: var(--font-family-body); font-size: var(--font-label-size); color: var(--color-muted); }

.reviews__nav { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.reviews__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-accent);
  cursor: pointer;
}
.reviews__arrow:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-dark); }
.reviews__arrow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.faq__list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq__item { background: var(--color-surface); border-radius: 8px; border: 1px solid var(--color-border); overflow: hidden; }
.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-body);
  font-weight: var(--font-body-weight);
  font-size: var(--font-body-size);
  color: var(--color-ink);
  text-align: left;
}
.faq__chevron { width: 12px; height: 8px; flex-shrink: 0; transition: transform 0.2s ease; }
.faq__item.is-open .faq__chevron { transform: rotate(180deg); }

.faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq__answer p { padding: 0 var(--space-6) var(--space-4); color: var(--color-muted); }
.faq__item.is-open .faq__answer { max-height: 240px; }

.footer__inner { display: flex; flex-direction: column; gap: var(--space-8); }
.footer__title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-title-footer-weight);
  font-size: var(--font-title-footer-size);
  color: var(--color-on-dark);
  margin-bottom: var(--space-4);
}
.footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__links a, .footer__links span { color: var(--color-on-dark-muted); }
.footer__logo { height: 24px; width: auto; margin-bottom: var(--space-4); }
.footer__desc { color: var(--color-on-dark-muted); max-width: 48ch; margin-bottom: var(--space-4); }
.footer__social { display: flex; gap: var(--space-4); margin-bottom: var(--space-6); }
.footer__social img { width: 24px; height: 24px; }

@media (min-width: 768px) {
  .footer__inner { flex-direction: row; justify-content: space-between; }
  .footer__col { flex: 1; }
  .footer__col--brand { flex: 1.4; }
}

.floating-actions {
  position: fixed;
  right: max(24px, calc((100vw - var(--container-max)) / 2 + 24px));
  bottom: 24px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.floating-actions__item { display: block; }
.floating-actions__item img { display: block; width: 72px; height: auto; }

@media (min-width: 768px) {
  .floating-actions {
    right: max(40px, calc((100vw - var(--container-max)) / 2 + 40px));
  }
}
@media (min-width: 1024px) {
  .floating-actions {
    right: max(64px, calc((100vw - var(--container-max)) / 2 + 64px));
  }
}