:root {
  --pink: #e54478;
  --pink-light: #fce7ef;
  --dark: #3a2330;
  --white: #ffffff;
  --bg: #fff7fa;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --radius: 16px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  background: var(--bg);
  color: var(--dark);
  line-height: 1.5;
}
img { width: 100%; display: block; object-fit: cover; }
a { color: inherit; text-decoration: none; }
.container { width: min(1120px, 100% - 32px); margin: 0 auto; }
h1, h2 { font-family: "Cormorant Garamond", serif; line-height: 1.1; margin: 0 0 var(--space-2); }
h1 { font-size: clamp(2.5rem, 8vw, 4.2rem); }
h2 { font-size: clamp(2rem, 7vw, 3rem); text-align: center; }
.kicker { text-transform: uppercase; color: var(--pink); font-weight: 700; letter-spacing: .04em; text-align: center; margin-bottom: var(--space-1); }

.site-header { position: sticky; top: 0; background: var(--white); z-index: 20; border-bottom: 1px solid #f0d8e2; }
.header-content { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.brand { display: flex; align-items: center; gap: var(--space-1); }
.brand-icon { width: 34px; height: auto; flex: 0 0 34px; object-fit: contain; }
.brand strong { display: block; font-size: 1.2rem; }
.brand small { font-size: .72rem; display: block; }
.desktop-nav { display: none; gap: var(--space-3); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: var(--space-1); }
.menu-toggle { min-height: 48px; min-width: 48px; border: 0; background: transparent; font-size: 1.8rem; }
.mobile-menu { display: none; padding: 0 var(--space-2) var(--space-2); background: var(--white); }
.mobile-menu.open { display: grid; gap: var(--space-1); }

.btn { min-height: 48px; padding: 12px 24px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.btn-primary { background: var(--pink); color: var(--white); }
.btn-light { background: var(--white); color: var(--pink); }

.hero { padding: var(--space-3) 0; }
.hero-grid { display: grid; gap: var(--space-2); }
.hero-text span { color: var(--pink); }
.hero-image img { border-radius: var(--radius); min-height: 280px; }

.trust-strip, .benefits, .before-after, .testimonial, .offer, .space { padding: var(--space-4) 0; }
.trust-grid, .benefits-grid { display: grid; gap: var(--space-2); grid-template-columns: 1fr 1fr; }
.trust-grid article, .benefits-grid article { background: var(--white); border-radius: 12px; padding: var(--space-2); font-weight: 600; text-align: center; }

.scroll-row { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); scroll-snap-type: x mandatory; }
.scroll-row figure { min-width: 170px; margin: 0; position: relative; scroll-snap-align: start; }
.scroll-row img { height: 180px; border-radius: 12px; }
figcaption { position: absolute; left: 8px; bottom: 8px; background: var(--pink); color: var(--white); border-radius: 999px; font-size: .75rem; padding: 4px 10px; font-weight: 700; }
.note { text-align: center; color: #8b6374; font-weight: 500; }

.testimonial-card { background: var(--white); border-radius: var(--radius); padding: var(--space-3); box-shadow: 0 10px 28px rgba(58, 35, 48, .08); }
.person { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.person img { width: 56px; height: 56px; border-radius: 50%; }
.person small { display: block; }

.offer-card { background: linear-gradient(120deg, #e54478, #ef78a0); border-radius: var(--radius); color: var(--white); padding: var(--space-3); display: grid; gap: var(--space-2); }
.offer-card .kicker { color: #ffffff; }
.offer-card h2 { text-align: left; }
.offer-card img { border-radius: 12px; min-height: 220px; }
.badge { display: inline-block; border: 1px solid #ffd5e3; border-radius: 999px; padding: 10px 14px; margin-bottom: var(--space-2); font-weight: 700; }
.offer .btn { width: 100%; }

.final-cta { background: var(--pink); color: var(--white); padding: var(--space-4) 0; }
.final-cta-content { display: grid; gap: var(--space-2); text-align: center; }
.final-cta .btn { width: min(100%, 360px); margin: 0 auto; }
.site-footer { background: var(--dark); color: var(--white); padding: var(--space-3) 0; }
.footer-grid { display: grid; gap: var(--space-2); }

@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .benefits-grid { grid-template-columns: repeat(4, 1fr); }
  .offer-card { grid-template-columns: 1.1fr .9fr; align-items: center; }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .desktop-nav { display: flex; }
  .menu-toggle, .mobile-menu { display: none !important; }
  .hero { padding: 64px 0; }
}