/* =====================================================
   NaturaGene Care v4 — style.css
   Premium Mobile-First | Fixed Nav | Engaging Hero
   ===================================================== */

:root {
  --sage:      #7AA874;
  --sage-d:    #4f7849;
  --sage-dd:   #2d4a2d;
  --sage-l:    #e8f5e6;
  --sage-ll:   #f4faf3;
  --gold:      #C9A84C;
  --gold-l:    #f5e8c0;
  --gold-d:    #9a7428;
  --dark:      #0d1a0d;
  --dark-2:    #1a2e1a;
  --text:      #2a3828;
  --muted:     #6b7c6a;
  --border:    #e2ede1;
  --white:     #fff;
  --off:       #fafef9;
  --r-sm:      10px;
  --r-md:      16px;
  --r-lg:      24px;
  --r-xl:      32px;
  --r-f:       999px;
  --sh-sm:     0 2px 12px rgba(0,0,0,.07);
  --sh-md:     0 8px 32px rgba(0,0,0,.10);
  --sh-lg:     0 20px 60px rgba(0,0,0,.13);
  --sh-sage:   0 8px 32px rgba(122,168,116,.25);
  --sh-gold:   0 8px 32px rgba(201,168,76,.30);
  --fs:        'Cormorant Garamond', Georgia, serif;
  --fb:        'DM Sans', system-ui, sans-serif;
  --ease:      cubic-bezier(.25,.46,.45,.94);
  --spring:    cubic-bezier(.34,1.56,.64,1);
  --t:         .35s;
  --header-h:  76px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--fb); color: var(--text); background: var(--white); line-height: 1.7; overflow-x: hidden; }
img  { max-width: 100%; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
button { font-family: var(--fb); }

.container { width: min(90%, 1160px); margin-inline: auto; }
.section    { padding: 6rem 0; }
.alt-bg     { background: var(--sage-ll); }

h1,h2,h3 { font-family: var(--fs); line-height: 1.15; color: var(--dark-2); }
h1  { font-size: clamp(2.1rem, 5.5vw, 3.9rem); font-weight: 600; }
h2  { font-size: clamp(1.65rem, 4vw, 2.9rem); font-weight: 600; }
h3  { font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 600; }
h4  { font-size: 1rem; font-weight: 600; }
p   { color: var(--muted); }
em  { font-style: italic; color: var(--sage-d); }
.hero-script { display:block; font-style:italic; color:var(--sage-d); background:linear-gradient(120deg,var(--sage-d),var(--gold-d)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.eyebrow { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-d); margin-bottom:.9rem; }
.sec-head { text-align:center; margin-bottom:3.5rem; }
.sec-sub  { max-width:480px; margin:.8rem auto 0; font-size:1rem; }

/* BADGES */
.badge { display:inline-flex; align-items:center; gap:.45rem; padding:.4rem 1.1rem; border-radius:var(--r-f); font-size:.78rem; font-weight:600; letter-spacing:.05em; margin-bottom:1.4rem; }
.badge-green { background:var(--sage-l); color:var(--sage-d); border:1.5px solid var(--sage); }
.badge-gold  { background:var(--gold-l); color:var(--gold-d); border:1.5px solid var(--gold); }
.bdot { width:7px; height:7px; border-radius:50%; background:var(--sage); animation:pdot 1.6s ease-in-out infinite; }
.bdot-gold { background:var(--gold); }
@keyframes pdot { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.55)} }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.9rem; border-radius:var(--r-f); font-size:.93rem; font-weight:600; cursor:pointer; border:2px solid transparent; transition:transform var(--t) var(--spring), box-shadow var(--t) var(--ease), background var(--t); white-space:nowrap; position:relative; overflow:hidden; }
.btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.12); opacity:0; transition:opacity .25s; }
.btn:hover::after { opacity:1; }
.btn:active { transform:scale(.97) !important; }
.btn-primary { background:var(--sage); color:#fff; box-shadow:0 4px 18px rgba(122,168,116,.35); }
.btn-primary:hover { background:var(--sage-d); transform:translateY(-3px); box-shadow:0 10px 32px rgba(122,168,116,.45); }
.btn-gold { background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:#fff; box-shadow:var(--sh-gold); }
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(201,168,76,.5); }
.btn-full { width:100%; justify-content:center; }

/* Shine sweep on primary CTA */
.btn-shine::before { content:''; position:absolute; top:0; left:-60%; width:50%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg); animation:shineSweep 3.2s ease-in-out infinite; }
@keyframes shineSweep { 0%{left:-60%} 50%{left:130%} 100%{left:130%} }

