/* ── Homepage-specific styles ── */

/* animations */
@keyframes confettiFall {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
@keyframes blink       { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes fadeSlideUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes cardFloat   { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

/* fade-in on scroll */
.h-fade { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.h-fade.visible { opacity:1; transform:none; }

/* eyebrow */
.h-eyebrow {
  display:block;
  font-family:'Jost',sans-serif;
  font-size:.72rem; font-weight:600; letter-spacing:3px;
  text-transform:uppercase;
  color:#7A5C25; /* WCAG 5.7:1 on cream */
  margin-bottom:16px;
}
.h-eyebrow--light { color:var(--cream); }

/* section scaffolding */
.h-section      { padding:80px 48px; }
.h-section-inner { max-width:1100px; margin:0 auto; }
.h-section-header { text-align:center; margin-bottom:56px; }
.h-section-header h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,3.5vw,3rem); font-weight:400; margin-bottom:12px;
}
.h-section-header p { color:#5C5550; font-weight:300; max-width:480px; margin:0 auto; }

/* ── NAV mobile hide ── */
@media (max-width:768px) { .nav-links { display:none !important; } }

/* ── HERO ── */
.h-hero {
  padding:100px 48px 80px;
  max-width:1100px; margin:0 auto; position:relative;
}
.h-hero-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:center; position:relative; z-index:1;
}
.h-hero-heading {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(3rem,5vw,4.4rem); font-weight:400;
  line-height:1.1; letter-spacing:-.5px;
  margin-bottom:24px;
  animation:fadeSlideUp .7s ease .1s both;
}
.h-hero-heading em { color:#7A5C25; font-style:italic; } /* 5.7:1 on cream — passes WCAG AA */
.h-hero-eyebrow-wrap { animation:fadeSlideUp .7s ease both; }
.h-hero-body {
  font-size:1.05rem; color:#5C5550; font-weight:300;
  line-height:1.75; max-width:440px; margin-bottom:40px;
  animation:fadeSlideUp .7s ease .2s both;
}
.h-hero-cta { display:flex; gap:16px; flex-wrap:wrap; animation:fadeSlideUp .7s ease .3s both; }
.h-hero-tagline {
  display:flex; align-items:center; gap:7px;
  margin-top:14px; color:#5C5550; font-size:1rem; font-weight:500;
  animation:fadeSlideUp .7s ease .4s both;
}
.h-hero-review {
  margin-top:20px; font-size:.82rem; color:#5C5550; font-weight:300;
  animation:fadeSlideUp .7s ease .5s both;
}
.h-hero-review a { color:#7A5C25; font-weight:500; text-decoration:none; border-bottom:1px solid var(--gold-light); }

/* hero card */
.h-hero-card-wrap  { display:flex; justify-content:center; }
/* entry wrapper handles the one-shot slide-up; card handles the infinite float.
   Splitting onto separate elements lets the browser composite both animations. */
.h-hero-card-entry { animation:fadeSlideUp .7s ease .6s both; max-width:460px; width:100%; }
.h-hero-card {
  background:var(--white); border:1px solid var(--gold-light);
  border-radius:8px; padding:36px; width:100%;
  box-shadow:var(--shadow-lg); position:relative;
  will-change:transform;
  animation:cardFloat 6s ease-in-out 1.5s infinite;
}
.h-hero-card-quote {
  position:absolute; top:-22px; left:30px;
  font-family:'Cormorant Garamond',serif;
  font-size:6rem; color:var(--gold-light); line-height:1; pointer-events:none;
}
.h-hero-card-tags { display:flex; gap:8px; flex-wrap:wrap; min-height:24px; margin-bottom:18px; }
.h-hero-tag {
  background:var(--gold-pale); color:#7A5C25;
  font-family:'Jost',sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase;
  padding:4px 10px; border-radius:2px;
}
.h-hero-card-text {
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem; line-height:1.8; font-weight:400;
  color:var(--charcoal-mid); font-style:italic; min-height:170px;
}
.h-cursor {
  display:inline-block; width:2px; height:1em;
  background:var(--gold); margin-left:2px; vertical-align:text-bottom;
}
.h-cursor.blinking { animation:blink 1s step-end infinite; }
.h-hero-card-footer {
  margin-top:20px; padding-top:16px; border-top:1px solid var(--gray-light);
  display:flex; justify-content:space-between; align-items:center;
}
.h-card-time   { font-size:.78rem; color:#5C5550; letter-spacing:.5px; }
.h-card-dots   { display:flex; gap:4px; align-items:center; }
/* buttons — 24×24px minimum tap target (WCAG 2.5.5) */
.h-card-dot {
  width:6px; min-width:24px; min-height:24px;
  border-radius:12px; background:var(--gold-light);
  border:none; padding:0; cursor:pointer;
  transition:min-width .3s, background .3s;
}
.h-card-dot.active { min-width:32px; background:var(--gold); }
.h-card-stars  { color:var(--gold); letter-spacing:2px; font-size:.8rem; }

/* floating petals */
.h-petals { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.h-petal  { position:absolute; top:-30px; border-radius:50% 0 50% 50%; animation:confettiFall linear infinite; }

/* ── STATS BAR ── */
.h-stats {
  background:var(--charcoal); padding:18px 48px;
  display:flex; justify-content:center; gap:60px; flex-wrap:wrap;
}
.h-stat        { display:flex; align-items:center; gap:10px; }
.h-stat-val    { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:500; color:var(--gold-light); }
.h-stat-label  { font-size:.8rem; color:rgba(250,248,244,.75); letter-spacing:.5px; }

/* ── ROLES ── */
.h-roles-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.h-role-card {
  background:var(--white); border:1px solid var(--gray-light);
  border-radius:8px; padding:32px 28px;
  position:relative; overflow:hidden; text-decoration:none; display:block;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.h-role-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.h-role-card:hover { border-color:var(--gold-light); box-shadow:var(--shadow); transform:translateY(-3px); }
.h-role-card:hover::after { transform:scaleX(1); }
.h-role-icon  { font-size:1.8rem; margin-bottom:12px; display:block; }
.h-role-title { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:500; color:var(--charcoal); margin-bottom:6px; }
.h-role-desc  { font-size:.85rem; color:#5C5550; font-weight:300; line-height:1.5; }
.h-role-arrow { position:absolute; top:28px; right:28px; color:var(--gold-light); font-size:1.1rem; transition:color .2s,transform .2s; }
.h-role-card:hover .h-role-arrow { color:var(--gold); transform:translateX(4px); }

/* ── HOW IT WORKS ── */
.h-how { background:var(--charcoal); padding:80px 48px; }
.h-how-inner { max-width:1000px; margin:0 auto; }
.h-how-header { text-align:center; margin-bottom:12px; }
.h-how-header h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,3.5vw,3rem); font-weight:400;
  color:var(--cream); margin-bottom:12px;
}
.h-how-header h2 em { color:var(--gold-light); font-style:italic; }
.h-how-intro { color:rgba(250,248,244,.75); font-weight:300; max-width:500px; margin:0 auto; text-align:center; }
.h-steps {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  margin-top:56px; background:rgba(255,255,255,.06); border-radius:8px; overflow:hidden;
}
.h-step { padding:40px 32px; }
.h-step-num {
  font-family:'Cormorant Garamond',serif; font-size:3.5rem; font-weight:300;
  color:var(--gold); opacity:.5; line-height:1; margin-bottom:16px;
}
.h-step-title { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:400; color:var(--cream); margin-bottom:10px; }
.h-step-desc  { font-size:.88rem; color:rgba(250,248,244,.75); font-weight:300; line-height:1.6; }

/* ── TESTIMONIALS ── */
.h-testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.h-testimonial { background:var(--white); border:1px solid var(--gray-light); border-radius:8px; padding:32px; }
.h-testimonial-stars { color:var(--gold); font-size:.8rem; letter-spacing:2px; margin-bottom:16px; }
.h-testimonial-quote { font-family:'Cormorant Garamond',serif; font-size:1.05rem; font-style:italic; line-height:1.7; color:var(--charcoal-mid); margin-bottom:20px; }
.h-testimonial-who   { font-size:.8rem; color:#5C5550; font-weight:500; letter-spacing:.5px; font-style:normal; display:block; }

/* ── PRICING ── */
.h-pricing { background:var(--cream-dark); padding:80px 48px; position:relative; overflow:hidden; }
.h-pricing-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; position:relative; z-index:1; }
.h-pricing-left h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,3.5vw,3rem); font-weight:400; margin-bottom:16px; line-height:1.15;
}
.h-pricing-left p { color:#5C5550; font-weight:300; margin-bottom:32px; }
.h-pricing-card { background:var(--white); border:1px solid var(--gold-light); border-radius:8px; padding:44px; box-shadow:var(--shadow); }
.h-price-display  { display:flex; align-items:baseline; gap:4px; margin-bottom:8px; }
.h-price-symbol   { font-family:'Jost',sans-serif; font-size:1.3rem; font-weight:400; color:var(--charcoal); align-self:flex-start; margin-top:10px; }
.h-price-amount   { font-family:'Cormorant Garamond',serif; font-size:4rem; font-weight:300; color:var(--charcoal); line-height:1; }
.h-price-desc     { font-size:.8rem; color:#5C5550; margin-bottom:28px; letter-spacing:.5px; }
.h-price-features { list-style:none; margin-bottom:32px; display:flex; flex-direction:column; gap:10px; }
.h-price-features li { display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--charcoal-mid); }
.h-price-check {
  width:16px; height:16px; border-radius:50%;
  background:var(--gold-pale); border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:#7A5C25; font-size:.6rem; font-weight:700;
}
.h-guarantee { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:16px; color:#5C5550; font-size:.9rem; font-weight:500; }

/* ── FAQ ── */
.h-faq       { padding:80px 48px; }
.h-faq-inner { max-width:800px; margin:0 auto; }
.h-faq-item  { border-bottom:1px solid var(--gray-light); }
.h-faq-item summary {
  list-style:none; padding:22px 0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.h-faq-item summary::-webkit-details-marker { display:none; }
.h-faq-q    { font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:400; color:var(--charcoal); }
.h-faq-icon { color:var(--gold); font-size:1.4rem; flex-shrink:0; line-height:1; transition:transform .25s; }
details[open] .h-faq-icon { transform:rotate(45deg); }
.h-faq-body { padding-bottom:22px; color:#5C5550; font-weight:300; line-height:1.75; font-size:.95rem; }
.h-faq-link { display:inline-block; margin-top:8px; font-size:.82rem; font-weight:600; color:#7A5C25; text-decoration:none; letter-spacing:.5px; }

/* ── DRAFT REVIEW BANNER ── */
.h-draft-banner { background:var(--cream); border-top:1px solid var(--gray-light); border-bottom:1px solid var(--gray-light); padding:48px; text-align:center; }
.h-draft-inner  { max-width:560px; margin:0 auto; }
.h-draft-heading {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.6rem,3vw,2rem); font-weight:400; color:var(--charcoal); margin-bottom:10px; line-height:1.2;
}
.h-draft-body { font-size:.95rem; color:#5C5550; font-weight:300; line-height:1.7; margin-bottom:24px; }
.h-draft-link {
  display:inline-block; padding:14px 32px;
  border:1.5px solid var(--gold); color:#7A5C25;
  font-family:'Jost',sans-serif; font-size:.82rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:600;
  text-decoration:none; border-radius:2px; transition:background .25s,color .25s;
}
.h-draft-link:hover { background:var(--gold); color:var(--white); }

/* ── MOBILE ── */
@media (max-width:768px) {
  .h-hero { padding:60px 20px 40px; }
  .h-hero-grid { grid-template-columns:1fr; gap:0; text-align:center; }
  .h-hero-body  { margin:0 auto 40px; }
  .h-hero-cta, .h-hero-tagline, .h-hero-review { justify-content:center; }
  .h-hero-card  { padding:24px 20px; margin-top:40px; }
  .h-hero-card-text { min-height:120px; font-size:1rem; }
  .h-section  { padding:60px 20px; }
  .h-stats    { padding:24px 20px; gap:20px; }
  .h-roles-grid { grid-template-columns:repeat(2,1fr); }
  .h-how      { padding:60px 20px; }
  .h-steps    { grid-template-columns:1fr; }
  .h-testimonials-grid { grid-template-columns:1fr; }
  .h-pricing  { padding:60px 20px; }
  .h-pricing-inner { grid-template-columns:1fr; gap:40px; }
  .h-pricing-card  { padding:28px 24px; }
  .h-faq      { padding:60px 20px; }
  .h-draft-banner  { padding:40px 24px; }
}