/* home.css */

/* ── HERO ── */
#hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding-top:130px; }
.hero-bg { position:absolute; inset:0; background:linear-gradient(150deg,#1e4a0e 0%,#2d6418 45%,#1a3a0a 100%); }
.hero-radial { position:absolute; inset:0; background:radial-gradient(ellipse at 70% 40%,rgba(232,168,0,.18) 0%,transparent 60%),radial-gradient(ellipse at 20% 80%,rgba(61,122,31,.4) 0%,transparent 50%); }
.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; padding:80px 2rem; position:relative; z-index:2; }
.hero-kicker { display:flex; align-items:center; gap:12px; font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:1.5rem; }
.hk-line { flex:1; max-width:36px; height:1px; background:rgba(255,255,255,.22); }
.hero-badges { display:flex; flex-wrap:wrap; gap:8px; }
.hero-badges span { font-size:.75rem; font-weight:700; padding:5px 13px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); color:rgba(255,255,255,.7); }
.hero-leaves { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.leaf { position:absolute; font-size:2.2rem; opacity:.13; animation:lfloat ease-in-out infinite alternate; }
.l1{top:12%;left:4%;animation-duration:13s} .l2{top:30%;right:6%;animation-duration:17s;animation-delay:2s} .l3{bottom:22%;left:12%;animation-duration:11s;animation-delay:4s} .l4{top:65%;right:18%;animation-duration:15s;animation-delay:1s} .l5{bottom:8%;right:4%;animation-duration:19s;animation-delay:3s}
@keyframes lfloat { 0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(15px,-25px) rotate(15deg)} }
.hero-chips-bg { position:absolute; inset:0; pointer-events:none; }
.fc { position:absolute; animation:floatY ease-in-out infinite alternate; }
.fc1{top:18%;left:2%;animation-duration:6s} .fc2{top:60%;left:6%;animation-duration:7.5s;animation-delay:1.5s} .fc3{bottom:12%;left:22%;animation-duration:8s;animation-delay:.5s} .fc4{top:22%;right:4%;animation-duration:5.5s;animation-delay:2s} .fc5{bottom:18%;right:8%;animation-duration:9s;animation-delay:1s}

