/* Milk Shop 360 — pro layer: depth, glass, motion. Loaded after styles.css / landing.css. */
:root{
  --ease:cubic-bezier(.22,.8,.24,1);
  --glow:0 0 0 1px rgba(255,255,255,.7) inset,0 1px 0 rgba(255,255,255,.9) inset;
  --sh2:0 2px 4px rgba(94,57,31,.05),0 14px 40px rgba(94,57,31,.12);
  --sh3:0 4px 10px rgba(94,57,31,.08),0 30px 70px rgba(94,57,31,.2);
}
body{letter-spacing:-.005em}
#fx3d{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:0;transition:opacity 1s var(--ease)}
body.has-shell #fx3d{opacity:1}
.shell{position:relative;z-index:1}

/* sidebar: deep glass with light sweep */
.side{background:
  radial-gradient(420px 260px at 0% 0%,rgba(255,165,91,.35),transparent 60%),
  radial-gradient(360px 280px at 100% 100%,rgba(242,177,52,.18),transparent 60%),
  linear-gradient(180deg,#0d3721,#197142 60%,#0d3721);
  box-shadow:6px 0 40px rgba(54,33,18,.25);border-right:1px solid rgba(255,255,255,.08)}
.side .logo i{animation:logo-spin 9s linear infinite;transform-style:preserve-3d;box-shadow:0 6px 18px rgba(228,113,19,.6),0 0 0 1px rgba(255,255,255,.25) inset}
@keyframes logo-spin{0%,70%{transform:perspective(200px) rotateY(0)}85%{transform:perspective(200px) rotateY(180deg)}100%{transform:perspective(200px) rotateY(360deg)}}
.nav a{position:relative;transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.nav a:hover{transform:translateX(4px) translateZ(0);background:rgba(255,255,255,.12)}
.nav a.on{transform:translateX(2px)}
.nav a.on::before{content:"";position:absolute;left:-12px;top:20%;bottom:20%;width:4px;border-radius:0 4px 4px 0;background:#ffd166;box-shadow:0 0 12px #ffd166}
.nav .ic{filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));transition:transform .3s var(--ease)}
.nav a:hover .ic{transform:scale(1.25) rotate(-8deg)}

/* top bar */
.top{box-shadow:0 8px 30px rgba(94,57,31,.06)}
.top h2{background:linear-gradient(90deg,#2a1a12,#e47113);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;letter-spacing:-.02em;text-transform:capitalize}

/* cards: layered glass, 3D tilt (driven by fx.js via --rx/--ry) */
.content{perspective:1400px}
.card,.ratecard,.pbtn{transform-style:preserve-3d;will-change:transform}
.card{box-shadow:var(--sh2),var(--glow);transition:box-shadow .35s var(--ease),transform .35s var(--ease);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0)}
.card.tilt-on{transition:box-shadow .35s var(--ease)}
.card:hover{box-shadow:var(--sh3),var(--glow)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.75),transparent 60%)}
.card:hover::before{opacity:1}
.card{position:relative}
.card>*{position:relative}
.stat{background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(252,246,235,.7))}
.stat .v{font-size:28px;font-weight:800;background:linear-gradient(135deg,#2a1a12,#e47113);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat::after{width:110px;height:110px;right:-30px;top:-30px;animation:pulse-orb 5s ease-in-out infinite}
@keyframes pulse-orb{50%{transform:scale(1.25);opacity:.7}}
.stat .l{text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;font-weight:600}

/* entrance */
.fx-in{animation:fx-in .7s var(--ease) both;animation-delay:calc(var(--i,0)*60ms)}
@keyframes fx-in{from{opacity:0;transform:perspective(900px) translateY(26px) rotateX(-9deg) scale(.97)}to{opacity:1;transform:none}}

/* buttons */
.btn{transition:transform .2s var(--ease),box-shadow .25s,background .2s,border-color .2s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.primary::after,.btn.saffron::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s var(--ease)}
.btn.primary:hover::after,.btn.saffron:hover::after{left:130%}
.pbtn{transition:transform .2s var(--ease),box-shadow .25s,border-color .2s,background .2s;background:rgba(255,255,255,.85)}
.pbtn:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--sh3)}
.tab{transition:.2s var(--ease)}
.tab:hover{transform:translateY(-1px)}
.tab.on{background:linear-gradient(135deg,var(--brand2),var(--brand));box-shadow:0 6px 16px rgba(228,113,19,.35)}

/* tables, pills, charts */
table{border-collapse:separate;border-spacing:0}
tr.clickable td{transition:background .2s}
th:first-child{border-top-left-radius:10px}th:last-child{border-top-right-radius:10px}
.pill{box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 2px 6px rgba(94,57,31,.07)}
.bars .b i{transform-origin:bottom;animation:grow 1s var(--ease) both;animation-delay:calc(var(--i,0)*45ms);box-shadow:0 8px 16px rgba(228,113,19,.25);position:relative}
.bars .b i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,.35),transparent 50%)}
@keyframes grow{from{transform:scaleY(0)}}
.hbar .t i{animation:growx 1.1s var(--ease) both;box-shadow:0 0 12px rgba(228,113,19,.4)}
@keyframes growx{from{width:0!important}}
.alert{backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(242,177,52,.15);animation:fx-in .6s var(--ease) both}