/* CURSOR */
@media (pointer:fine) { body { cursor:none; } .cursor, .cursor-dot { display:block; } }
.cursor { display:none; position:fixed; width:32px; height:32px; border:1.5px solid var(--sage); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:left .18s var(--ease),top .18s var(--ease); opacity:.5; }
.cursor-dot { display:none; position:fixed; width:8px; height:8px; background:var(--sage); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:background .25s; mix-blend-mode:multiply; }

/* ══ HEADER ══════════════════════════════════════════ */
.header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid transparent; transition:border-color .3s,box-shadow .3s; height:var(--header-h); display:flex; align-items:center; }
.header.scrolled { border-color:var(--border); box-shadow:0 4px 24px rgba(0,0,0,.07); }
.nav { display:flex; align-items:center; justify-content:space-between; width:100%; }

.nav-logo { display:flex; align-items:center; }
.nav-logo-img { height:56px; width:56px; border-radius:50%; object-fit:cover; box-shadow:0 2px 10px rgba(0,0,0,.1); transition:transform var(--t) var(--spring); }
.nav-logo:hover .nav-logo-img { transform:scale(1.08) rotate(-3deg); }

.nav-list { display:flex; align-items:center; gap:1.8rem; }
.nav-link { font-size:.87rem; font-weight:500; color:var(--text); position:relative; padding-bottom:2px; transition:color var(--t); }
.nav-link::after { content:''; position:absolute; bottom:-1px; left:0; width:0; height:2px; background:var(--sage); border-radius:2px; transition:width var(--t) var(--ease); }
.nav-link:hover { color:var(--sage-d); }
.nav-link:hover::after { width:100%; }
.nav-cta { background:var(--sage); color:#fff !important; padding:.55rem 1.35rem; border-radius:var(--r-f); transition:background var(--t),transform var(--t) var(--spring); }
.nav-cta:hover { background:var(--sage-d); transform:translateY(-2px); }
.nav-cta::after { display:none; }

.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; z-index:1002; position:relative; }
.burger span { display:block; width:24px; height:2px; background:var(--text); border-radius:2px; transition:transform var(--t) var(--ease), opacity var(--t), width var(--t); }
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); background:#fff; }
.burger.open span:nth-child(2) { opacity:0; width:0; }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); background:#fff; }

/* Overlay backdrop for mobile menu */
.nav-overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; visibility:hidden; transition:opacity .35s var(--ease); z-index:999; backdrop-filter:blur(2px); }
.nav-overlay.open { opacity:1; visibility:visible; }

/* ══ HERO ════════════════════════════════════════════ */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; padding:3rem 0 5rem; background:linear-gradient(150deg,var(--sage-ll) 0%,var(--white) 45%,#fffaf0 100%); overflow:hidden; }

.hero-grid-lines { position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:
    linear-gradient(rgba(122,168,116,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,168,116,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 70% 30%, black 0%, transparent 65%);
}

.hero-bg-blobs { position:absolute; inset:0; pointer-events:none; }
.hblob { position:absolute; border-radius:50%; filter:blur(72px); animation:blobf 8s ease-in-out infinite alternate; }
.hblob-1 { width:560px; height:560px; background:radial-gradient(circle,rgba(122,168,116,.16) 0%,transparent 70%); top:-120px; right:-100px; }
.hblob-2 { width:420px; height:420px; background:radial-gradient(circle,rgba(201,168,76,.11) 0%,transparent 70%); bottom:-80px; left:-80px; animation-delay:-4s; }
.hblob-3 { width:280px; height:280px; background:radial-gradient(circle,rgba(184,227,255,.18) 0%,transparent 70%); top:40%; left:40%; animation-delay:-7s; }
@keyframes blobf { from{transform:translate(0,0) scale(1)} to{transform:translate(28px,18px) scale(1.08)} }

.hero-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; }

.hero-sub { font-size:1.05rem; max-width:480px; margin-bottom:1.7rem; line-height:1.8; }
.hero-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.7rem; }
.pill { background:rgba(122,168,116,.12); border:1px solid rgba(122,168,116,.25); color:var(--sage-d); font-size:.76rem; font-weight:600; padding:.32rem .8rem; border-radius:var(--r-f); transition:transform var(--t) var(--spring); }
.pill:hover { transform:translateY(-2px); }
.hero-btns { display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:1.6rem; }
.hero-trust { display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:1.8rem; }
.hero-trust span { font-size:.78rem; color:var(--sage-d); font-weight:600; }

