/* ============================================================
   HC Farms — Customer site styles
   ============================================================ */

/* ---------- HEADER ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 14px var(--pad);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s, padding .3s;
}
.hdr.scrolled { border-bottom-color: var(--line); padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand .mark { width: 38px; height: 38px; flex: 0 0 auto; }
.brand .name { font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.brand .name small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em; color: var(--gold); margin-top: 3px; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-weight: 600; font-size: 14.5px; color: var(--ink-soft); transition: color .2s; position: relative; }
.nav a:hover { color: var(--ink); }
.nav a::after { content:""; position:absolute; left:0; bottom:-5px; height:2px; width:0; background:var(--gold); transition:width .25s var(--ease); }
.nav a:hover::after { width:100%; }
.hdr-actions { display: flex; align-items: center; gap: 12px; }
.burger { display: none; }
@media (max-width: 900px) {
  .nav { display: none; }
  .hdr-actions .btn--ghost { display: none; }
}

/* ---------- HERO ---------- */
.hero { position: relative; padding: 150px var(--pad) 80px; background: var(--hero-bg); color: var(--hero-ink); overflow: hidden; }
.hero .circuit { color: var(--green-500); opacity: .28; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; width: min(1200px,100%); margin-inline:auto; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(46px, 7vw, 92px); margin: 18px 0 10px; }
.hero h1 .em { color: var(--gold-bright); font-style: italic; }
.hero .sub { font-size: clamp(17px,1.4vw,20px); color: color-mix(in oklab, var(--hero-ink) 78%, transparent); max-width: 46ch; line-height: 1.55; }
.hero .mal-tag { font-size: 22px; color: var(--gold-bright); font-family: var(--serif); font-style: italic; margin-bottom: 6px; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust { display:flex; gap: 26px; margin-top: 40px; flex-wrap: wrap; }
.hero-trust .t { display:flex; flex-direction:column; gap:2px; }
.hero-trust .t b { font-family: var(--mono); font-size: 26px; color: var(--gold-bright); font-weight: 600; }
.hero-trust .t span { font-size: 12.5px; letter-spacing: .04em; color: color-mix(in oklab, var(--hero-ink) 65%, transparent); text-transform: uppercase; }

/* hero egg stage */
.egg-stage { position: relative; aspect-ratio: 1/1; display: grid; place-items: center; }
.egg-glow { position:absolute; width: 78%; height: 78%; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--gold-bright) 55%, transparent), transparent 65%); filter: blur(8px); }
.hero-egg { position: relative; width: 50%; aspect-ratio: 3/4; z-index: 2; }
.hero-egg .half { position: absolute; inset: 0; }
.float-egg { position: absolute; width: 46px; aspect-ratio:3/4; border-radius: var(--r-egg); background: linear-gradient(150deg,#FFFDF6,#F2E6C8); box-shadow: var(--sh-md); animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(0) rotate(var(--rot,0deg)); } 50%{ transform: translateY(-16px) rotate(var(--rot,0deg)); } }

/* walking hen */
.hen-track { position: absolute; bottom: 26px; left: 0; right: 0; height: 60px; z-index: 3; pointer-events: none; }
.hen { position: absolute; bottom: 0; width: 72px; height: 60px; animation: walk 18s linear infinite; }
@keyframes walk { 0%{ left:-90px; transform: scaleX(1);} 49%{ left:100%; transform: scaleX(1);} 50%{ left:100%; transform: scaleX(-1);} 99%{ left:-90px; transform: scaleX(-1);} 100%{ left:-90px; transform: scaleX(1);} }
.hen .bob { animation: bob .5s steps(2) infinite; transform-origin: bottom center; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-3px);} }
.hen .leg { transform-origin: top center; }
.hen .leg.l { animation: legA .5s steps(1) infinite; }
.hen .leg.r { animation: legB .5s steps(1) infinite; }
@keyframes legA { 0%,49%{ transform: rotate(14deg);} 50%,100%{ transform: rotate(-14deg);} }
@keyframes legB { 0%,49%{ transform: rotate(-14deg);} 50%,100%{ transform: rotate(14deg);} }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .egg-stage { max-width: 340px; margin-inline: auto; }
}

/* ---------- generic section heading ---------- */
.shead { max-width: 640px; margin-bottom: 46px; }
.shead.center { margin-inline: auto; }
.shead h2 { font-size: clamp(34px, 4.6vw, 58px); margin: 12px 0 14px; }
.shead p { color: var(--ink-soft); font-size: 18px; }

