:root{
  --forest:#0b1811; --moss:#122419; --fern:#1d3a28; --leaf:#7fb98a; --mint:#b8e0c0;
  --cream:#f2eee3; --sand:#d9d2bd; --gold:#c8a96e;
  --text:#f2eee3; --text-2:#a9bfa9; --text-3:#6e8570;
  --serif:'Playfair Display',Georgia,serif; --sans:'Onest',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--sans);background:var(--forest);color:var(--text);
  font-size:16px;line-height:1.7;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:rgba(127,185,138,.4)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12}

/* spores canvas */
#spores{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.7}

/* growing vine */
#vineWrap{position:fixed;left:clamp(6px,2.5vw,40px);top:0;height:100vh;z-index:2;pointer-events:none;opacity:.85}
#vine{height:100%}

/* nav */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(11,24,17,.88);backdrop-filter:blur(14px);border-color:rgba(178,224,192,.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:82px}
.brand{font-family:var(--serif);font-size:24px;letter-spacing:.14em;text-transform:uppercase}
.brand i{font-style:italic;color:var(--leaf);text-transform:none;letter-spacing:0}
.nav-links{display:flex;gap:38px}
.nav-links a{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);transition:color .3s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--mint)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;
  padding:15px 34px;border-radius:100px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;transition:all .3s;position:relative;overflow:hidden;
}
.btn:focus-visible{outline:2px solid var(--leaf);outline-offset:3px}
.btn-leaf{background:var(--leaf);color:#0b1811}
.btn-leaf:hover{background:var(--mint);transform:translateY(-2px);box-shadow:0 14px 36px rgba(127,185,138,.3)}
.btn-line{border:1px solid rgba(242,238,227,.35);color:var(--cream)}
.btn-line:hover{border-color:var(--leaf);color:var(--mint)}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;z-index:3}
.leaf-layer{position:absolute;inset:-6%;will-change:transform;pointer-events:none}
.leaf-layer svg{position:absolute;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.hero-inner{position:relative;z-index:5;max-width:820px;padding:120px 24px 60px}
.hero-kicker{font-size:12px;letter-spacing:.5em;text-transform:uppercase;color:var(--leaf);margin-bottom:30px;display:block}
.hero h1{font-size:clamp(48px,8.4vw,110px);margin-bottom:26px}
.hero h1 em{font-style:italic;color:var(--mint)}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:inline-block}
.hero p{color:var(--text-2);font-size:clamp(16px,1.8vw,19px);max-width:480px;margin:0 auto 46px}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-veil{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,transparent 30%,rgba(11,24,17,.8));z-index:4;pointer-events:none}

/* reveal image section */
.reveal-sec{position:relative;padding:150px 0;z-index:3}
.rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.rev-img{
  position:relative;border-radius:240px 240px 24px 24px;overflow:hidden;
  clip-path:inset(12% 8% 12% 8% round 240px 240px 24px 24px);
}
.rev-img img{width:100%;aspect-ratio:3/4;object-fit:cover;transform:scale(1.15);will-change:transform}
.kicker{font-size:12px;letter-spacing:.44em;text-transform:uppercase;color:var(--leaf);margin-bottom:22px;display:block}
h2{font-size:clamp(34px,4.6vw,58px);margin-bottom:22px}
h2 em{font-style:italic;color:var(--mint)}
.rev-text p{color:var(--text-2);margin-bottom:18px}
.sig{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--gold);margin-top:28px}

/* ingredients */
.ingredients{position:relative;padding:60px 0 150px;z-index:3}
.ing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:64px}
.ing{
  position:relative;background:var(--moss);border:1px solid rgba(178,224,192,.1);
  border-radius:22px;padding:36px 28px;overflow:hidden;
  transition:transform .35s,border-color .35s;will-change:transform;
}
.ing:hover{transform:translateY(-8px);border-color:rgba(127,185,138,.4)}
.ing .ing-glow{
  position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(127,185,138,.16),transparent 50%);
}
.ing:hover .ing-glow{opacity:1}
.ing svg{width:44px;height:44px;stroke:var(--leaf);margin-bottom:22px;transition:transform .5s}
.ing:hover svg{transform:rotate(-8deg) scale(1.12)}
.ing h3{font-size:21px;margin-bottom:10px}
.ing .lat{font-style:italic;font-family:var(--serif);color:var(--text-3);font-size:14px;margin-bottom:14px;display:block}
.ing p{font-size:14px;color:var(--text-2)}