/* Hero stat row */
.hero-stats { display:flex; align-items:center; gap:1.4rem; padding-top:1.4rem; border-top:1px solid var(--border); max-width:480px; }
.hstat { display:flex; flex-direction:column; gap:.1rem; }
.hstat strong { font-family:var(--fs); font-size:1.4rem; color:var(--dark-2); font-weight:700; }
.hstat span { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.hstat-divider { width:1px; height:32px; background:var(--border); }

/* Hero visual */
.hero-visual { display:flex; justify-content:center; }
.hero-frame { position:relative; width:100%; max-width:440px; }
.hframe-glow { position:absolute; inset:15%; border-radius:50%; background:radial-gradient(circle,rgba(122,168,116,.22) 0%,transparent 70%); filter:blur(28px); pointer-events:none; animation:glowp 3s ease-in-out infinite alternate; }
@keyframes glowp { from{opacity:.5;transform:scale(.9)} to{opacity:1;transform:scale(1.12)} }
.hframe-ring { position:absolute; border-radius:50%; border:1.5px solid rgba(122,168,116,.18); pointer-events:none; animation:ringp 4s ease-in-out infinite; }
.r1 { inset:-16px; }
.r2 { inset:-32px; opacity:.45; animation-delay:-1.4s; }
.r3 { inset:-50px; opacity:.25; animation-delay:-2.8s; border-style:dashed; }
@keyframes ringp { 0%,100%{transform:scale(1);opacity:.25} 50%{transform:scale(1.025);opacity:.55} }
.hframe-card { background:rgba(255,255,255,.8); border:1.5px solid rgba(122,168,116,.2); border-radius:var(--r-xl); box-shadow:var(--sh-lg),0 0 0 1px rgba(255,255,255,.8) inset; backdrop-filter:blur(16px); overflow:hidden; padding:1.4rem; position:relative; transition:transform .5s var(--spring); animation:cardFloat 5s ease-in-out infinite; }
@keyframes cardFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.hframe-card:hover { transform:translateY(-6px) rotate(.4deg); animation-play-state:paused; }
.hero-product-img { width:100%; border-radius:calc(var(--r-xl) - 10px); aspect-ratio:1/1; object-fit:cover; }
.hframe-badge { position:absolute; bottom:1.7rem; right:1.7rem; background:var(--sage); color:#fff; font-size:.74rem; font-weight:700; padding:.42rem .95rem; border-radius:var(--r-f); display:flex; align-items:center; gap:.4rem; box-shadow:0 4px 14px rgba(122,168,116,.4); }
.hbdot { width:6px; height:6px; border-radius:50%; background:#aff5a2; animation:pdot 1.4s ease-in-out infinite; }

.ftag { position:absolute; background:rgba(255,255,255,.95); border:1px solid var(--border); border-radius:var(--r-f); font-size:.73rem; font-weight:600; color:var(--sage-d); padding:.36rem .85rem; box-shadow:var(--sh-sm); animation:ftf 4s ease-in-out infinite alternate; white-space:nowrap; z-index:2; }
.ftag-1 { top:6%;   left:-14%;  animation-delay:0s; }
.ftag-2 { top:42%;  left:-20%;  animation-delay:-1.3s; }
.ftag-3 { bottom:22%; right:-14%; animation-delay:-2.6s; }
.ftag-4 { bottom:2%; left:8%;   animation-delay:-3.8s; }
@keyframes ftf { from{transform:translateY(0)} to{transform:translateY(-9px)} }

.scroll-cue { position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; font-size:.7rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; z-index:1; }
.sc-mouse { width:22px; height:36px; border:2px solid var(--sage); border-radius:12px; display:flex; justify-content:center; padding-top:6px; }
.sc-wheel { width:3px; height:8px; background:var(--sage); border-radius:2px; animation:scw 1.8s ease-in-out infinite; }
@keyframes scw { 0%{transform:translateY(0);opacity:1} 80%{transform:translateY(10px);opacity:0} 100%{transform:translateY(0);opacity:0} }

/* MARQUEE */
.marquee { background:var(--sage); color:#fff; padding:.65rem 0; overflow:hidden; user-select:none; }
.mtrack { display:flex; gap:2rem; width:max-content; animation:mrq 24s linear infinite; font-size:.8rem; font-weight:600; letter-spacing:.04em; align-items:center; }
.msep { opacity:.5; }
@keyframes mrq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* INGREDIENTS */
.ing-layout { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.ing-main-img { width:100%; border-radius:var(--r-xl); box-shadow:var(--sh-lg); }
.ing-cards { display:flex; flex-direction:column; gap:1.25rem; }
.ing-card { display:flex; align-items:flex-start; gap:1.1rem; background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:1.4rem 1.3rem; transition:transform var(--t) var(--spring), box-shadow var(--t), border-color var(--t); }
.ing-card:hover { transform:translateX(6px); box-shadow:var(--sh-sage); border-color:var(--sage); }
.ing-icon { font-size:2rem; flex-shrink:0; line-height:1; margin-top:.1rem; }
.ing-card h3 { margin-bottom:.3rem; font-size:1.1rem; }
.ing-card p  { font-size:.87rem; }

/* BENEFITS */
.bene-layout { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.bene-cards  { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.bene-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:1.5rem 1.25rem; transition:transform var(--t) var(--spring), box-shadow var(--t), border-color var(--t); position:relative; overflow:hidden; }
.bene-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--sage),var(--gold)); transform:scaleX(0); transition:transform var(--t) var(--ease); transform-origin:left; }
.bene-card:hover { transform:translateY(-5px); box-shadow:var(--sh-md); border-color:var(--sage); }
.bene-card:hover::after { transform:scaleX(1); }
.bene-icon { font-size:2rem; display:block; margin-bottom:.8rem; transition:transform var(--t) var(--spring); }
.bene-card:hover .bene-icon { transform:scale(1.2); }
.bene-card h4 { margin-bottom:.35rem; }
.bene-card p  { font-size:.86rem; }
.bene-img-wrap .bene-img { width:100%; border-radius:var(--r-xl); box-shadow:var(--sh-lg); }

/* LIFESTYLE */
.lifestyle-section { background:var(--white); }
.lifestyle-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.ls-img { width:100%; border-radius:var(--r-xl); box-shadow:var(--sh-lg); }
.lifestyle-text h2 { margin-bottom:1rem; }
.lifestyle-text p  { margin-bottom:1.5rem; }
.ls-list { display:flex; flex-direction:column; gap:.7rem; }
.ls-list li { display:flex; align-items:center; gap:.65rem; font-size:.92rem; font-weight:500; color:var(--text); }
.ls-list span { font-size:1.1rem; }

/* GIFT */
.gift-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.gift-text h2 { margin-bottom:1rem; }
.gift-text p  { margin-bottom:1.5rem; }
.gift-tags { display:flex; flex-wrap:wrap; gap:.55rem; }
.gtag { background:var(--white); border:1.5px solid var(--border); color:var(--text); font-size:.78rem; font-weight:600; padding:.3rem .8rem; border-radius:var(--r-f); }
.gift-img-el { width:100%; border-radius:var(--r-xl); box-shadow:var(--sh-lg); }

/* GALLERY */
.gallery-section { background:var(--white); }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.gal-card { border-radius:var(--r-lg); overflow:hidden; position:relative; box-shadow:var(--sh-sm); transition:transform var(--t) var(--spring), box-shadow var(--t); }
.gal-card:hover { transform:translateY(-6px) scale(1.01); box-shadow:var(--sh-lg); }
.gal-card img { width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .5s var(--ease); }
.gal-card:hover img { transform:scale(1.05); }
.gal-label { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(13,26,13,.85),transparent); color:#fff; padding:1.2rem 1rem .8rem; font-size:.83rem; font-weight:600; }

/* BANNER */
.banner-section { position:relative; overflow:hidden; }
.banner-img-wrap { position:relative; }
.banner-img { width:100%; max-height:520px; object-fit:cover; display:block; }
.banner-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(13,26,13,.7) 0%,rgba(13,26,13,.2) 60%,transparent 100%); display:flex; flex-direction:column; justify-content:center; padding:0 8%; gap:1.8rem; }
.banner-overlay h2 { color:#fff; font-size:clamp(1.8rem,4vw,3rem); text-shadow:0 2px 12px rgba(0,0,0,.3); }

/* COUNTDOWN */
.countdown-sec { background:var(--dark-2); color:#fff; text-align:center; position:relative; overflow:hidden; }
.countdown-sec h2 { color:#fff; }
.countdown-sec p  { color:rgba(255,255,255,.7); margin-bottom:2.5rem; }
.cd-orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.cd-orb1 { width:400px; height:400px; background:rgba(122,168,116,.12); top:-100px; right:-80px; animation:blobf 8s ease-in-out infinite alternate; }
.cd-orb2 { width:300px; height:300px; background:rgba(201,168,76,.09); bottom:-80px; left:-60px; animation:blobf 8s ease-in-out infinite alternate; animation-delay:-4s; }
.cd-inner { position:relative; z-index:1; max-width:720px; margin-inline:auto; }
.cd-timer { display:flex; justify-content:center; align-items:center; gap:.75rem; flex-wrap:wrap; margin:2.5rem auto 3rem; }
.cd-block { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md); padding:1.4rem 1.8rem; min-width:96px; backdrop-filter:blur(10px); transition:transform var(--t) var(--spring); }
.cd-block:hover { transform:translateY(-4px); }
.cd-num { font-family:var(--fs); font-size:2.8rem; font-weight:700; color:var(--gold); display:block; line-height:1; }
.cd-num.flip { animation:numf .3s var(--ease); }
@keyframes numf { 0%{transform:translateY(-4px);opacity:.3} 100%{transform:translateY(0);opacity:1} }
.cd-block label { display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:.4rem; }
.cd-sep { font-size:2rem; color:var(--gold); font-weight:700; margin-bottom:1.5rem; opacity:.7; }

/* WAITLIST */
.waitlist-sec { background:var(--sage-ll); }
.wl-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.wl-info h2 { margin-bottom:1rem; }
.wl-info > p { margin-bottom:1.8rem; }
.wl-perks { display:flex; flex-direction:column; gap:.7rem; margin-bottom:2rem; }
.wl-perks li { display:flex; align-items:center; gap:.65rem; font-size:.92rem; font-weight:500; color:var(--text); }
.wl-perks span { font-size:1.1rem; }
.wl-mini-product { display:flex; align-items:center; gap:1rem; background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-md); padding:1rem 1.25rem; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.wl-mini-img { width:56px; height:56px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; }
.wl-mini-product strong { display:block; font-size:.9rem; margin-bottom:.25rem; color:var(--text); }
.early-tag { font-size:.76rem; color:var(--sage-d); font-weight:700; background:var(--sage-l); padding:.18rem .6rem; border-radius:var(--r-f); }

.wl-right { display:flex; flex-direction:column; gap:1.5rem; }
.form-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-xl); padding:2.2rem; box-shadow:var(--sh-sm); }
.form-card h3 { margin-bottom:1.5rem; font-size:1.3rem; }
#wlForm { display:flex; flex-direction:column; gap:1rem; }
.fg { display:flex; flex-direction:column; gap:.3rem; }
.fg label { font-size:.79rem; font-weight:600; color:var(--text); }
.fg input { width:100%; padding:.82rem 1.05rem; border:1.5px solid var(--border); border-radius:var(--r-md); font-family:var(--fb); font-size:.93rem; color:var(--text); background:var(--off); outline:none; transition:border-color var(--t),box-shadow var(--t),background var(--t); }
.fg input:focus { border-color:var(--sage); box-shadow:0 0 0 3px rgba(122,168,116,.14); background:var(--white); }
.fg input.error { border-color:#e74c3c; }
.ferr { font-size:.75rem; color:#e74c3c; min-height:1rem; display:block; }
.fsuccess { background:var(--sage-l); color:var(--sage-d); border-radius:var(--r-md); padding:1rem 1.2rem; text-align:center; font-weight:600; font-size:.9rem; display:none; animation:slideD .4s var(--ease); }
@keyframes slideD { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.po-card { background:var(--white); border:1.5px solid var(--gold-l); border-radius:var(--r-lg); padding:1.75rem; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.po-label { font-size:.88rem; font-weight:600; margin-bottom:.9rem; color:var(--text); }
.po-note  { font-size:.74rem; color:var(--muted); margin-top:.75rem; }
.po-logos { display:flex; justify-content:center; gap:.5rem; margin-top:.9rem; flex-wrap:wrap; }
.po-logos span { font-size:.66rem; font-weight:700; background:var(--sage-l); color:var(--sage-d); padding:.22rem .65rem; border-radius:var(--r-f); letter-spacing:.04em; }

/* BLOG */
.blog-article { max-width:740px; margin-inline:auto; }
.blog-lead { font-size:1.05rem; color:var(--text); line-height:1.85; margin-bottom:2.5rem; padding:1.5rem; background:var(--sage-ll); border-left:4px solid var(--sage); border-radius:0 var(--r-md) var(--r-md) 0; }
.blog-article h3 { font-family:var(--fs); font-size:1.45rem; margin:3rem 0 1rem; color:var(--dark-2); position:relative; padding-bottom:.55rem; }
.blog-article h3::after { content:''; position:absolute; bottom:0; left:0; width:38px; height:2px; background:linear-gradient(90deg,var(--sage),var(--gold)); border-radius:2px; }
.blog-article p  { margin-bottom:1.1rem; line-height:1.85; }
.blog-article ul { margin:1rem 0 1.8rem 1.5rem; display:flex; flex-direction:column; gap:.65rem; }
.blog-article li { font-size:.94rem; color:var(--muted); line-height:1.75; list-style:disc; }
.blog-article strong { color:var(--text); font-weight:600; }

/* FAQ */
.faq-list { margin-top:2rem; display:flex; flex-direction:column; gap:.7rem; }
.fi { border:1.5px solid var(--border); border-radius:var(--r-md); overflow:hidden; transition:border-color var(--t),box-shadow var(--t); }
.fi:hover { border-color:var(--sage); box-shadow:0 1px 6px rgba(122,168,116,.12); }
.fq { width:100%; background:var(--white); border:none; text-align:left; padding:1.15rem 1.25rem; font-family:var(--fb); font-size:.93rem; font-weight:600; color:var(--text); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; transition:background var(--t); }
.fq:hover { background:var(--sage-ll); }
.fq.open  { background:var(--sage-l); color:var(--sage-d); }
.fi-icon  { font-size:1.35rem; font-weight:300; color:var(--sage); flex-shrink:0; transition:transform var(--t) var(--spring); }
.fq.open .fi-icon { transform:rotate(45deg); }
.fa { max-height:0; overflow:hidden; background:#fafef9; transition:max-height .45s var(--ease),padding .3s; }
.fa.open { max-height:250px; padding:.85rem 1.25rem 1.1rem; }
.fa p { font-size:.9rem; margin-bottom:0; }

/* TRUST */
.trust-sec { background:linear-gradient(135deg,var(--sage-ll),var(--sage-l)); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.trust-item { padding:2.5rem 1.25rem; transition:transform var(--t) var(--spring); }
.trust-item:hover { transform:translateY(-5px); }
.tcheck { width:52px; height:52px; border-radius:50%; background:var(--sage); color:#fff; font-size:1.25rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-bottom:1.1rem; box-shadow:0 6px 20px rgba(122,168,116,.35); transition:transform var(--t) var(--spring),box-shadow var(--t); }
.trust-item:hover .tcheck { transform:scale(1.15) rotate(-5deg); box-shadow:0 10px 30px rgba(122,168,116,.45); }
.trust-item h4 { margin-bottom:.4rem; }

/* FOOTER */
.footer { background:var(--dark); color:rgba(255,255,255,.8); padding:4.5rem 0 2rem; }
.footer-topbar { height:3px; background:linear-gradient(90deg,var(--sage),var(--gold),var(--sage)); margin-bottom:4.5rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-logo { height:64px; width:64px; border-radius:50%; object-fit:cover; margin-bottom:1.1rem; box-shadow:0 2px 14px rgba(0,0,0,.3); }
.footer-brand p { font-size:.88rem; line-height:1.75; color:rgba(255,255,255,.55); margin-bottom:1.2rem; }
.footer-contact { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.5rem; }
.fcontact-item { display:flex; align-items:flex-start; gap:.6rem; font-size:.84rem; color:rgba(255,255,255,.65); line-height:1.5; }
.fcontact-item svg { flex-shrink:0; margin-top:.15rem; color:var(--sage); }
.fcontact-item a { color:rgba(255,255,255,.65); transition:color var(--t); }
.fcontact-item a:hover { color:var(--sage); }
.footer-social { display:flex; gap:.65rem; }
.soc-btn { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); transition:background var(--t),color var(--t),transform var(--t) var(--spring); }
.soc-btn:hover { background:var(--sage); color:#fff; transform:translateY(-3px); }
.footer-col h5 { color:var(--sage); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.2rem; font-weight:700; }
.footer-col li { margin-bottom:.5rem; }
.footer-col a { font-size:.87rem; color:rgba(255,255,255,.6); transition:color var(--t),transform var(--t); display:inline-block; }
.footer-col a:hover { color:var(--sage); transform:translateX(4px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:1.75rem; text-align:center; font-size:.78rem; color:rgba(255,255,255,.35); }

/* ANIMATIONS */
.fade-u  { opacity:0; transform:translateY(30px); animation:fadeU .8s var(--ease) forwards; animation-delay:var(--d,0s); }
.fade-r  { opacity:0; transform:translateX(40px); animation:fadeR .8s var(--ease) forwards; animation-delay:var(--d,0s); }
@keyframes fadeU { to{opacity:1;transform:translateY(0)} }
@keyframes fadeR { to{opacity:1;transform:translateX(0)} }

.rv      { opacity:0; transform:translateY(32px); transition:opacity .75s var(--ease),transform .75s var(--ease); transition-delay:calc(var(--i,0)*.08s); }
.rv-l    { opacity:0; transform:translateX(-32px); transition:opacity .75s var(--ease),transform .75s var(--ease); }
.rv-r    { opacity:0; transform:translateX(32px);  transition:opacity .75s var(--ease),transform .75s var(--ease); }
.vis     { opacity:1 !important; transform:none !important; }

/* ══ RESPONSIVE ══════════════════════════════════════ */
@media (max-width:1100px) {
  .trust-grid { grid-template-columns:repeat(2,1fr); }
  .bene-cards { grid-template-columns:1fr 1fr; }
}

@media (max-width:900px) {
  .hero { padding-top:1.5rem; }
  .hero-inner     { grid-template-columns:1fr; gap:2.6rem; text-align:center; }
  .hero-sub, .hero-pills, .hero-btns, .hero-trust { max-width:100%; justify-content:center; }
  .hero-stats     { margin-inline:auto; justify-content:center; }
  .hero-visual    { order:-1; }
  .hero-frame     { max-width:320px; margin-inline:auto; }
  .ftag-2         { display:none; }
  .ftag-1         { left:-4%; }
  .ftag-3         { right:-4%; }
  .ftag-4         { left:2%; }

  .ing-layout     { grid-template-columns:1fr; gap:2.5rem; }
  .ing-img-wrap   { max-width:500px; margin-inline:auto; }
  .bene-layout    { grid-template-columns:1fr; gap:2.5rem; }
  .bene-img-wrap  { max-width:500px; margin-inline:auto; }
  .lifestyle-inner { grid-template-columns:1fr; gap:2.5rem; }
  .gift-inner     { grid-template-columns:1fr; gap:2.5rem; }
  .gallery-grid   { grid-template-columns:1fr 1fr; }
  .wl-grid        { grid-template-columns:1fr; gap:3rem; }
  .footer-grid    { grid-template-columns:1fr 1fr; }
  .footer-brand   { grid-column:span 2; }
  .banner-overlay { padding:0 5%; }
}

/* MOBILE — nav drawer fix is the priority here */
@media (max-width:640px) {
  .nav-list {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(82vw, 340px);
    background: linear-gradient(160deg, var(--dark-2) 0%, var(--dark) 100%);
    padding: calc(var(--header-h) + 2rem) 2rem 2.5rem;
    gap: 0;
    z-index: 1001;
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    overflow-y: auto;
    box-shadow: -10px 0 40px rgba(0,0,0,.3);
  }
  .nav-list.open { transform: translateX(0); }

  .nav-list .nav-link {
    color: rgba(255,255,255,.85);
    font-size: 1.15rem;
    padding: .9rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    width: 100%;
  }
  .nav-list .nav-link::after { display:none; }
  .nav-list .nav-link:hover { color: var(--sage); padding-left: .4rem; }
  .nav-list .nav-cta {
    margin-top: 1.5rem;
    text-align: center;
    justify-content: center;
    padding: .9rem 1.5rem;
    font-size: 1rem;
    border-bottom: none;
    display: flex;
  }

  .burger { display:flex; }

  .hero { padding:1rem 0 3rem; min-height:auto; }
  .hero-frame { max-width:270px; }
  .ftag   { display:none; }
  .hero-product-img { aspect-ratio:1/1; }
  .hero-stats { gap:1rem; flex-wrap:wrap; justify-content:center; }
  .hstat-divider { display:none; }

  .section { padding:3.5rem 0; }
  .sec-head { margin-bottom:2.5rem; }

  .bene-cards { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr; }
  .trust-grid { grid-template-columns:1fr 1fr; }

  .banner-img  { max-height:280px; }
  .banner-overlay h2 { font-size:1.6rem; }

  .cd-timer { gap:.4rem; }
  .cd-block { padding:1rem 1.1rem; min-width:70px; }
  .cd-num   { font-size:2.2rem; }
  .cd-sep   { font-size:1.5rem; margin-bottom:1rem; }

  .footer-grid  { grid-template-columns:1fr; gap:2rem; }
  .footer-brand { grid-column:span 1; }

  .hero-btns { flex-direction:column; align-items:stretch; }
  .btn       { justify-content:center; }

  .nav-logo-img { height:46px; width:46px; }
}

@media (max-width:400px) {
  h1 { font-size:1.95rem; }
  h2 { font-size:1.55rem; }
  .trust-grid { grid-template-columns:1fr; }
  .cd-block { padding:.8rem .85rem; min-width:62px; }
  .cd-num   { font-size:1.8rem; }
  .nav-list { width:88vw; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rv,.rv-l,.rv-r,.fade-u,.fade-r { opacity:1; transform:none; animation:none; }
}