/* =========================================================
   Home page
   ========================================================= */

.hero{
  position: relative;
  min-height: 88vh;
  display:flex; align-items:center;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(241,205,211,0.55), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(203,185,227,0.5), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(243,198,163,0.35), transparent 55%),
    var(--cream);
}
.hero-petals, .hero-glow{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.petal{
  position:absolute; top:-8%;
  animation: petalFall linear infinite;
  opacity:.85;
}
.hero-inner{
  position:relative; z-index:2;
  max-width:1180px; margin:0 auto; padding: 0 clamp(20px,5vw,56px);
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:48px; align-items:center;
}
.hero-copy .eyebrow{ margin-bottom:16px; display:inline-block; }
.hero-title{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1.06;
  margin-bottom: 20px;
}
.hero-title em{ font-style: italic; color: var(--blush-deep); }
.hero-sub{
  font-size: 1.12rem; color: var(--plum-quiet); max-width: 480px; line-height:1.7; margin-bottom: 34px;
}
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-bouquet-frame{
  width: min(100%, 420px); aspect-ratio: 1/1.05;
  border-radius: 50% 50% 44% 44% / 55% 55% 45% 45%;
  background: linear-gradient(160deg, var(--white), var(--cream-deep));
  box-shadow: var(--shadow-deep);
  display:flex; align-items:center; justify-content:center;
  animation: gentlePulse 7s ease-in-out infinite;
}
.hero-bouquet-frame svg{ width:78%; }

/* features */
.features{ padding: 100px clamp(20px,5vw,56px) 40px; max-width:1180px; margin:0 auto; }
.features-head{ text-align:center; margin-bottom: 54px; }
.features-head .knot-divider{ margin-top:18px; }
.feature-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 24px; }
.feature-card{
  padding: 32px 26px; text-align:left;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.feature-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-deep); }
.feature-icon{
  width:52px; height:52px; border-radius:16px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--blush), var(--lavender));
}
.feature-icon svg{ width:26px; height:26px; }
.feature-card h3{ font-family: var(--font-serif-alt); font-size:1.2rem; margin-bottom:8px; }
.feature-card p{ color: var(--plum-quiet); font-size:0.92rem; line-height:1.6; }

/* how it works */
.how{ padding: 60px clamp(20px,5vw,56px); max-width:1180px; margin: 40px auto 0; }
.how-steps{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:26px; margin-top:44px; }
.how-step{ position:relative; padding: 30px 24px; }
.how-step .step-num{
  font-family: var(--font-display); font-size:2.4rem; color: var(--gold); opacity:.6; margin-bottom:10px;
}
.how-step h4{ font-family: var(--font-serif-alt); font-size:1.08rem; margin-bottom:8px; }
.how-step p{ color: var(--plum-quiet); font-size:0.9rem; line-height:1.6; }

/* faq */
.faq-section{ padding: 80px clamp(20px,5vw,56px) 20px; max-width:800px; margin:0 auto; }
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background: var(--white); border-radius: var(--radius-m); border: 1px solid rgba(62,44,63,0.06);
  padding: 6px 22px; box-shadow: var(--shadow-soft);
}
.faq-item summary{
  cursor:pointer; padding: 16px 0; font-family: var(--font-serif-alt); font-size:1.02rem;
  list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:1.4rem; color: var(--gold); margin-left:12px; transition: transform .25s var(--ease); }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ color: var(--plum-quiet); font-size:0.92rem; line-height:1.65; padding-bottom:18px; margin:0; }

/* CTA band */
.cta-band{
  margin: 90px auto 0; max-width:1180px; padding: 0 clamp(20px,5vw,56px);
}
.cta-inner{
  border-radius: var(--radius-l);
  padding: 60px clamp(24px,6vw,80px);
  background: linear-gradient(135deg, var(--lavender), var(--blush));
  text-align:center; color: var(--plum);
  position:relative; overflow:hidden;
}
.cta-inner h2{ font-family: var(--font-display); font-size: clamp(1.8rem,3.6vw,2.6rem); margin-bottom:14px; }
.cta-inner p{ color: rgba(62,44,63,0.75); margin-bottom: 28px; }