/* ============ WhiteCrop — Fresh Food Design System ============ */
:root{
  /* surfaces */
  --wc-cream: #FBF6EC;      /* page background — makhana ivory */
  --wc-cream-2: #F4ECDC;    /* alt band */
  --wc-paper: #FFFFFF;      /* cards */
  --wc-green-soft: #E7F1E9; /* green tint surface */
  --wc-amber-soft: #F7EACF; /* amber tint surface */
  /* ink */
  --wc-ink: #17251C;        /* primary text: deep green-black */
  --wc-ink-soft: #4B5A50;   /* muted */
  --wc-ink-dim: #808C82;    /* dim */
  /* brand */
  --wc-green: #1F7A46;      /* primary */
  --wc-green-deep: #123E25; /* deepest */
  --wc-green-bright: #33A863;/* highlight */
  --wc-amber: #CE8524;      /* accent / secondary CTA */
  --wc-amber-bright: #E4A034;
  /* lines */
  --wc-line: rgba(23,37,28,0.10);
  --wc-line-strong: rgba(23,37,28,0.18);
  /* shape */
  --wc-radius-lg: 30px;
  --wc-radius-md: 20px;
  --wc-radius-sm: 12px;
  --wc-shadow: 0 30px 60px -28px rgba(18,62,37,0.32);
  --wc-shadow-sm: 0 14px 30px -18px rgba(18,62,37,0.28);
  --wc-ease: cubic-bezier(.16,.84,.36,1);
  --wc-ease-soft: cubic-bezier(.22,1,.36,1);
  /* type */
  --wc-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --wc-body: "Manrope", system-ui, sans-serif;
  --wc-script: "Kaushan Script", cursive;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html,body{ background: var(--wc-cream); }
body{
  margin:0;
  font-family: var(--wc-body);
  color: var(--wc-ink);
  background: var(--wc-cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
.container{ max-width: 1240px; margin: 0 auto; padding: 0 32px; }
::selection{ background: var(--wc-green); color: #fff; }

/* ============ Type utilities ============ */
h1,h2,h3,h4{ font-family: var(--wc-display); font-weight: 600; letter-spacing: -0.02em; color: var(--wc-ink); }
p{ color: var(--wc-ink-soft); line-height: 1.7; font-size: 16px; }
.script{ font-family: var(--wc-script); font-weight: 400; color: var(--wc-green); letter-spacing: 0; font-style: normal; }
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 700;
  color: var(--wc-green); margin: 0 0 16px;
}
.kicker::before{ content:''; width:22px; height:1.5px; background: var(--wc-amber); }
.kicker.center{ display:flex; justify-content:center; }
.center{ text-align:center; }
.section-title{
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; margin: 0 0 20px; color: var(--wc-ink);
}

/* ============ Buttons ============ */
.btn{
  position: relative; display: inline-flex; align-items: center; justify-content:center;
  padding: 15px 28px; border-radius: 100px; font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
  overflow: hidden; isolation: isolate; cursor: pointer;
  transition: transform .5s var(--wc-ease-soft), box-shadow .4s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.btn span{ position:relative; z-index:2; }
.btn-primary{ background: var(--wc-green); color:#fff; box-shadow: 0 14px 26px -12px rgba(31,122,70,.7); }
.btn-primary::after{ content:''; position:absolute; inset:0; z-index:1; background: var(--wc-green-deep); transform: translateY(101%); transition: transform .45s var(--wc-ease); }
.btn-primary:hover{ transform: translateY(-2px); }
.btn-primary:hover::after{ transform: translateY(0); }
.btn-ghost{ background: transparent; color: var(--wc-ink); border:1.5px solid var(--wc-line-strong); }
.btn-ghost:hover{ border-color: var(--wc-green); color: var(--wc-green); transform: translateY(-2px); }

/* ============ Grain ============ */
.grain{
  position: fixed; inset:0; z-index: 5; pointer-events:none; opacity:.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ Preloader ============ */
.preloader{
  position: fixed; inset:0; z-index: 10000; background: var(--wc-cream);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .8s var(--wc-ease), visibility .8s;
}
.preloader-inner{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.preloader-seed{ width:54px; height:54px; }
.preloader-seed circle{ fill:none; stroke: var(--wc-green); stroke-width:3; stroke-dasharray: 214; stroke-dashoffset:214; animation: seedDraw 1.3s var(--wc-ease-soft) forwards; }
@keyframes seedDraw{ to{ stroke-dashoffset:0; } }
.preloader-word{ font-family: var(--wc-script); font-size:26px; color: var(--wc-green); opacity:0; animation: fadeUpSm .6s ease .5s forwards; }
@keyframes fadeUpSm{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.preloader-bar{ width:150px; height:2px; background: var(--wc-line); border-radius:2px; overflow:hidden; }
.preloader-bar i{ display:block; height:100%; width:0%; background: linear-gradient(90deg,var(--wc-green),var(--wc-amber)); animation: barFill 1.3s var(--wc-ease) .1s forwards; }
@keyframes barFill{ to{ width:100%; } }
body.loaded .preloader{ opacity:0; visibility:hidden; }
body.loading{ overflow:hidden; height:100vh; }

/* ============ Nav ============ */
.nav{ position: fixed; top:0; left:0; right:0; z-index: 200; padding: 20px 0; transition: padding .4s var(--wc-ease), background .4s ease, box-shadow .4s ease; }
.nav.scrolled{ padding: 12px 0; background: rgba(251,246,236,0.82); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--wc-line); }
.nav-inner{ max-width: 1240px; margin:0 auto; padding: 0 32px; display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.brand{ display:flex; align-items:center; }
.brand-logo{ height: 40px; width:auto; display:block; transition: transform .4s var(--wc-ease); }
.brand:hover .brand-logo{ transform: scale(1.04); }
.brand-logo--footer{ height: 44px; margin-bottom: 6px; }
.nav-links{ display:flex; gap: 32px; }
.nav-links a{ font-size: 14.5px; font-weight:500; color: var(--wc-ink-soft); position:relative; padding: 4px 0; transition: color .3s ease; }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background: var(--wc-green); transform: scaleX(0); transform-origin:left; transition: transform .35s var(--wc-ease); border-radius:2px; }
.nav-links a:hover{ color: var(--wc-ink); }
.nav-links a:hover::after{ transform: scaleX(1); }
.nav-cta{ font-size:13.5px; font-weight:700; padding: 11px 20px; border-radius:100px; background: var(--wc-green); color:#fff; white-space:nowrap; transition: all .35s var(--wc-ease); box-shadow: 0 10px 20px -12px rgba(31,122,70,.8); }
.nav-cta:hover{ background: var(--wc-green-deep); transform: translateY(-1px); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:24px; height:2px; background: var(--wc-ink); border-radius:2px; }

/* ============ Hero ============ */
.hero{ position: relative; min-height: 100svh; display:flex; align-items:center; padding: 130px 0 70px; overflow:hidden; }
.hero-blob{ position:absolute; border-radius:50%; filter: blur(60px); z-index:0; pointer-events:none; }
.hero-blob--a{ width: 620px; height:620px; top:-160px; right:-120px; background: radial-gradient(circle at 40% 40%, rgba(51,168,99,.28), transparent 68%); }
.hero-blob--b{ width: 520px; height:520px; bottom:-180px; left:-160px; background: radial-gradient(circle at 50% 50%, rgba(206,133,36,.22), transparent 66%); }
.hero-seeds{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-seeds span{ position:absolute; width:12px; height:16px; border-radius:60% 60% 55% 55%/70% 70% 40% 40%; background: var(--wc-green-bright); opacity:.35; }
.hero-seeds span:nth-child(1){ left:12%; top:24%; animation: floaty 7s ease-in-out infinite; }
.hero-seeds span:nth-child(2){ left:20%; top:70%; background: var(--wc-amber); animation: floaty 9s ease-in-out infinite .6s; }
.hero-seeds span:nth-child(3){ left:46%; top:16%; animation: floaty 8s ease-in-out infinite 1.1s; }
.hero-seeds span:nth-child(4){ right:30%; top:78%; background: var(--wc-amber); animation: floaty 10s ease-in-out infinite .3s; }
.hero-seeds span:nth-child(5){ right:14%; top:30%; animation: floaty 7.5s ease-in-out infinite .9s; }
.hero-seeds span:nth-child(6){ left:60%; bottom:14%; animation: floaty 8.5s ease-in-out infinite 1.4s; }
@keyframes floaty{ 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-22px) rotate(18deg); } }

.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items:center; width:100%; }
.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; letter-spacing:.04em; color: var(--wc-ink-soft); background: var(--wc-green-soft); border:1px solid var(--wc-line); padding:8px 16px; border-radius:100px; margin-bottom: 26px; }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: var(--wc-green-bright); box-shadow: 0 0 0 4px rgba(51,168,99,.2); }
.hero-title{ font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; font-weight: 700; margin: 0 0 26px; }
.hero-title span{ display:block; }
.hero-title .script{ display:inline; font-size: 1.18em; line-height: .8; margin: 0 .06em; }
.hero-sub{ font-size: 18px; max-width: 480px; margin: 0 0 34px; color: var(--wc-ink-soft); }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 40px; }
.hero-trust{ display:flex; gap: 34px; }
.hero-trust div{ display:flex; flex-direction:column; }
.hero-trust strong{ font-family: var(--wc-display); font-size: 26px; font-weight:700; color: var(--wc-green); }
.hero-trust span{ font-size: 13px; color: var(--wc-ink-dim); font-weight:500; }

.hero-visual{ position:relative; height: 520px; }
.hero-photo{
  position:absolute; inset: 6% 4%; overflow:hidden; box-shadow: var(--wc-shadow);
  border: 8px solid #fff;
  border-radius: 63% 37% 44% 56% / 58% 56% 44% 42%;
  animation: blobMorph 14s ease-in-out infinite;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
@keyframes blobMorph{
  0%,100%{ border-radius: 63% 37% 44% 56% / 58% 56% 44% 42%; }
  50%{ border-radius: 42% 58% 63% 37% / 45% 42% 58% 55%; }
}
.hero-chip{
  position:absolute; z-index:3; display:flex; align-items:center; gap:12px;
  background: #fff; border:1px solid var(--wc-line); border-radius: 16px; padding: 12px 16px;
  box-shadow: var(--wc-shadow-sm);
}
.hero-chip-ico{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: var(--wc-green-soft); color: var(--wc-green); }
.hero-chip-ico svg{ width:20px; height:20px; }
.hero-chip strong{ display:block; font-family: var(--wc-display); font-size:15px; color: var(--wc-ink); }
.hero-chip small{ font-size:12px; color: var(--wc-ink-dim); }
.hero-chip--1{ top: 8%; left: -6%; animation: floaty 6s ease-in-out infinite; }
.hero-chip--2{ bottom: 10%; right: -4%; animation: floaty 7s ease-in-out infinite .8s; }

.scroll-cue{ position:absolute; bottom: 26px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:9px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--wc-ink-dim); }
.scroll-cue i{ width:1.5px; height:34px; background: var(--wc-line-strong); position:relative; overflow:hidden; border-radius:2px; }
.scroll-cue i::after{ content:''; position:absolute; top:-34px; left:0; width:100%; height:34px; background: linear-gradient(var(--wc-green), transparent); animation: scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine{ to{ top:34px; } }

/* ============ Marquee ============ */
.marquee{ position: relative; z-index: 3; background: var(--wc-green); padding: 16px 0; overflow:hidden; white-space:nowrap; }
.marquee-track{ display:inline-flex; gap: 22px; animation: marquee 28s linear infinite; }
.marquee-track span{ font-family: var(--wc-display); font-size: 17px; font-weight:500; color: rgba(255,255,255,.92); }
.marquee-track .sep{ color: var(--wc-amber-bright); }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ============ Reveal ============ */
.reveal-up{ opacity:0; transform: translateY(42px); transition: opacity .9s var(--wc-ease-soft), transform .9s var(--wc-ease-soft); }
.reveal-scale{ opacity:0; transform: scale(.94); transition: opacity 1s var(--wc-ease-soft), transform 1s var(--wc-ease-soft); }
.reveal-up.is-in, .reveal-scale.is-in{ opacity:1; transform:none; }
.no-js .reveal-up, .no-js .reveal-scale{ opacity:1; transform:none; }

/* ============ Story ============ */
.story{ padding: 130px 0; position: relative; }
.story-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 76px; align-items:center; }
.story-visual{ position:relative; height: 480px; }
.story-orb{ position:absolute; width: 300px; height:300px; border-radius:50%; top:6%; left:2%; background: radial-gradient(circle at 32% 28%, rgba(51,168,99,.35), transparent 70%); filter: blur(40px); }
.story-frame{ position:relative; height:100%; border-radius: 34% 66% 40% 60% / 56% 42% 58% 44%; background: var(--wc-green-soft); overflow:hidden; box-shadow: var(--wc-shadow); border:8px solid #fff; }
.story-frame-glow{ display:none; }
.story-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.story-frame::after{ content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, transparent 55%, rgba(18,62,37,.35)); }
.story-badge{ position:absolute; z-index:3; left:-14px; bottom:30px; background:#fff; border:1px solid var(--wc-line); border-radius: var(--wc-radius-md); padding: 14px 20px; display:flex; flex-direction:column; gap:2px; box-shadow: var(--wc-shadow); animation: badgeFloat 6s ease-in-out infinite; }
@keyframes badgeFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }
.story-badge strong{ font-family: var(--wc-display); font-size: 28px; color: var(--wc-green); }
.story-badge span{ font-size: 11.5px; color: var(--wc-ink-soft); text-transform:uppercase; letter-spacing:.06em; }
.story-copy h2{ font-size: clamp(30px, 3.6vw, 46px); line-height:1.1; margin: 0 0 22px; }
.story-copy .script{ font-size: 1.3em; }
.story-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 44px; }
.stat{ border-top: 2px solid var(--wc-line); padding-top: 16px; }
.stat-number{ font-family: var(--wc-display); font-size: 42px; color: var(--wc-green); font-weight:700; }
.stat-suffix{ font-family: var(--wc-display); font-size: 26px; color: var(--wc-green); font-weight:700; }
.stat p{ margin-top:8px; font-size:13.5px; }

/* ============ Why ============ */
.why{ padding: 110px 0 130px; background: var(--wc-cream-2); }
.why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 56px; }
.tilt-card{ perspective: 900px; }
.tilt-card-inner{
  position:relative; border-radius: var(--wc-radius-md); padding: 32px 26px; height:100%;
  background: var(--wc-paper); border:1px solid var(--wc-line); box-shadow: var(--wc-shadow-sm);
  transition: transform .12s ease-out, box-shadow .3s ease; transform-style: preserve-3d;
}
.tilt-card:hover .tilt-card-inner{ box-shadow: var(--wc-shadow); }
.icon-badge{ width:54px; height:54px; border-radius:16px; margin-bottom:22px; display:flex; align-items:center; justify-content:center; background: var(--wc-green-soft); color: var(--wc-green); }
.icon-badge svg{ width:26px; height:26px; }
.tilt-card h3{ font-size: 20px; margin: 0 0 10px; }
.tilt-card p{ font-size:14.5px; }

/* ============ Products ============ */
.products{ padding: 120px 0 130px; }
.product-rail{ display:flex; gap: 24px; overflow-x:auto; padding: 56px 32px 20px; scroll-snap-type: x proximity; scrollbar-width: none; }
.product-rail::-webkit-scrollbar{ display:none; }
.product-card{
  flex: 0 0 320px; scroll-snap-align: start; perspective: 1000px;
  border-radius: var(--wc-radius-lg); overflow:hidden; background: var(--wc-paper); border:1px solid var(--wc-line); box-shadow: var(--wc-shadow-sm);
  transition: transform .4s var(--wc-ease), box-shadow .4s ease;
}
.product-card:hover{ transform: translateY(-6px); box-shadow: var(--wc-shadow); }
.product-media{ height: 240px; position:relative; overflow:hidden; background: var(--wc-green-soft); }
.product-media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--wc-ease); }
.product-card:hover .product-media img{ transform: scale(1.07); }
.product-body{ padding: 24px 24px 30px; }
.product-tag{ display:inline-block; font-size: 11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color: var(--wc-green); background: var(--wc-green-soft); padding:6px 12px; border-radius: 100px; margin-bottom:14px; }
.product-body h3{ font-size: 22px; margin: 0 0 10px; }
.product-body p{ font-size: 14px; }
.flavor-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.flavor-chips span{ font-size:11.5px; padding:6px 12px; border-radius:100px; background: var(--wc-amber-soft); color: var(--wc-amber); font-weight:600; }

