/* ══════════════════════════════════════════════════════════════════
   DevReels — landing page
   Rang aur font app ke apne design system se (src/theme/tokens.ts):
   kesari #FF7B02, sindoor #FF5722, sona #E0A84B, cream #FFF7ED,
   aur font Mukta — wahi jo app me chalta hai.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --kesari:#FF7B02;
  --kesari-gehra:#E86A00;
  --sindoor:#FF5722;
  --sona:#E0A84B;
  --sona-gehra:#B07A12;

  --dharti:#FFFAF3;
  --dharti-2:#FFF3E4;
  --patti:#FFFFFF;
  --lakeer:#F3E2CC;
  --lakeer-gehri:#E8D0B0;

  --syaahi:#33180C;
  --syaahi-halka:#7A5744;
  --syaahi-feeka:#A48870;

  --label:#B07A12;
  --sar-bg:rgba(255,250,243,.92);
  --notch:#2A1408;
  --ring:rgba(51,24,12,.05);
  --sona-jhalak:rgba(224,168,75,.35);

  --chhaya:0 1px 2px rgba(51,24,12,.04), 0 8px 24px -14px rgba(51,24,12,.28);
  --chhaya-badi:0 2px 6px rgba(51,24,12,.06), 0 30px 60px -28px rgba(51,24,12,.38);
  --chhaya-kesari:0 10px 26px -10px rgba(255,87,34,.55);

  --max:1140px;
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:34px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --kesari:#FF9333;
    --kesari-gehra:#FF7B02;
    --sindoor:#FF6A3D;
    --sona:#EFC069;
    --sona-gehra:#EFC069;

    --dharti:#150E09;
    --dharti-2:#1E140C;
    --patti:#241810;
    --lakeer:#3B291B;
    --lakeer-gehri:#4C3722;

    --syaahi:#FDF2E5;
    --syaahi-halka:#C9AB92;
    --syaahi-feeka:#9C8069;

    --label:#EFC069;
    --sar-bg:rgba(21,14,9,.92);
    --notch:#080503;
    --ring:rgba(255,255,255,.05);
    --sona-jhalak:rgba(239,192,105,.22);

    --chhaya:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -14px rgba(0,0,0,.7);
    --chhaya-badi:0 2px 6px rgba(0,0,0,.5), 0 30px 60px -28px rgba(0,0,0,.8);
    --chhaya-kesari:0 10px 26px -10px rgba(255,123,2,.5);
  }
}
:root[data-theme="dark"]{
  --kesari:#FF9333;
  --kesari-gehra:#FF7B02;
  --sindoor:#FF6A3D;
  --sona:#EFC069;
  --sona-gehra:#EFC069;

  --dharti:#150E09;
  --dharti-2:#1E140C;
  --patti:#241810;
  --lakeer:#3B291B;
  --lakeer-gehri:#4C3722;

  --syaahi:#FDF2E5;
  --syaahi-halka:#C9AB92;
  --syaahi-feeka:#9C8069;

  --label:#EFC069;
  --sar-bg:rgba(21,14,9,.92);
  --notch:#080503;
  --ring:rgba(255,255,255,.05);
  --sona-jhalak:rgba(239,192,105,.22);

  --chhaya:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -14px rgba(0,0,0,.7);
  --chhaya-badi:0 2px 6px rgba(0,0,0,.5), 0 30px 60px -28px rgba(0,0,0,.8);
  --chhaya-kesari:0 10px 26px -10px rgba(255,123,2,.5);
}

*,*::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:17px; line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{margin:0; font-weight:800; line-height:1.25; text-wrap:balance}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%; display:block}
button{font:inherit}
:focus-visible{outline:3px solid var(--kesari); outline-offset:3px; border-radius:8px}

.lapet{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:20px}
@media (min-width:720px){ .lapet{padding-inline:32px} }

.tez{color:var(--sindoor)}
.label{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--label); display:block;
}

/* ─── 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:70px}
.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:26px; align-items:center}
@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:24px} }

/* Bhasha switch */
.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 ease, color .2s ease;
}
.bhasha button.chalu{background:var(--patti); color:var(--kesari); box-shadow:var(--chhaya)}

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

.store-katar{display:flex; flex-wrap:wrap; gap:14px}
.store{
  display:inline-flex; align-items:center; gap:13px;
  padding:12px 24px 12px 18px; border-radius:16px; text-decoration:none;
  border:1px solid var(--lakeer); background:var(--patti); color:var(--syaahi);
  box-shadow:var(--chhaya);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.store:hover{transform:translateY(-3px); box-shadow:var(--chhaya-badi); border-color:var(--sona)}
.store svg{width:26px; height:26px; flex:none}
.store b{display:block; font-size:16.5px; font-weight:800; line-height:1.2}
.store small{display:block; font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--syaahi-feeka)}
.store.iska{
  border-color:transparent; color:#fff;
  background:linear-gradient(100deg,var(--kesari),var(--sindoor));
  box-shadow:var(--chhaya-kesari);
}
.store.iska small{color:rgba(255,255,255,.85)}
.store[aria-disabled="true"]{opacity:.6; pointer-events:none}

