/*
  Awakening Landing Page Styles
  - Mobile-first, responsive CSS with custom properties and BEM-like classes
  - Organization: variables, base, layout, components, utilities
*/

/* =====================
   Theme Tokens
   ===================== */
:root {
  --color-bg: #ffffff;
  --color-surface: #f7f8fb;
  --color-primary: #e94b6a; /* pink CTA */
  --color-primary-600: #d93a59;
  --color-text: #17171a;
  --color-muted: #6b7280;
  --color-border: #e5e7eb;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --shadow-md: 0 10px 30px rgba(0,0,0,0.08);
  --shadow-lg: 0 18px 50px rgba(0,0,0,0.12);

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

  --container: 1120px;

  /* Fluid typography */
  --fs-300: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
  --fs-400: clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
  --fs-500: clamp(1.125rem, 1rem + 0.7vw, 1.375rem);
  --fs-600: clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem);
  --fs-700: clamp(1.75rem, 1.4rem + 2.2vw, 2.5rem);
  --fs-800: clamp(2rem, 1.2rem + 4vw, 3rem);
}

/* =====================
   Base
   ===================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: var(--fs-400);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

img { max-width: 100%; height: auto; display: block; }

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}
.narrow { max-width: 760px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--sp-4); }
h1 { font-size: var(--fs-800); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); }

p { margin: 0 0 var(--sp-4); }
.lead { font-size: var(--fs-500); color: var(--color-muted); }
.muted { color: var(--color-muted); font-size: var(--fs-300); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
}
.skip-link:focus { left: 0; background:#000; color:#fff; padding: var(--sp-2) var(--sp-4); z-index: 1000; }

.visually-hidden { position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }

/* =====================
   Buttons
   ===================== */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 0.8rem 1.2rem;
  background: var(--color-primary);
  color: #fff; text-decoration: none; font-weight: 600;
  border-radius: 999px; box-shadow: var(--shadow-md);
  transition: transform .06s ease, background .2s ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:focus-visible { outline: 3px solid color-mix(in oklab, var(--color-primary) 60%, white); outline-offset: 2px; }

.button--ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); box-shadow: none; }
.button--ghost:hover { background: var(--color-surface); }
.button--primary { background: var(--color-primary); }

/* =====================
   Header / Nav
   ===================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) 0; gap: var(--sp-4); }
.brand img { display:block; }

.nav { display:flex; align-items:center; gap: var(--sp-4); }
.nav__toggle { background:none; border:1px solid var(--color-border); padding: .5rem; border-radius: var(--radius-sm); display: inline-flex; }
.nav__toggle:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

.nav__menu { list-style:none; display:none; padding:0; margin:0; }
.nav__menu a { text-decoration:none; color: var(--color-text); padding: .5rem .75rem; border-radius: .5rem; }
.nav__menu a:focus-visible, .nav__menu a:hover { background: var(--color-surface); }

/* Mobile expanded */
.nav--open .nav__menu { display:block; position:absolute; top:100%; right:1rem; background:#fff; border:1px solid var(--color-border); padding: .5rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.header-cta { display:none; gap: var(--sp-2); }

@media (min-width: 768px) {
  .nav__toggle { display:none; }
  .nav__menu { display:flex; gap: var(--sp-2); }
  .header-cta { display:flex; }
}

/* =====================
   Sections
   ===================== */
.section { padding: var(--sp-12) 0; }
.section__title { text-align:center; margin-bottom: var(--sp-10); }

/* Hero */
.hero__grid { display:grid; gap: var(--sp-8); align-items:center; }
.hero__actions { display:flex; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; }
.hero__meta { list-style:none; display:flex; gap: var(--sp-3); padding:0; margin: var(--sp-4) 0 0; color: var(--color-muted); }
.hero__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.1fr 1fr; }
}

/* Checklist / Carousel */
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.carousel__track { list-style:none; padding:0; margin:0; display:flex; transition: transform 350ms ease; }
.carousel__slide { min-width: 100%; padding: 0; }
.carousel__control { position:absolute; top:50%; transform: translateY(-50%); background:#fff; border:1px solid var(--color-border); border-radius: 50%; width: 44px; height: 44px; display:grid; place-items:center; box-shadow: var(--shadow-md); }
.carousel__control--prev { left: .5rem; }
.carousel__control--next { right: .5rem; }
.carousel__control:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.carousel__dots { display:flex; justify-content:center; gap: .5rem; margin-top: var(--sp-4); }
.carousel__dots button { width:10px; height:10px; border-radius:50%; background:#d1d5db; border:0; }
.carousel__dots button[aria-current="true"] { background: var(--color-primary); }

.card { background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-8); box-shadow: var(--shadow-md); }
.card--center { text-align:center; }
.list { margin: 0 0 var(--sp-4); padding-left: 1.25rem; text-align:left; }
.list--checks li { margin-bottom: .25rem; }

.cta-inline { display:flex; justify-content:center; margin-top: var(--sp-8); }

/* Benefits */
.benefits__grid { display:grid; gap: var(--sp-8); }
.benefit { display:grid; gap: var(--sp-4); align-items:center; }
.benefit__media img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.benefit__title { margin-bottom: var(--sp-2); }

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

/* Testimonials */
.quote blockquote { font-size: var(--fs-500); margin: 0 0 var(--sp-4); text-align: center; }
.quote__author { display:flex; align-items:center; justify-content:center; gap: var(--sp-3); }
.avatar { border-radius: 50%; }

/* Footer */
.site-footer { padding: var(--sp-12) 0; background: var(--color-surface); border-top: 1px solid var(--color-border); }
.site-footer__inner { display:flex; align-items:center; justify-content: space-between; gap: var(--sp-4); }
.store-badges { display:flex; gap: var(--sp-2); }

/* =====================
   Utilities (<= 8)
   ===================== */
.u-center { display:grid; place-items:center; }
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-hide-on-mobile { display:none; }
@media (min-width:600px){ .u-hide-on-mobile { display:initial; } }
.u-truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }