/* ══════════════════════════════════════════════════════════════════
   DevReels — website ki poori CSS. index.html aur teeno policy pages
   yahi file padhte hain, isliye rang ek hi jagah se aate hain.

   Do niyam jo poore page par chalte hain:
   1. Sona (gold) sirf lakeeron aur frame ke liye — dhaancha wahi
      banata hai, isliye wo shaant rehta hai.
   2. Kesari sirf teen jagah — download button, "आज" ka nishaan, aur
      hero ka jeevit demo. Baaki sab ivory par gehri syaahi.
   Pehle har cheez kesari gradient me thi, aur jab sab barabar
   chillate hain to nazar kahin tikti hi nahi.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --kesari:#F26A1B;
  --kesari-gehra:#D95608;
  --sona:#C89A3C;              /* lakeer, frame, chhalla — sirf sajawat */
  --sona-likha:#8A6614;        /* jahan sone me LIKHNA hai — teeno halke background par 4.8:1+ */
  --sona-jhalak:rgba(200,154,60,.30);

  --dharti:#FFFCF6;
  --dharti-2:#FBF3E7;
  --patti:#FFFFFF;
  --lakeer:#EFE0C8;

  --syaahi:#2C1408;
  --syaahi-halka:#7A5B47;
  --syaahi-feeka:#7E664F;   /* 4.9:1+ — caption bhi padha jana chahiye */

  --sar-bg:rgba(255,252,246,.93);
  --ring:rgba(44,20,8,.05);

  --chhaya:0 1px 2px rgba(44,20,8,.04), 0 10px 28px -18px rgba(44,20,8,.30);
  --chhaya-badi:0 2px 6px rgba(44,20,8,.05), 0 34px 66px -34px rgba(44,20,8,.42);
  --chhaya-kesari:0 10px 24px -12px rgba(242,106,27,.55);

  --max:1120px;
  --r-md:16px; --r-lg:22px; --r-xl:30px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --kesari:#FF8A3D; --kesari-gehra:#F26A1B;
    --sona:#D9B26A; --sona-likha:#D9B26A; --sona-jhalak:rgba(217,178,106,.26);
    --dharti:#120C07; --dharti-2:#1B120B; --patti:#20160E; --lakeer:#3A2A1B;
    --syaahi:#F8EBDB; --syaahi-halka:#C6AA90; --syaahi-feeka:#9A8069;
    --sar-bg:rgba(18,12,7,.93); --ring:rgba(255,255,255,.05);
    --chhaya:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -18px rgba(0,0,0,.8);
    --chhaya-badi:0 2px 6px rgba(0,0,0,.5), 0 34px 66px -34px rgba(0,0,0,.9);
    --chhaya-kesari:0 10px 24px -12px rgba(242,106,27,.45);
  }
}
:root[data-theme="dark"]{
  --kesari:#FF8A3D; --kesari-gehra:#F26A1B;
  --sona:#D9B26A; --sona-likha:#D9B26A; --sona-jhalak:rgba(217,178,106,.26);
  --dharti:#120C07; --dharti-2:#1B120B; --patti:#20160E; --lakeer:#3A2A1B;
  --syaahi:#F8EBDB; --syaahi-halka:#C6AA90; --syaahi-feeka:#9A8069;
  --sar-bg:rgba(18,12,7,.93); --ring:rgba(255,255,255,.05);
  --chhaya:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -18px rgba(0,0,0,.8);
  --chhaya-badi:0 2px 6px rgba(0,0,0,.5), 0 34px 66px -34px rgba(0,0,0,.9);
  --chhaya-kesari:0 10px 24px -12px rgba(242,106,27,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--dharti); color:var(--syaahi);
  font-family:'Mukta','Noto Sans Devanagari',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17.5px; line-height:1.72; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{margin:0; font-weight:800; line-height:1.18; text-wrap:balance}
p{margin:0}
a{color:inherit}
img{display:block; max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2.5px solid var(--kesari); outline-offset:3px; border-radius:8px}

.lapet{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:22px}
@media (min-width:720px){ .lapet{padding-inline:34px} }
.label{font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--sona-likha); display:block}
.tez{color:var(--kesari)}

.rekha{display:flex; align-items:center; justify-content:center; gap:16px; padding:2px 0}
.rekha::before,.rekha::after{content:""; height:1px; flex:1; max-width:220px;
  background:linear-gradient(90deg,transparent,var(--sona-jhalak),transparent)}
.rekha i{width:6px; height:6px; transform:rotate(45deg); background:var(--sona); opacity:.7}

/* ─── Sar ──────────────────────────────────────────────────────────── */
.sar{position:sticky; top:0; z-index:60; background:var(--sar-bg); backdrop-filter:blur(16px);
  border-bottom:1px solid transparent; transition:border-color .25s ease}
.sar.tikka{border-bottom-color:var(--lakeer)}
.sar-andar{display:flex; align-items:center; gap:14px; height:72px}
.chinh{display:flex; align-items:center; gap:10px; text-decoration:none}
.chinh img{width:40px; height:40px; border-radius:12px; box-shadow:var(--chhaya)}
.sar nav{margin-left:auto; display:none; gap:28px}
@media (min-width:900px){ .sar nav{display:flex} }
.sar nav a{text-decoration:none; font-weight:600; font-size:15px; color:var(--syaahi-halka)}
.sar nav a:hover{color:var(--kesari)}
.sar-daayen{margin-left:auto; display:flex; align-items:center; gap:12px}
@media (min-width:900px){ .sar-daayen{margin-left:26px} }
.bhasha{display:inline-flex; padding:3px; border-radius:999px; background:var(--dharti-2); border:1px solid var(--lakeer)}
.bhasha button{border:0; background:none; cursor:pointer; color:var(--syaahi-halka);
  font-size:13.5px; font-weight:700; padding:6px 13px; border-radius:999px; transition:background .2s, color .2s}
.bhasha button.chalu{background:var(--patti); color:var(--syaahi); box-shadow:var(--chhaya)}

/* ─── Button ───────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 24px;
  border-radius:999px; border:0; text-decoration:none; font-size:15px; font-weight:700; cursor:pointer;
  transition:transform .18s ease, background .18s ease}
.btn-mukhya{background:var(--kesari); color:#fff; box-shadow:var(--chhaya-kesari)}
.btn-mukhya:hover{transform:translateY(-2px); background:var(--kesari-gehra)}
.sar .btn-mukhya{display:none}
@media (min-width:560px){ .sar .btn-mukhya{display:inline-flex} }

/* Ek hi button hai, isliye wo bada hai — pehle do the aur dono aadhe
   aadhe dhyaan le jaate the. */

/* ─── Hero ─────────────────────────────────────────────────────────── */
.hero{position:relative; padding:46px 0 58px; overflow:hidden}
@media (min-width:900px){ .hero{padding:72px 0 84px} }
.hero::before{content:""; position:absolute; inset:-30% -25% auto -25%; height:120%; pointer-events:none;
  background:radial-gradient(46% 38% at 24% 16%, rgba(242,106,27,.10), transparent 66%),
             radial-gradient(40% 34% at 86% 4%, rgba(200,154,60,.16), transparent 64%)}