/* ritual (pinned steps) */
.ritual{position:relative;padding:110px 0;z-index:3;background:linear-gradient(180deg,transparent,rgba(18,36,25,.6) 20%,rgba(18,36,25,.6) 80%,transparent)}
.rit-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.rit-left{position:sticky;top:120px}
.rit-steps{display:grid;gap:16px}
.rstep{
  border:1px solid rgba(178,224,192,.12);border-radius:22px;padding:34px 32px;
  background:rgba(11,24,17,.55);backdrop-filter:blur(6px);
}
.rstep .rn{
  font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold);
  display:inline-flex;width:46px;height:46px;border:1px solid rgba(200,169,110,.4);border-radius:50%;
  align-items:center;justify-content:center;margin-bottom:20px;
}
.rstep h3{font-size:22px;margin-bottom:10px}
.rstep p{color:var(--text-2);font-size:14.5px}

/* product */
.product{position:relative;padding:150px 0;overflow:hidden;z-index:3}
.prod-bg{position:absolute;inset:-15% 0;background:url('../img/leaves.webp') center/cover no-repeat;opacity:.35;will-change:transform}
.prod-fade{position:absolute;inset:0;background:linear-gradient(180deg,var(--forest),transparent 35%,transparent 65%,var(--forest))}
.prod-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.prod-img{position:relative;display:flex;justify-content:center}
.prod-img img{
  width:min(380px,80%);border-radius:200px;box-shadow:0 60px 120px rgba(0,0,0,.6);
  will-change:transform;
}
.prod-info .price{font-family:var(--serif);font-size:34px;color:var(--mint);margin:26px 0}
.prod-info .price small{font-size:16px;color:var(--text-3);font-family:var(--sans)}
.prod-feats{list-style:none;display:grid;gap:14px;margin-bottom:38px}
.prod-feats li{display:flex;gap:14px;color:var(--text-2);font-size:15px;align-items:flex-start}
.prod-feats li svg{width:18px;height:18px;stroke:var(--leaf);flex:none;margin-top:4px}

/* quote */
.quote-sec{padding:130px 0;text-align:center;position:relative;z-index:3}
.quote-sec blockquote{
  font-family:var(--serif);font-style:italic;font-size:clamp(24px,3.4vw,40px);
  line-height:1.4;max-width:800px;margin:0 auto 30px;color:var(--cream);
}
.quote-sec .who{font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--text-3)}

/* cta */
.cta{position:relative;padding:60px 0 150px;z-index:3}
.cta-card{
  background:linear-gradient(140deg,var(--fern),var(--moss));border:1px solid rgba(127,185,138,.25);
  border-radius:36px;padding:clamp(44px,6vw,80px);text-align:center;position:relative;overflow:hidden;
}
.cta-card h2{margin-bottom:14px}
.cta-card p{color:var(--text-2);max-width:440px;margin:0 auto 40px}
.cta-form{display:flex;gap:12px;max-width:460px;margin:0 auto;flex-wrap:wrap;position:relative;z-index:2}
.cta-form input{
  flex:1;min-width:220px;background:rgba(11,24,17,.6);border:1px solid rgba(178,224,192,.25);
  border-radius:100px;padding:15px 24px;font:inherit;font-size:15px;color:var(--cream);min-height:50px;
}
.cta-form input:focus{outline:none;border-color:var(--leaf)}
.cta-form input::placeholder{color:var(--text-3)}
.cta-msg{font-size:14px;margin-top:16px;display:none;position:relative;z-index:2}
.cta-msg.ok{display:block;color:var(--mint)}
.cta-msg.err{display:block;color:#e8a08f}
.cta-leaf{position:absolute;opacity:.14;pointer-events:none}

/* footer */
footer{border-top:1px solid rgba(178,224,192,.08);padding:60px 0 44px;position:relative;z-index:3}
.foot{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.foot-links{display:flex;gap:30px;flex-wrap:wrap}
.foot-links a{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.foot-links a:hover{color:var(--mint)}
.foot-bottom{margin-top:40px;font-size:12.5px;color:var(--text-3);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media (max-width:1020px){
  .rev-grid,.rit-grid,.prod-grid{grid-template-columns:1fr;gap:52px}
  .rit-left{position:static}
  .ing-grid{grid-template-columns:1fr 1fr}
  #vineWrap{display:none}
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;position:absolute;top:82px;left:0;right:0;
    background:rgba(11,24,17,.97);padding:28px 24px;gap:22px;border-bottom:1px solid rgba(178,224,192,.1);
  }
  .menu-btn{display:flex}
  .nav .btn{display:none}
}
@media (max-width:620px){
  .ing-grid{grid-template-columns:1fr}
  .reveal-sec,.product{padding:100px 0}
}

/* ---- cross-document View Transitions (progressive enhancement) ---- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .hero{view-transition-name:page-hero}
  ::view-transition-old(page-hero),::view-transition-new(page-hero){
    animation-duration:.45s;animation-timing-function:cubic-bezier(.4,0,.2,1);
  }
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
}