/* ---------- TODAY'S STOCK ---------- */
.stock { background: var(--bg-2); }
.stock-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.tray {
  background: linear-gradient(160deg,#C9A36B,#A87E45);
  border-radius: 20px; padding: 22px; box-shadow: var(--sh-lg);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  position: relative;
}
.tray::after{ content:""; position:absolute; inset:8px; border:1px dashed rgba(255,255,255,.25); border-radius: 14px; pointer-events:none;}
.cell { aspect-ratio: 3/4; border-radius: var(--r-egg); background: radial-gradient(circle at 60% 70%, #7d5d34, #5e4626); box-shadow: inset 0 4px 8px rgba(0,0,0,.4); display: grid; place-items: center; }
.cell .e { width: 86%; height: 86%; border-radius: var(--r-egg); background: linear-gradient(150deg,#FFFDF6,#F1E3C2); box-shadow: inset -3px -4px 8px rgba(176,140,70,.35); transform: scale(0); transition: transform .5s var(--ease); }
.cell.filled .e { transform: scale(1); }
.stock-meta .big { font-family: var(--mono); font-size: clamp(54px,8vw,92px); font-weight: 600; line-height: 1; color: var(--green); }
.stock-bar { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 20px 0 8px; }
.stock-bar i { display:block; height:100%; background: linear-gradient(90deg,var(--green-500),var(--green)); border-radius:999px; width:0; transition: width 1.2s var(--ease);}
.live { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-600);}
.live .dot{ width:8px;height:8px;border-radius:50%;background:#34a853; box-shadow:0 0 0 0 rgba(52,168,83,.6); animation:pulse 1.8s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,168,83,.5);}70%{box-shadow:0 0 0 10px rgba(52,168,83,0);}100%{box-shadow:0 0 0 0 rgba(52,168,83,0);}}

@media (max-width: 820px){ .stock-grid{ grid-template-columns:1fr; } }

/* ---------- SPECIALTY ---------- */
.feat-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.feat { padding: 30px 26px; border-radius: var(--r-lg); background: var(--surface); border:1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.feat:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.feat .ic { width: 56px; height: 56px; border-radius: 16px; display:grid; place-items:center; background: var(--gold-soft); color: var(--green); margin-bottom: 18px; }
.feat h3 { font-family: var(--serif); font-size: 25px; font-weight: 600; margin-bottom: 8px; }
.feat p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 900px){ .feat-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .feat-grid{ grid-template-columns: 1fr;} }

/* ---------- VS BV380 ---------- */
.vs { background: var(--green-900); color: var(--on-green); }
.vs .circuit{ color: var(--green-500); opacity:.25;}
.vs-grid { display:grid; grid-template-columns:1fr auto 1fr; gap: 30px; align-items: stretch; position:relative; z-index:2;}
.vs-card { border-radius: var(--r-lg); padding: 34px 30px; }
.vs-card.ours { background: linear-gradient(165deg, var(--green-600), var(--green-800)); box-shadow: var(--sh-lg); border:1px solid var(--green-500); }
.vs-card.them { background: color-mix(in oklab, var(--on-green) 6%, transparent); border:1px solid color-mix(in oklab,var(--on-green) 14%, transparent); }
.vs-card h3 { font-family: var(--serif); font-size: 30px; margin-bottom: 4px; }
.vs-card .tagline{ font-size:13.5px; color: color-mix(in oklab,var(--on-green) 65%, transparent); margin-bottom: 22px;}
.vs-card.ours .tagline{ color: var(--gold-bright);}
.vs-list li { display:flex; gap: 12px; padding: 12px 0; border-top:1px solid color-mix(in oklab,var(--on-green) 12%, transparent); font-size: 15px; align-items:flex-start;}
.vs-list li .mk{ flex:0 0 auto; width:20px;height:20px; }
.vs-mid { display:grid; place-items:center; }
.vs-mid .vsbadge{ font-family:var(--serif); font-style:italic; font-size: 30px; width:74px;height:74px; border-radius:50%; display:grid;place-items:center; background:var(--gold); color:#1B1A13; box-shadow: var(--sh-gold);}
@media (max-width: 820px){ .vs-grid{ grid-template-columns:1fr; } .vs-mid{ transform: rotate(90deg);} }

/* ---------- COUNTER ---------- */
.counter { text-align:center; }
.counter .num { font-family: var(--mono); font-weight: 600; font-size: clamp(64px, 13vw, 168px); line-height: .95; letter-spacing: -.03em; color: var(--green); background: linear-gradient(180deg, var(--green-600), var(--green)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.counter .lbl { font-family: var(--mono); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }

/* ---------- PRICE ---------- */
.price-card { display:grid; grid-template-columns: 1fr auto; align-items:center; gap: 30px; padding: 46px clamp(30px,5vw,60px); border-radius: var(--r-xl); background: linear-gradient(150deg, var(--gold), var(--gold-bright)); color:#1B1A13; box-shadow: var(--sh-gold); position:relative; overflow:hidden;}
.price-card .pc-egg{ position:absolute; right:-40px; top:-40px; width:220px; aspect-ratio:3/4; border-radius:var(--r-egg); background: rgba(255,255,255,.16); }
.price-card h2{ font-family:var(--serif); font-size: clamp(30px,4vw,46px); position:relative; z-index:2;}
.price-card p{ font-size:15.5px; max-width: 46ch; position:relative; z-index:2; opacity:.85;}
.price-tag{ text-align:right; position:relative; z-index:2; }
.price-tag .rupee{ font-family: var(--mono); font-weight:600; font-size: clamp(56px,9vw,104px); line-height:1;}
.price-tag span{ display:block; font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;}
@media (max-width:680px){ .price-card{ grid-template-columns:1fr;} .price-tag{ text-align:left;} }

/* ---------- STORIES / RATINGS ---------- */
.stories-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px;}
.story{ padding: 28px; border-radius: var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow: var(--sh-sm);}
.rate{ display:flex; gap:5px; margin-bottom:14px;}
.rate .re{ width:22px; height:28px; border-radius: var(--r-egg); background: var(--line);}
.rate .re.on{ background: linear-gradient(150deg,var(--gold-bright),var(--gold)); box-shadow: inset -2px -3px 5px rgba(176,140,70,.4);}
.story p{ font-family:var(--serif); font-size: 21px; line-height:1.45; font-style:italic; color:var(--ink); margin-bottom: 18px;}
.story .who{ display:flex; align-items:center; gap:12px;}
.story .av{ width:42px;height:42px;border-radius:50%; background: var(--green); color:var(--on-green); display:grid;place-items:center; font-weight:700; font-size:15px;}
.story .who b{ display:block; font-size:15px;} .story .who span{ font-size:13px;color:var(--ink-faint);}
@media (max-width:900px){ .stories-grid{ grid-template-columns:1fr;} }

/* ---------- ORDER ---------- */
.order { background: var(--bg-2); }
.order-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items:start;}
.order-form{ padding: clamp(26px,4vw,40px); border-radius: var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow: var(--sh-md);}
.field{ margin-bottom: 18px; }
.field label{ display:block; font-size:13px; font-weight:700; letter-spacing:.02em; margin-bottom:7px; color:var(--ink-soft);}
.field input, .field select{ width:100%; padding: 13px 15px; border-radius: var(--r-sm); border:1.5px solid var(--line); background: var(--surface-2); transition: border-color .2s, box-shadow .2s; font-weight:500;}
.field input:focus, .field select:focus{ outline:none; border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in oklab,var(--green) 16%, transparent);}
.qty{ display:flex; align-items:center; gap:14px;}
.qty button{ width:44px;height:44px;border-radius:50%; background:var(--green); color:var(--on-green); font-size:22px; font-weight:700; display:grid;place-items:center; transition:transform .15s;}
.qty button:active{ transform:scale(.9);}
.qty .val{ font-family:var(--mono); font-size:28px; font-weight:600; min-width:60px; text-align:center;}
.qty .tot{ margin-left:auto; text-align:right;} .qty .tot b{ font-family:var(--mono); font-size:24px; color:var(--green);} .qty .tot span{ display:block; font-size:12px; color:var(--ink-faint);}
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.seg label{ position:relative; cursor:pointer; }
.seg input{ position:absolute; opacity:0; }
.seg .opt{ padding:14px; border-radius:var(--r-sm); border:1.5px solid var(--line); text-align:center; font-weight:700; font-size:14.5px; transition: all .2s; display:flex; flex-direction:column; gap:3px; align-items:center;}
.seg .opt small{ font-weight:500; font-size:12px; color:var(--ink-faint);}
.seg input:checked + .opt{ border-color:var(--green); background: color-mix(in oklab,var(--green) 10%, transparent); color:var(--green);}
.seg input:checked + .opt small{ color:var(--green-600);}

/* order visual / basket */
.basket-wrap{ position:relative; padding: 30px; border-radius: var(--r-lg); background: var(--green-900); color:var(--on-green); overflow:hidden; min-height: 420px; display:flex; flex-direction:column; justify-content:flex-end;}
.basket-wrap .circuit{ color:var(--green-500); opacity:.22;}
.drop-egg{ position:absolute; left:50%; top:-60px; width:38px; aspect-ratio:3/4; border-radius:var(--r-egg); background:linear-gradient(150deg,#FFFDF6,#F2E6C8); transform: translateX(-50%); opacity:0;}
.drop-egg.go{ animation: dropIn 1s var(--ease) forwards;}
@keyframes dropIn{ 0%{ top:-60px; opacity:1;} 70%{ top:58%; opacity:1;} 82%{ top:52%;} 100%{ top:55%; opacity:1;} }
.basket{ position:relative; z-index:2; }
.basket .b-title{ font-family:var(--serif); font-size:26px; margin-bottom: 6px;}
.basket .b-sub{ font-size:14px; color: color-mix(in oklab,var(--on-green) 65%, transparent); margin-bottom:20px;}
.basket .receipt{ font-family:var(--mono); font-size:13.5px; }
.basket .receipt .row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed color-mix(in oklab,var(--on-green) 18%, transparent);}
.basket .receipt .row.tot{ border-bottom:none; font-size:18px; color:var(--gold-bright); padding-top:14px;}
.qr{ display:grid; grid-template-columns: repeat(7,1fr); gap:2px; width:84px; height:84px; padding:6px; background:#fff; border-radius:8px; margin-top:18px;}
.qr i{ background: transparent; border-radius:1px;} .qr i.on{ background:#15311F;}
@media (max-width:860px){ .order-grid{ grid-template-columns:1fr;} .basket-wrap{ min-height:320px;} }

/* ---------- STORY: Code to Coop ---------- */
.story2-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center;}
.code-card{ background:var(--green-900); color:var(--on-green); border-radius:var(--r-lg); padding:28px; font-family:var(--mono); font-size:13.5px; line-height:1.9; box-shadow:var(--sh-lg); position:relative; overflow:hidden;}
.code-card .ln{ display:block; white-space:pre; }
.code-card .c1{ color: var(--green-500);} .code-card .c2{ color: var(--gold-bright);} .code-card .c3{ color:#E07A5F;}
.code-card .dots{ display:flex; gap:7px; margin-bottom:18px;} .code-card .dots i{ width:11px;height:11px;border-radius:50%;}
.story2 h2{ font-size: clamp(34px,4.6vw,56px); margin:12px 0 16px;}
.story2 p{ color:var(--ink-soft); margin-bottom:14px; font-size:17px;}
.founders{ display:flex; gap:12px; margin-top:22px;}
.founders .f{ display:flex; align-items:center; gap:10px;}
.founders .av{ width:46px;height:46px;border-radius:50%; background:var(--gold-soft); color:var(--green); display:grid;place-items:center;font-weight:700;}
@media (max-width:820px){ .story2-grid{ grid-template-columns:1fr;} }

/* ---------- FOOTER ---------- */
.foot{ background:var(--green-900); color:var(--on-green); padding: 70px var(--pad) 30px; position:relative; overflow:hidden;}
.foot .circuit{ color:var(--green-500); opacity:.2;}
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:40px; position:relative; z-index:2; width:min(1200px,100%); margin-inline:auto;}
.foot h4{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
.foot a, .foot li{ color: color-mix(in oklab,var(--on-green) 78%, transparent); font-size:15px; padding:5px 0; display:block; transition:color .2s;}
.foot a:hover{ color:var(--gold-bright);}
.foot .brand .name{ color:var(--on-green);}
.wa{ display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px; background:#25D366; color:#04361a; font-weight:700; box-shadow:var(--sh-md); margin-top:8px;}
.foot-bot{ position:relative; z-index:2; margin-top:50px; padding-top:24px; border-top:1px solid color-mix(in oklab,var(--on-green) 14%, transparent); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:color-mix(in oklab,var(--on-green) 60%, transparent); width:min(1200px,100%); margin-inline:auto;}
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr;} }

/* ---------- FLOATING CTA ---------- */
.fab{ position:fixed; right:22px; bottom:22px; z-index:60; width:auto; padding:16px 22px 16px 18px; border-radius:999px; background:var(--gold); color:#1B1A13; font-weight:800; display:flex; align-items:center; gap:11px; box-shadow:var(--sh-gold); transform: translateY(140px); transition: transform .5s var(--ease);}
.fab.show{ transform:none; }
.fab:hover{ transform: translateY(-3px); }
.fab .fe{ width:24px; aspect-ratio:3/4; border-radius:var(--r-egg); background:#fff; animation: floaty 3s ease-in-out infinite;}

/* ---------- TOAST ---------- */
.toast{ position:fixed; left:50%; bottom:30px; transform: translate(-50%, 160px); z-index:80; background:var(--green); color:var(--on-green); padding:16px 22px; border-radius:999px; box-shadow:var(--sh-lg); font-weight:600; display:flex; align-items:center; gap:12px; transition: transform .5s var(--ease);}
.toast.show{ transform: translate(-50%,0);}