/* modal & toast */
.modal-wrap{backdrop-filter:blur(6px);background:rgba(54,33,18,.5)}
.modal{animation:modal-in .45s var(--ease) both;box-shadow:0 40px 100px rgba(54,33,18,.5);border-radius:20px}
@keyframes modal-in{from{opacity:0;transform:perspective(1000px) rotateX(14deg) translateY(30px) scale(.95)}}
.toast{backdrop-filter:blur(10px);animation:fx-in .4s var(--ease) both}

input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(228,113,19,.15)}
input,select,textarea{transition:border-color .2s,box-shadow .2s}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(228,113,19,.25);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(228,113,19,.45);background-clip:padding-box;border:2px solid transparent}

@media(max-width:860px){.card{transform:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  #fx3d{display:none}
}

/* logo badge */
.logo i,.lp-logo i{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#f28d3b,#b85b0f);box-shadow:0 8px 20px rgba(228,113,19,.45),0 1px 0 rgba(255,255,255,.4) inset}
.logo i svg,.lp-logo i svg{width:30px;height:30px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}

/* sections: tighter rhythm, stronger headings */
.lp-h2{letter-spacing:-.03em;font-weight:800}
.lp-eyebrow{letter-spacing:.14em;text-transform:uppercase}
.lp-stats .lp-stat{transition:transform .3s var(--ease),box-shadow .3s}
.lp-stats .lp-stat:hover,.lp-feat .fc:hover,.lp-plan:hover{transform:translateY(-6px)}
.lp-feat .fc,.lp-plan,.lp-stat{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .3s var(--ease),box-shadow .3s}
.lp-feat .fc:not(.in),.lp-plan:not(.in),.lp-stat:not(.in){transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.lp-feat .fc:hover,.lp-plan:hover{box-shadow:0 30px 60px rgba(107,66,36,.18)}
.lp-hero .lp-stage{margin-top:clamp(40px,6vw,80px)}

/* ===== landing: simple, consistent (no stock photos) ===== */
.lp-step .vis{padding:clamp(22px,3vw,40px);border-radius:28px;background:radial-gradient(80% 80% at 20% 10%,#fcf4e7,#fdfaf4 70%);border:1px solid #f6ecdb;box-shadow:0 20px 50px rgba(107,66,36,.08);transition:transform .4s var(--ease)}
.lp-sec.white .lp-step .vis{background:radial-gradient(80% 80% at 80% 10%,#fff3d6,#fdfaf4 70%)}
.lp-step:hover .vis{transform:translateY(-4px)}
.lp-step .vis .mk,.lp-step .vis .phone{box-shadow:0 24px 50px rgba(94,57,31,.18)}
.lp-step:nth-child(even) .vis{background:radial-gradient(80% 80% at 80% 10%,#fff1cf,#fdfaf4 70%)}
.lp-cta-band{background:radial-gradient(60% 120% at 80% 0%,rgba(242,141,59,.45),transparent 60%),linear-gradient(135deg,#082114,#155834)}
.lp-hero3d .fb,.lp-photo{display:none}

/* ===== cow scene: illustration + layered motion ===== */
.farm-stage{position:relative}
.farm-cow{position:relative;aspect-ratio:800/540;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s var(--ease),box-shadow .3s}
.farm-cow:hover{box-shadow:0 40px 90px rgba(107,66,36,.28)}
.cowsvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cl{animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-220px)}to{transform:translateX(1040px)}}
.bd{animation:fly linear infinite}
@keyframes fly{from{transform:translateX(-60px)}50%{transform:translateX(420px) translateY(-18px)}to{transform:translateX(880px) translateY(6px)}}
.wing{transform-box:fill-box;transform-origin:50% 100%;animation:flap .5s ease-in-out infinite alternate}
@keyframes flap{to{transform:scaleY(-.6)}}
.pulse{animation:glowp 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes glowp{50%{transform:scale(1.15);opacity:.7}}
.fl{transform-box:fill-box;transform-origin:50% 100%;animation:sway 3s ease-in-out infinite alternate}
@keyframes sway{to{transform:rotate(6deg)}}

/* figure: cow (back layer) peeks out behind the milk can (front layer) */
.cow-fig{position:absolute;left:50%;bottom:5%;width:55%;aspect-ratio:575/533;translate:-50% 0;transition:left .7s var(--ease),width .7s var(--ease)}
@media(min-width:861px){.farm-stage.open .cow-fig{left:29%;width:48%}}
.cow-shadow{position:absolute;left:8%;right:2%;bottom:-2%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,70,45,.42),transparent);animation:shad 3.4s ease-in-out infinite}
@keyframes shad{50%{transform:scaleX(.93);opacity:.7}}
.cow-look{position:absolute;inset:0;transform:translate(calc(var(--px,0)*7px),calc(var(--py,0)*3px)) rotate(calc(var(--px,0)*1.4deg));transform-origin:55% 95%;transition:transform .35s var(--ease)}
.cow-float{position:absolute;inset:0;animation:cfloat 3.4s ease-in-out infinite}
@keyframes cfloat{50%{transform:translateY(-7px)}}
.cow-sway{position:absolute;inset:0;transform-origin:56% 94%;animation:csway 5.2s ease-in-out infinite}
@keyframes csway{0%,100%{transform:rotate(-1.4deg) translateX(3px)}50%{transform:rotate(1.6deg) translateX(-7px)}}
.cow-img,.cow-can{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 10px 14px rgba(94,57,31,.2))}
.cow-can{pointer-events:none;animation:cfloat 3.4s ease-in-out infinite}
.cow-lids{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lid{animation:blink 4.6s infinite}
@keyframes blink{0%,91%,100%{transform:scaleY(0)}94%{transform:scaleY(1)}97%{transform:scaleY(0)}}
.cow-drops i.mk-drop{position:absolute;bottom:20%;width:10px;height:14px;border-radius:50% 50% 55% 55%;background:radial-gradient(circle at 35% 30%,#fff,#ffdabc);box-shadow:0 2px 6px rgba(228,113,19,.3);opacity:0;animation:rise linear infinite}
.d0{left:74%}.d1{left:82%}.d2{left:66%}.d3{left:90%}.d4{left:58%}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-230px) scale(1.1);opacity:0}}
.farm-cow.hi .cow-sway{animation:greet 1.1s var(--ease)}
@keyframes greet{0%{transform:none}35%{transform:rotate(-5deg) translate(-18px,-10px)}60%{transform:rotate(2deg) translate(-4px,-2px)}100%{transform:none}}
.moo-b{position:absolute;left:9%;right:auto;top:10%;background:#fff;color:#2a1a12;font-weight:800;padding:8px 14px;border-radius:16px 16px 16px 4px;box-shadow:0 10px 26px rgba(107,66,36,.25);opacity:0;transform:translateY(10px) scale(.8);pointer-events:none}
.farm-cow.hi .moo-b{animation:moo 1.6s var(--ease) both}
@keyframes moo{0%{opacity:0;transform:translateY(10px) scale(.7)}20%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-14px)}}
.farm-hint{transition:opacity .3s}
.farm-stage.open .farm-hint{opacity:0}

/* "what we have" panel */
.cow-panel{position:absolute;z-index:3;right:12px;top:12px;bottom:12px;width:44%;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:24px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border:1px solid #fff;box-shadow:0 30px 70px rgba(94,57,31,.3);animation:cp-in .55s var(--ease) both;overflow:auto}
.cow-panel[hidden]{display:none}
@keyframes cp-in{from{opacity:0;transform:translateX(30px) scale(.96)}}
.cp-head{display:flex;gap:10px;align-items:center}
.cp-head div{flex:1;min-width:0}.cp-head b{display:block;font-size:15px}.cp-head small{color:var(--mut);font-size:12px;line-height:1.3;display:block}
.cp-av{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#fcf6eb,#fff3d6);font-size:22px;animation:av 2.6s ease-in-out infinite}
@keyframes av{50%{transform:rotate(-8deg) scale(1.08)}}
.cp-x{border:0;background:#fbf6ee;width:32px;height:32px;border-radius:10px;cursor:pointer;font-weight:700;color:#6b5444}
.cp-x:hover{background:#f6ecdb}
.cp-card{position:relative;padding:16px;border-radius:18px;background:linear-gradient(150deg,#fefaf4,#fff8e6);border:1px solid #f6ecdb;flex:1;min-height:128px}
.cp-card.swap{animation:swap .45s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(10px)}}
.cp-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:#fff;box-shadow:0 8px 20px rgba(107,66,36,.14);margin-bottom:10px}
.cp-card h4{margin:0 0 4px;font-size:1.05rem;letter-spacing:-.01em}
.cp-card p{margin:0;color:#6b5444;font-size:.88rem;line-height:1.5}
.cp-count{position:absolute;right:14px;top:14px;font-size:11px;font-weight:700;color:var(--brand);background:#fcf6eb;border-radius:99px;padding:3px 9px}
.cp-chips{display:flex;flex-wrap:wrap;gap:6px}
.cp-chips button{display:inline-flex;gap:6px;align-items:center;border:1px solid #f6ecdb;background:#fff;border-radius:99px;padding:5px 11px 5px 8px;font-size:12px;font-weight:600;cursor:pointer;color:#2d4f3d;transition:.2s var(--ease)}
.cp-chips button:hover{transform:translateY(-2px);border-color:var(--brand)}
.cp-chips button.on{background:linear-gradient(135deg,var(--brand2),var(--brand));border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(228,113,19,.35)}
.cp-bar{height:3px;border-radius:3px;background:#f9f1e4;overflow:hidden;flex:none}
.cp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#f2b134);animation:cpbar 5.2s linear forwards}
@keyframes cpbar{from{width:0}to{width:100%}}
@media(max-width:860px){.cow-panel{position:relative;right:auto;top:auto;bottom:auto;width:auto;margin-top:12px}}
@media(prefers-reduced-motion:reduce){.cowsvg *,.cow-fig *,.cow-fig{animation:none!important}}

/* ===== Indian theme: palette ===== */
:root{--kum:#7a1f2b;--sf:#e8751a;--sf2:#f59a2b;--mari:#ffb703;--ig:#138808;--cream:#fff8ec}
body{background:radial-gradient(900px 500px at 90% -5%,#ffe9c7 0,transparent 60%),radial-gradient(700px 420px at -5% 30%,#e6f3da 0,transparent 55%),#fff8ec;background-attachment:fixed}

/* ===== landing: Indian hero ===== */
.lp{background:#fff8ec}
.lp-nav{background:rgba(255,248,236,.82);border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#ff9933 0 33%,#fff 33% 66%,#138808 66%) 1}
.lp-nav .lp-logo{color:var(--kum)}
.lp-nav .lp-links a{color:#5a3a22}.lp-nav .lp-links a:hover{background:rgba(232,117,26,.12);color:var(--sf)}
.lp-nav .btn.ghost{background:#fff;color:var(--kum);border-color:#ecd8b4}
.lp-nav .lp-langsel{background:#fff;border-color:#ecd8b4;color:var(--kum)}
.lp-nav .lp-langsel svg{color:var(--sf)}
.lp-hero{background:radial-gradient(70% 60% at 85% 10%,rgba(255,183,3,.35),transparent 60%),radial-gradient(60% 50% at 0% 80%,rgba(19,136,8,.12),transparent 60%),linear-gradient(180deg,#fff3dc,#fff8ec 70%);padding-bottom:30px}
.lp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(rgba(232,117,26,.28) 1.2px,transparent 1.4px);background-size:30px 30px;mask-image:radial-gradient(75% 65% at 70% 35%,#000,transparent)}
.lp-hero .wrap{position:relative;z-index:1}
.lp-blob{opacity:.3}.lp-blob.a{background:#a9dc8a}.lp-blob.b{background:#ffc766}
.lp-hero h1{color:var(--kum);font-size:clamp(2.2rem,5vw,3.9rem)}
.lp-hero .grad{background:linear-gradient(100deg,#e8751a 0%,#d9480f 55%,#7a1f2b 110%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-hero .lead{color:#5a4636}
.lp-hero .lp-kick{background:#fff;border-color:#f0e0c4;color:var(--ig);box-shadow:0 6px 18px rgba(232,117,26,.12)}
.lp-hero .lp-trust{color:#5a4636}.lp-hero .lp-trust span::before{background:var(--ig)}
.lp-hero .lp-cta .btn.primary{background:linear-gradient(135deg,#f59a2b,#e8751a);box-shadow:0 12px 28px rgba(232,117,26,.45)}
.lp-hero .lp-cta .btn:not(.primary){background:#fff;color:var(--ig);border-color:#b9dfb0}
.in-namaste{display:inline-block;margin-right:8px;padding:7px 14px;border-radius:99px;background:linear-gradient(135deg,#7a1f2b,#a32a3a);color:#ffe9b0;font-weight:700;font-size:13px;box-shadow:0 8px 20px rgba(122,31,43,.3)}
.lp-hero-top{align-items:center}

/* arch visual */
.in-visual{position:relative;justify-self:center;width:min(100%,430px);padding:36px 14px 24px}
.in-mandala{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -52%;animation:spin 120s linear infinite;pointer-events:none;opacity:.8}
.in-mandala svg{width:100%;height:100%;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.in-visual .farm-stage{position:relative;z-index:1}
.in-visual .farm-cow{aspect-ratio:4/5;border-radius:999px 999px 26px 26px;border:6px solid #fff8ec;box-shadow:0 0 0 3px var(--sf),0 0 0 9px #ffd166,0 0 0 11px var(--kum),0 40px 80px rgba(122,31,43,.35);overflow:hidden;transform:none;background:#ffc98a;cursor:pointer}
.in-visual .farm-cow:hover{transform:none;box-shadow:0 0 0 3px var(--sf),0 0 0 9px #ffd166,0 0 0 11px var(--kum),0 46px 90px rgba(122,31,43,.45)}
.in-visual .farm-cow::after{content:"";position:absolute;inset:9px;border-radius:inherit;border:2px dashed rgba(255,255,255,.75);pointer-events:none;z-index:2}
.in-visual .cow-fig{left:50%;bottom:7%;width:96%;translate:-50% 0}
.in-visual .farm-hint{bottom:10px;z-index:3;background:rgba(255,248,236,.92);color:var(--kum);font-weight:700}
.in-visual .moo-b{left:6%;top:26%;z-index:3;background:#fff8ec;color:var(--kum);border:2px solid #ffd166}
.sunrays{transform-origin:0 0;animation:spin 70s linear infinite}
.in-toran{position:absolute;z-index:3;left:-4%;right:-4%;top:-8px;height:96px;pointer-events:none;transform-origin:50% 0;animation:tsway 5s ease-in-out infinite alternate;filter:drop-shadow(0 6px 6px rgba(122,31,43,.25))}
.in-toran svg{width:100%;height:100%;display:block;overflow:visible}
@keyframes tsway{from{transform:rotate(-.8deg)}to{transform:rotate(.8deg)}}
.lf{transform-box:fill-box;transform-origin:50% 0;animation:lsway 3s ease-in-out infinite alternate}
@keyframes lsway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.in-badge{position:absolute;z-index:4;left:20px;bottom:6px;background:linear-gradient(135deg,#ffd166,#f2b134);color:#4a2a00;font-weight:800;border-radius:99px;padding:8px 15px;font-size:.85rem;box-shadow:0 10px 24px rgba(242,177,52,.55)}
.in-diya{position:absolute;z-index:4;bottom:-4px;width:58px}
.in-diya.l{left:-16px}.in-diya.r{right:-16px}
.in-diya svg{width:100%;display:block;overflow:visible}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick 1.1s ease-in-out infinite alternate}
@keyframes flick{0%{transform:scale(1,1) skewX(0)}50%{transform:scale(.92,1.1) skewX(3deg)}100%{transform:scale(1.05,.95) skewX(-3deg)}}
.dglow{animation:glowp 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.in-petals{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;border-radius:30px}
.in-petals i{position:absolute;top:-24px;width:12px;height:16px;border-radius:60% 0 60% 0;opacity:.9;animation:petal linear infinite}
@keyframes petal{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(30px,240px) rotate(200deg)}100%{transform:translate(-14px,520px) rotate(420deg)}}

/* panel inside the arch */
.in-visual .cow-panel{position:absolute;z-index:5;left:10px;right:10px;top:auto;bottom:10px;width:auto;max-height:64%;border-radius:20px;padding:12px;gap:10px;background:rgba(255,248,236,.95);border-color:#ffd166}
.in-visual .cp-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.in-visual .cp-chips::-webkit-scrollbar{display:none}
.in-visual .cp-chips button{flex:none}
.in-visual .cp-card{min-height:96px;padding:12px;background:linear-gradient(150deg,#fff3dc,#fff8ec)}
.in-visual .cp-card p{font-size:.82rem}
.in-visual .cp-ic{width:38px;height:38px;font-size:20px;margin-bottom:6px}
.in-visual .cow-fig{transition:bottom .7s var(--ease),width .7s var(--ease)}
.in-visual .farm-stage.open .cow-fig{left:50%;width:56%;bottom:40%}
.in-visual .cp-head small{display:none}
.in-visual .cow-panel{max-height:58%}
@media(max-width:900px){.in-visual{width:min(100%,380px);order:-1}.in-badge{left:10px}}
@media(max-width:560px){.in-diya{width:44px}.in-toran{height:74px}}

/* Indian section accents: rangoli divider + warm cards */
.lp-sec,.lp-journey{position:relative}
.lp-sec::before{content:"";display:block;height:14px;margin:0 auto 6px;max-width:260px;background:radial-gradient(circle at 7px 7px,#e8751a 3px,transparent 3.5px) 0 0/28px 14px repeat-x,radial-gradient(circle at 21px 7px,#ffb703 2.5px,transparent 3px) 0 0/28px 14px repeat-x;opacity:.8}
.lp-eyebrow{color:var(--sf)}
.lp-h2{color:var(--kum)}
.lp-cta-band{background:radial-gradient(60% 120% at 80% 0%,rgba(255,183,3,.4),transparent 60%),linear-gradient(135deg,#5a1a22,#7a1f2b 60%,#a32a3a)}
.lp-foot{background:#3a1218}

/* ===== namaste motion ===== */
.in-namaste{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;animation:nmglow 2.6s ease-in-out infinite}
.in-namaste::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,233,176,.55),transparent);transform:skewX(-20deg);animation:nmshine 3.6s ease-in-out infinite}
@keyframes nmshine{0%,55%{left:-60%}100%{left:140%}}
@keyframes nmglow{50%{box-shadow:0 8px 26px rgba(122,31,43,.5),0 0 0 5px rgba(232,117,26,.18)}}
.nm-ic{display:inline-block;font-weight:400;transform-origin:50% 90%;animation:nmbow 2.6s ease-in-out infinite}
@keyframes nmbow{0%,100%{transform:rotate(0) translateY(0)}18%{transform:rotate(-14deg) translateY(1px)}36%{transform:rotate(12deg)}54%{transform:rotate(-8deg)}72%{transform:rotate(0) translateY(-2px) scale(1.12)}85%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.in-namaste,.in-namaste::after,.nm-ic{animation:none!important}}

/* ===== home page polish: motion + graphics ===== */
/* brands marquee */
.lp-brands{flex-wrap:nowrap;gap:14px;overflow:hidden}
.mq-l{white-space:nowrap;font-weight:600;color:var(--kum)}
.mq{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:10px;width:max-content;animation:mq 30s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-track b{white-space:nowrap;padding:7px 16px;border-radius:99px;font-weight:700;color:#5a3a22;transition:transform .25s var(--ease),color .25s}
.mq-track b:hover{transform:translateY(-3px) scale(1.06);color:var(--sf)}
@keyframes mq{to{transform:translateX(calc(-50% - 5px))}}
@media(max-width:700px){.lp-brands{flex-direction:column;gap:8px}.mq{width:100%}}

/* stats */
.lp-stat .n{background:linear-gradient(135deg,#e8751a,#7a1f2b);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-stat{position:relative;overflow:hidden}
.lp-stat::after{content:"";position:absolute;right:-24px;top:-24px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(255,183,3,.3),transparent 70%);animation:pulse-orb 5s ease-in-out infinite}

/* steps: number badge pops, mockups float and tilt */
.lp-step .num{animation:numpop .7s var(--ease) both;background:linear-gradient(135deg,#f59a2b,#e8751a);box-shadow:0 10px 22px rgba(232,117,26,.4),0 0 0 6px rgba(255,183,3,.18)}
@keyframes numpop{from{transform:scale(.4) rotate(-30deg);opacity:0}}
.lp-step .vis{transition:transform .5s var(--ease),box-shadow .4s}
.lp-step:hover .vis{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 34px 70px rgba(120,70,20,.2)}
.lp-step .vis .mk{animation:mkfloat 6s ease-in-out infinite}
@keyframes mkfloat{50%{transform:translateY(-6px)}}
[data-reveal]{transition-duration:.9s}

/* features: coloured icon tiles */
.lp-feat .fc{position:relative;overflow:hidden}
.lp-feat .fc::before{content:"";position:absolute;inset:0;background:radial-gradient(220px circle at 20% 0,rgba(255,183,3,.18),transparent 60%);opacity:0;transition:opacity .35s}
.lp-feat .fc:hover::before{opacity:1}
.lp-feat .fc .ic{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;font-size:26px;margin-bottom:10px;background:linear-gradient(135deg,#ffe9c7,#ffd08a);box-shadow:0 10px 22px rgba(232,117,26,.25);transition:transform .4s var(--ease)}
.lp-feat .fc:nth-child(4n+2) .ic{background:linear-gradient(135deg,#dff3d3,#a9dc8a);box-shadow:0 10px 22px rgba(19,136,8,.22)}
.lp-feat .fc:nth-child(4n+3) .ic{background:linear-gradient(135deg,#ffe1e4,#f5a8b2);box-shadow:0 10px 22px rgba(122,31,43,.22)}
.lp-feat .fc:nth-child(4n) .ic{background:linear-gradient(135deg,#fff3bf,#ffd34d);box-shadow:0 10px 22px rgba(242,177,52,.3)}
.lp-feat .fc:hover .ic{transform:translateY(-4px) rotate(-8deg) scale(1.1)}

/* pricing: animated gold ring on the popular plan */
.lp-plan.pop{border:3px solid transparent!important;background:linear-gradient(#fffdf8,#fffdf8) padding-box,conic-gradient(from var(--ang,0deg),#f59a2b,#ffd166,#138808,#7a1f2b,#f59a2b) border-box!important;backdrop-filter:none;animation:ring 5s linear infinite;box-shadow:0 30px 70px rgba(232,117,26,.28)}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes ring{to{--ang:360deg}}
.lp-plan .btn{transition:transform .2s var(--ease)}

/* faq: smooth open */
.lp-faq details{transition:box-shadow .3s,transform .3s var(--ease)}
.lp-faq details[open]{box-shadow:0 18px 40px rgba(120,70,20,.14)}
.lp-faq details[open] p{animation:fx-in .45s var(--ease)}
.lp-faq summary{cursor:pointer}

/* CTA band: mandala watermark + petals */
.lp-cta-band{position:relative;overflow:hidden}
.band-mandala{position:absolute;right:-6%;top:50%;width:min(520px,70vw);aspect-ratio:1;translate:0 -50%;opacity:.22;animation:spin 140s linear infinite;pointer-events:none}
.band-mandala svg{width:100%;height:100%}
.band-mandala svg *{stroke:#ffd166}
.lp-cta-band .in-petals{border-radius:0}
.lp-cta-band .wrap{position:relative;z-index:2}
.lp-cta-band .btn.gold{animation:ctapulse 2.4s ease-in-out infinite}
@keyframes ctapulse{50%{box-shadow:0 0 0 12px rgba(255,209,102,.22),0 10px 28px rgba(242,177,52,.5)}}

/* section backgrounds */
.lp-sec.white{background:linear-gradient(180deg,#fffdf8,#fff7e8)}
.lp-journey{background:radial-gradient(60% 40% at 50% 0,rgba(255,183,3,.14),transparent 70%)}
.lp-jstage{border-color:#ffe1b0!important}
@media(prefers-reduced-motion:reduce){.mq-track,.lp-stat::after,.lp-step .num,.lp-step .vis .mk,.band-mandala,.lp-cta-band .btn.gold{animation:none!important}}
.lp-cta-band .in-petals{z-index:1}

/* ===== onboarding checklist (new shops start empty) ===== */
.setup{margin-bottom:14px;border:1px solid #ffd9a0;background:linear-gradient(135deg,rgba(255,243,220,.95),rgba(255,255,255,.85))}
.setup h3{color:var(--kum);margin:0 0 4px}
.setup-bar{height:8px;border-radius:99px;background:#f5e8d0;margin:12px 0 14px;overflow:hidden}
.setup-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f59a2b,#138808);transition:width .8s var(--ease);box-shadow:0 0 12px rgba(232,117,26,.5)}
.setup-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.setup-steps a{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;background:#fff;border:1px solid #f0e0c4;text-decoration:none;color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.setup-steps a:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(120,70,20,.14);border-color:var(--sf)}
.setup-steps a .si{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:17px;background:linear-gradient(135deg,#ffe9c7,#ffd08a)}
.setup-steps a b{display:block;font-size:13.5px}.setup-steps a small{display:block;color:var(--mut);font-size:12px;line-height:1.35;margin-top:2px}
.setup-steps a.ok{opacity:.7;background:#f3fbef;border-color:#cdebc2}.setup-steps a.ok .si{background:#138808;color:#fff;font-weight:800}

/* ===== brand logo ===== */
.lp-logo-img{display:block;height:46px;width:auto;transition:transform .35s var(--ease),filter .35s}
.lp-logo:hover .lp-logo-img{transform:scale(1.04);filter:drop-shadow(0 6px 10px rgba(19,136,8,.25))}
.lp-nav .wrap{height:72px}
.side-brand{display:block;background:#fff;border-radius:18px;padding:8px 12px;margin:2px 2px 16px;box-shadow:0 10px 24px rgba(0,0,0,.28),0 0 0 3px rgba(255,209,102,.35);transition:transform .3s var(--ease)}
.side-brand:hover{transform:translateY(-2px)}
.side-brand img{display:block;width:100%;height:auto}
.lp-foot .lp-logo{display:inline-flex;background:#fff8ec;border-radius:16px;padding:8px 14px;margin-bottom:12px;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.lp-foot .lp-logo-img{height:50px}
@media(max-width:520px){.lp-logo-img{height:38px}.lp-nav .wrap{height:64px}.lp-logo span{display:none}}

/* ===== logo on printed output + auth modal ===== */
.printonly{display:none}
.auth-logo{display:block;width:min(240px,70%);height:auto;margin:0 auto 10px}
.rc-foot{text-align:center;margin-top:10px}.rc-foot img{width:120px;height:auto;display:block;margin:6px auto 2px}.rc-foot small{display:block;color:var(--mut);font-size:11px}
@media print{
  .printonly{display:flex!important}
  .print-head{align-items:center;gap:16px;padding:0 0 10px;margin-bottom:14px;border-bottom:2px solid #e8751a}
  .print-head img{height:56px;width:auto}
  .print-head>div{font-size:12px;line-height:1.4}
  .print-head .ph-t{margin-left:auto;text-align:right}.print-head .ph-t b{font-size:16px;color:#7a1f2b}
  body,body::before{background:#fff!important}
  body::after{content:"";position:fixed;inset:0;z-index:-1;background:url(/img/logo.png) center 55%/55% no-repeat;opacity:.06;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .card{background:#fff!important;backdrop-filter:none!important;transform:none!important}
}

/* ===== home <-> dashboard navigation ===== */
.home-btn{gap:6px;background:linear-gradient(135deg,#fff3dc,#fff);border-color:#ffd9a0;color:var(--kum);font-weight:700;white-space:nowrap}
.home-btn:hover{border-color:var(--sf);box-shadow:0 8px 18px rgba(232,117,26,.2)}
@media(max-width:700px){.home-btn .hl{display:none}.home-btn{padding:5px 10px}}
.lp-nav a.btn.sm.primary{text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
.lp-cta a.btn.primary,.lp-plan a.btn,.lp-cta-band a.btn{text-decoration:none}

/* ===== journey stage: sunrise backdrop, richer chips and step UI ===== */
.lp-jstage{background:radial-gradient(60% 55% at 50% 38%,rgba(255,246,206,.95),transparent 70%),linear-gradient(180deg,#ffe1b4 0%,#ffbd78 48%,#f39a45 100%)!important;border:2px solid #fff3d8!important;box-shadow:0 40px 90px rgba(180,90,20,.32),0 0 0 6px rgba(255,209,102,.35)!important}
.lp-jstage .blob{opacity:.5;mix-blend-mode:soft-light}
.stage-mandala{position:absolute;left:50%;top:44%;width:min(120%,980px);aspect-ratio:1;translate:-50% -50%;opacity:.32;animation:spin 150s linear infinite;pointer-events:none}
.stage-mandala svg{width:100%;height:100%;display:block}
.stage-mandala svg *{stroke:#fff6dc}
.stage-sun{position:absolute;left:50%;top:30%;width:34%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,250,214,.95),rgba(255,223,130,.5) 45%,transparent 70%);filter:blur(4px);animation:glowp 6s ease-in-out infinite;pointer-events:none}
.jchip{background:rgba(255,252,244,.94)!important;border:1px solid #fff!important;box-shadow:0 10px 26px rgba(122,31,43,.22)!important;color:#5a1a22!important;font-weight:700!important}
.jchip.on{animation:chipin .6s var(--ease)}
@keyframes chipin{from{transform:translate(-50%,-30%) scale(.8)}}
.lp-caps{height:3rem}
.lp-cap{color:var(--kum)!important;letter-spacing:-.01em}
.lp-dots{gap:10px;margin-top:8px}
.lp-dots i{width:34px!important;height:8px!important;background:#f3d9b4!important;box-shadow:inset 0 1px 2px rgba(122,31,43,.12)}
.lp-dots i.on{width:64px!important;background:linear-gradient(90deg,#f59a2b,#e8751a)!important;box-shadow:0 4px 12px rgba(232,117,26,.5)}

/* ---- notifications: opaque panel, clear unread state, phone-safe layout ---- */
.nbadge{top:-7px;right:-7px;min-width:20px;height:20px;line-height:1;z-index:2}
.npanel{background:#fffdf9;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid #f3e4cf;overscroll-behavior:contain}
.nhead,.nfoot{background:#fffdf9}
.nhead b{font-size:16px}
.nitem{position:relative;align-items:flex-start;transition:background .2s}
.nitem:hover{background:#fff8ee}
.nitem .grow{min-width:0}
.nitem .grow>b{display:block;line-height:1.3;overflow-wrap:anywhere}
.nitem .grow>.small{line-height:1.4;overflow-wrap:anywhere}
.nitem .grow>.small + .small{margin-top:3px;font-size:11.5px;opacity:.85}
.nitem .row{gap:8px;flex-wrap:wrap}
.nitem.unread{background:#fff6e6;box-shadow:inset 3px 0 0 var(--saffron)}
.nitem.unread::after{content:"";position:absolute;top:16px;right:14px;width:8px;height:8px;border-radius:50%;background:var(--saffron)}
.nitem.unread .grow>b{padding-right:16px}
.nitem:not(.unread) .grow>b{font-weight:600}
.nlist .empty{padding:34px 16px;text-align:center;color:var(--mut,#7b6a5c)}
.nlist .empty::before{content:"";display:block;width:34px;height:34px;margin:0 auto 8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8a690' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:560px){
  .npanel{position:fixed;left:10px;right:10px;top:62px;width:auto;max-height:calc(100vh - 78px);max-height:calc(100dvh - 78px)}
  .top .netbadge{font-size:0;width:10px;height:10px;min-width:0;padding:0;border-radius:50%;flex:0 0 auto;box-shadow:none}
  .top .netbadge.ok{background:var(--ok,#16a05a)}.top .netbadge.bad{background:var(--bad,#d93636)}
  .top .home-btn .hl{display:none}
  .top{gap:6px}
  .top .langsel select{width:76px;max-width:76px}
  .top .langsel svg{display:none}
  .top .langsel{padding:0 4px 0 8px}
  .top h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---- back button ---- */
.back-btn{gap:6px;white-space:nowrap;font-weight:700;color:var(--kum,#7a1f2b);background:#fff;border-color:#f1d9b5;flex:0 0 auto}
.back-btn:hover{border-color:var(--saffron);background:#fff8ee}
@media(max-width:560px){.top .back-btn .hl{display:none}.top .back-btn{padding-left:12px;padding-right:12px}}

/* ---- icon system (replaces emoji) ---- */
.ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.2em;line-height:0;flex:none}
.ic-svg{width:1.15em;height:1.15em;display:block;flex:none}
.nav a .ic .ic-svg,.nav .ic .ic-svg{width:20px;height:20px}
.nic .ic-svg{width:19px;height:19px;color:var(--saffron)}
.setup-steps .si .ic-svg{width:21px;height:21px;color:var(--saffron)}
.setup-steps a.ok .si .ic-svg{color:var(--ok,#16a05a)}
.btn .ico{margin-right:6px}.btn .ico:last-child{margin-right:0}
.btn.sm .ico{margin-right:5px}
.burger .ico,.bellbtn .ico,.back-btn .ico,.home-btn .ico{margin-right:0}
.back-btn .ico + .hl,.home-btn .ico + .hl{margin-left:6px}

/* ---- phone fixes ---- */
@media(max-width:430px){
  .top .home-btn{display:none}
  .top{padding:10px}
  .top .btn.sm{padding-left:7px;padding-right:7px;min-width:0}
  .top .langsel select{width:74px;max-width:74px}
  .top h2{font-size:15px}
  .top .langsel{padding:0 2px 0 8px}
}
@media(max-width:640px){
  .pu-lines thead{display:none}
  .pu-lines,.pu-lines tbody{display:block}
  .pu-lines tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;position:relative;padding:12px;margin-bottom:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.7)}
  .pu-lines td{display:block;padding:0;border:0}
  .pu-lines td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut,#7b6a5c)}
  .pu-lines td:first-child{grid-column:1/-1}
  .pu-lines td:last-child{position:absolute;top:8px;right:8px}
  .pu-lines td:last-child::before{display:none}
  .pu-lines td:first-child select{min-width:0!important;width:100%;padding-right:44px}
  .pu-lines input,.pu-lines select{width:100%!important;min-width:0!important}
}

/* ---- blocked (suspended / expired) screen ---- */
.blocked{min-height:100vh;display:grid;place-items:center;padding:20px}
.blocked .card{max-width:440px;text-align:center;padding:30px 26px}
.blocked-ic{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:#fff0dc;color:var(--saffron)}
.blocked-ic .ic-svg{width:28px;height:28px}
.blocked h2{margin:0 0 8px}
.blocked p{color:var(--mut,#7b6a5c);margin:0 0 18px;line-height:1.5}

/* notification badge must overhang the bell button, so the button can't clip it */
.bellbtn{overflow:visible}
.bellbtn .nbadge{top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;font-size:11px;line-height:20px;text-align:center;display:block;box-shadow:0 0 0 2px #fff}
.bellbtn .nbadge[hidden]{display:none}