/* ─── Hero ─────────────────────────────────────────────────────────── */
.hero{position:relative; padding:52px 0 64px; overflow:hidden}
@media (min-width:900px){ .hero{padding:78px 0 92px} }
.hero::before{
  content:""; position:absolute; inset:-30% -20% auto -20%; height:130%; pointer-events:none;
  background:
    radial-gradient(50% 40% at 20% 18%, rgba(255,123,2,.16), transparent 65%),
    radial-gradient(42% 36% at 88% 6%, rgba(224,168,75,.22), transparent 62%);
}
.hero-grid{position:relative; display:grid; gap:48px; align-items:center}
@media (min-width:880px){ .hero-grid{grid-template-columns:1.04fr .96fr; gap:52px} }
.hero h1{font-size:clamp(33px,5.8vw,54px); margin:14px 0 18px}
.hero-upvakya{font-size:clamp(16.5px,1.9vw,19px); color:var(--syaahi-halka); max-width:36ch; margin-bottom:28px}
.hero-note{margin-top:16px; font-size:13.5px; font-weight:600; color:var(--syaahi-feeka)}

.tiki-katar{display:flex; flex-wrap:wrap; gap:9px; margin-top:26px}
.tiki{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px 7px 11px; border-radius:999px;
  background:var(--dharti-2); border:1px solid var(--lakeer);
  font-size:13.5px; font-weight:600; color:var(--syaahi-halka);
}
.tiki span{color:var(--kesari); font-weight:800}

