@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&family=Noto+Serif+Bengali:wght@500;600;700&family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap');

:root{
  --bg:#faf9f5;
  --surface:#ffffff;
  --panel:#f3f2f2;
  --ink:#201e1d;
  --muted:#6b6866;
  --line:#e2e0da;
  --line-strong:#cfccc4;
  --accent:#0088b0;
  --accent-50:#e9f8ff;
  --accent-100:#cbeeff;
  --accent-700:#006786;
  --accent2:#d6006c;
  --accent2-50:#fff1f4;
  --accent2-700:#aa0b56;
  --yellow:#edbb00;
  --radius:3px;
  --radius-lg:6px;
  --shadow-card:0 1px 2px rgba(45,43,43,.06), 0 1px 3px rgba(45,43,43,.05);
  --shadow-pop:0 12px 32px rgba(45,43,43,.16);
}

*{box-sizing:border-box;}
body{
  background:var(--bg); color:var(--ink);
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", sans-serif;
  padding-inline:0; -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.55;
}
h1,h2,h3{
  font-family:'Source Serif 4', Georgia, 'Noto Serif Bengali', serif;
  font-weight:600; letter-spacing:-0.01em; text-wrap:balance; margin:0; color:var(--ink);
}
[data-lang="en"] .bn{display:none;}
[data-lang="bn"] .en{display:none;}
html[data-lang="bn"] h1, html[data-lang="bn"] h2, html[data-lang="bn"] h3{font-family:'Noto Serif Bengali','Source Serif 4',Georgia,serif; font-weight:600;}
a{color:inherit;}
img{display:block;}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:24px;}

/* nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px;}
.brand{display:flex; align-items:center; gap:9px; font-family:'Source Serif 4',serif; font-weight:700; font-size:1.08rem; text-decoration:none;}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent2);}
.nav-right{display:flex; align-items:center; gap:12px;}
.lang-toggle{
  font-size:.78rem; font-weight:600; border:1px solid var(--line-strong); background:var(--surface);
  border-radius:20px; padding:5px 4px; cursor:pointer; display:flex; gap:2px; color:var(--muted);
}
.lang-toggle span{padding:3px 9px; border-radius:16px; transition:background .15s,color .15s;}
html[data-lang="en"] .lang-toggle .l-en, html[data-lang="bn"] .lang-toggle .l-bn{background:var(--ink); color:#fff;}
.btn{font-weight:600; font-size:.86rem; padding:10px 16px; border-radius:var(--radius); text-decoration:none; display:inline-block; transition:transform .12s, box-shadow .12s; border:1px solid transparent;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent2); color:#fff; box-shadow:0 6px 18px -8px rgba(214,0,108,.55);}
.btn-primary:hover{background:var(--accent2-700);}
.btn-ghost{border-color:var(--line-strong); color:var(--ink); background:var(--surface);}

/* screenshot frame, reused in hero + benefit media */
.frame{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); padding:8px;}
.frame img{width:100%; border-radius:2px; display:block;}
.frame-bar{display:flex; gap:5px; padding:6px 8px 10px;}
.frame-bar span{width:8px;height:8px;border-radius:50%;background:var(--line-strong);}

/* tag pill */
.tag{display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:20px; margin-bottom:14px;}
.tag.t1{background:var(--accent-50); color:var(--accent-700);}
.tag.t2{background:var(--accent2-50); color:var(--accent2-700);}
.tag.t3{background:#fff8df; color:#8a6a00;}
.tag.t4{background:var(--panel); color:var(--muted);}
a.tag{text-decoration:none; transition:transform .12s, box-shadow .12s; box-shadow:0 0 0 rgba(0,0,0,0);}
a.tag:hover{transform:translateY(-1px); box-shadow:var(--shadow-card);}

.section-head{text-align:center; max-width:640px; margin:0 auto 50px;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);}
.section-head p{color:var(--muted); margin-top:12px; font-size:1.05rem;}

footer{border-top:1px solid var(--line); padding-block:32px; text-align:center; color:var(--muted); font-size:.86rem;}

/* detail (portal) pages */
.back-link{display:inline-flex; align-items:center; gap:6px; font-size:.86rem; font-weight:600; color:var(--muted); text-decoration:none; margin-bottom:22px;}
.back-link:hover{color:var(--ink);}
.detail-hero{padding-block:52px 44px; border-bottom:1px solid var(--line); background:var(--surface);}
.detail-hero-inner{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;}
@media (max-width:860px){ .detail-hero-inner{grid-template-columns:1fr;} }
.detail-hero h1{font-size:clamp(2rem,4vw,2.9rem); line-height:1.08;}
.detail-hero p.lede{margin-top:16px; font-size:1.05rem; color:var(--muted); max-width:48ch; line-height:1.65;}
.detail-hero .frame{transform:rotate(-1.6deg);}

.screens{padding-block:60px;}
.screen-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:760px){ .screen-grid{grid-template-columns:1fr;} }
.screen-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); display:flex; flex-direction:column; overflow:hidden;}
.screen-card.plain{flex-direction:row; gap:14px; padding:22px;}
.screen-num{flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Source Serif 4',serif; font-weight:700; font-size:.95rem; background:var(--accent-50); color:var(--accent-700);}
.screen-body{padding:18px 20px 20px;}
.screen-card h3{font-size:1.02rem; margin-bottom:6px;}
.screen-card p{color:var(--muted); font-size:.9rem; line-height:1.6; margin:0;}

/* screenshot thumbnail + click-to-enlarge */
button.screen-thumb{
  all:unset; position:relative; display:block; width:100%; aspect-ratio:16/10; overflow:hidden;
  background:var(--panel); cursor:zoom-in; border-bottom:1px solid var(--line);
}
.screen-thumb img{width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .25s;}
.screen-thumb:hover img{transform:scale(1.035);}
.screen-thumb .screen-num-badge{
  position:absolute; top:10px; left:10px; width:28px; height:28px; border-radius:50%;
  background:var(--surface); color:var(--accent-700); font-family:'Source Serif 4',serif; font-weight:700;
  font-size:.85rem; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card); z-index:1;
}
.screen-thumb .zoom-hint{
  position:absolute; bottom:9px; right:9px; background:rgba(32,30,29,.72); color:#fff; font-size:.68rem;
  padding:4px 9px; border-radius:20px; display:flex; align-items:center; gap:4px; opacity:0; transition:opacity .15s;
}
.screen-thumb:hover .zoom-hint{opacity:1;}
.screen-thumb .zoom-hint svg{width:11px;height:11px;}

/* lightbox */
.lightbox{position:fixed; inset:0; background:rgba(20,18,17,.88); z-index:200; display:none; align-items:flex-start; justify-content:center; padding:56px 20px 40px; overflow:auto;}
.lightbox.open{display:flex;}
.lightbox-inner{max-width:min(1040px,94vw); width:100%; margin:auto;}
.lightbox-inner img{width:100%; height:auto; border-radius:5px; box-shadow:0 20px 60px rgba(0,0,0,.5); display:block;}
.lightbox-caption{color:rgba(255,255,255,.85); text-align:center; margin-top:14px; font-size:.86rem;}
.lightbox-close{
  position:fixed; top:16px; right:18px; width:40px; height:40px; border-radius:50%; background:var(--surface);
  border:none; font-size:1.2rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-pop); z-index:201; color:var(--ink);
}