/* ============ Future Foods Factory — shared styles ============ */
:root{
  --paper:#FFF8EE; --forest:#14402C; --forest-deep:#0C2B1D;
  --lime:#BFEF45; --tangerine:#FF6B2C; --ink:#131711; --card:#FFFFFF;
  --display:'Bricolage Grotesque',sans-serif;
  --body:'Instrument Sans',sans-serif;
  --mono:'Space Mono',monospace;
  --radius:22px; --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,24px)}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tangerine);display:inline-block;margin-bottom:14px}
h1,h2,h3{font-family:var(--display);line-height:1.05;font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,4.5vw,3.4rem);margin-bottom:16px}
.section{padding:clamp(56px,9vw,110px) 0}
.center{text-align:center}
.btn{display:inline-block;font-weight:600;font-size:clamp(.92rem,1.5vw,1rem);padding:14px 28px;border-radius:999px;border:2px solid var(--forest);cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,color .18s}
.btn:focus-visible{outline:3px solid var(--tangerine);outline-offset:3px}
.btn-solid{background:var(--forest);color:var(--paper)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,64,44,.28)}
.btn-lime{background:var(--lime);border-color:var(--lime);color:var(--forest-deep)}
.btn-lime:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(191,239,69,.4)}
.btn-ghost{background:transparent;color:var(--forest)}
.btn-ghost:hover{background:var(--forest);color:var(--paper)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* scroll progress */
#progress{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--lime),var(--tangerine));z-index:99}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(255,248,238,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(20,64,44,.12)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{font-family:var(--display);font-weight:800;font-size:clamp(1rem,2.4vw,1.25rem);color:var(--forest);display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo-mark{width:38px;height:38px;border-radius:12px;background:var(--forest);color:var(--lime);display:grid;place-items:center;font-size:1.05rem;flex:none;transition:transform .4s}
.logo:hover .logo-mark{transform:rotate(360deg)}
.nav-links{display:flex;gap:clamp(14px,2.6vw,30px);font-weight:500}
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--tangerine);transition:width .2s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--tangerine)}
.nav-cta{display:flex;gap:12px;align-items:center}
.hamburger{display:none;background:none;border:none;font-size:1.7rem;color:var(--forest);cursor:pointer}
.mobile-menu{display:none;flex-direction:column;gap:16px;padding:22px 24px;background:var(--paper);border-bottom:1px solid rgba(20,64,44,.15)}
.mobile-menu.open{display:flex}