/* ─── Phone ────────────────────────────────────────────────────────── */
.phone-jagah{display:flex; justify-content:center; position:relative}
.phone{
  width:min(304px,78vw); aspect-ratio:9/18.4;
  padding:11px; border-radius:46px; position:relative;
  background:linear-gradient(160deg,var(--lakeer-gehri),var(--patti) 40%,var(--lakeer-gehri));
  box-shadow:var(--chhaya-badi), 0 0 0 1px var(--ring);
}
.phone::after{
  content:""; position:absolute; top:21px; left:50%; transform:translateX(-50%);
  width:84px; height:21px; border-radius:999px; background:var(--notch);
}
.parda{height:100%; border-radius:36px; overflow:hidden; background:var(--dharti-2); display:flex; flex-direction:column}
.parda-sar{padding:36px 16px 13px; background:linear-gradient(105deg,var(--kesari),var(--sindoor)); color:#fff}
.parda-sar .naam{font-size:19px; font-weight:800; letter-spacing:.01em}
.parda-sar .din{font-size:12.5px; font-weight:600; opacity:.94; margin-top:1px}
.post{margin:11px; background:var(--patti); border-radius:20px; overflow:hidden; box-shadow:var(--chhaya); flex:none}
.post-chitra{
  aspect-ratio:1/1; position:relative; padding:16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  background:
    radial-gradient(closest-side at 50% 36%, rgba(255,255,255,.6), transparent 72%),
    linear-gradient(160deg,#FFDCAF,#FF9C4A 55%,#FF5722);
  color:#63220B;
}
.post-chitra .om{font-size:38px; line-height:1}
.post-chitra .sandesh{font-size:17px; font-weight:800; line-height:1.4; color:#5E2007}
.post-mohar{
  position:absolute; left:10px; right:10px; bottom:10px;
  display:flex; align-items:center; gap:8px; text-align:left;
  background:rgba(255,255,255,.9); border-radius:13px; padding:6px 9px;
}
.post-mohar .gol{
  width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:14px; background:linear-gradient(140deg,#8C5A3B,#C98A5E); border:2px solid #fff;
}
.post-mohar b{display:block; font-size:12.5px; line-height:1.2; color:#33180C}
.post-mohar small{font-size:10.5px; color:#7A5744}
.post-patti{display:flex; gap:8px; padding:10px}
.post-patti span{
  flex:1; text-align:center; font-size:12px; font-weight:700; padding:8px 4px; border-radius:11px;
  background:var(--dharti-2); color:var(--syaahi-halka);
}
.post-patti span.hara{background:#25D366; color:#fff}
.post.jhalak{margin-top:0; flex:1 1 auto; min-height:0}
.post.jhalak .post-chitra{aspect-ratio:auto; height:100%}
.post-chitra.sona{
  background:
    radial-gradient(closest-side at 50% 40%, rgba(255,255,255,.55), transparent 72%),
    linear-gradient(160deg,#FFEBC7,#F0B90B 62%,#C77F00);
}
.post-chitra.sona .om{font-size:29px}
.post-chitra.sona .sandesh{font-size:15px}
.parda-tal{
  margin-top:auto; display:flex; gap:2px; padding:10px 6px 14px;
  border-top:1px solid var(--lakeer); background:var(--patti);
}
.parda-tal i{
  flex:1; display:flex; flex-direction:column; gap:3px; align-items:center;
  font-style:normal; font-size:10.5px; font-weight:600; color:var(--syaahi-feeka);
}
.parda-tal i b{font-size:16px; font-weight:400}
.parda-tal i.chalu{color:var(--kesari)}

/* ─── Khand ────────────────────────────────────────────────────────── */
.khand{padding:64px 0}
@media (min-width:900px){ .khand{padding:92px 0} }
.alag{background:var(--dharti-2); border-block:1px solid var(--lakeer)}
.khand-sar{max-width:58ch; margin-bottom:36px}
.khand-sar h2{font-size:clamp(26px,3.8vw,38px); margin:11px 0 12px}
.khand-sar p{color:var(--syaahi-halka)}
.beech{margin-inline:auto; text-align:center}
.beech .label{text-align:center}

/* Sona hairline — khando ke beech ka chhota sa nishaan */
.rekha{display:flex; align-items:center; justify-content:center; gap:14px; padding:6px 0 2px}
.rekha::before,.rekha::after{content:""; height:1px; width:min(90px,18vw); background:linear-gradient(90deg,transparent,var(--sona-jhalak),transparent)}
.rekha i{width:7px; height:7px; transform:rotate(45deg); background:var(--sona); opacity:.75}

/* ─── Mauke (chips) ────────────────────────────────────────────────── */
.mauke{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px}
.mauka{
  padding:9px 18px; border-radius:999px; font-size:15px; font-weight:600;
  background:var(--patti); border:1px solid var(--lakeer); color:var(--syaahi-halka);
  box-shadow:var(--chhaya);
}
.mauka.roshan{
  background:linear-gradient(100deg,var(--kesari),var(--sindoor));
  border-color:transparent; color:#fff; box-shadow:var(--chhaya-kesari);
}

/* ─── Vaar-rekha ───────────────────────────────────────────────────── */
.vaar-patti{display:flex; gap:10px; overflow-x:auto; padding:6px 20px 20px; scroll-snap-type:x mandatory}
@media (min-width:920px){
  .vaar-patti{display:grid; grid-template-columns:repeat(7,1fr); overflow:visible; max-width:var(--max); margin-inline:auto; padding:6px 32px 20px}
}
.din-card{
  flex:0 0 130px; scroll-snap-align:start; text-align:center; padding:15px 12px;
  background:var(--patti); border:1px solid var(--lakeer); border-radius:var(--r-md);
  box-shadow:var(--chhaya);
}
.din-card .ank{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--syaahi-feeka)}
.din-card .roop{font-size:25px; margin:7px 0 4px}
.din-card .dev{font-size:15px; font-weight:700}
.din-card.aaj{
  border-color:transparent; color:#fff;
  background:linear-gradient(150deg,var(--kesari),var(--sindoor));
  box-shadow:var(--chhaya-kesari);
}
.din-card.aaj .ank{color:rgba(255,255,255,.88)}

/* ─── Khasiyat ─────────────────────────────────────────────────────── */
.jaal{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.khasiyat{
  padding:26px 24px 28px; border-radius:var(--r-lg);
  background:var(--patti); border:1px solid var(--lakeer); box-shadow:var(--chhaya);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.khasiyat:hover{transform:translateY(-4px); box-shadow:var(--chhaya-badi); border-color:var(--sona)}
.khasiyat .roop{
  width:48px; height:48px; border-radius:15px; display:grid; place-items:center; font-size:23px;
  background:linear-gradient(150deg,rgba(255,123,2,.16),rgba(224,168,75,.22));
  border:1px solid var(--lakeer); margin-bottom:16px;
}
.khasiyat h3{font-size:20px; margin-bottom:7px}
.khasiyat p{color:var(--syaahi-halka); font-size:15.5px}

/* ─── Screens ──────────────────────────────────────────────────────── */
.parde{display:grid; gap:34px; justify-items:center; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.parda-jodi{display:flex; flex-direction:column; align-items:center; gap:16px; max-width:280px}
.parda-jodi .phone{width:min(232px,72vw); border-radius:38px; padding:9px}
.parda-jodi .phone::after{width:64px; height:17px; top:17px}
.parda-jodi .parda{border-radius:30px}
.parda-jodi h3{font-size:18px; margin-bottom:4px; text-align:center}
.parda-jodi p{font-size:15px; color:var(--syaahi-halka); text-align:center}
.parda-jodi .parda-sar{padding:30px 13px 11px}
.parda-jodi .post{margin:9px}

/* editor screen */
.likhna{padding:11px; display:flex; flex-direction:column; gap:9px; height:100%}
.likhna .kagaz{
  flex:1; border-radius:16px; display:grid; place-items:center; text-align:center; padding:14px;
  background:linear-gradient(160deg,#FFE8C8,#FFB775 60%,#FF8A3D);
  color:#5E2007; font-weight:800; font-size:15.5px; line-height:1.45;
  border:1px solid rgba(255,255,255,.5);
}
.auzar{display:flex; gap:7px}
.auzar span{
  flex:1; text-align:center; font-size:11.5px; font-weight:700; padding:9px 3px; border-radius:11px;
  background:var(--patti); border:1px solid var(--lakeer); color:var(--syaahi-halka);
}
.auzar span.chalu{background:linear-gradient(100deg,var(--kesari),var(--sindoor)); border-color:transparent; color:#fff}

/* video screen */
.video-parda{position:relative; flex:1; margin:9px; border-radius:18px; overflow:hidden;
  background:linear-gradient(165deg,#3B1F5C,#7A2B4E 55%,#C2410C);
  display:grid; place-items:center;
}
.video-parda .chalao{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:#33180C; font-size:20px; padding-left:4px;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.6);
}
.video-parda .patti{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.62));
  color:#fff; font-size:12.5px; font-weight:600;
}
.video-parda .dhaaga{position:absolute; left:12px; right:12px; bottom:34px; height:3px; border-radius:2px; background:rgba(255,255,255,.32)}
.video-parda .dhaaga i{display:block; width:42%; height:100%; border-radius:2px; background:#fff}

/* ─── Kadam ────────────────────────────────────────────────────────── */
.kadam-suchi{display:grid; gap:26px; counter-reset:kadam}
@media (min-width:840px){ .kadam-suchi{grid-template-columns:repeat(3,1fr); gap:32px} }
.kadam{position:relative}
.kadam::before{
  counter-increment:kadam; content:counter(kadam);
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-size:15px; font-weight:800; color:#fff; margin-bottom:14px;
  background:linear-gradient(140deg,var(--kesari),var(--sindoor));
  box-shadow:var(--chhaya-kesari);
}
.kadam h3{font-size:19px; margin-bottom:5px}
.kadam p{color:var(--syaahi-halka); font-size:15.5px}

/* ─── Premium ──────────────────────────────────────────────────────── */
.premium{
  display:grid; gap:26px; align-items:center; padding:34px 26px; border-radius:var(--r-xl);
  background:linear-gradient(125deg,rgba(255,123,2,.10),rgba(224,168,75,.16));
  border:1px solid var(--lakeer);
}
@media (min-width:840px){ .premium{grid-template-columns:1.35fr 1fr; padding:46px} }
.premium h2{font-size:clamp(24px,3.2vw,33px); margin:11px 0 12px}
.premium p{color:var(--syaahi-halka)}
.premium ul{margin:0; padding:0; list-style:none; display:grid; gap:11px; font-size:15.5px; font-weight:600}
.premium li{display:flex; gap:11px; align-items:flex-start}
.premium li::before{content:"✓"; color:var(--kesari); font-weight:800}

/* ─── Sawal-jawab ──────────────────────────────────────────────────── */
.sawal-suchi{display:grid; gap:12px; max-width:760px}
.sawal{
  background:var(--patti); border:1px solid var(--lakeer); border-radius:var(--r-md);
  padding:4px 20px; box-shadow:var(--chhaya);
}
.sawal summary{
  cursor:pointer; list-style:none; padding:16px 0; font-weight:700; font-size:16.5px;
  display:flex; align-items:center; gap:12px;
}
.sawal summary::-webkit-details-marker{display:none}
.sawal summary::after{
  content:"+"; margin-left:auto; font-size:22px; font-weight:600; color:var(--kesari);
  transition:transform .22s ease;
}
.sawal[open] summary::after{transform:rotate(45deg)}
.sawal p{padding:0 0 18px; color:var(--syaahi-halka); font-size:15.5px; max-width:62ch}

/* ─── Utaro ────────────────────────────────────────────────────────── */
.utaro{text-align:center; padding:74px 0 84px}
.utaro h2{font-size:clamp(27px,4.2vw,42px); margin:11px 0 13px}
.utaro > .lapet > p{color:var(--syaahi-halka); max-width:48ch; margin:0 auto 28px}
.utaro .store-katar{justify-content:center}

/* ─── Charan ───────────────────────────────────────────────────────── */
.charan{border-top:1px solid var(--lakeer); background:var(--dharti-2); padding:36px 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 (sirf chhote parde par) ──────────────────── */
.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}
.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} }

/* ─── Aana ─────────────────────────────────────────────────────────── */
.aayega{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.aagaya{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .aayega{opacity:1; transform:none}
}