.hero-grid{position:relative; display:grid; gap:46px; align-items:center}
@media (min-width:900px){ .hero-grid{grid-template-columns:1fr 1fr; gap:56px} }
.hero h1{font-size:clamp(35px,6vw,60px); line-height:1.12; margin:14px 0 18px}
.hero-upvakya{font-size:clamp(16.5px,1.9vw,19px); color:var(--syaahi-halka); max-width:36ch}
.hero-note{margin-top:14px; font-size:13.5px; font-weight:600; color:var(--syaahi-feeka)}

/* Jeevit demo — naam aur photo yahin badal kar dekhiye */
.aazmao{margin:26px 0 24px; padding:18px 18px 16px; border-radius:var(--r-lg);
  background:var(--dharti-2); border:1px solid var(--lakeer)}
.aazmao > .label{margin-bottom:11px}
.khaana{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.aazmao input[type=text]{flex:1 1 190px; min-width:0; padding:12px 16px; border-radius:12px;
  border:1px solid var(--lakeer); background:var(--patti); font-size:16px; font-weight:600}
.aazmao input[type=text]::placeholder{color:var(--syaahi-feeka); font-weight:500}
.aazmao input[type=text]:focus{border-color:var(--kesari); outline:none; box-shadow:0 0 0 3px rgba(242,106,27,.14)}
.chhoti-btn{padding:11px 16px; border-radius:12px; cursor:pointer; font-size:14.5px; font-weight:700;
  background:var(--patti); border:1px solid var(--lakeer); color:var(--syaahi);
  transition:border-color .18s ease, color .18s ease}
.chhoti-btn:hover{border-color:var(--kesari); color:var(--kesari)}
.aazmao .kaanaphusi{margin-top:11px; font-size:13px; color:var(--syaahi-feeka); line-height:1.55}

/* ─── Sandesh-patra — app ka apna sona frame ──────────────────────── */
.patra-jagah{display:flex; flex-direction:column; align-items:center; gap:14px}
.patra{position:relative; width:min(430px,88vw); aspect-ratio:1/1; border-radius:var(--r-lg);
  background:radial-gradient(closest-side at 50% 34%, rgba(255,255,255,.9), transparent 76%),
             linear-gradient(165deg,#FFF3DF,#FFE0B8 52%,#FFCE9A);
  box-shadow:var(--chhaya-badi); overflow:hidden}
.patra .frame{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; z-index:2}
.patra-andar{position:absolute; inset:16%; z-index:3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center}
.patra .mukh{width:74px; height:74px; border-radius:50%; object-fit:cover; flex:none;
  border:3px solid rgba(255,255,255,.92); box-shadow:0 8px 20px -10px rgba(44,20,8,.5); background:#E7CFAE}
.patra .mukh.khaali{display:grid; place-items:center; font-size:30px; color:#8A6034}
.patra .sandesh{font-size:clamp(23px,4.4vw,31px); font-weight:800; color:#5A2408; line-height:1.24}
.patra .upsandesh{font-size:14.5px; font-weight:600; color:#8A5A33}
.patra .naam-rekha{margin-top:2px; padding-top:9px; font-size:15.5px; font-weight:700; color:#5A2408;
  border-top:1px solid rgba(90,36,8,.22); min-width:130px}
.patra .naam-rekha.suna{color:#A6784C; font-weight:600}
.patra-neeche{font-size:13px; color:var(--syaahi-feeka); text-align:center; max-width:34ch}


/* ══════════════════════════════════════════════════════════════════
   पितृ पक्ष — श्रद्धांजलि

   Ye khand baaki page se jaan-boojh kar alag chalta hai. Poori site
   kesari aur sone me hai — utsav ka rang. Yahan baat guzar chuke
   logon ki hai, isliye rang chandan jaisa halka hai, tasveer
   shvet-shyam (black & white) hai, aur koi harkat nahi. Ek hi sona
   bacha hai: tasveer ke chaaron or ka chhalla.

   Tasveer visitor ke phone se bahar nahi jaati — na koi upload, na
   koi server. PNG bhi usi ke browser me bunta hai.
   ══════════════════════════════════════════════════════════════════ */
.pitru{background:var(--chandan); border-block:1px solid var(--lakeer)}
:root{ --chandan:#FBF6EC; --smriti-patti:#FFFDF8; --genda:#C4752A }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --chandan:#141009; --smriti-patti:#FFFDF8; --genda:#E0954A }
}
:root[data-theme="dark"]{ --chandan:#141009; --smriti-patti:#FFFDF8; --genda:#E0954A }

/* Teen hisse: baat, patra, aur banane ke auzar. Phone par kram
   baat → patra → auzar hona chahiye (pehle dikhe ki BAN kya raha
   hai). Ye `order` se nahi ho sakta tha — auzar lekh ke andar the,
   aur order sirf sage bhaiyon me chalta hai. Isliye grid ke khaane. */
.pitru-jodi{
  display:grid; gap:20px; align-items:start;
  grid-template-areas:"lekh" "patra" "auzar";
}
@media (min-width:900px){
  .pitru-jodi{
    grid-template-columns:1fr 1fr; gap:18px 52px; align-items:center;
    grid-template-areas:"lekh patra" "auzar patra";
  }
}
.pitru-lekh{grid-area:lekh; display:flex; flex-direction:column}
.pitru-jodi > .banao{grid-area:auzar}
.pitru-jodi > .smriti-jagah{grid-area:patra; align-self:center}
.pitru h2{font-size:clamp(24px,3.4vw,35px); margin:11px 0 14px}
.pitru-upvakya{color:var(--syaahi-halka); max-width:38ch; margin-bottom:8px}

/* Banane ke auzar */
.banao{display:grid; gap:11px; padding:17px 18px; border-radius:var(--r-lg);
  background:var(--patti); border:1px solid var(--lakeer)}
.banao .jodi{display:flex; gap:10px; flex-wrap:wrap}
.banao input[type=text]{flex:1 1 180px; min-width:0; padding:12px 15px; border-radius:12px;
  border:1px solid var(--lakeer); background:var(--dharti); font-size:16px; font-weight:600}
.banao input[type=text]::placeholder{color:var(--syaahi-feeka); font-weight:500}
.banao input[type=text]:focus{border-color:var(--genda); outline:none;
  box-shadow:0 0 0 3px rgba(196,117,42,.15)}
.banao select{padding:12px 14px; line-height:1.3; max-width:100%; border-radius:12px; border:1px solid var(--lakeer);
  background:var(--dharti); font-size:15.5px; font-weight:600; cursor:pointer}
.banao .kaanaphusi{font-size:13px; color:var(--syaahi-feeka); line-height:1.55}

/* Tasveer ka naap */
.zoom{display:flex; align-items:center; gap:12px; font-size:13.5px; font-weight:600;
  color:var(--syaahi-halka)}
.zoom[hidden]{display:none}
.zoom input[type=range]{flex:1; accent-color:var(--genda); cursor:pointer}

/* Aage ka raasta */
.aage{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:3px}
.aage 
/* Smriti-patra — jo post banta hai */
.smriti-jagah{display:flex; flex-direction:column; align-items:center; gap:13px}
.smriti{
  width:min(420px,88vw); aspect-ratio:1/1; margin:0; border-radius:var(--r-lg);
  background:linear-gradient(180deg,#FFFDF6,#F3E7D0);
  box-shadow:var(--chhaya-badi); overflow:hidden; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6% 8%; text-align:center; color:#33210F;
}
.smriti::before{content:""; position:absolute; left:50%; top:30%; width:104%; aspect-ratio:1/1;
  translate:-50% -50%; background:radial-gradient(closest-side,rgba(255,255,255,.9),transparent 70%)}
.smriti > *{position:relative; z-index:2}
.smriti-om{font-size:13px; font-weight:800; letter-spacing:.2em; color:#8A6614; margin-bottom:2%}
.smriti-chakra{width:58%; aspect-ratio:1/1; position:relative; flex:none}
.smriti-chakra .chhalla{position:absolute; inset:0; width:100%; height:100%; z-index:3}
.smriti-chakra .mukh{
  position:absolute; inset:14.2%; border-radius:50%; overflow:hidden; z-index:2;
  background:#E6DCC8; display:grid; place-items:center; font-size:30px; color:#9A7B4F;
  border:0; padding:0; font-family:inherit;
}
/* Khaali daayra dabane layak hai — isliye wo bulata bhi hai */
.smriti-chakra .khaali-mukh{cursor:pointer; transition:background .25s ease}
.smriti-chakra .khaali-mukh:hover{background:#DFD2B8}
.smriti-chakra .khaali{display:grid; place-items:center; gap:4px; line-height:1}
.smriti-chakra .khaali em{font-style:normal; font-size:12.5px; font-weight:700; color:#8A6B45}
.smriti-chakra .mukh img{
  position:absolute; left:50%; top:50%; width:100%; height:100%; object-fit:cover;
  transform:translate(-50%,-50%) translate(var(--dx,0px),var(--dy,0px)) scale(var(--z,1));
  transition:filter .3s ease; cursor:grab; touch-action:none;
}
.smriti-chakra .mukh.pakda img{cursor:grabbing}
/* Khinchne ka ishara — pehli baar dikhta hai, chhoote hi gayab */
.smriti-chakra .khiso{
  position:absolute; left:50%; bottom:8%; translate:-50% 0; z-index:4; pointer-events:none;
  background:rgba(44,20,8,.62); color:#FBF6EC; font-size:10.5px; font-weight:700;
  padding:3px 10px; border-radius:999px; white-space:nowrap;
  opacity:1; transition:opacity .4s ease;
  animation:ishara-jaye 6s ease forwards;   /* kaam ho gaya to chala jaye */
}
@keyframes ishara-jaye{0%,60%{opacity:1} 100%{opacity:0}}
.smriti-chakra .mukh.pakda .khiso{opacity:0; animation:none}
@media (prefers-reduced-motion: reduce){
  .smriti-chakra .khiso{animation:none}
}
/* Shvet-shyam ab chunav hai, majboori nahi — bahut log apne pitron ki
   rangeen tasveer hi lagana chahte hain. */
.smriti.bw .mukh img{filter:grayscale(1) contrast(1.06)}
.smriti-naam{font-size:clamp(17px,3.6vw,25px); font-weight:800; line-height:1.3; margin-top:4%}
.smriti-naam.suna{color:#9A7B4F; font-weight:600}
.smriti-rishta{font-size:clamp(11px,2.2vw,14px); font-weight:600; color:#7A5B3A; margin-top:1%}
.smriti-rekha{display:flex; align-items:center; gap:10px; margin:3.5% 0 2.5%; width:52%}
.smriti-rekha::before,.smriti-rekha::after{content:""; height:1px; flex:1;
  background:linear-gradient(90deg,transparent,rgba(138,102,20,.45),transparent)}
.smriti-rekha i{width:5px; height:5px; transform:rotate(45deg); background:#8A6614; opacity:.8}
.smriti-baat{font-size:clamp(13px,2.6vw,17px); font-weight:700; color:#5A3A18}
.smriti-paksha{position:absolute; left:0; right:0; bottom:4.5%; z-index:2;
  font-size:11px; font-weight:700; letter-spacing:.16em; color:#9A7B4F}
.namoona{
  position:absolute; top:5%; right:5.5%; z-index:4;
  font-size:10px; font-weight:800; letter-spacing:.14em;
  color:#9A7B4F; border:1px solid rgba(154,123,79,.45);
  padding:2px 8px; border-radius:999px;
}
.smriti-neeche{font-size:13px; color:var(--syaahi-feeka); text-align:center; max-width:36ch}



/* ─── Khand ────────────────────────────────────────────────────────── */
.khand{padding:62px 0}
@media (min-width:900px){ .khand{padding:88px 0} }
.alag{background:var(--dharti-2); border-block:1px solid var(--lakeer)}
.khand-sar{max-width:56ch; margin-bottom:34px}
.khand-sar h2{font-size:clamp(26px,3.6vw,39px); margin:10px 0 12px}
.khand-sar p{color:var(--syaahi-halka)}
.beech{margin-inline:auto; text-align:center}

/* ─── Saat din ─────────────────────────────────────────────────────── */
.saat{display:flex; gap:14px; overflow-x:auto; padding:4px 22px 22px; scroll-snap-type:x mandatory}
@media (min-width:1000px){
  .saat{display:grid; grid-template-columns:repeat(7,1fr); overflow:visible;
    max-width:var(--max); margin-inline:auto; padding:4px 34px 22px; gap:12px}
}
.din{flex:0 0 142px; scroll-snap-align:start; text-align:center; padding:0 0 14px;
  background:var(--patti); border:1px solid var(--lakeer); border-radius:var(--r-md);
  box-shadow:var(--chhaya); overflow:hidden}
.din .patti{padding:7px 6px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--syaahi-feeka); border-bottom:1px solid var(--lakeer); background:var(--dharti-2)}
.din .chitra{aspect-ratio:4/3; display:grid; place-items:center; font-size:40px; position:relative;
  background:radial-gradient(closest-side at 50% 46%, rgba(255,255,255,.95), transparent 78%),
             linear-gradient(165deg,#FFF4E3,#FFE7C6)}
.din .chitra::after{content:""; position:absolute; inset:16% 20%; border-radius:50%; border:1px solid var(--sona-jhalak)}
.din .dev{margin-top:11px; font-size:15px; font-weight:700; padding-inline:8px}
.din.aaj{border-color:var(--kesari); box-shadow:0 0 0 1px var(--kesari), var(--chhaya)}
.din.aaj .patti{background:var(--kesari); color:#fff; letter-spacing:.1em}
.din.aaj .chitra{background:radial-gradient(closest-side at 50% 46%, rgba(255,255,255,.95), transparent 78%),
             linear-gradient(165deg,#FFEBD5,#FFD9AF)}
.din.aaj .dev{color:var(--kesari)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .din .chitra{
    background:radial-gradient(closest-side at 50% 46%, rgba(255,255,255,.10), transparent 78%),
               linear-gradient(165deg,#2A1D12,#33220F)}
  :root:not([data-theme="light"]) .din.aaj .chitra{
    background:radial-gradient(closest-side at 50% 46%, rgba(255,138,61,.18), transparent 78%),
               linear-gradient(165deg,#3A2412,#472A12)}
}
:root[data-theme="dark"] .din .chitra{
  background:radial-gradient(closest-side at 50% 46%, rgba(255,255,255,.10), transparent 78%),
             linear-gradient(165deg,#2A1D12,#33220F)}
:root[data-theme="dark"] .din.aaj .chitra{
  background:radial-gradient(closest-side at 50% 46%, rgba(255,138,61,.18), transparent 78%),
             linear-gradient(165deg,#3A2412,#472A12)}

/* ─── Khasiyat — shaant suchi, emoji-dabbe nahi ───────────────────── */
.suchi{display:grid; border-top:1px solid var(--lakeer)}
@media (min-width:800px){ .suchi{grid-template-columns:1fr 1fr; column-gap:56px} }
.suchi-item{padding:22px 0; border-bottom:1px solid var(--lakeer); display:grid; gap:5px}
.suchi-item h3{font-size:19px; display:flex; align-items:baseline; gap:11px}
.suchi-item h3::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--sona);
  flex:none; transform:translateY(-3px)}
.suchi-item p{color:var(--syaahi-halka); font-size:16px; padding-left:17px}

/* ─── Asli screenshots, phone ke frame me ─────────────────────────── */
.parde{display:grid; gap:38px; justify-items:center; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.parda-jodi{display:flex; flex-direction:column; align-items:center; gap:18px; max-width:300px}
.parda-jodi h3{font-size:18.5px; text-align:center; margin-bottom:4px}
.parda-jodi p{font-size:15.5px; color:var(--syaahi-halka); text-align:center}
/* Asli screenshot (1344x2992) purane mockup se lamba hai. Isliye
   chaudai wahan se nikali gayi hai ki UNCHAI wahi rahe jo pehle thi —
   screenshot kaatna nahi pada, aur teen phone kataar me utne hi
   lambe rehte hain. */
.phone{width:min(235px,70vw); padding:8px; border-radius:34px;
  background:linear-gradient(160deg,var(--lakeer),var(--patti) 42%,var(--lakeer));
  box-shadow:var(--chhaya-badi), 0 0 0 1px var(--ring)}
.phone img{width:100%; height:auto; border-radius:27px; display:block}


/* ══════════════════════════════════════════════════════════════════
   Bhejna — chalti hui misaal

   Ye khand un logon ke liye hai jinke liye app banayi hai: 55-70 saal
   ke log, jo padhne se zyada DEKH kar samajhte hain. Isliye yahan
   likhawat kam hai aur ek dheemi loop chalti hai — ungli aati hai,
   hara button dabati hai, post WhatsApp par chali jaati hai.

   Ek chakkar 11 second ka hai. Tez rakhne ka man kiya tha, par
   buzurg aankh ko har kadam par thehrne ka waqt chahiye — warna wo
   "kuch hila" to dikhta hai, "kya hua" nahi.
   ══════════════════════════════════════════════════════════════════ */
:root{ --chakra:11s }

.bhej-jodi{display:grid; gap:38px; align-items:center; justify-items:center}
@media (min-width:860px){ .bhej-jodi{grid-template-columns:auto 1fr; gap:64px; justify-items:start} }

.bhej-parda{position:relative; border-radius:27px; overflow:hidden}
.bhej-parda > img{width:100%; height:auto; display:block}

/* Ungli — jahan asli app me hara "भेजें" button hai, theek wahin */
.ungli{
  position:absolute; left:21%; top:92.5%; width:54px; height:54px; margin:-27px 0 0 -27px;
  border-radius:50%; z-index:3; opacity:0;
  background:radial-gradient(closest-side, rgba(44,20,8,.42), rgba(44,20,8,.18) 70%, transparent);
  border:2px solid rgba(255,255,255,.9);
  animation:ungli-chale var(--chakra) ease-in-out infinite;
}
.lehar{
  position:absolute; left:21%; top:92.5%; width:110px; height:110px; margin:-55px 0 0 -55px;
  border-radius:50%; z-index:2; opacity:0; border:3px solid #25D366;
  animation:lehar-uthe var(--chakra) ease-out infinite;
}
@keyframes ungli-chale{
  0%,9%   {opacity:0; transform:translate(26px,34px) scale(1.15)}
  15%     {opacity:1; transform:translate(0,0) scale(1)}
  19%     {opacity:1; transform:translate(0,0) scale(.82)}
  23%     {opacity:1; transform:translate(0,0) scale(1)}
  32%     {opacity:0; transform:translate(14px,22px) scale(1.05)}
  100%    {opacity:0}
}
@keyframes lehar-uthe{
  0%,18%  {opacity:0; transform:scale(.25)}
  21%     {opacity:.85; transform:scale(.45)}
  32%     {opacity:0; transform:scale(1.5)}
  100%    {opacity:0}
}

/* WhatsApp wali parat — neeche se upar aati hai */
.wa{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column;
  background:#ECE5DD; transform:translateY(103%);
  animation:wa-aaye var(--chakra) cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes wa-aaye{
  0%,26%  {transform:translateY(103%)}
  36%,90% {transform:translateY(0)}
  97%,100%{transform:translateY(103%)}
}
.wa-sar{background:#128C7E; color:#fff; padding:26px 12px 10px; font-size:12.5px; font-weight:700; display:flex; gap:8px; align-items:center}
.wa-sar .gol{width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.28); display:grid; place-items:center; font-size:11px}
.wa-dhera{flex:1; padding:12px 10px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px}
.wa-bulbula{
  align-self:flex-end; max-width:82%; background:#DCF8C6; border-radius:12px 12px 4px 12px;
  padding:7px; box-shadow:0 1px 1px rgba(0,0,0,.12); opacity:0;
  animation:bulbula-aaya var(--chakra) cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes bulbula-aaya{
  0%,38%  {opacity:0; transform:translateY(10px) scale(.94)}
  46%,90% {opacity:1; transform:none}
  95%,100%{opacity:0}
}
.wa-chitra{
  position:relative; aspect-ratio:1/1; border-radius:8px; display:grid; place-items:center; text-align:center;
  font-size:14px; font-weight:800; color:#5A2408; padding:8px; line-height:1.3;
  background:radial-gradient(closest-side at 50% 38%, rgba(255,255,255,.85), transparent 74%),
             linear-gradient(160deg,#FFE9C6,#FFC98F 60%,#FFB067);
  border:1px solid rgba(90,36,8,.14);
}
.wa-chitra .frame{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:.9}
.wa-chitra span{position:relative; z-index:2}
.wa-neeche{display:flex; align-items:center; justify-content:flex-end; gap:5px; padding:5px 3px 1px;
  font-size:10px; color:#5C7A63; font-weight:600}
.wa-tick{color:#8FA79A; font-weight:800;
  animation:tick-neela var(--chakra) steps(1) infinite}
@keyframes tick-neela{0%,55%{color:#8FA79A} 60%,92%{color:#34B7F1} 100%{color:#8FA79A}}

/* "भेज दिया" — sabse badi baat, isliye sabse bada */
/* Ye pill neeche tha aur bulbule ke upar chadh jata tha — dono ek
   hi baat keh rahe the aur ek doosre ko dhak rahe the. Ab upar,
   khaali jagah me. */
.bhej-hua{
  position:absolute; left:50%; top:24%; z-index:5; translate:-50% 0; opacity:0;
  background:#25D366; color:#fff; font-size:15px; font-weight:800;
  padding:10px 20px; border-radius:999px; white-space:nowrap;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.7);
  animation:bhej-hua-aaya var(--chakra) cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes bhej-hua-aaya{
  0%,56%  {opacity:0; transform:translateY(14px) scale(.9)}
  63%,88% {opacity:1; transform:none}
  93%,100%{opacity:0}
}

/* Teen kadam — jo abhi ho raha hai wahi chamakta hai */
.bhej-kadam{list-style:none; margin:0; padding:0; display:grid; gap:18px; max-width:44ch}
/* Har kadam ki apni khidki — teeno ek hi keyframe ko delay se
   chalate the, par phir "kab kya" ka hisaab sar-dard ban gaya aur
   chamak phone ki harkat se aage-peechhe ho rahi thi. Ab har kadam
   phone ke usi lamhe se bandha hai jo uske saamne ho raha hai. */
.bhej-kadam li{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  padding:16px 18px; border-radius:var(--r-md); border:1px solid transparent;
  animation-duration:var(--chakra); animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
}
.bhej-kadam li:nth-child(1){animation-name:kadam1}   /* post saamne  */
.bhej-kadam li:nth-child(2){animation-name:kadam2}   /* ungli dabati */
.bhej-kadam li:nth-child(3){animation-name:kadam3}   /* WhatsApp par */
@keyframes kadam1{ 0%,2%{background:transparent;border-color:transparent}
                   5%,13%{background:var(--patti);border-color:var(--lakeer)}
                   17%,100%{background:transparent;border-color:transparent} }
@keyframes kadam2{ 0%,13%{background:transparent;border-color:transparent}
                   16%,29%{background:var(--patti);border-color:var(--lakeer)}
                   33%,100%{background:transparent;border-color:transparent} }
@keyframes kadam3{ 0%,33%{background:transparent;border-color:transparent}
                   37%,89%{background:var(--patti);border-color:var(--lakeer)}
                   93%,100%{background:transparent;border-color:transparent} }
.bhej-kadam .ank{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-size:17px; font-weight:800; color:#fff; background:var(--kesari);
}
.bhej-kadam li:nth-child(2) .ank{background:#25D366}
.bhej-kadam b{display:block; font-size:20px; font-weight:800; margin-bottom:2px}
.bhej-kadam p{font-size:16.5px; color:var(--syaahi-halka)}

@media (prefers-reduced-motion: reduce){
  .ungli{opacity:1; animation:none}
  .lehar,.bhej-hua{opacity:0; animation:none}
  .wa,.wa-bulbula{animation:none}
  .wa{transform:translateY(103%)}
  .bhej-kadam li{animation:none}
}


/* ─── Aakhiri sajawat ────────────────────────────────────────────── */

/* 1. Phone par download button demo se PEHLE. Bada parda ho to demo
   pehle theek hai (jagah hai), par phone par wo button ko fold ke
   neeche dhakel raha tha — jo aaya hi download karne hai, use pehle
   button milna chahiye. */
.hero-lekh{display:flex; flex-direction:column}
@media (max-width:700px){
  .hero-lekh > .label{order:1}
  .hero-lekh > h1{order:2}
  .hero-lekh > .hero-upvakya{order:3; margin-bottom:22px}
  .hero-lekh >   .hero-lekh > .hero-note{order:5}
  .hero-lekh > .aazmao{order:6; margin:26px 0 0}
}

/* 2. Patre par din ka chip — patra ab saat din ghoomta hai, isliye
   dikhna chahiye ki ye kis din ki baat hai. */
.patra-din{
  font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#8A5A33; background:rgba(255,255,255,.72); border:1px solid rgba(90,36,8,.14);
  padding:4px 12px; border-radius:999px; margin-bottom:2px;
}
/* Sandesh badalte waqt halka sa jhilmilana — kudne se aankh thak jaati hai */
.patra-andar.badle .patra-din,
.patra-andar.badle .sandesh,
.patra-andar.badle .upsandesh{animation:sandesh-badle .62s var(--spring-halka)}
@keyframes sandesh-badle{
  0%  {opacity:0; transform:translateY(7px)}
  100%{opacity:1; transform:none}
}

/* 3. Saat din ke card — patti nazar me aate hi ek-ek karke */
.saat .din{opacity:0; transform:translateY(18px)}
.saat.aagayi .din{animation:din-aaya .6s var(--spring) forwards}
.saat.aagayi .din:nth-child(1){animation-delay:0ms}
.saat.aagayi .din:nth-child(2){animation-delay:60ms}
.saat.aagayi .din:nth-child(3){animation-delay:120ms}
.saat.aagayi .din:nth-child(4){animation-delay:180ms}
.saat.aagayi .din:nth-child(5){animation-delay:240ms}
.saat.aagayi .din:nth-child(6){animation-delay:300ms}
.saat.aagayi .din:nth-child(7){animation-delay:360ms}
@keyframes din-aaya{to{opacity:1; transform:none}}

/* 4. Dabane par jawab — buzurg haath ko pata chalna chahiye ki laga */
.btn:active,.chhoti-btn:active,.bhasha button:active{transform:scale(.97)}

/* 5. Sawal ka jawab khulte waqt uthe */
.sawal[open] .jawab{animation:jawab-khule .34s var(--spring-halka)}
@keyframes jawab-khule{from{opacity:0; transform:translateY(-7px)} to{opacity:1; transform:none}}

/* 6. Bhasha badalne par poora page ek pal ko halka — warna saara
   text ek jhatke me badal jaata hai aur aankh kho jaati hai */
.bhasha-badli main,.bhasha-badli .sar nav,.bhasha-badli .charan{animation:bhasha-aayi .34s ease}
@keyframes bhasha-aayi{from{opacity:.35} to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .saat .din{opacity:1; transform:none; animation:none}
  .patra-andar.badle .patra-din,.patra-andar.badle .sandesh,.patra-andar.badle .upsandesh,
  .sawal[open] .jawab,.bhasha-badli main,.bhasha-badli .sar nav,.bhasha-badli .charan{animation:none}
}

/* ─── Kadam ────────────────────────────────────────────────────────── */
.kadam-suchi{display:grid; counter-reset:kadam; border-top:1px solid var(--lakeer)}
@media (min-width:840px){ .kadam-suchi{grid-template-columns:repeat(3,1fr); column-gap:46px} }
.kadam{padding:24px 0; border-bottom:1px solid var(--lakeer)}
.kadam::before{counter-increment:kadam; content:"०" counter(kadam); display:block;
  font-size:13px; font-weight:800; letter-spacing:.14em; color:var(--sona-likha); margin-bottom:9px}
.kadam h3{font-size:19px; margin-bottom:5px}
.kadam p{color:var(--syaahi-halka); font-size:16px}

/* ─── Premium ──────────────────────────────────────────────────────── */
.premium{display:grid; gap:28px; padding:34px 26px; border-radius:var(--r-xl);
  background:var(--patti); border:1px solid var(--lakeer); box-shadow:var(--chhaya)}
@media (min-width:840px){ .premium{grid-template-columns:1.3fr 1fr; padding:46px; align-items:center} }
.premium h2{font-size:clamp(24px,3.1vw,33px); margin:10px 0 12px}
.premium p{color:var(--syaahi-halka)}
.premium ul{margin:0; padding:0; list-style:none; display:grid; gap:12px; font-size:16px; font-weight:600}
.premium li{display:flex; gap:11px}
.premium li::before{content:"✓"; color:var(--kesari); font-weight:800}

/* ─── Sawal ────────────────────────────────────────────────────────── */
.sawal-suchi{display:grid; max-width:760px; border-top:1px solid var(--lakeer)}
.sawal{border-bottom:1px solid var(--lakeer)}
.sawal summary{cursor:pointer; list-style:none; padding:18px 0; font-weight:700; font-size:17px; display:flex; gap:12px}
.sawal summary::-webkit-details-marker{display:none}
.sawal summary::after{content:"+"; margin-left:auto; font-size:21px; font-weight:600; color:var(--sona-likha); transition:transform .22s ease}
.sawal[open] summary::after{transform:rotate(45deg); color:var(--kesari)}
.sawal p{padding:0 0 20px; color:var(--syaahi-halka); font-size:16px; max-width:62ch}

/* ─── Utaro ────────────────────────────────────────────────────────── */
.utaro{text-align:center; padding:72px 0 84px}
.utaro h2{font-size:clamp(27px,4vw,42px); margin:12px 0 12px}
.utaro > .lapet > p{color:var(--syaahi-halka); max-width:46ch; margin:0 auto 26px}
.utaro 
/* Badge rakhne wala dabba */
.store-katar{display:flex; flex-wrap:wrap; gap:13px; align-items:center}
.utaro .store-katar{justify-content:center}

/* Wahi QR neeche bhi — computer par khidki band karne ke baad koi
   raasta nahi bachta tha, khaaskar Apple wale device par jahan badge
   abhi dabta nahi. QR har device se chalta hai. */
.utaro-qr{margin:22px auto 0; max-width:440px; text-align:left}

/* Asli store badge — gol kone aur kinara tasveer ke apne hain,
   isliye yahan koi background ya border nahi. Naap --h se aata hai:
   header me chhota, hero me bada. */
.badge-store{
  display:inline-block; line-height:0; flex:none;   /* flex me sikudna mana */
  transition:transform .3s var(--spring), filter .3s ease;
}
.chipki .badge-store{margin-left:auto}

/* Khidki me QR ke dabbe aur badge ke beech hawa — pehle badge uske
   kinare se chipak raha tha */
.jhalki .store-katar{margin-top:18px}

/* App Store ka badge dikhta hai (Apple wala wahi dhoondhta hai), par
   halka — kyunki DevReels wahan abhi hai nahi. Badge par kuch chipkaya
   nahi; baat uske neeche likhi hai. */
.badge-store.jald{position:relative; opacity:.62; cursor:default; margin-top:6px}
.badge-store.jald:hover{transform:none; filter:none; opacity:.62}
/* "जल्द" ka tag — badge ke kone par, par uske naap ke andar rehta hai
   taaki upar wali kisi cheez se na takraye */
.badge-store.jald .jald-chip{
  position:absolute; top:-8px; right:-6px; z-index:2;
  background:#A75F1C; color:#fff; font-size:10px; font-weight:800;
  letter-spacing:.06em; padding:2px 8px; border-radius:999px;
  line-height:1.6; white-space:nowrap;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .badge-store.jald .jald-chip{background:var(--genda); color:#2C1408}
}
:root[data-theme="dark"] .badge-store.jald .jald-chip{background:var(--genda); color:#2C1408}

.jald-baat{
  margin:0; font-size:13px; line-height:1.5;
  color:var(--syaahi-feeka); font-weight:600;
}
.utaro .jald-baat{text-align:center; flex-basis:100%; margin-top:4px}
.badge-store:hover{transform:translateY(-3px); filter:brightness(1.08)}
.badge-store:active{transform:scale(.98)}
.badge-store img{display:block; height:var(--h,58px); width:auto}
@media (max-width:520px){
  .badge-store img{height:calc(var(--h,58px) - 6px)}
}
/* Header ka badge — bahut sakri jagah par jagah nahi banti */
.sar .badge-store{display:none}
@media (min-width:900px){ .sar .badge-store{display:inline-block} }


/* ══════════════════════════════════════════════════════════════════
   Policy pages — padhne ke liye, bechne ke liye nahi. Isliye ek hi
   column, badi line-height, koi animation nahi.

   Do bhasha ka tareeka index se alag hai: wahan ek-ek shabd dictionary
   se aata hai, yahan poora paragraph do baar likha hai — hindi wala
   aur English wala. Kanooni text ko tukdon me todkar jodne se matlab
   badal jaata hai; poori baat ek saath likhi honi chahiye.
   ══════════════════════════════════════════════════════════════════ */
html[lang="hi"] .bh-en, html[lang="en"] .bh-hi{display:none}

.kagaz{max-width:760px; margin:0 auto; padding:40px 20px 80px}
.kagaz h1{font-size:clamp(28px,5vw,40px); margin:0 0 8px}
.kagaz .tareekh{color:var(--syaahi-feeka); font-size:14px; margin-bottom:40px}
.kagaz h2{font-size:20px; margin:40px 0 12px; color:var(--syaahi)}
.kagaz h3{font-size:16px; margin:24px 0 8px; color:var(--syaahi)}
.kagaz p,.kagaz li{color:var(--syaahi-halka); line-height:1.8; font-size:15.5px}
.kagaz ul{padding-left:22px; margin:10px 0}
.kagaz li{margin-bottom:8px}
.kagaz a{color:var(--kesari-gehra)}
.kagaz table{width:100%; border-collapse:collapse; margin:16px 0; font-size:14.5px}
.kagaz th,.kagaz td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--lakeer); vertical-align:top}
.kagaz th{color:var(--syaahi); font-weight:700; background:rgba(255,123,2,.05)}
.kagaz td{color:var(--syaahi-halka)}
.wapas{display:inline-flex; align-items:center; gap:8px; color:var(--kesari-gehra);
  text-decoration:none; font-weight:600; font-size:15px}
.peti{background:var(--patti); border:1px solid var(--lakeer); border-radius:14px; padding:18px 20px; margin:22px 0}
.peti p{margin-bottom:10px}
.peti p:last-child{margin-bottom:0}

/* Upar ki patti — wapas jaane ka raasta aur bhasha, dono ek hi jagah */
.kagaz-sar{position:sticky; top:0; z-index:40; background:var(--sar-bg); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--lakeer)}
.kagaz-sar-andar{max-width:760px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:14px; justify-content:space-between}


/* ══════════════════════════════════════════════════════════════════
   Jhalki — pehli baar aane wale ko ek chhoti si khidki

   Popup ka bura naam isliye hai ki wo turant kudta hai aur baar-baar
   aata hai. Ye do baaton me alag hai: 2 second baad aata hai (jab
   aankh page par tik chuki hoti hai), aur band karne par 7 din tak
   dobara nahi aata.
   ══════════════════════════════════════════════════════════════════ */
.jhalki{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px}
.jhalki[hidden]{display:none}
.jhalki-parda{position:absolute; inset:0; background:rgba(20,10,4,.62); backdrop-filter:blur(3px);
  animation:parda-aaya .35s ease}
.jhalki-patra{
  position:relative; z-index:2; width:min(760px,100%); max-height:min(88vh,760px); overflow:auto;
  display:grid; gap:26px; padding:34px 30px; border-radius:var(--r-xl);
  background:var(--dharti); border:1px solid var(--lakeer); box-shadow:var(--chhaya-badi);
  animation:jhalki-aayi .5s var(--spring);
}
@media (min-width:680px){ .jhalki-patra{grid-template-columns:1.15fr .85fr; align-items:center; padding:40px} }
@keyframes parda-aaya{from{opacity:0} to{opacity:1}}
@keyframes jhalki-aayi{from{opacity:0; transform:translateY(22px) scale(.96)} to{opacity:1; transform:none}}

.jhalki h2{font-size:clamp(23px,3.2vw,30px); margin:10px 0 10px; line-height:1.24}
.jhalki-baayen > p{color:var(--syaahi-halka); font-size:15.5px; margin-bottom:20px}
.jhalki 
.jhalki-band{
  position:absolute; top:12px; right:12px; z-index:3; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--lakeer); background:var(--patti); color:var(--syaahi-halka);
  font-size:19px; line-height:1; cursor:pointer;
  transition:transform .25s var(--spring), color .2s ease, border-color .2s ease;
}
.jhalki-band:hover{color:var(--kesari); border-color:var(--kesari); transform:rotate(90deg)}

/* QR — desktop par kaam ka, phone par bekaar (apne hi phone par
   apna QR kaun scan karega), isliye chhote parde par gayab */
.qr-peti{display:none}
@media (min-width:680px){
  .qr-peti{
    display:flex; align-items:center; gap:16px; padding:14px 16px; border-radius:var(--r-md);
    background:var(--patti); border:1px solid var(--lakeer);
  }
  /* QR hamesha safed par kaala — camera ko contrast chahiye. Dark
     theme me page ke rang le liye to wo scan hi nahi hota tha. */
  .qr-peti svg{width:104px; height:104px; flex:none; background:#fff; border-radius:8px; padding:6px}
  .qr-peti .qrline{stroke:#111 !important}
  .qr-peti span{font-size:14px; font-weight:600; color:var(--syaahi-halka); line-height:1.5}
}

.jhalki-daayen{display:none}
@media (min-width:680px){
  .jhalki-daayen{display:flex; justify-content:center}
  .jhalki-daayen .phone{width:min(190px,40vw); padding:7px; border-radius:28px}
  .jhalki-daayen .phone img{border-radius:22px}
}

body.jhalki-khuli{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .jhalki-parda,.jhalki-patra{animation:none}
  .jhalki-band:hover{transform:none}
}


/* ─── पितृ पक्ष ka vishesh ───────────────────────────────────────
   In dinon shradhanjali hi hero hai. Saadharan hero chhup jaata hai
   — warna ek hi page par do baar wahi kaam (naam-photo bharna) aa
   jaata tha, aur dono ki dhaar kund ho jaati thi. Upar ki patti bhi
   hata di: swagat khidki wahi baat pehle hi keh deti hai, aur ek hi
   saans me do baar kehna nagging lagta hai. */
.pitru-season .hero{display:none}
.pitru-season .pitru{
  border-top:0; padding-top:clamp(34px,5vw,58px);
  background:linear-gradient(180deg,var(--dharti),var(--chandan) 42%);
}
.pitru-season .pitru h2{font-size:clamp(31px,5.4vw,50px); line-height:1.16; margin:13px 0 16px}
.pitru-season .pitru-upvakya{font-size:clamp(16.5px,1.9vw,19px); max-width:40ch}
.pitru-season .smriti{width:min(440px,88vw)}
@media (min-width:900px){
  .pitru-season .pitru-jodi{gap:26px 60px}
}

/* "इन दिनों" — chhota sa nishaan, khand ke shirshak ke saath */
.vishesh{
  display:inline-block; margin-right:9px; padding:2px 9px; border-radius:999px;
  background:#A75F1C; color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.1em;
  vertical-align:middle;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .vishesh{background:var(--genda); color:#2C1408}
}
:root[data-theme="dark"] .vishesh{background:var(--genda); color:#2C1408}

/* Khidki me ek shaant sa link */
.jhalki-pitru{
  display:inline-block; margin-top:14px; font-size:14.5px; font-weight:700;
  color:#A75F1C; text-decoration:none; border-bottom:1px solid rgba(167,95,28,.4);
}
.jhalki-pitru:hover{border-bottom-color:currentColor}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .jhalki-pitru{color:var(--genda); border-bottom-color:rgba(224,149,74,.45)}
}
:root[data-theme="dark"] .jhalki-pitru{color:var(--genda); border-bottom-color:rgba(224,149,74,.45)}


/* ─── Charan ───────────────────────────────────────────────────────── */
.charan{border-top:1px solid var(--lakeer); background:var(--dharti-2); padding:34px 0 40px}
.charan-andar{display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:space-between}
.charan-link{display:flex; flex-wrap:wrap; gap:22px}
.charan a{color:var(--syaahi-halka); text-decoration:none; font-size:14.5px; font-weight:600}
.charan a:hover{color:var(--kesari)}
.charan small{color:var(--syaahi-feeka); font-size:13.5px}

/* ─── Neeche chipki patti ──────────────────────────────────────────── */
.chipki{position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; align-items:center; gap:12px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:var(--sar-bg); backdrop-filter:blur(16px); border-top:1px solid var(--lakeer);
  transform:translateY(120%); transition:transform .3s ease}
.chipki.dikhe{transform:none}
.chipki > img{width:38px; height:38px; border-radius:11px}   /* sirf patti ka apna icon */
.chipki .baat{font-size:13.5px; font-weight:700; line-height:1.3}
.chipki .baat small{display:block; font-weight:600; color:var(--syaahi-feeka); font-size:12px}
.chipki .btn{margin-left:auto; padding:11px 18px; font-size:14px}
@media (min-width:820px){ .chipki{display:none} }

/* ══════════════════════════════════════════════════════════════════
   Gati — motion

   Framer Motion ka asli maza uske spring me hai, library me nahi.
   Wahi spring yahan CSS ke linear() me likha hua hai: cheezein aakar
   zara sa aage nikalti hain aur wapas beth jaati hain — ruk kar nahi
   rukti. Purana `ease` wala reveal iske saamne murda lagta tha.

   linear() na chale to pehli line (cubic-bezier) chalti hai — us
   haalat me bhi sab dikhta hai, bas uchhal nahi hota.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --spring:cubic-bezier(.22,1,.36,1);
  --spring:linear(
    0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%,
    0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%,
    1.012 55%, 1.013 60%, 1.008 68%, 1.003 76%, 1 85%);
  --spring-halka:cubic-bezier(.33,1,.68,1);
  --gati-der:.72s;
}

/* whileInView — jo abhi tak nazar me nahi aaya wo neeche se uthta hai.
   Chhupane ka kaam .gati-on ke andar hai, jo <head> ka ek line wala
   script lagata hai. JS na chale to kuch chhupta hi nahi — warna
   script tootne par poora page khaali dikhta. */
.gati-on [data-gati]{
  opacity:0;
  transition:opacity .5s var(--spring-halka), transform var(--gati-der) var(--spring);
  will-change:opacity, transform;
}
.gati-on [data-gati="upar"]{transform:translate3d(0,26px,0)}
.gati-on [data-gati="daayen"]{transform:translate3d(-26px,0,0)}
.gati-on [data-gati="baayen"]{transform:translate3d(26px,0,0)}
.gati-on [data-gati="phaila"]{transform:scale(.94)}
.gati-on [data-gati].aagaya{opacity:1; transform:none}

/* Hero ka aana — ek ke baad ek, ruk-ruk kar */
.gati-on .hero .aana{opacity:0; transform:translate3d(0,20px,0);
  animation:aana .8s var(--spring) forwards; animation-delay:var(--der,0ms)}
.gati-on .patra-jagah{opacity:0; transform:translate3d(0,26px,0) scale(.96);
  animation:aana-patra 1.05s var(--spring) .18s forwards}
@keyframes aana{to{opacity:1; transform:none}}
@keyframes aana-patra{to{opacity:1; transform:none}}

/* Patra ke peechhe halki roshni — saans lene jaisi, 14 second me ek baar */
/* Roshni patte ke PEECHHE hai, andar nahi — .patra ka overflow hidden
   hai, wahan rakhne par ye card ke bheetar orange dhabba ban jaati. */
.patra-jagah{position:relative}
.patra-jagah::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:44%; width:112%; aspect-ratio:1/1; translate:-50% -50%;
  background:radial-gradient(closest-side, rgba(242,106,27,.20), transparent 70%);
  animation:saans 14s ease-in-out infinite alternate;
}
.patra{z-index:1}
@keyframes saans{from{opacity:.5; transform:scale(.92)} to{opacity:1; transform:scale(1.06)}}

/* Naam badalne par — post par naam "chhapta" hai */
.patra .naam-rekha{transition:color .3s ease}
.patra .naam-rekha.phoot{animation:chhap .5s var(--spring)}
@keyframes chhap{0%{transform:scale(.86); opacity:.4} 60%{transform:scale(1.04)} 100%{transform:none}}
.patra .mukh{animation:mukh-aaya .55s var(--spring)}
@keyframes mukh-aaya{0%{transform:scale(.6); opacity:0} 100%{transform:none; opacity:1}}

/* Parallax — patra scroll par zara sa peechhe reh jaata hai */
.patra-jagah > .patra{transform:translate3d(0, var(--khisak, 0px), 0)}

/* Chhoone par — sab ek hi spring se */
.din, .btn, .chhoti-btn{transition:transform .42s var(--spring), box-shadow .42s var(--spring-halka), border-color .25s ease, background .25s ease}
.din:hover{transform:translateY(-6px); box-shadow:var(--chhaya-badi)}
.suchi-item{transition:transform .4s var(--spring)}
.suchi-item:hover{transform:translateX(4px)}
.suchi-item h3::before{transition:transform .4s var(--spring), background .25s ease}
.suchi-item:hover h3::before{transform:translateY(-3px) scale(1.7); background:var(--kesari)}
.parda-jodi .phone{transition:transform .55s var(--spring), box-shadow .55s var(--spring-halka)}
.parda-jodi:hover .phone{transform:translateY(-10px)}

/* Beech wala phone thoda upar — teen ek kataar me sapaat pade the */
@media (min-width:760px){
  .parde .parda-jodi:nth-child(2) .phone{transform:translateY(-18px)}
  .parde .parda-jodi:nth-child(2):hover .phone{transform:translateY(-26px)}
}

/* Upar patli pragati-rekha — kitna padh liya */
.pragati{position:fixed; top:0; left:0; height:2px; z-index:80; width:100%;
  transform:scaleX(var(--bhara,0)); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--sona),var(--kesari));
  transition:transform .12s linear; pointer-events:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .gati-on [data-gati]{opacity:1; transform:none}
  .gati-on .hero .aana,.gati-on .patra-jagah{opacity:1; transform:none; animation:none}
  .parde .parda-jodi:nth-child(2) .phone{transform:none}
  .pragati{display:none}
}

/* ─── Chuna hua button (श्वेत-श्याम) ─────────────────────────────
   Light me gehra kesari, kyunki --genda (#C4752A) par safed likhawat
   ka anupat sirf 3.5 tha — padhne ke liye 4.5 chahiye. Dark me rang
   halka rehta hai aur likhawat gehri, wahan anupat 7 hai. */
.chhoti-btn.chuna{background:#A75F1C; border-color:transparent; color:#fff}
.chhoti-btn.chuna:hover{background:#8E4E13; color:#fff}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .chhoti-btn.chuna{background:var(--genda); color:#2C1408}
  :root:not([data-theme="light"]) .chhoti-btn.chuna:hover{background:#EFA95F; color:#2C1408}
}
:root[data-theme="dark"] .chhoti-btn.chuna{background:var(--genda); color:#2C1408}
:root[data-theme="dark"] .chhoti-btn.chuna:hover{background:#EFA95F; color:#2C1408}