/* verde-premium.css · build 102
   One idea carried through the whole site: green light that responds to you.
   - A soft emerald light follows the cursor on desktop.
   - The same light flares along the edges and a glowing scroll marker as you scroll, and settles when you stop.
   - Cards catch that light where you point at them.
   Everything is atmosphere layered over the existing design, gated by prefers-reduced-motion,
   and nothing here hides content if scripts fail. */

:root{
  --vg-green:76,175,130;
  --vg-sage:122,158,95;
  --vg-gold:201,168,76;
  --vg-ease:cubic-bezier(.16,1,.3,1);
}

/* ── atmosphere ─────────────────────────────────────────────────── */
.vg-atmos{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;contain:strict;--vel:0}
.vg-atmos i{position:absolute;display:block;pointer-events:none}

.vg-aura{left:0;top:0;width:860px;height:860px;margin:-430px 0 0 -430px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--vg-green),.36),rgba(var(--vg-green),.17) 40%,rgba(var(--vg-green),.05) 70%,rgba(var(--vg-green),0) 100%);
  opacity:0;transition:opacity 1s var(--vg-ease);will-change:transform}
.vg-atmos.has-pointer .vg-aura{opacity:calc(.78 + var(--vel) * .22)}

.vg-wash{top:0;bottom:0;width:24vw;opacity:calc(var(--vel) * .55)}
.vg-wash-l{left:0;background:radial-gradient(120% 60% at 0% 55%,rgba(var(--vg-green),.20),rgba(var(--vg-green),0) 70%)}
.vg-wash-r{right:0;background:radial-gradient(120% 60% at 100% 45%,rgba(var(--vg-green),.20),rgba(var(--vg-green),0) 70%)}

.vg-bloom{right:-150px;top:0;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--vg-green),.34),rgba(var(--vg-green),0));
  opacity:calc(var(--vel) * .95);will-change:transform}
.vg-thumb{right:0;top:0;width:3px;height:92px;border-radius:3px 0 0 3px;
  background:linear-gradient(to bottom,rgba(var(--vg-green),0),rgba(var(--vg-green),.95) 30%,rgba(var(--vg-green),.95) 70%,rgba(var(--vg-green),0));
  box-shadow:-4px 0 18px rgba(var(--vg-green),.55);opacity:calc(.32 + var(--vel) * .68);will-change:transform}

@media(hover:none){.vg-aura{display:none}}
@media(max-width:900px){.vg-atmos{z-index:80}.vg-wash{width:30vw}.vg-bloom{width:240px;height:240px;right:-110px}.vg-thumb{height:64px}}
@media(prefers-reduced-motion:reduce){.vg-atmos{display:none}}

/* ── cards catch the light ──────────────────────────────────────── */
@media(hover:hover) and (pointer:fine){
  .lux-lit::before{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(var(--vg-green),.17),transparent 64%)!important}
  .feat-card::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(var(--vg-green),.17),transparent 64%)!important}
}
.feat-card:hover,.cm-card:hover,.product-card:hover,.review-card:hover{
  border-color:rgba(var(--vg-green),.38)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 26px 48px -26px rgba(0,0,0,.78),0 10px 36px -18px rgba(var(--vg-green),.42)!important}

/* ── luminous hairlines where sections meet ─────────────────────── */
.quality-strip,.testimonials,.newsletter,footer{position:relative}
.quality-strip::before,.testimonials::before,.newsletter::before,footer::before{
  content:'';position:absolute;top:0;left:50%;width:min(760px,72%);height:1px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--vg-green),.6),transparent)}

/* ── controls ───────────────────────────────────────────────────── */
.btn-primary,.submit-btn,.nav-join:hover{box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 14px 28px -16px rgba(var(--vg-gold),.6)}
.btn-primary:hover,.submit-btn:hover{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 18px 34px -16px rgba(var(--vg-gold),.75)}
.lux-progress{height:2px;background:linear-gradient(90deg,rgba(var(--vg-green),0),rgb(var(--vg-green)) 55%,rgb(var(--vg-gold)));box-shadow:0 0 14px rgba(var(--vg-green),.7)}
body>nav.is-scrolled{border-bottom-color:rgba(var(--vg-green),.3);box-shadow:0 18px 40px -22px rgba(0,0,0,.75),0 1px 0 rgba(var(--vg-green),.22)}

/* browser surfaces, themed */
::selection{background:rgba(var(--vg-green),.34);color:#fff}
::-moz-selection{background:rgba(var(--vg-green),.34);color:#fff}
input,textarea{caret-color:rgb(var(--vg-green))}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid rgba(var(--vg-green),.85);outline-offset:3px}

/* ── homepage ───────────────────────────────────────────────────── */
/* the hero holds a slow breathing light so the first screen is alive before anyone touches anything */
.vg-home .hero-video-wrap::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(58% 52% at 14% 76%,rgba(var(--vg-green),.20),transparent 72%);
  animation:vgBreathe 11s ease-in-out infinite alternate}
