/* নামাজের সাথী — website styles.
   Same soft "neumorphic" look as the app (values from design/styles.css).
   Plain CSS, no external requests. Fonts are hosted in ./fonts (SIL OFL 1.1). */

@font-face{font-family:'Hind Siliguri';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hind-siliguri-bengali-400-normal.woff2) format('woff2');unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
@font-face{font-family:'Hind Siliguri';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hind-siliguri-bengali-500-normal.woff2) format('woff2');unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
@font-face{font-family:'Hind Siliguri';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hind-siliguri-bengali-600-normal.woff2) format('woff2');unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
@font-face{font-family:'Hind Siliguri';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hind-siliguri-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+00B0,U+2013-2014,U+2018-201D,U+2022,U+2026}
@font-face{font-family:'Hind Siliguri';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hind-siliguri-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+00B0,U+2013-2014,U+2018-201D,U+2022,U+2026}
@font-face{font-family:'Hind Siliguri';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hind-siliguri-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+00B0,U+2013-2014,U+2018-201D,U+2022,U+2026}

:root{
  color-scheme:light dark;
  --bg:#E4E8EF; --shadow-dark:#BEC4D1; --shadow-light:#FFFFFF;
  --ink:#2F3647; --muted:#5B6275; --hairline:#D3D8E2; --tick:#A9B0C0;
  --accent:#1F6F54;
  --raised-xl:12px 12px 24px var(--shadow-dark),-12px -12px 24px var(--shadow-light);
  --raised-l:10px 10px 20px var(--shadow-dark),-10px -10px 20px var(--shadow-light);
  --raised-m:6px 6px 12px var(--shadow-dark),-6px -6px 12px var(--shadow-light);
  --raised-s:4px 4px 8px var(--shadow-dark),-4px -4px 8px var(--shadow-light);
  --raised-xs:3px 3px 6px var(--shadow-dark),-3px -3px 6px var(--shadow-light);
  --inset-m:inset 6px 6px 12px var(--shadow-dark),inset -6px -6px 12px var(--shadow-light);
  --inset-s:inset 3px 3px 6px var(--shadow-dark),inset -3px -3px 6px var(--shadow-light);
  --inset-xs:inset 2px 2px 5px var(--shadow-dark),inset -2px -2px 5px var(--shadow-light);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#2A2E38; --shadow-dark:#1E2128; --shadow-light:#383D4A;
    --ink:#E8EBF2; --muted:#A6ADBD; --hairline:#373C49; --tick:#5A6173;
    --accent:#5CCFA5;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Hind Siliguri',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:17px;line-height:1.7;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3{line-height:1.3;margin:0}
p{margin:0 0 12px}
p:last-child{margin-bottom:0}
ul{margin:0 0 12px;padding-left:22px}
li{margin:4px 0}
li::marker{color:var(--accent)}

.skip{position:absolute;left:-999px;top:8px;padding:8px 16px;background:var(--bg);border-radius:14px;box-shadow:var(--raised-s);z-index:2}
.skip:focus{left:16px}

.wrap{max-width:760px;margin:0 auto;padding:0 16px}
@media (min-width:600px){.wrap{padding:0 24px}}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px 0 4px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 6px;border-radius:22px;background:var(--bg);box-shadow:var(--raised-s);color:var(--ink);text-decoration:none;font-weight:600;font-size:16px}
.brand img{width:32px;height:32px;border-radius:16px}
.navlinks{display:flex;gap:8px;flex-wrap:wrap}
.navlinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:22px;background:var(--bg);box-shadow:var(--raised-s);color:var(--muted);text-decoration:none;font-size:15px}
.navlinks a[aria-current]{box-shadow:var(--inset-s);color:var(--accent)}

/* hero */
.hero{text-align:center;padding:36px 0 8px}
.hero .disc{width:132px;height:132px;margin:0 auto;border-radius:66px;background:var(--bg);box-shadow:var(--raised-l);display:flex;align-items:center;justify-content:center}
.hero .disc span{width:104px;height:104px;border-radius:52px;box-shadow:var(--inset-m);display:flex;align-items:center;justify-content:center}
.hero .disc img{width:84px;height:84px;border-radius:42px}
.hero h1{font-size:40px;font-weight:600;margin-top:24px}
.hero .en-name{font-size:15px;color:var(--muted);margin:2px 0 0}
.hero .tag{font-size:19px;color:var(--muted);margin:14px auto 0;max-width:34em}

.play{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:24px;padding:0 26px;border-radius:26px;background:var(--bg);box-shadow:var(--raised-m);color:var(--accent);font-weight:600;font-size:17px;text-decoration:none}
.play:hover{box-shadow:var(--raised-s)}
.play:active{box-shadow:var(--inset-s)}
.note{font-size:13px;color:var(--muted);margin-top:10px}

/* cards & sections */
main{padding-bottom:16px}
.card{margin:28px 0 0;padding:22px 20px;border-radius:22px;background:var(--bg);box-shadow:var(--raised-m)}
@media (min-width:600px){.card{padding:28px 30px}}
.card h2{font-size:22px;font-weight:600;margin-bottom:12px}
.card h3{font-size:17px;font-weight:600;margin:20px 0 6px}
.card h3:first-of-type{margin-top:4px}
.muted{color:var(--muted)}
.small{font-size:14px}
.inset{padding:14px 16px;border-radius:18px;box-shadow:var(--inset-s);margin:12px 0}
.divider{height:1px;background:var(--hairline);border:0;margin:20px 0}

.features{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.features li{margin:0;padding:12px 16px;border-radius:18px;box-shadow:var(--inset-xs)}
.features b{font-weight:600}

/* screenshots: 3 columns when there is room, swipe row on phones (no page-level horizontal scroll) */
.shots{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,62%);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 8px 18px;margin:0 -8px;list-style:none}
.shots li{margin:0;scroll-snap-align:center}
.shots figure{margin:0;padding:8px;border-radius:26px;background:var(--bg);box-shadow:var(--raised-s)}
.shots img{width:100%;border-radius:18px}
.shots figcaption{text-align:center;font-size:14px;color:var(--muted);padding-top:6px}
@media (min-width:640px){.shots{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;overflow:visible}}

/* policy page */
.toc{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:22px;box-shadow:var(--raised-xs);background:var(--bg);color:var(--ink);text-decoration:none;font-size:15px}
.meta{font-size:15px;color:var(--muted)}
.policy h2{font-size:24px}
.policy h3{font-size:18px}
.policy section{scroll-margin-top:16px}

/* footer */
footer{padding:28px 0 36px;text-align:center;font-size:14px;color:var(--muted)}
footer p{margin:4px 0}
footer a{color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media print{
  :root{--bg:#fff;--ink:#000;--muted:#333;--accent:#000}
  .card,.shots figure,.brand,.navlinks a,.toc a,.play,.inset,.features li{box-shadow:none;border:1px solid #ccc}
  .shots,.navlinks,.skip{display:none}
}