/* ============ Instagram handle ============ */
.ig-handle{ color: var(--wc-green); transition: color .3s ease; position:relative; }
.ig-handle:hover{ color: var(--wc-green-bright); }
.social-follow{ margin-top: 26px; display:flex; justify-content:center; }
.social-follow .btn svg{ width:18px; height:18px; margin-right:9px; }

/* ============ Shop / Buy on Amazon ============ */
.shop{ padding: 30px 0 130px; }
.shop-grid{ display:grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items:center; background: var(--wc-paper); border:1px solid var(--wc-line); border-radius: var(--wc-radius-lg); padding: 56px; box-shadow: var(--wc-shadow); }
.shop-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height: 360px; }
.shop-glow{ position:absolute; width: 90%; height: 90%; border-radius:50%; background: radial-gradient(circle at 50% 45%, rgba(51,168,99,.28), transparent 66%); filter: blur(30px); }
.shop-visual img{ position:relative; z-index:1; max-height: 380px; width:auto; object-fit:contain; filter: drop-shadow(0 24px 34px rgba(18,62,37,.22)); animation: badgeFloat 6s ease-in-out infinite; }
.shop-price-tag{ position:absolute; z-index:2; top: 6%; right: 4%; background: var(--wc-green); color:#fff; border-radius: 50%; width: 92px; height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow: var(--wc-shadow-sm); rotate: -8deg; }
.shop-price-tag span{ font-size: 11px; text-transform:uppercase; letter-spacing:.08em; opacity:.85; }
.shop-price-tag strong{ font-family: var(--wc-display); font-size: 26px; line-height:1; }
.shop-copy h2{ font-size: clamp(30px, 3.6vw, 46px); line-height:1.1; margin: 0 0 18px; }
.shop-copy .script{ font-size: 1.3em; }
.shop-points{ list-style:none; margin: 0 0 30px; padding:0; display:flex; flex-direction:column; gap:12px; }
.shop-points li{ display:flex; align-items:center; gap:12px; font-size:15px; color: var(--wc-ink-soft); font-weight:500; }
.shop-points svg{ width:20px; height:20px; flex:0 0 auto; color: var(--wc-green); background: var(--wc-green-soft); border-radius:50%; padding:3px; }
.shop-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-amazon{ background: #FF9900; color: #17251C; gap:9px; box-shadow: 0 14px 26px -12px rgba(255,153,0,.75); }
.btn-amazon svg{ width:19px; height:19px; }
.btn-amazon::after{ content:''; position:absolute; inset:0; z-index:1; background:#e88a00; transform: translateY(101%); transition: transform .45s var(--wc-ease); }
.btn-amazon:hover{ transform: translateY(-2px); }
.btn-amazon:hover::after{ transform: translateY(0); }

/* ============ Benefits ============ */
.benefits{ padding: 120px 0; background: var(--wc-green-deep); }
.benefits *{ }
.benefits .kicker{ color: var(--wc-amber-bright); }
.benefits .kicker::before{ background: var(--wc-amber-bright); }
.benefits-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items:center; }
.benefits-copy h2{ font-size: clamp(30px,3.6vw,46px); color: #fff; margin:0 0 18px; }
.benefits-copy .script{ color: var(--wc-amber-bright); font-size:1.3em; }
.benefits-copy p{ color: rgba(255,255,255,.72); }
.benefit-rings{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.ring-card{ position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; }
.ring{ width: 100%; max-width:120px; transform: rotate(-90deg); }
.ring-track{ fill:none; stroke: rgba(255,255,255,.14); stroke-width:8; }
.ring-fill{ fill:none; stroke: var(--wc-amber-bright); stroke-width:8; stroke-linecap:round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.4s var(--wc-ease-soft); }
.ring-label{ text-align:center; }
.ring-label strong{ display:block; font-family: var(--wc-display); font-size:19px; color: #fff; }
.ring-label span{ font-size:12px; color: rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.06em; }

/* ============ Process ============ */
.process{ position: relative; background: var(--wc-cream); padding: 120px 0; }
.process-track{ display:flex; gap: 24px; overflow-x:auto; padding: 56px 32px 20px; scroll-snap-type: x proximity; scrollbar-width: none; }
.process-track::-webkit-scrollbar{ display:none; }
.process-step{
  flex: 0 0 clamp(260px, 24vw, 340px); scroll-snap-align: start; min-height: 300px; border-radius: var(--wc-radius-lg);
  background: var(--wc-paper); border:1px solid var(--wc-line); box-shadow: var(--wc-shadow-sm);
  padding: 40px 32px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden;
  transition: transform .4s var(--wc-ease), box-shadow .4s ease;
}
.process-step:hover{ transform: translateY(-6px); box-shadow: var(--wc-shadow); }
.process-step::before{ content:''; position:absolute; top:0; left:0; right:0; height:5px; background: linear-gradient(90deg, var(--wc-green), var(--wc-green-bright)); }
.process-num{ font-family: var(--wc-display); font-size: 62px; color: var(--wc-green-soft); font-weight:800; line-height:1; margin-bottom: 20px; -webkit-text-stroke: 1px var(--wc-green); color: transparent; }
.process-step h3{ font-size: 24px; margin:0 0 12px; }
.process-step p{ font-size: 14px; }

/* ============ Social ============ */
.social{ padding: 120px 0; }
.social-sub{ max-width: 520px; margin: 0 auto; }
.social-grid{ max-width: 1240px; margin: 56px auto 0; padding: 0 32px; display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.social-card{ display:block; border-radius: var(--wc-radius-md); overflow:hidden; background: var(--wc-paper); border:1px solid var(--wc-line); box-shadow: var(--wc-shadow-sm); transition: transform .4s var(--wc-ease), box-shadow .3s ease; }
.social-card:hover{ transform: translateY(-4px); box-shadow: var(--wc-shadow); }
.social-media{ height: 220px; position:relative; overflow:hidden; background: var(--wc-green-soft); }
.social-media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--wc-ease); }
.social-card:hover .social-media img{ transform: scale(1.06); }
.social-card p{ padding: 18px 20px 24px; font-size: 13.5px; color: var(--wc-ink-soft); }

/* ============ Testimonials ============ */
.testimonials{ padding: 120px 0; background: var(--wc-cream-2); }
.testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 56px; }
.testi-card{ background: var(--wc-paper); border:1px solid var(--wc-line); border-radius: var(--wc-radius-lg); padding: 34px 30px; box-shadow: var(--wc-shadow-sm); margin:0; display:flex; flex-direction:column; transition: transform .4s var(--wc-ease), box-shadow .3s ease; }
.testi-card:hover{ transform: translateY(-5px); box-shadow: var(--wc-shadow); }
.testi-stars{ display:flex; gap:3px; margin-bottom: 18px; }
.testi-stars svg{ width:18px; height:18px; fill: var(--wc-amber-bright); }
.testi-card blockquote{ margin:0 0 26px; font-size: 16px; line-height:1.65; color: var(--wc-ink); font-weight:500; flex:1; }
.testi-card figcaption{ display:flex; align-items:center; gap:14px; }
.testi-avatar{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background: var(--wc-green-soft); color: var(--wc-green); font-family: var(--wc-display); font-weight:700; font-size:15px; }
.testi-name{ display:flex; flex-direction:column; font-family: var(--wc-display); font-weight:600; font-size:15px; color: var(--wc-ink); }
.testi-name small{ font-family: var(--wc-body); font-weight:500; font-size:12.5px; color: var(--wc-ink-dim); margin-top:2px; }

/* ============ CTA ============ */
.cta{ position:relative; padding: 130px 0; overflow:hidden; background: var(--wc-cream-2); }
.cta-bg{ position:absolute; inset:0; background: radial-gradient(60% 60% at 50% 20%, rgba(51,168,99,.14), transparent 65%); }
.cta-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.cta h2{ font-size: clamp(34px, 5vw, 58px); margin: 0 0 20px; line-height:1.08; }
.cta h2 .script{ font-size:1.25em; }
.cta-sub{ max-width: 460px; margin-bottom: 36px; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom: 36px; }
.cta-meta{ font-size: 13.5px; color: var(--wc-ink-dim); display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.sep-dot{ color: var(--wc-green); }

/* ============ Footer ============ */
.footer{ padding: 80px 0 0; background: var(--wc-green-deep); color: rgba(255,255,255,.72); }
.footer-grid{ display:grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr 1.1fr; gap: 40px; padding-bottom: 56px; }
.footer .brand-logo--footer{ filter: brightness(0) invert(1); opacity:.95; }
.footer-grid p{ font-size:13.5px; margin: 14px 0 20px; max-width: 280px; color: rgba(255,255,255,.6); }
.social-icons{ display:flex; gap: 12px; }
.social-icons a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.8); transition: all .3s ease; }
.social-icons a:hover{ color: var(--wc-green-deep); background: #fff; border-color:#fff; transform: translateY(-2px); }
.social-icons svg{ width:16px; height:16px; }
.footer-col h4{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color: var(--wc-amber-bright); margin: 0 0 18px; font-weight:700; }
.footer-col a, .footer-col span{ display:block; font-size:14px; color: rgba(255,255,255,.7); margin-bottom: 12px; }
.footer-col a:hover{ color: #fff; }
.footer-bottom{ display:flex; justify-content:space-between; padding: 22px 32px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color: rgba(255,255,255,.5); }

/* ============ Legal pages ============ */
.legal-body{ background: var(--wc-cream); }
.legal-nav{ position: sticky; top:0; z-index:200; background: rgba(251,246,236,0.9); backdrop-filter: blur(14px); border-bottom:1px solid var(--wc-line); }
.legal-nav .nav-inner{ padding-top:16px; padding-bottom:16px; }
.legal-back{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color: var(--wc-ink-soft); transition: color .3s ease; }
.legal-back:hover{ color: var(--wc-green); }
.legal-back svg{ width:16px; height:16px; }
.legal-hero{ padding: 80px 0 40px; text-align:center; }
.legal-hero .breadcrumb{ font-size:13px; color: var(--wc-ink-dim); margin-bottom:14px; }
.legal-hero .breadcrumb a{ color: var(--wc-green); }
.legal-hero h1{ font-family: var(--wc-display); font-size: clamp(32px,5vw,52px); font-weight:700; color: var(--wc-ink); margin:0; }
.legal-hero .script{ font-size:1.2em; }
.legal-content{ max-width: 820px; margin: 0 auto; padding: 20px 32px 100px; }
.legal-content .intro{ font-size:17px; color: var(--wc-ink-soft); line-height:1.75; padding: 26px 30px; background: var(--wc-green-soft); border-radius: var(--wc-radius-md); margin-bottom: 40px; }
.legal-content h2{ font-family: var(--wc-display); font-size: 22px; font-weight:700; color: var(--wc-ink); margin: 40px 0 12px; }
.legal-content p{ font-size:15.5px; line-height:1.8; color: var(--wc-ink-soft); margin: 0 0 16px; }
.legal-content ul{ margin: 0 0 20px; padding-left: 22px; }
.legal-content li{ font-size:15.5px; line-height:1.8; color: var(--wc-ink-soft); margin-bottom: 8px; }
.legal-content strong{ color: var(--wc-ink); }
.legal-content .highlight{ background: var(--wc-amber-soft); padding: 2px 6px; border-radius: 5px; color: var(--wc-amber); font-weight:600; }
.legal-content .contact-box{ margin-top: 40px; padding: 26px 30px; background: var(--wc-paper); border:1px solid var(--wc-line); border-radius: var(--wc-radius-md); box-shadow: var(--wc-shadow-sm); }
.legal-content .contact-box a{ color: var(--wc-green); font-weight:600; }
.legal-updated{ margin-top: 30px; font-size:13px; color: var(--wc-ink-dim); font-style:italic; }
.legal-note{ margin: 0 0 40px; padding: 16px 22px; border:1px solid rgba(206,133,36,.35); background: var(--wc-amber-soft); border-radius: var(--wc-radius-sm); font-size:14px; color: var(--wc-ink-soft); }

/* ============ Responsive ============ */
@media (max-width: 1080px){
  .hero-grid{ grid-template-columns: 1fr; gap: 40px; }
  .hero-visual{ height: 420px; max-width: 460px; }
  .why-grid{ grid-template-columns: repeat(2,1fr); }
  .story-grid{ grid-template-columns: 1fr; gap:48px; }
  .story-visual{ height: 380px; }
  .benefits-grid{ grid-template-columns: 1fr; }
  .social-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .shop-grid{ grid-template-columns: 1fr; gap:40px; padding: 40px; }
  .testi-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-cta{ display:none; }
  .container{ padding: 0 22px; }
  .why-grid{ grid-template-columns: 1fr; }
  .story-stats{ grid-template-columns: 1fr; }
  .benefit-rings{ grid-template-columns: repeat(2,1fr); }
  .social-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; gap:8px; text-align:center; }
  .hero-trust{ gap:24px; }
  .hero-chip--1{ left:0; }
  .hero-chip--2{ right:0; }
  .process-track{ padding: 40px 22px 20px; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
  .hero-photo, .story-frame{ animation:none !important; }
}