/* ===== Digital Card — warm, spiritual, turmeric theme ===== */
:root{
  --bg:#FBF1D6; --paper:#FFFCF3; --sun:#F2B90F; --sun-2:#F7D352; --saffron:#E0761A;
  --maroon:#7A1F12; --ink:#3A2312; --muted:#7C5C3B; --line:#EDD9A6; --soft:#FFF4D2;
  --wa:#1FA855; --r:18px; --shadow:0 10px 30px -12px rgba(122,31,18,.28);
  --head:"Tiro Devanagari Hindi",serif; --body:"Hind",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--ink);font-size:16.5px;line-height:1.65;
  background:var(--bg) radial-gradient(circle at 20% 0,#FFE7A3 0,transparent 45%),radial-gradient(circle at 100% 60%,#FCE0B8 0,transparent 40%);
  background-attachment:fixed;padding-bottom:84px}
img{max-width:100%;display:block}
a{color:var(--maroon)}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
button{font:inherit;cursor:pointer}

.card{max-width:480px;margin:0 auto;background:var(--paper);min-height:100vh;overflow:hidden;position:relative}
@media(min-width:520px){.card{margin:28px auto;border-radius:28px;box-shadow:0 30px 70px -30px rgba(122,31,18,.45);min-height:0}body{padding-bottom:40px}}