@keyframes vgBreathe{from{opacity:.5;transform:scale(1)}to{opacity:1;transform:scale(1.07)}}

.scroll-cue{display:none}
@media(min-width:901px){
  /* the hero is taller than the screen, so anchor to the first screen rather than to the hero's bottom edge */
  .scroll-cue{display:block;position:absolute;right:80px;top:calc(100vh - 168px);z-index:4;width:1px;height:78px;overflow:hidden;background:rgba(var(--vg-green),.22)}
  .scroll-cue::after{content:'';position:absolute;left:0;top:-40%;width:1px;height:40%;background:linear-gradient(to bottom,transparent,rgb(var(--vg-green)));box-shadow:0 0 10px rgba(var(--vg-green),.9);animation:vgCue 2.6s var(--vg-ease) infinite}
}
@keyframes vgCue{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(340%);opacity:0}}

.vg-home .section-title{letter-spacing:-.02em;line-height:1.04;text-wrap:balance}

/* trust band: three plain statements, ruled, no icon tiles */
.vg-home .quality-strip{background:linear-gradient(to bottom,rgba(26,46,18,0),rgba(46,74,32,.55) 18%,rgba(46,74,32,.55) 82%,rgba(26,46,18,0));border-top:0;border-bottom:0;padding:84px 80px}
.vg-home .quality-item{display:block;border-right:1px solid rgba(var(--vg-green),.2);padding:6px 44px}
.vg-home .quality-item:first-child{padding-left:0}
.vg-home .quality-item:last-child{border-right:0;padding-right:0}
.vg-home .quality-title{font-size:26px;line-height:1.15;margin-bottom:10px;letter-spacing:-.01em}
.vg-home .quality-desc{font-size:14px;line-height:1.75;max-width:34ch;color:#b4bba9}
@media(max-width:900px){
  .vg-home .quality-strip{padding:56px 24px;gap:0}
  .vg-home .quality-item{border-right:0;border-bottom:1px solid rgba(var(--vg-green),.2);padding:26px 0}
  .vg-home .quality-item:first-child{padding-top:0}
  .vg-home .quality-item:last-child{border-bottom:0;padding-bottom:0}
}

/* reviews: quieter surface, bigger voice */
.vg-home .review-card{border:1px solid rgba(var(--vg-green),.14);border-radius:6px;background:linear-gradient(to bottom,rgba(46,74,32,.28),rgba(26,46,18,.9))}
.vg-home .review-quote{font-size:22px;line-height:1.5}
@media(min-width:901px){
  .vg-home .testimonials{padding-top:132px;padding-bottom:132px}
  .vg-home .review-grid{gap:14px}
}

/* newsletter */
.vg-home .newsletter{background:radial-gradient(70% 120% at 50% 0%,rgba(var(--vg-green),.16),transparent 70%),var(--moss)}
.vg-home .newsletter-title{letter-spacing:-.02em}

/* header on laptop-width windows: the six links and the account buttons ran into each other */
@media(min-width:901px) and (max-width:1180px){
  body>nav{padding-left:24px;padding-right:24px}
  .nav-links{gap:18px}
  .nav-links a{font-size:11px;letter-spacing:.08em}
  .nav-right{gap:10px}
}

/* newsletter box */
.nl-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.newsletter-fine{max-width:480px;margin:16px auto 0;font-size:12.5px;line-height:1.65;color:#b4bba9;min-height:1.65em}
.newsletter-fine a{color:var(--gold);text-underline-offset:3px}
.newsletter-fine.err{color:#f0a8a8}
.newsletter-fine.ok{color:var(--cream);font-size:16px;line-height:1.6}
.newsletter-form.is-done{display:none}
.newsletter-submit:disabled{opacity:.6;cursor:default}

/* checkout gate for visitors who are not approved members */
.member-gate{grid-column:1/-1;width:100%;max-width:560px;margin:56px auto;padding:44px 36px;text-align:center;border:1px solid rgba(var(--vg-green),.22);border-radius:6px;background:linear-gradient(to bottom,rgba(46,74,32,.3),rgba(26,46,18,.92));box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
.member-gate h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(28px,5vw,38px);color:var(--white);margin-bottom:14px;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
.member-gate p{color:#b4bba9;max-width:46ch;margin:0 auto 26px;line-height:1.7}
.member-gate .gate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.member-gate .btn-primary,.member-gate .btn-ghost{text-decoration:none;display:inline-block}
.member-gate .btn-ghost{background:none;color:var(--cream);padding:14px 30px;border:1px solid rgba(245,240,232,.28);border-radius:4px;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.2}
.member-gate .btn-ghost:hover{border-color:var(--cream);background:rgba(245,240,232,.05)}
@media(max-width:600px){.member-gate{margin:28px auto;padding:32px 22px}.member-gate .gate-actions .btn-primary,.member-gate .gate-actions .btn-ghost{flex:1 1 100%;text-align:center}}