/* ===== HERO — fluid asymmetric ===== */
.hero{padding:70px 0 40px; background:var(--cream);}
.hero-blob1{width:600px; height:600px; background:var(--beige); opacity:.55; top:-180px; right:-140px; animation:morph 14s ease-in-out infinite, float-slow 10s ease-in-out infinite;}
.hero-blob2{width:260px; height:260px; background:var(--green); opacity:.08; bottom:20px; left:5%; animation:morph 10s ease-in-out infinite reverse, float-slow2 9s ease-in-out infinite;}
.hero .wrap{display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; min-height:640px;}
.hero-copy h1{font-size:64px; line-height:1.06; margin-bottom:24px; white-space:pre-line;}
.hero-copy .sub{font-size:19px; color:var(--brown-muted); max-width:440px; margin-bottom:38px;}
.hero-copy .sub b{color:var(--brown); font-weight:600;}
.hero-btns{display:flex; gap:18px; margin-bottom:48px; flex-wrap:wrap;}
.trust-row{display:flex; gap:28px; flex-wrap:wrap;}
.trust-chip{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--brown-muted); font-weight:500;}
.trust-chip svg{width:16px; height:16px; stroke:var(--green); fill:none; stroke-width:2;}

.hero-visual{position:relative; height:600px;}
.fluid-mask{
  position:absolute; inset:0; overflow:hidden;
  border-radius:62% 38% 42% 58%/54% 44% 56% 46%;
  animation:morph 16s ease-in-out infinite;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 45%), linear-gradient(160deg,#C9A876,#8B5A2B 55%,#6b4321);
  box-shadow:0 40px 80px rgba(59,36,24,.18);
}
.fluid-mask img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.fluid-mask .tempeh-graphic{width:75%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.satellite{
  position:absolute; background:var(--white); border-radius:28px;
  box-shadow:0 20px 50px rgba(59,36,24,.14); display:flex; align-items:center; gap:12px; padding:16px 20px;
}
.satellite.one{top:6%; right:-4%; animation:float-slow 7s ease-in-out infinite;}
.satellite.two{bottom:8%; left:-8%; animation:float-slow2 8s ease-in-out infinite;}
.satellite .num{font-family:var(--serif); font-size:22px; color:var(--green);}
.satellite .lbl{font-size:11px; color:var(--brown-muted); font-weight:600; text-transform:uppercase; letter-spacing:1px;}
.satellite .ic{width:38px; height:38px; border-radius:50%; background:var(--cream); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.satellite .ic svg{width:18px; height:18px; stroke:var(--green); fill:none; stroke-width:1.7;}

/* ===== BENEFITS ===== */
#benefits{background:var(--bg);}
.benefits-flow{display:flex; flex-wrap:wrap; justify-content:center; gap:24px;}
.benefit-pebble{
  width:190px; background:var(--white); text-align:center; padding:36px 20px;
  border-radius:48% 52% 55% 45%/45% 48% 52% 55%;
  transition:all .5s cubic-bezier(.34,1.4,.64,1);
  box-shadow:0 10px 30px rgba(59,36,24,.05);
}
.benefit-pebble:nth-child(even){margin-top:34px;}
.benefit-pebble:hover{border-radius:50%; transform:translateY(-10px) rotate(-2deg); background:var(--cream); box-shadow:0 24px 44px rgba(59,36,24,.12);}
.benefit-icon{width:60px; height:60px; border-radius:50%; border:1.5px solid var(--green); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; background:var(--bg);}
.benefit-icon svg{width:24px; height:24px; stroke:var(--green); fill:none; stroke-width:1.6;}
.benefit-pebble h3{font-size:14.5px; font-family:var(--sans); font-weight:600; margin-bottom:4px;}
.benefit-pebble p{font-size:12px; color:var(--brown-muted);}

/* ===== WHY TEMPEH ===== */
#why{background:var(--cream);}
.why-blob{width:420px; height:420px; background:var(--green); opacity:.06; top:10%; right:-10%; animation:morph 18s ease-in-out infinite;}
.why-row{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; margin-bottom:100px;}
.why-row:last-child{margin-bottom:0;}
.why-row.reverse > div:first-child{order:2;}
.why-row.reverse > div:last-child{order:1;}
.why-img{
  aspect-ratio:1/0.92; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#E8D4A2,#c9a876);
  border-radius:60% 40% 45% 55%/55% 45% 55% 45%;
  animation:morph 12s ease-in-out infinite;
  box-shadow:0 30px 60px rgba(59,36,24,.12);
}
.why-img img{width:100%; height:100%; object-fit:cover;}
.why-text h2{font-size:32px; margin-bottom:18px;}
.why-text p{color:var(--brown-muted); font-size:16.5px; max-width:480px;}
.why-text ul{margin-top:20px;}
.why-text ul li{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; font-size:15px; color:var(--brown);}
.why-text ul li svg{width:18px; height:18px; stroke:var(--green); flex-shrink:0; margin-top:2px;}
.protein-chart{display:flex; flex-direction:column; gap:18px; margin-top:8px;}
.p-row{display:grid; grid-template-columns:110px 1fr 50px; align-items:center; gap:14px;}
.p-row .label{font-size:13px; font-weight:600; color:var(--brown-muted);}
.p-row.win .label{color:var(--green);}
.p-track{background:var(--line); border-radius:100px; height:14px; overflow:hidden;}
.p-fill{height:100%; border-radius:100px; background:var(--beige); animation:grow 1.4s cubic-bezier(.34,1.4,.64,1) forwards;}
.p-row.win .p-fill{background:var(--green);}
.p-row .val{font-size:13px; font-weight:700; text-align:right;}
@keyframes grow{from{width:0;}}

/* ===== PRODUCTS (shop teaser) ===== */
#shop{background:var(--bg);}

/* ===== RECIPES ===== */
#recipes{background:var(--cream);}
.recipe-flow{display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; align-items:end;}
.recipe-card{
  position:relative; overflow:hidden; cursor:pointer; display:block;
  background:linear-gradient(150deg,#c98b4a,#8a4a1f);
  border-radius:28px;
  box-shadow:0 10px 28px rgba(59,36,24,.10);
  transition:transform .4s cubic-bezier(.34,1.4,.64,1), box-shadow .4s ease;
  aspect-ratio:4/5.2;
}
.recipe-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.recipe-card:nth-child(2n){background:linear-gradient(150deg,#b3742f,#6e3c17);}
.recipe-card-promo{background:var(--beige) !important; display:flex; align-items:center; justify-content:center; text-align:center; padding:32px;}
.recipe-card:hover{transform:translateY(-8px); box-shadow:0 26px 48px rgba(59,36,24,.16);}
.recipe-card:hover img{transform:scale(1.08);}
.recipe-card .scrim{position:absolute; inset:0; background:linear-gradient(to top, rgba(59,36,24,.85) 0%, rgba(59,36,24,0) 60%);}
.recipe-card .content{position:absolute; left:28px; right:28px; bottom:30px; color:var(--cream); text-align:left;}
.recipe-card-promo .content{position:static; color:var(--brown); text-align:center;}
.recipe-card .meta{font-size:12px; opacity:.85; margin-bottom:8px; display:flex; gap:12px;}
.recipe-card h3{font-family:var(--serif); font-size:23px; color:var(--cream);}
.recipe-card-promo h3{color:var(--brown);}
.recipe-arrow{
  position:absolute; bottom:26px; right:26px; width:42px; height:42px; border-radius:50%; z-index:2;
  background:var(--cream); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(8px) scale(.8); transition:all .35s cubic-bezier(.34,1.4,.64,1);
}
.recipe-card:hover .recipe-arrow{opacity:1; transform:translateY(0) scale(1);}
.recipe-arrow svg{width:18px; height:18px; stroke:var(--green); stroke-width:2;}

/* ===== HOW IT WORKS ===== */
#how{background:var(--bg);}
.flow-path{position:relative; padding-top:20px;}
.flow-path svg.connector{position:absolute; top:38px; left:0; width:100%; height:60px; z-index:0;}
.tl-steps{display:flex; justify-content:space-between; position:relative; z-index:1;}
.tl-step{flex:1; text-align:center;}
.tl-icon{
  width:68px; height:68px; border-radius:60% 40% 55% 45%/50% 55% 45% 50%; background:var(--white); border:1.5px solid var(--green);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
  transition:all .4s cubic-bezier(.34,1.4,.64,1);
}
.tl-step:hover .tl-icon{border-radius:50%; transform:scale(1.1) rotate(6deg); background:var(--cream);}
.tl-icon svg{width:26px; height:26px; stroke:var(--green); fill:none; stroke-width:1.6;}
.tl-step h3{font-size:15px; font-family:var(--sans); font-weight:600;}
.tl-step .n{font-size:12px; color:var(--brown-muted); margin-bottom:4px; font-weight:600;}

/* ===== REVIEWS ===== */
#reviews{background:var(--cream);}
.rating-summary{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:56px; margin-top:-40px;}
.rating-summary .stars{color:var(--green); font-size:18px; letter-spacing:2px;}
.rating-summary .txt{font-size:14px; color:var(--brown-muted); font-weight:500;}
.reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.review-card{background:var(--white); border-radius:36px 36px 36px 8px; padding:32px; transition:transform .4s cubic-bezier(.34,1.4,.64,1);}
.review-card:nth-child(2){margin-top:28px; border-radius:36px 36px 8px 36px;}
.review-card:nth-child(3){border-radius:8px 36px 36px 36px;}
.review-card:hover{transform:translateY(-8px);}
.review-card .stars{color:var(--green); font-size:14px; margin-bottom:16px; letter-spacing:2px;}
.review-card p{font-size:15px; color:var(--brown); margin-bottom:20px;}
.reviewer{display:flex; align-items:center; gap:12px;}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--beige); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--brown);}
.reviewer .name{font-size:13.5px; font-weight:600;}
.verified{font-size:10.5px; background:var(--cream); color:var(--green); padding:3px 10px; border-radius:100px; font-weight:700; letter-spacing:.3px;}

/* ===== INSTAGRAM ===== */
#insta{background:var(--bg);}
.bubble-grid{display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;}
.bubble{border-radius:50%; position:relative; overflow:hidden; cursor:pointer; transition:transform .4s cubic-bezier(.34,1.4,.64,1); width:170px; height:170px;}
.bubble img{width:100%; height:100%; object-fit:cover;}
.bubble:nth-child(1){width:180px; height:180px;}
.bubble:nth-child(2){width:130px; height:130px; margin-top:-40px;}
.bubble:nth-child(3){width:220px; height:220px;}
.bubble:nth-child(4){width:130px; height:130px; margin-top:-30px;}
.bubble:hover{transform:scale(1.06);}
.bubble .grad{position:absolute; inset:0; background:linear-gradient(140deg,#c9a876,#7c5432);}
.bubble-overlay{
  position:absolute; inset:0; background:rgba(59,36,24,.45); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease;
}
.bubble:hover .bubble-overlay{opacity:1;}
.bubble-overlay svg{width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.6;}

/* ===== FAQ ===== */
#faq{background:var(--cream);}
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:26px 4px; font-size:17px; font-weight:500; text-align:left; color:var(--brown);
}
.faq-q .plus{width:24px; height:24px; position:relative; flex-shrink:0; margin-left:20px;
  border-radius:50%; background:var(--bg); transition:all .3s cubic-bezier(.34,1.4,.64,1);}
.faq-q .plus::before, .faq-q .plus::after{content:''; position:absolute; background:var(--green); transition:transform .3s ease;}
.faq-q .plus::before{width:11px; height:1.5px; top:50%; left:50%; transform:translate(-50%,-50%);}
.faq-q .plus::after{height:11px; width:1.5px; left:50%; top:50%; transform:translate(-50%,-50%);}
.faq-item.open .plus{background:var(--green); border-radius:40% 60% 60% 40%/60% 40% 60% 40%;}
.faq-item.open .plus::before, .faq-item.open .plus::after{background:var(--cream);}
.faq-item.open .plus::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{padding:0 4px 26px; color:var(--brown-muted); font-size:15px; max-width:640px;}

/* ===== NEWSLETTER ===== */
.newsletter{
  background:var(--green-dark); border-radius:60px; padding:90px 60px; text-align:center; color:var(--cream);
  margin:0 80px; position:relative; overflow:hidden;
}
.nl-blob{width:340px; height:340px; background:var(--cream); opacity:.06; top:-100px; left:-80px; animation:morph 14s ease-in-out infinite;}
.nl-blob2{width:260px; height:260px; background:var(--beige); opacity:.1; bottom:-100px; right:-60px; animation:morph 11s ease-in-out infinite reverse;}
.newsletter h2{color:var(--cream); font-size:36px; position:relative; z-index:2;}
.newsletter p{color:#D8E0C6; max-width:440px; margin:0 auto 32px; font-size:16px; position:relative; z-index:2;}
.nl-form{display:flex; gap:10px; max-width:440px; margin:0 auto; position:relative; z-index:2;}
.nl-form input{
  flex:1; padding:16px 22px; border-radius:100px; border:1px solid rgba(246,238,220,.3);
  background:rgba(255,255,255,.06); color:var(--cream); font-size:14px; outline:none;
}
.nl-form input::placeholder{color:#c7d0b3;}
.nl-form input:focus{border-color:var(--cream);}
.nl-form button{padding:16px 28px; border-radius:100px; background:var(--cream); color:var(--green-dark); font-weight:700; font-size:14px; white-space:nowrap; transition:all .3s cubic-bezier(.34,1.4,.64,1);}
.nl-form button:hover{transform:translateY(-3px) scale(1.03);}
.nl-note{font-size:12.5px; color:#c7d0b3; margin-top:14px; position:relative; z-index:2;}

@media (max-width:1100px){
  .hero .wrap{grid-template-columns:1fr; gap:56px;}
  .hero-visual{height:440px;}
  .why-row, .why-row.reverse{grid-template-columns:1fr; gap:36px;}
  .why-row.reverse > div:first-child{order:1;}
  .why-row.reverse > div:last-child{order:2;}
  .reviews-grid{grid-template-columns:repeat(2,1fr);}
  .recipe-flow{grid-template-columns:1fr 1fr; grid-auto-rows:1fr;}
  .newsletter{margin:0 40px; padding:70px 30px;}
}
@media (max-width:680px){
  .hero-copy h1{font-size:36px;}
  .hero-visual{height:340px;}
  .satellite{padding:12px 16px;}
  .reviews-grid, .recipe-flow{grid-template-columns:1fr;}
  .review-card, .review-card:nth-child(2), .review-card:nth-child(3){margin-top:0; border-radius:28px;}
  .tl-steps{flex-direction:column; gap:32px; align-items:flex-start;}
  .flow-path svg.connector{display:none;}
  .tl-step{display:flex; align-items:center; gap:16px; text-align:left;}
  .tl-icon{margin:0;}
  .bubble-grid{gap:14px;}
  .bubble{width:110px !important; height:110px !important; margin-top:0 !important;}
  .newsletter{margin:0 20px; border-radius:36px;}
  .nl-form{flex-direction:column;}
}