/* ---------- Hero ---------- */
.hero{position:relative;padding:22px 18px 22px;color:var(--maroon);
  background:linear-gradient(165deg,#FFE27A 0%,var(--sun) 45%,#EE9B19 100%);overflow:hidden;isolation:isolate}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:26px;background:var(--paper);border-radius:26px 26px 0 0;z-index:-1}
.mandala{position:absolute;color:#fff;opacity:.28;z-index:-1;pointer-events:none}
.m1{width:300px;height:300px;right:-110px;top:-110px;animation:spin 120s linear infinite}
.m2{width:200px;height:200px;left:-90px;top:140px;opacity:.18;animation:spin 160s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mandala{animation:none}}
.greet{background:rgba(255,252,243,.82);backdrop-filter:blur(6px);border-radius:14px;padding:10px 14px;font-size:15px;
  margin-bottom:14px;box-shadow:0 4px 14px -6px rgba(122,31,18,.35);animation:drop .6s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}}
.brand{text-align:center}
.logo{width:96px;height:96px;margin:4px auto 10px;border-radius:50%;background:var(--paper);padding:5px;
  box-shadow:0 0 0 4px rgba(255,255,255,.55),0 0 0 9px rgba(255,255,255,.22),var(--shadow);display:grid;place-items:center;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.logo span{font-family:var(--head);font-size:46px;color:var(--saffron);line-height:1}
.hero h1{font-family:var(--head);font-weight:400;font-size:clamp(26px,7vw,32px);line-height:1.25;color:#5C1209}
.tagline{font-size:16px;margin-top:4px;color:#6A2A10;font-weight:500}
.gift{display:inline-block;margin-top:10px;font-size:13px;letter-spacing:.2px;background:rgba(122,31,18,.1);
  padding:4px 12px;border-radius:99px;color:#5C1209}

.hero-player{margin-top:18px;position:relative;z-index:1}
.yt{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#2a1a10;cursor:pointer;box-shadow:var(--shadow)}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.yt:hover img{transform:scale(1.03)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;background:rgba(224,118,26,.94);
  box-shadow:0 0 0 8px rgba(255,255,255,.28);transition:transform .2s}
.play:after{content:"";position:absolute;left:25px;top:19px;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.yt:hover .play{transform:scale(1.08)}
.hero-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.htab{border:0;background:rgba(255,252,243,.7);border-radius:12px;padding:4px;text-align:left;color:var(--ink);
  outline:2px solid transparent;transition:.2s}
.htab img{aspect-ratio:16/9;object-fit:cover;border-radius:9px}
.htab span{display:block;font-size:12.5px;line-height:1.3;padding:5px 3px 2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.htab.on{background:var(--paper);outline-color:var(--maroon)}

/* ---------- Quick actions ---------- */
.quick{display:flex;justify-content:space-around;gap:4px;padding:10px 12px 18px;border-bottom:1px dashed var(--line)}
.quick a{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:var(--ink);font-size:13px;font-weight:500;min-width:58px}
.quick svg{width:48px;height:48px;padding:13px;border-radius:50%;background:var(--soft);color:var(--maroon);border:1px solid var(--line);transition:.2s}
.quick a:hover svg{background:var(--sun);transform:translateY(-2px)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;padding:18px}
.stats div{text-align:center;background:linear-gradient(180deg,var(--soft),#fff);border:1px solid var(--line);border-radius:14px;padding:12px 6px}
.stats strong{display:block;font-family:var(--head);font-size:26px;color:var(--saffron);line-height:1.1;font-weight:400}
.stats span{font-size:13px;color:var(--muted)}

/* ---------- Sections ---------- */
.sec{padding:22px 20px}
.sec h2{font-family:var(--head);font-weight:400;font-size:24px;color:var(--maroon);text-align:center;margin-bottom:14px;
  display:flex;align-items:center;gap:12px}
.sec h2:before,.sec h2:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--sun) 60%,var(--saffron))}
.sec h2:after{transform:scaleX(-1)}
.sec p+p{margin-top:10px}
.center{text-align:center;color:var(--muted);margin-bottom:14px}
.mission{margin:16px 0 0;padding:16px 18px;border-radius:var(--r);background:var(--soft);border-left:4px solid var(--saffron);
  font-family:var(--head);font-size:18px;color:#5C1209;line-height:1.55}
.mission span{display:block;font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--saffron);letter-spacing:.5px;margin-bottom:2px}
.facts{display:flex;gap:10px;margin-top:14px}
.facts div{flex:1;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.facts dt{font-size:12.5px;color:var(--muted)} .facts dd{font-weight:600}

.services{list-style:none;display:grid;gap:10px}
.services li{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.services b{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--sun);color:var(--maroon);font-family:var(--head);font-weight:400;font-size:19px}
.services h3{font-size:17px;font-weight:600;color:var(--ink);line-height:1.3}
.services p{font-size:15px;color:var(--muted);margin-top:2px}

/* ---------- Carousel ---------- */
.carousel{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;position:relative;aspect-ratio:4/3;background:#f3e3bd}
.slide img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 30px;color:#fff;font-size:14.5px;
  background:linear-gradient(transparent,rgba(40,15,5,.75))}
.cnav{position:absolute;top:50%;translate:0 -50%;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,252,243,.85);
  color:var(--maroon);display:grid;place-items:center}
.prev{left:8px}.next{right:8px}
.dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.dots i{width:7px;height:7px;border-radius:9px;background:rgba(255,255,255,.6);transition:.3s}
.dots i.on{width:20px;background:var(--sun)}

/* ---------- Video strip ---------- */
.vstrip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:2px 20px 8px;scrollbar-width:thin;scrollbar-color:var(--sun) transparent}
.vcard{flex:0 0 80%;scroll-snap-align:center}
.vcard .yt{box-shadow:0 6px 18px -10px rgba(122,31,18,.5)}
.vcard p{font-size:14.5px;font-weight:500;margin-top:7px;line-height:1.35}
.vcard .play{width:48px;height:48px}.vcard .play:after{left:19px;top:14px;border-left-width:14px;border-top-width:10px;border-bottom-width:10px}
.hint{text-align:center;font-size:12.5px;color:var(--muted);margin-top:4px}

/* ---------- Team ---------- */
.people{list-style:none;display:grid;gap:8px}
.people li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--saffron);font-family:var(--head);font-size:20px;flex:none}
.people div{flex:1;line-height:1.3}.people small{display:block;color:var(--muted);font-size:13.5px}
.people a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--soft)}

/* ---------- Donation ---------- */
.donate{background:linear-gradient(180deg,var(--paper),var(--soft) 30%,var(--soft) 80%,var(--paper))}
.qr{width:min(260px,80%);margin:0 auto 16px;padding:14px;background:#fff;border-radius:22px;text-align:center;
  box-shadow:0 0 0 2px var(--sun),0 0 0 8px rgba(242,185,15,.18),var(--shadow)}
.qr img{width:100%;border-radius:8px}
.qr small{display:block;margin-top:8px;color:var(--muted);font-size:13px}
.upi{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px dashed var(--saffron);border-radius:14px;padding:10px 12px;margin-bottom:12px}
.upi small{display:block;font-size:12px;color:var(--muted)}
.upi code{font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:600;word-break:break-all}
.bank{margin-top:12px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:10px 14px}
.bank summary{cursor:pointer;font-weight:600;color:var(--maroon)}
.bank pre{white-space:pre-wrap;font-family:var(--body);margin-top:8px;font-size:15px}
.link-wa{display:block;text-align:center;margin-top:14px;font-size:14.5px;font-weight:500}

/* ---------- Buttons & forms ---------- */
.btn{display:flex;width:100%;align-items:center;justify-content:center;gap:9px;border:0;border-radius:14px;padding:13px 18px;
  background:linear-gradient(180deg,#E9861F,var(--saffron));color:#fff;font-weight:600;font-size:16.5px;text-decoration:none;
  box-shadow:0 8px 18px -8px rgba(224,118,26,.8);transition:.2s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--maroon);border:1.5px solid var(--saffron);box-shadow:none;margin-top:16px}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--maroon);
  border-radius:11px;padding:8px 12px;font-weight:500;font-size:14.5px}
