/* =================================================================
   BOTANIQ LAB — landing page
   ================================================================= */

:root{
  --ink:        #0c1410;
  --ink-2:      #0f1a14;
  --cream:      #f1ead9;
  --cream-2:    #ede5cf;
  --paper:      #e8dec3;
  --moss:       #3d4a36;
  --moss-2:     #5a6b4f;
  --gold:       #c9a96a;
  --gold-2:     #b08a47;
  --line:       rgba(241,234,217,.18);
  --line-dark:  rgba(26,42,29,.2);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  background:#000;
  color:var(--cream);
  font-family:'Manrope',sans-serif;
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* shared */
.eyebrow{
  font-size:10px;
  letter-spacing:.4em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--gold-2);
}
.section-rule{
  width:68px;height:1px;background:var(--gold-2);
  margin:18px auto 0;opacity:.7;
}

/* =================================================================
   HERO
   ================================================================= */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex; flex-direction:column;
  height:100vh;
  min-height:720px;
  max-height:1080px;
  padding:56px 64px 40px;
  background:#000;
}
/* Atmospheric glow behind the product photo. Uses absolute px size so it
   stays bounded — on wide monitors the area beyond it returns to pure black. */
.hero::before{
  content:"";
  position:absolute; top:50%; right:0; transform:translateY(-50%);
  width:1100px; height:1100px; max-width:60%; max-height:100%;
  background:radial-gradient(closest-side, #1a1018 0%, #0a0608 45%, transparent 75%);
  pointer-events:none; z-index:0;
}
.hero-inner{
  flex:1;
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-rows: 1fr auto;
  column-gap:60px;
  row-gap:24px;
  align-items:stretch;
  max-width:1480px;
  width:100%;
  margin:0 auto;
}
.hero-left,.hero-right{grid-row:1}

.hero-left{
  display:flex; flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:56px;
}
.logo{
  width:480px; height:auto;
  display:block;
}

.hero-copy h1{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(28px, 5vw, 70px);
  line-height:1.15;
  letter-spacing:-.005em;
  color:#ffffff;
}
.hero-divider{
  width:90px; height:1px;
  background:var(--gold);
  margin:32px 0;
  opacity:.9;
}
.hero-copy p{
  max-width:480px;
  font-size: 18px;
  line-height:1.9;
  font-weight:400;
  color:rgba(255,255,255,.72);
  letter-spacing:.02em;
}

.hero-right{
  /* Reserves the right half of the grid for layout flow; the actual photo
     is positioned at the .hero level so it can fill the FULL section. */
}
/* Bottle is a sibling of .hero-inner inside .hero so it can span the full
   section height. We use left/right offsets that match the container's
   centring (max-width:1480px + section padding-right:64px) so the bottle
   sits flush with the RIGHT edge of the content container — not the page. */
.hero-bottle{
  position:absolute;
  top:0; bottom:0;
  right:max(64px, calc((100% - 1480px) / 2));
  height:100%; width:48%;
  max-width:980px;
  object-fit:cover;
  object-position:right center;
  z-index:1;
  pointer-events:none;
  /* Mouse parallax offsets (driven by JS) layered separately from the
     keyframe float so they don't conflict with each other. */
  translate: var(--mx, 0) var(--my, 0);
  transition: translate .25s ease-out;
  /* Feather only the LEFT edge into the dark background. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 6%, #000 18%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 6%, #000 18%, #000 100%);
}

/* ============== Trust badges ============== */
.badges{
  grid-column:1 / -1;
  grid-row:2;
  position:relative;z-index:2;
  padding-top:8px;
  display:flex; justify-content:flex-start; align-items:stretch;
  gap:0; flex-wrap:wrap;
}
.badge{
  position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  min-width:78px;
  padding:6px 20px;
}
.badge:first-child{padding-left:0}
.badge + .badge::before{
  content:"";
  position:absolute; left:0; top:14%; bottom:14%;
  width:1px; background:var(--line);
}
.badge-icon{
  width:56px;height:56px;
  display:grid;place-items:center;
  color:var(--gold);
}
.badge-icon img{width:52px;height:52px;object-fit:contain}
.badge-label{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.72);line-height:1.55;font-weight:500;
}

/* =================================================================
   PRODUCTS
   ================================================================= */
/* Section itself stays transparent so the page's black background shows
   through on the sides — the cream background is constrained to the
   inner container width. */
.products{
  color:#1a2218;
  padding:0 48px;
}
.products-inner{
  max-width:1480px;margin:0 auto;text-align:center;
  background:#EEE7DE;
  padding:20px 48px 20px;
}
.section-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(34px, 4vw, 40px);
  font-weight:600;
  letter-spacing:-.01em;
  color:#1a2a1d;
}
.grid-products{
  margin-top:64px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:20px;
}
.product{
  --accent:#1a2a1d;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:8px 6px 0;
}
.product--focus   { --accent:#6e3a6e; }
.product--energy  { --accent:#2d4373; }
.product--sleep   { --accent:#3d5e3a; }
.product--calm    { --accent:#2c3a2c; }
.product--immunity{ --accent:#4a6741; }
.product--d3k2    { --accent:#1a1a1a; }

.product-bottle{
  margin-bottom:14px;
  height:220px;
  display:flex;align-items:flex-end;justify-content:center;
}
.product-bottle img{
  height:100%;width:auto;
  transition: transform .35s ease;
}
.product:hover .product-bottle img{transform:translateY(-4px)}
.product-name{
  font-family:'Cormorant Garamond',serif;
  font-size:28px;letter-spacing:.02em;font-weight:600;
  color:#1a2a1d;
  margin:8px 0;
}
.product-divider{
  width:36px;height:2px;
  background:var(--accent);
  flex-shrink:0;
}
.product-desc{
  margin-top:14px;
  font-size:14px;line-height:1.55;
  color:#3d4a36;
  font-weight: 700;
  display:flex;flex-direction:column;align-items:center;
}
.product-desc-eyebrow{
  display:block;
}
.product-icon{
  margin-top:18px;
  display:flex;justify-content:center;align-items:center;
}
.product-icon img{width:100px;height:100px;object-fit:contain;margin:0 auto}

/* =================================================================
   COMING SOON
   ================================================================= */
.coming{
  color:#1a2218;
  padding:0 48px;
}
.coming-inner{
  max-width:1480px;margin:0 auto;
  background:#E2D7CC;
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;
}
.coming-copy{
  padding:80px 64px 90px 64px;
  align-self:center;
}
.coming-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(32px, 3.4vw, 44px);
  font-weight:700;letter-spacing:-.01em;
  color:#1a2a1d;
}
.coming-copy p{
  margin-top:16px;max-width:440px;
  font-size:14px;line-height:1.8;color:#4a564a;
  font-weight: 500;
}
.signup{
  margin-top:28px;
  display:flex;align-items:stretch;
  max-width:440px;
  border:1px solid rgba(26,42,29,.28);
  background:rgba(255,255,255,.4);
}
.signup input{
  flex:1;background:transparent;border:0;outline:0;
  padding:14px 16px;
  font-family:'Manrope',sans-serif;font-size:12px;
  letter-spacing:.06em;color:#1a2a1d;
}
.signup input::placeholder{color:#7a8475}
.signup button{
  background:#1a2a1d;color:var(--cream);
  border:0;padding:0 22px;
  font-size:10px;letter-spacing:.35em;
  text-transform:uppercase;font-weight:500;
  transition:background .25s ease;
}
.signup button:hover{background:#2a3b2c}
.signup.done{opacity:.85}
.perks{
  margin-top:22px;
  display:flex;gap:24px;flex-wrap:wrap;
}
.perk{
  display:flex;align-items:center;gap:8px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:#4a564a;
}
.perk img{width:13px;height:13px;opacity:.7}

.coming-lineup{
  display:flex;justify-content:flex-end;
  width:100%;
  aspect-ratio:1408 / 736;
}
.coming-lineup img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:right center;
}

/* =================================================================
   FOOTER
   ================================================================= */
.footer{
  background:#000;
  color:var(--gold);
  padding:20px 48px 36px;
}
.footer-tag{
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  font-weight: 500;
  color:var(--gold);
}
.footer-grid{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:30px;
}
.footer-brand img{
  width:180px;height:auto;display:block;
}
.footer-center{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;
}
.footer-social{
  display:flex;justify-content:center;align-items:center;gap:22px;
}
.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  transition:opacity .25s ease;
  opacity:.9;
}
.footer-social a:hover{opacity:1}
.footer-social img{
  height:26px;width:auto;display:block;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}
.footer-copy{
  display:grid;justify-content:end;
  text-align:left;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);
}
.footer-copy small{
  display:block;margin-top:4px;
  letter-spacing:.1em;text-transform:none;opacity:.85;
}

/* =================================================================
   ANIMATIONS & MICRO-INTERACTIONS
   ================================================================= */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes bottle-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes glow-breathe{
  0%,100%{opacity:1}
  50%{opacity:.78}
}
@keyframes shimmer{
  from{background-position:-200% 0}
  to{background-position:200% 0}
}

.logo{animation:fade 1.4s ease both}
.hero-copy h1{animation:rise 1s .25s ease both}
.hero-copy p{animation:rise 1s .45s ease both}
.hero-right{animation:rise 1.3s .15s ease both}
.hero-bottle{animation:bottle-float 9s ease-in-out infinite}
.hero::before{animation:glow-breathe 9s ease-in-out infinite}
.badge{animation:rise 1s ease both}
.badge:nth-child(1){animation-delay:.55s}
.badge:nth-child(2){animation-delay:.65s}
.badge:nth-child(3){animation-delay:.75s}
.badge:nth-child(4){animation-delay:.85s}
.badge:nth-child(5){animation-delay:.95s}

/* Subtle hover on badges — icon gently scales, label brightens */
.badge .badge-icon,
.badge .badge-label{
  transition:transform .5s cubic-bezier(.2,.7,.3,1),color .35s ease;
}
.badge:hover .badge-icon{transform:scale(1.08) translateY(-2px)}
.badge:hover .badge-label{color:rgba(255,255,255,.92)}

/* Product card refinement */
.product{
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.product:hover{transform:translateY(-6px)}
.product .product-bottle img{
  filter:drop-shadow(0 6px 10px rgba(40,30,20,.10));
  transition:filter .45s ease,transform .45s cubic-bezier(.2,.7,.3,1);
}
.product:hover .product-bottle img{
  filter:drop-shadow(0 18px 22px rgba(40,30,20,.22));
  transform:translateY(-6px) scale(1.02);
}
.product-icon img{
  transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .5s ease;
}
.product:hover .product-icon img{
  transform:scale(1.05) rotate(-2deg);
  filter:drop-shadow(0 4px 6px rgba(40,30,20,.12));
}

/* Signup button — gentle gold shimmer on hover */
.signup button{
  position:relative;overflow:hidden;
}
.signup button::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg,
    transparent 30%,
    rgba(201,169,106,.28) 50%,
    transparent 70%);
  background-size:200% 100%;
  background-position:-200% 0;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
}
.signup button:hover::after{
  opacity:1;
  animation:shimmer 1.4s linear infinite;
}

/* Footer social — gentle lift */
.footer-social a{
  transition:transform .35s cubic-bezier(.2,.7,.3,1),color .25s ease,border-color .25s ease;
}
.footer-social a:hover{transform:translateY(-3px)}

/* Paper-grain texture for cream sections — barely visible, adds warmth */
.products-inner,
.coming-inner{
  position:relative;
  isolation:isolate;
}
.products-inner::after,
.coming-inner::after{
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.05;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:0;
}
.products-inner > *,
.coming-inner > *{
  position:relative;z-index:1;
}

/* Scroll-reveal — applied via JS by adding .reveal class to elements,
   then .in-view fires the transition into place. */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.3,1),
             transform 1.1s cubic-bezier(.2,.7,.3,1);
  will-change:opacity,transform;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
/* Staggered children — use --i custom property set by JS */
.reveal-stagger > *{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1),
             transform .9s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.reveal-stagger.in-view > *{
  opacity:1;
  transform:translateY(0);
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
}

/* =================================================================
   RESPONSIVE — tablet & mobile
   -----------------------------------------------------------------
   Strategy:
   • Hero collapses to single column with explicit visual order:
     logo+copy → bottle → badges. We use display:contents on
     .hero-inner so its children become direct flex children of
     .hero and can be ordered freely with the bottle (which is
     already a direct child of .hero).
   • Bottle drops out of absolute positioning and flows inline,
     centred, with the left-edge mask removed.
   • Badges become a flex grid (3 across, wrapping) instead of a
     single row, with the vertical dividers hidden.
   ================================================================= */
@media (max-width:960px){
  .hero{
    height:auto; min-height:0; max-height:none;
    padding:36px 24px 32px;
    gap:32px;
  }
  /* Shrink the atmospheric glow and re-centre it under the bottle */
  .hero::before{
    width:140vw; height:55vh;
    max-width:none; max-height:none;
    top:auto; bottom:-12%;
    right:auto; left:50%; transform:translateX(-50%);
  }

  /* Flatten .hero-inner so all hero children participate in the
     same flex column. */
  .hero-inner{display:contents}
  .hero-left{order:1; align-items:flex-start; gap:24px}
  .hero-right{display:none}
  .hero-bottle{
    order:2;
    position:relative;
    top:auto; bottom:auto; right:auto; left:auto;
    inset:auto;
    width:100%; max-width:520px;
    height:auto; max-height:54vh;
    aspect-ratio:928 / 1120;
    margin:0 auto;
    object-fit:contain;
    object-position:center;
    translate:none;
    -webkit-mask-image:none;
            mask-image:none;
    animation:none;
  }
  .badges{order:3}

  .logo{width:200px}
  .hero-copy h1{font-size:clamp(30px, 8vw, 44px); line-height:1.2}
  .hero-copy p{font-size:15px; line-height:1.75; max-width:none}
  .hero-divider{margin:22px 0; width:64px}

  /* Badges — 3-column grid, dividers off, comfortable touch targets */
  .badges{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px 8px;
    padding-top:8px;
    width:100%;
    justify-content:initial;
  }
  .badge{
    padding:6px 2px;
    min-width:0;
    width:auto;
  }
  .badge:first-child{padding-left:2px}
  .badge + .badge::before{display:none}
  .badge-icon{width:48px; height:48px}
  .badge-icon img{width:44px; height:44px}
  .badge-label{font-size:8.5px; letter-spacing:.18em}

  /* Products */
  .products{padding:0 12px}
  .products-inner{padding:56px 22px 64px}
  .section-title{font-size:clamp(28px, 6vw, 38px)}
  .grid-products{
    grid-template-columns:repeat(3, 1fr);
    gap:24px 12px;
    margin-top:44px;
  }
  .product{padding:6px 2px 0}
  .product-bottle{height:170px; margin-bottom:8px}
  .product-name{font-size:21px; margin:6px 0}
  .product-divider{width:30px; height:1px}
  .product-desc{font-size:12px; line-height:1.55; margin-top:8px}
  .product-icon{margin-top:14px}
  .product-icon img{width:70px; height:70px}

  /* Coming soon — single column, lineup full-width below copy */
  .coming{padding:0 12px}
  .coming-inner{
    grid-template-columns:1fr;
    gap:0;
    padding:0;
  }
  .coming-copy{padding:56px 28px 32px}
  .coming-title{font-size:clamp(28px, 6vw, 38px)}
  .coming-copy p{font-size:14px; line-height:1.75}
  .signup{max-width:100%}
  .signup input{padding:14px 14px; font-size:13px}
  .signup button{padding:0 18px; font-size:10px; letter-spacing:.25em}
  .coming-lineup{
    aspect-ratio:auto;
    width:100%;
    padding:0 0 24px;
  }
  .coming-lineup img{
    width:100%; height:auto;
    object-fit:contain;
    object-position:center bottom;
  }

  /* Footer */
  .footer{padding:32px 24px 28px}
  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:22px;
  }
  .footer-brand{display:flex; justify-content:center}
  .footer-brand img{width:150px}
  .footer-center{align-items:center}
  .footer-copy{justify-content:center; text-align:center}
}

/* Small phones */
@media (max-width:560px){
  .hero{padding:28px 18px 28px; gap:28px}
  .logo{width:170px}
  .hero-copy h1{font-size:clamp(26px, 8.5vw, 36px)}
  .hero-copy p{font-size:14px}
  .hero-divider{margin:18px 0; width:54px}

  /* Badges: 2 per row on small phones — easier to read labels */
  .badges{
    grid-template-columns:repeat(2, 1fr);
    gap:16px 10px;
  }

  .products-inner{padding:44px 18px 52px}
  .grid-products{
    grid-template-columns:repeat(2, 1fr);
    gap:28px 14px;
  }
  .product-bottle{height:160px}
  .product-name{font-size:22px}
  .product-icon img{width:64px; height:64px}

  .coming-copy{padding:44px 22px 28px}
  .coming-title{font-size:clamp(26px, 7vw, 34px)}

  .footer{padding:26px 20px 24px}
  .footer-brand img{width:130px}
}

/* Very small phones */
@media (max-width:380px){
  .hero{padding:24px 14px 24px}
  .hero-copy h1{font-size:26px; line-height:1.22}
  .grid-products{gap:24px 10px}
  .product-name{font-size:20px}
  .product-bottle{height:140px}
  .product-icon img{width:54px; height:54px}
}