/* product card */
.hero-card-side { display:flex; justify-content:center; }
.hero-glow { position:absolute; inset:-50px; background:radial-gradient(ellipse,rgba(232,168,0,.22) 0%,transparent 70%); border-radius:50%; animation:glowpulse 3s ease-in-out infinite alternate; }
@keyframes glowpulse { 0%{opacity:.5;transform:scale(.95)} 100%{opacity:1;transform:scale(1.05)} }
.hero-product-card { background:linear-gradient(145deg,#fffdf5,#fff8d6); border-radius:36px; padding:2.2rem; box-shadow:0 40px 80px rgba(0,0,0,.32),0 16px 40px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.8); width:340px; max-width:100%; animation:cardFloat 5s ease-in-out infinite alternate; position:relative; z-index:1; }
@keyframes cardFloat { 0%{transform:translateY(0) rotate(-1.5deg)} 100%{transform:translateY(-18px) rotate(1.5deg)} }
.peg-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:1.4rem; }
.peg { background:white; border-radius:14px; padding:.9rem; text-align:center; font-size:2.1rem; box-shadow:0 4px 14px rgba(0,0,0,.06); transition:transform .3s; }
.peg:hover { transform:scale(1.07) rotate(4deg); }
.peg span { display:block; font-size:.65rem; font-weight:700; color:#aaa; margin-top:3px; text-transform:uppercase; letter-spacing:.05em; }
.prd-ribbon { background:linear-gradient(135deg,var(--gold),var(--gold-lt)); border-radius:14px; padding:.9rem 1.1rem; display:flex; justify-content:space-between; align-items:center; margin-bottom:.9rem; }
.prd-name { font-family:var(--fdisp); font-weight:900; font-size:1.25rem; color:var(--green-dk); }
.prd-sub  { font-size:.68rem; color:var(--red); font-weight:700; }
.prd-wt   { font-family:var(--fdisp); font-weight:900; font-size:1.9rem; color:var(--green-dk); line-height:1; }
.prd-prices { display:flex; gap:8px; }
.pp { flex:1; text-align:center; background:white; border-radius:12px; padding:.7rem .5rem; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.pp-p { font-family:var(--fdisp); font-weight:900; font-size:1.1rem; color:var(--green-dk); }
.pp-l { font-size:.6rem; color:#999; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
.scroll-hint { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.35); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; z-index:2; }
.scroll-arrow { width:20px; height:20px; border-right:2px solid rgba(255,255,255,.3); border-bottom:2px solid rgba(255,255,255,.3); transform:rotate(45deg); animation:arrowB 1.5s ease-in-out infinite; }
@keyframes arrowB { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(6px)} }
.hero-wrap { position:relative; }

/* ── CHAPTER LABELS ── */
.ch-label { display:flex; align-items:center; gap:1rem; margin-bottom:3.5rem; }
.ch-num { font-family:var(--fdisp); font-size:5rem; font-weight:900; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(61,122,31,.18); letter-spacing:-.04em; }
.dark-sect .ch-num { -webkit-text-stroke:1px rgba(255,255,255,.1); }
.ch-tag { font-family:var(--fbody); font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(61,122,31,.65); }
.dark-sect .ch-tag { color:rgba(245,200,66,.6); }

/* ── SHELF VIS ── */
.shelf-vis { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:20px; padding:1.5rem; }
.shelf { display:flex; gap:10px; margin-bottom:10px; padding-bottom:10px; border-bottom:2px solid rgba(255,255,255,.05); }
.shelf:last-of-type { border:none; margin:0; padding:0; }
.fp { border-radius:10px; padding:.7rem .5rem; text-align:center; font-size:.68rem; font-weight:700; line-height:1.4; color:white; flex:1; opacity:.72; }
.fp small { display:block; opacity:.7; font-size:.62rem; }
.fp-r{background:#8B2020} .fp-o{background:#B85A00} .fp-p{background:#4A2080} .fp-g{background:#2A4A2A} .fp-b{background:#1A3A6A} .fp-t{background:#0A5A5A} .fp-pk{background:#6A1A4A}
.shelf-note { font-size:.72rem; color:rgba(255,255,255,.3); text-align:center; margin-top:1rem; letter-spacing:.05em; }
.stat-row { display:flex; gap:2rem; flex-wrap:wrap; margin-top:2.5rem; }
.stat-item { flex:1; min-width:120px; }
.stat-n { font-family:var(--fdisp); font-size:2.8rem; font-weight:900; color:var(--gold-lt); line-height:1; }
.stat-l { font-size:.82rem; color:rgba(255,255,255,.5); margin-top:.3rem; line-height:1.4; }

/* ── BLOCKQUOTE ── */
.big-q { font-family:var(--fdisp); font-size:7rem; color:var(--gold); line-height:.6; opacity:.35; margin-bottom:-.5rem; }
blockquote { font-family:var(--fdisp); font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:700; line-height:1.25; color:var(--dark); margin-bottom:1.2rem; font-style:italic; }
.q-attr { font-size:.82rem; color:var(--soft); letter-spacing:.05em; }

/* ── STORY CARDS ── */
.story-card { background:white; border-radius:20px; padding:1.5rem 1.75rem; display:flex; gap:1.2rem; align-items:flex-start; box-shadow:0 4px 24px rgba(0,0,0,.06); border-left:4px solid var(--green); transition:transform .3s,box-shadow .3s; margin-bottom:1rem; }
.story-card:hover { transform:translateX(6px); box-shadow:0 8px 32px rgba(61,122,31,.1); }
.sc-icon { font-size:1.8rem; flex-shrink:0; margin-top:.1rem; }
.sc-title { font-family:var(--fdisp); font-weight:700; font-size:1.1rem; margin-bottom:.4rem; color:var(--dark); }
.sc-body  { font-size:.9rem; color:var(--soft); line-height:1.65; }
.sc-body em { color:var(--green); font-style:italic; }

/* ── CHILDREN SECTION ── */
.fruit-float { position:absolute; font-size:3.5rem; opacity:.12; pointer-events:none; animation:ffloat ease-in-out infinite alternate; }
.ff1{top:10%;left:5%;animation-duration:8s} .ff2{top:20%;right:8%;animation-duration:11s;animation-delay:2s} .ff3{bottom:25%;left:8%;animation-duration:9s;animation-delay:1s} .ff4{bottom:10%;right:12%;animation-duration:12s;animation-delay:3s}
@keyframes ffloat { 0%{transform:translate(0,0) rotate(-5deg)} 100%{transform:translate(12px,-18px) rotate(10deg)} }
.child-cards { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin:3rem 0; }
.child-card  { background:white; border-radius:28px; padding:2.5rem; box-shadow:0 8px 40px rgba(0,0,0,.07); text-align:center; }
.child-age   { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:var(--green); color:white; padding:4px 14px; border-radius:999px; margin-bottom:1rem; }
.child-em    { font-size:3.5rem; margin-bottom:1rem; }
.child-body  { font-size:.92rem; color:var(--soft); line-height:1.7; margin-bottom:1.2rem; }
.child-quote { font-family:var(--fscript); font-size:1.15rem; color:var(--green); border-top:1px solid rgba(61,122,31,.12); padding-top:1rem; }
.hard-truth  { background:white; border-radius:24px; padding:2.5rem; border:2px solid rgba(192,34,26,.12); box-shadow:0 6px 30px rgba(0,0,0,.06); margin-top:2rem; }
.ht-top      { display:flex; gap:1.5rem; margin-bottom:1.5rem; align-items:flex-start; }
.ht-icon     { font-size:2rem; flex-shrink:0; }
.ht-title    { font-family:var(--fdisp); font-weight:700; font-size:1.2rem; margin-bottom:.5rem; color:var(--dark); }
.ht-body     { font-size:.9rem; color:var(--soft); line-height:1.7; }
.ht-pledge   { background:linear-gradient(135deg,var(--green),var(--green-dk)); color:white; border-radius:14px; padding:1.2rem 1.5rem; font-weight:700; font-size:.95rem; text-align:center; line-height:1.6; }

/* ── MAKING ── */
.process-steps { display:flex; flex-direction:column; gap:0; margin-bottom:2rem; }
.ps { display:flex; gap:1.5rem; padding:1.5rem 0; border-bottom:1px solid rgba(255,255,255,.07); align-items:flex-start; }
.ps:last-child { border:none; }
.ps-num   { font-family:var(--fdisp); font-size:2.5rem; font-weight:900; color:transparent; -webkit-text-stroke:1px rgba(245,200,66,.35); line-height:1; flex-shrink:0; width:56px; }
.ps-title { font-family:var(--fdisp); font-weight:700; font-size:1.05rem; color:white; margin-bottom:.3rem; }
.ps-body  { font-size:.88rem; color:rgba(255,255,255,.55); line-height:1.65; }
.women-ribbon { background:linear-gradient(135deg,rgba(61,122,31,.2),rgba(42,86,16,.3)); border:1px solid rgba(61,122,31,.3); border-radius:20px; padding:2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
.wr-badge { display:flex; align-items:center; gap:1rem; }
.wr-sym   { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,rgba(232,168,0,.25),rgba(232,168,0,.1)); border:2px solid rgba(232,168,0,.4); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.wr-title { font-family:var(--fdisp); font-weight:700; font-size:1rem; color:white; }
.wr-sub   { font-size:.8rem; color:rgba(255,255,255,.5); margin-top:.2rem; }
.wr-stats { display:flex; gap:2rem; }
.wrs      { text-align:center; }
.wrs-n    { font-family:var(--fdisp); font-size:1.8rem; font-weight:900; color:var(--gold-lt); line-height:1; }
.wrs-l    { font-size:.7rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.07em; margin-top:.2rem; }

/* ── PRODUCT / INGREDIENTS ── */
.ing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin:3rem 0; }
.ing-card { background:white; border-radius:24px; padding:2rem 1.2rem; text-align:center; box-shadow:0 6px 28px rgba(0,0,0,.06); border-bottom:5px solid transparent; transition:all .3s; position:relative; overflow:hidden; }
.ing-card::before { content:''; position:absolute; top:-30px; right:-30px; width:80px; height:80px; border-radius:50%; opacity:.08; }
.ing-banana   { border-bottom-color:#E8C200; } .ing-banana::before   { background:#E8C200; }
.ing-paprika  { border-bottom-color:#C0221A; } .ing-paprika::before  { background:#C0221A; }
.ing-pineapple{ border-bottom-color:#E8A800; } .ing-pineapple::before{ background:#E8A800; }
.ing-potato   { border-bottom-color:#3D7A1F; } .ing-potato::before   { background:#3D7A1F; }
.ing-card:hover { transform:translateY(-7px); box-shadow:0 18px 48px rgba(0,0,0,.10); }
.ing-chip-wrap { height:80px; display:flex; align-items:center; justify-content:center; margin-bottom:.8rem; position:relative; }
.ing-emoji-big { font-size:3.5rem; position:absolute; filter:drop-shadow(0 4px 8px rgba(0,0,0,.15)); }
.ing-name { font-family:var(--fdisp); font-weight:700; font-size:1.05rem; margin-bottom:.4rem; color:var(--dark); }
.ing-desc { font-size:.82rem; color:var(--soft); line-height:1.6; margin-bottom:.8rem; }
.ing-w    { display:inline-block; font-size:.72rem; font-weight:700; padding:3px 12px; border-radius:999px; background:rgba(61,122,31,.08); color:var(--green-dk); }
.zero-pledge { background:linear-gradient(135deg,var(--green-dk),var(--green)); border-radius:28px; padding:3rem; margin-top:3rem; color:white; }
.zero-title  { font-family:var(--fdisp); font-size:1.6rem; font-weight:900; text-align:center; margin-bottom:2rem; color:#fff; }
.zero-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.zi { background:rgba(255,255,255,.1); border-radius:14px; padding:1rem; display:flex; align-items:center; gap:.7rem; font-size:.88rem; font-weight:700; color:#fff; }

/* ── CTA SECTION ── */
#ch-cta { background:var(--dark); }
.cta-gradient-field { position:absolute; inset:0; background:linear-gradient(135deg,var(--green-dk) 0%,#1a3a0a 40%,var(--dark) 100%); }
.cta-chips { position:absolute; inset:0; pointer-events:none; }
.cc { position:absolute; animation:floatY ease-in-out infinite alternate; opacity:.45; }
.cc1{top:10%;left:5%;animation-duration:7s} .cc2{top:40%;left:2%;animation-duration:9s;animation-delay:2s} .cc3{bottom:15%;left:15%;animation-duration:6s;animation-delay:1s} .cc4{top:8%;right:4%;animation-duration:8s;animation-delay:.5s} .cc5{top:45%;right:5%;animation-duration:10s;animation-delay:3s} .cc6{bottom:12%;right:12%;animation-duration:7.5s;animation-delay:1.5s}
.cta-pricing-preview { display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; margin-top:0; }
.cpp { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:24px; padding:2.5rem 2rem; text-align:center; min-width:220px; flex:1; max-width:280px; transition:transform .3s,background .3s; position:relative; }
.cpp:hover { transform:translateY(-6px); background:rgba(255,255,255,.12); }
.cpp-original { background:rgba(61,122,31,.2); border-color:rgba(61,122,31,.4); }
.cpp-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--dark); font-size:.7rem; font-weight:900; padding:3px 14px; border-radius:999px; white-space:nowrap; text-transform:uppercase; letter-spacing:.06em; }
.cpp-icon  { font-size:2.5rem; margin-bottom:.8rem; }
.cpp-name  { font-family:var(--fdisp); font-weight:700; font-size:1.1rem; color:white; margin-bottom:.5rem; }
.cpp-price { font-family:var(--fdisp); font-size:3rem; font-weight:900; color:var(--gold-lt); line-height:1; }
.cpp-price span { font-size:1rem; color:rgba(255,255,255,.5); font-family:var(--fbody); }
.cpp-desc  { font-size:.8rem; color:rgba(255,255,255,.5); margin-top:.5rem; line-height:1.5; }

/* ── RESPONSIVE HOME ── */
@media(max-width:900px) {
  .hero-inner { grid-template-columns:1fr; gap:3rem; padding:60px 2rem; }
  .hero-product-card { max-width:360px; margin:0 auto; }
  .ing-grid { grid-template-columns:1fr 1fr; }
  .child-cards { grid-template-columns:1fr; }
  .zero-grid { grid-template-columns:1fr 1fr; }
  .stat-row { gap:1.2rem; }
}
@media(max-width:780px) {
  /* Nav is 70px on mobile — reduce hero offset accordingly */
  #hero { padding-top:70px; }
  .hero-inner { grid-template-columns:1fr; gap:2rem; padding:48px 1.25rem; }
  .hero-product-card { max-width:100%; border-radius:24px; }
}
@media(max-width:680px) {
  .ing-grid { grid-template-columns:1fr 1fr; }
  .zero-grid { grid-template-columns:1fr; }
  .wr-stats { gap:1rem; }
  .cta-pricing-preview { flex-direction:column; align-items:center; }
  .cpp { max-width:100%; width:100%; }
  .hero-product-card { width:100%; padding:1.5rem; }
  .peg-grid { gap:8px; }
  .hero-inner { padding:44px 1rem; }
  .zero-pledge { padding:2rem 1.5rem; }
  .zero-title { font-size:1.3rem; }
  .hard-truth { padding:1.5rem; }
  .ht-top { flex-direction:column; gap:.8rem; }
  .ch-num { font-size:3.5rem; }
  .big-q { font-size:5rem; }
}