.btn-ghost svg{width:16px;height:16px}
.form{display:grid;gap:12px}
.form label{display:grid;gap:4px;font-size:14px;font-weight:500;color:var(--muted)}
.form input,.form select,.form textarea{font:inherit;font-size:16px;color:var(--ink);width:100%;padding:11px 13px;border-radius:12px;
  border:1.5px solid var(--line);background:#fff;transition:.2s;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--sun);box-shadow:0 0 0 4px rgba(242,185,15,.2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.err{color:#B3261E;font-size:14px;text-align:center}
.share{background:var(--soft);border-radius:var(--r);margin:10px 14px;padding:22px 16px}
.share-alt{display:flex;justify-content:center;gap:10px;margin-top:12px}
.mobile-only{display:none}
.is-mobile .mobile-only{display:flex}

/* ---------- Contact ---------- */
.contact{list-style:none;display:grid;gap:12px}
.contact li{display:flex;gap:12px;align-items:flex-start}
.contact svg{color:var(--saffron);margin-top:3px}
.contact a{text-decoration:none;font-weight:500}
.social{display:flex;justify-content:center;gap:12px;margin-top:18px}
.social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--soft);border:1px solid var(--line);color:var(--maroon)}

/* ---------- Footer ---------- */
.foot{position:relative;text-align:center;padding:30px 20px 26px;margin-top:10px;overflow:hidden;
  background:linear-gradient(180deg,var(--paper),#FDE7A6);color:#5C1209;isolation:isolate}
.m3{width:240px;height:240px;left:50%;top:-40px;margin-left:-120px;color:var(--saffron);opacity:.12;animation:spin 200s linear infinite}
.gift-foot{font-family:var(--head);font-size:17px;line-height:1.5}
.gift-foot strong{font-weight:400;font-size:21px;color:var(--maroon)}
.visits{display:inline-flex;align-items:center;gap:7px;margin-top:14px;background:#fff;border-radius:99px;padding:5px 14px;font-size:14px;border:1px solid var(--line)}
.visits svg{width:17px;height:17px;color:var(--saffron)}
.credit{margin-top:12px;font-size:12px;opacity:.7}.credit a{color:inherit}

/* ---------- Dock ---------- */
.dock{position:fixed;left:50%;translate:-50% 0;bottom:max(10px,env(safe-area-inset-bottom));width:min(460px,calc(100% - 20px));
  display:flex;justify-content:space-around;background:rgba(255,252,243,.94);backdrop-filter:blur(10px);border:1px solid var(--line);
  border-radius:20px;padding:6px;box-shadow:0 10px 30px -10px rgba(122,31,18,.4);z-index:20}
.dock a{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:12px;font-weight:500;text-decoration:none;color:var(--ink);padding:5px 2px;border-radius:14px}
.dock svg{width:21px;height:21px;color:var(--maroon)}
.dock .dock-main{background:var(--sun);color:var(--maroon)}
@media(min-width:520px){.dock{display:none}}

/* ---------- Lightbox / toast ---------- */
#lightbox{border:0;padding:0;background:transparent;max-width:96vw;max-height:92vh;margin:auto}
#lightbox::backdrop{background:rgba(30,12,4,.88)}
#lightbox img{max-width:96vw;max-height:88vh;border-radius:12px}
#lightbox button{position:fixed;top:14px;right:14px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;font-size:18px}
#toast{position:fixed;left:50%;bottom:96px;translate:-50% 20px;background:#3A2312;color:#fff;padding:9px 18px;border-radius:99px;font-size:14.5px;
  opacity:0;pointer-events:none;transition:.3s;z-index:30}
#toast.show{opacity:1;translate:-50% 0}

/* ---------- Content blocks on the card ---------- */
.don-note{text-align:center;margin:16px 0 18px;color:#5a3a1e}
.donate .blk{margin-bottom:18px}
.donate .blk>h2{font-size:20px}
.sec .rich p+p{margin-top:0}