/* PAGE HERO (inner pages) */
.page-hero{background:var(--forest);color:var(--paper);padding:clamp(56px,8vw,96px) 0;position:relative;overflow:hidden}
.page-hero .eyebrow{color:var(--lime)}
.page-hero h1{font-size:clamp(2.2rem,5.5vw,4rem);color:var(--paper)}
.page-hero p{max-width:36rem;margin-top:14px;color:#cfe0d3;font-size:clamp(1rem,1.8vw,1.15rem)}
.page-hero .float-emoji{position:absolute;font-size:clamp(2rem,4vw,3.2rem);opacity:.35;animation:float 7s ease-in-out infinite;pointer-events:none}

/* HOME HERO — layered 3D parallax */
.hero{position:relative;padding:clamp(56px,8vw,100px) 0 40px;overflow:hidden;perspective:1000px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,48px);align-items:center}
.hero h1{font-size:clamp(2.4rem,6.5vw,5rem);color:var(--forest);margin:16px 0 20px}
.hero h1 .pop{color:var(--tangerine);font-style:italic;display:inline-block;animation:wobble 5s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.hero p.lead{font-size:clamp(1rem,2vw,1.15rem);max-width:32rem;margin-bottom:30px;color:#3c463c}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.badge{font-family:var(--mono);font-size:.72rem;background:var(--card);border:1.5px solid var(--forest);border-radius:999px;padding:7px 13px}
.hero-art{position:relative;min-height:clamp(300px,44vw,440px);transform-style:preserve-3d}
.blob{position:absolute;border-radius:50%;display:grid;place-items:center;font-size:clamp(1.8rem,3.6vw,2.6rem);box-shadow:0 18px 40px rgba(12,43,29,.16);animation:float 6s ease-in-out infinite;will-change:transform;transition:transform .15s ease-out}
.blob .tag{position:absolute;bottom:-28px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--forest)}
.b1{width:clamp(96px,13vw,150px);height:clamp(96px,13vw,150px);background:var(--lime);top:6%;left:8%}
.b2{width:clamp(78px,10vw,120px);height:clamp(78px,10vw,120px);background:#FFD8A8;top:2%;right:12%;animation-delay:-1.5s}
.b3{width:clamp(108px,15vw,170px);height:clamp(108px,15vw,170px);background:#CDE8D5;bottom:22%;left:2%;animation-delay:-3s}
.b4{width:clamp(88px,12vw,135px);height:clamp(88px,12vw,135px);background:var(--tangerine);bottom:26%;right:8%;animation-delay:-4.5s}
.b5{width:clamp(70px,9vw,105px);height:clamp(70px,9vw,105px);background:#F6EAC2;bottom:-2%;left:42%;animation-delay:-2.2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* MARQUEE */
.marquee{background:var(--forest);color:var(--lime);overflow:hidden;padding:14px 0;transform:rotate(-1deg);margin:14px -20px;border-top:3px solid var(--forest-deep);border-bottom:3px solid var(--forest-deep)}
.marquee-track{display:flex;gap:48px;white-space:nowrap;font-family:var(--display);font-weight:600;font-size:clamp(.95rem,2vw,1.15rem);animation:scroll 26s linear infinite;width:max-content}
.marquee-track span{display:flex;align-items:center;gap:48px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee.alt{background:var(--tangerine);color:var(--paper);transform:rotate(1deg)}

/* 3D TILT CARDS */
.tilt{transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .25s;will-change:transform}
.tilt:hover{box-shadow:0 24px 48px rgba(12,43,29,.22)}
.tilt .lift{transform:translateZ(34px)}
.tilt .lift-sm{transform:translateZ(18px)}

/* OCCASIONS */
.occ-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:48px;perspective:1200px}
.occ-card{background:var(--card);border:2px solid var(--forest);border-radius:var(--radius);padding:28px 24px}
.occ-emoji{font-size:2.4rem;margin-bottom:14px}
.occ-card h3{font-size:1.3rem;color:var(--forest);margin-bottom:8px}
.occ-card p{font-size:.95rem;color:#4a544a;margin-bottom:14px}
.occ-card .pick{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tangerine)}

/* PRODUCTS */
.dark{background:var(--forest);color:var(--paper)}
.dark .eyebrow{color:var(--lime)}
.dark h2{color:var(--paper)}
.dark p.sub{color:#cfe0d3}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px;margin-top:52px;perspective:1400px}
.prod-card{background:var(--paper);color:var(--ink);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.prod-visual{height:150px;display:grid;place-items:center;font-size:3.4rem}
.pv1{background:linear-gradient(135deg,#BFEF45,#8FD433)}
.pv2{background:linear-gradient(135deg,#FFD8A8,#FF9A56)}
.pv3{background:linear-gradient(135deg,#CDE8D5,#8FC7A4)}
.pv4{background:linear-gradient(135deg,#F6EAC2,#EAC96B)}
.pv5{background:linear-gradient(135deg,#FFC4B0,#FF6B2C)}
.pv6{background:linear-gradient(135deg,#D9E8FF,#93B8E8)}
.prod-body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.prod-body h3{font-size:1.25rem;color:var(--forest)}
.prod-body p{font-size:.93rem;color:#46504a}
.flavor{font-family:var(--mono);font-size:.7rem;color:var(--tangerine);text-transform:uppercase;letter-spacing:.06em}
.nutri{border:2px solid var(--ink);border-radius:10px;font-family:var(--mono);font-size:.72rem;margin-top:auto;background:var(--card)}
.nutri .n-head{border-bottom:2px solid var(--ink);padding:6px 10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.nutri .n-row{display:flex;justify-content:space-between;padding:5px 10px;border-bottom:1px dashed rgba(19,23,17,.3)}
.nutri .n-row:last-child{border-bottom:none}

/* FILTERS (products page) */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.chip{font-family:var(--mono);font-size:.78rem;padding:9px 18px;border-radius:999px;border:2px solid var(--lime);background:transparent;color:var(--lime);cursor:pointer;transition:all .18s}
.chip:hover,.chip.active{background:var(--lime);color:var(--forest-deep)}
.hidden{display:none!important}

/* SPLIT / FACTORY */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,56px);align-items:center}
.factory-art{background:var(--card);border:2px solid var(--forest);border-radius:var(--radius);padding:clamp(24px,3.5vw,34px)}
.factory-art .big{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.6rem);color:var(--forest);line-height:1.12}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.stat{background:var(--paper);border-radius:14px;padding:14px 10px;text-align:center}
.stat b{font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.6rem);color:var(--tangerine);display:block}
.stat small{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em}
.check-list{list-style:none;margin:22px 0 30px;display:grid;gap:12px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(.95rem,1.6vw,1.02rem)}
.check-list li::before{content:"✔";flex:none;width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--forest-deep);display:grid;place-items:center;font-size:.8rem;font-weight:700}

/* PARTNERS */
.partner-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:40px}
.partner-chip{font-family:var(--display);font-weight:600;font-size:clamp(.9rem,1.8vw,1.05rem);color:var(--forest);background:var(--card);border:2px dashed var(--forest);border-radius:999px;padding:12px 24px;transition:transform .18s,background .18s}
.partner-chip:hover{transform:translateY(-4px) rotate(-1deg);background:var(--lime)}

/* TESTIMONIALS */
.testi{background:#F3EBDD}
.testi-slider{position:relative;max-width:760px;margin:44px auto 0;perspective:900px}
.testi-card{background:var(--card);border-radius:var(--radius);padding:clamp(26px,4vw,40px);border:2px solid var(--forest);display:none;text-align:center}
.testi-card.active{display:block;animation:flipIn .55s ease}
@keyframes flipIn{from{opacity:0;transform:rotateX(28deg) translateY(20px)}to{opacity:1;transform:none}}
.testi-card blockquote{font-size:clamp(1rem,1.9vw,1.12rem);font-style:italic;color:#333d33;margin-bottom:22px}
.testi-card .who{font-family:var(--mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tangerine)}
.testi-nav{display:flex;justify-content:center;gap:10px;margin-top:24px}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--forest);background:transparent;cursor:pointer;padding:0}
.dot.active{background:var(--forest)}

/* CTA */
.cta{background:var(--forest-deep);color:var(--paper);text-align:center;position:relative;overflow:hidden}
.cta h2{color:var(--lime);font-size:clamp(2rem,5.5vw,4rem)}
.cta p{max-width:34rem;margin:0 auto 34px;color:#cfe0d3}
.cta .btn-row{justify-content:center}
.confetti{position:absolute;font-size:clamp(1.3rem,2.6vw,1.8rem);opacity:.5;animation:float 7s ease-in-out infinite;pointer-events:none}

/* ABOUT: timeline & values */
.timeline{position:relative;margin-top:56px;display:grid;gap:34px}
.timeline::before{content:"";position:absolute;left:19px;top:0;bottom:0;width:3px;background:var(--lime)}
.t-item{display:flex;gap:24px;align-items:flex-start}
.t-year{flex:none;width:42px;height:42px;border-radius:50%;background:var(--forest);color:var(--lime);display:grid;place-items:center;font-family:var(--mono);font-size:.68rem;font-weight:700;z-index:1}
.t-body h3{color:var(--forest);margin-bottom:6px}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:48px;perspective:1200px}
.value-card{background:var(--card);border:2px solid var(--forest);border-radius:var(--radius);padding:28px}
.value-card .v-emoji{font-size:2.2rem;margin-bottom:12px}
.value-card h3{color:var(--forest);font-size:1.2rem;margin-bottom:8px}
.value-card p{font-size:.94rem;color:#4a544a}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,56px);align-items:start}
.form-card{background:var(--card);border:2px solid var(--forest);border-radius:var(--radius);padding:clamp(24px,3.5vw,36px)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;margin-bottom:6px;font-size:.92rem}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:2px solid rgba(20,64,44,.25);border-radius:12px;font-family:var(--body);font-size:.95rem;background:var(--paper);transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--tangerine)}
.form-note{font-family:var(--mono);font-size:.72rem;color:#6a746a;margin-top:12px}
.info-card{background:var(--forest);color:var(--paper);border-radius:var(--radius);padding:clamp(24px,3.5vw,36px);margin-bottom:20px}
.info-card h3{color:var(--lime);margin-bottom:14px}
.info-card li{list-style:none;margin-bottom:10px;font-size:.95rem}
.success-msg{display:none;background:var(--lime);color:var(--forest-deep);border-radius:12px;padding:14px 18px;font-weight:600;margin-top:16px}
.success-msg.show{display:block;animation:flipIn .4s ease}

/* FAQ accordion */
.faq-list{max-width:820px;margin:48px auto 0;display:grid;gap:14px}
.faq-item{background:var(--card);border:2px solid var(--forest);border-radius:16px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:none;font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.9vw,1.12rem);color:var(--forest);padding:20px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-q .icon{flex:none;transition:transform .25s;font-size:1.3rem;color:var(--tangerine)}
.faq-item.open .faq-q .icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 22px;color:#4a544a;font-size:.96rem}
.faq-item.open .faq-a{max-height:260px;padding:0 22px 20px}

/* FOOTER */
footer{background:var(--ink);color:#cfd6cd;padding:64px 0 32px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;margin-bottom:44px}
footer h4{font-family:var(--display);color:var(--paper);margin-bottom:14px;font-size:1rem}
footer ul{list-style:none;display:grid;gap:9px;font-size:.93rem}
footer a:hover{color:var(--lime)}
.foot-logo{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--paper);margin-bottom:12px}
.foot-bottom{border-top:1px solid #2a2f28;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;font-family:var(--mono)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px) rotateX(6deg);transform-origin:top;transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* RESPONSIVE */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;text-align:left}
  .split,.contact-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav-links{display:none}
  .nav-cta .btn{display:none}
  .hamburger{display:block}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(3,1fr)}
  .btn{width:100%;text-align:center}
  .btn-row{flex-direction:column}
  .marquee{margin:14px -10px}
}