:root{
  --brand:#E11D48;
  --brand-dark:#BE123C;
  --ink:#0F172A;
  --muted:#475569;
  --bg:#0B1220;
  --card:#0F172A;
  --chip:#1F2937;
  --ring:rgba(225,29,72,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(180deg,#0B1220 0%,#0E1729 100%);
  color:#E5E7EB; font-family:'Noto Sans Bengali',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.65;
}
a{color:#FDE68A; text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.topbar{background:rgba(15,23,42,.6); border-bottom:1px solid rgba(255,255,255,.06); position:sticky; top:0; z-index:50; backdrop-filter:blur(10px)}
.container{max-width:1140px; margin:0 auto; padding:0 16px}
.row{display:flex; align-items:center; justify-content:space-between}
.logo{display:flex; align-items:center; gap:10px; padding:14px 0}
.logo-badge{width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg,var(--brand),#F59E0B); display:grid; place-items:center; font-weight:800; color:#fff; box-shadow:0 10px 30px rgba(225,29,72,.35)}
.logo-title{font-weight:800; letter-spacing:.2px; color:#fff}

nav ul{display:flex; gap:16px; list-style:none; padding:0; margin:0}
nav a{color:#CBD5E1; font-weight:500; padding:10px 12px; border-radius:10px; display:inline-block}
nav a:hover, nav a.active{background:rgba(225,29,72,.12); color:#fff}
.menu-right{display:flex; align-items:center; gap:8px}

/* Hero */
.hero{padding:48px 0 28px; position:relative}
.hero h1{font-size:clamp(28px,3.2vw,44px); line-height:1.15; color:#fff; margin:0 0 12px; font-weight:800}
.hero p{color:#C7D2FE; margin:0 0 20px}
.searchbar{display:flex; gap:8px; align-items:center; background:#0B1220; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:10px 12px; box-shadow:0 10px 40px rgba(0,0,0,.3)}
.searchbar input{flex:1; padding:12px 14px; background:transparent; border:none; outline:none; color:#fff; font-size:16px}
.searchbar button{background:var(--brand); color:white; border:none; border-radius:12px; padding:12px 16px; font-weight:700; cursor:pointer}
.searchbar button:hover{background:var(--brand-dark)}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0}
.chip{background:var(--chip); border:1px solid rgba(255,255,255,.06); color:#E5E7EB; padding:8px 12px; border-radius:999px; font-size:14px; cursor:pointer}
.chip.active,.chip:hover{background:rgba(225,29,72,.15); border-color:var(--brand); box-shadow:0 0 0 3px var(--ring)}

/* Grid */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:28px}
.sidebar{grid-column:span 3; position:sticky; top:74px; align-self:start}
.content{grid-column:span 9}
@media(max-width:980px){.sidebar{display:none}.content{grid-column:1/-1}}

/* Card */
.card{background:linear-gradient(180deg,#0F172A 0%,#0B1220 100%); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.2)}

/* Caption list */
.section-title{display:flex; align-items:center; justify-content:space-between; margin:0 0 8px}
.section-title h2{margin:0; font-size:22px; color:#fff}
.section-title span{color:#94A3B8; font-size:14px}

.captions{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(max-width:640px){.captions{grid-template-columns:1fr}}

.caption-item{background:#0B1220; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:14px; position:relative}
.caption-meta{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.badge{font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(225,29,72,.15); border:1px solid var(--brand); color:#fff}
.copy{border:none; background:#111827; color:#E5E7EB; border:1px solid rgba(255,255,255,.08); padding:6px 10px; border-radius:10px; cursor:pointer}
.copy:hover{background:#0B1220}
.caption-text{font-size:16px; color:#E2E8F0}

.load-more{margin-top:16px; width:100%; padding:12px; background:var(--brand); color:#fff; border:none; border-radius:12px; cursor:pointer; font-weight:700}
.load-more:hover{background:var(--brand-dark)}

/* Sidebar widgets */
.widget h3{margin:0 0 10px; font-size:16px; color:#fff}
.cat-list, .cat-list ul{list-style:none; padding:0; margin:0}
.cat-list a{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:10px; color:#E5E7EB; border:1px solid rgba(255,255,255,.06); margin-bottom:8px; background:#0B1220}
.cat-list a:hover{border-color:var(--brand); box-shadow:0 0 0 3px var(--ring)}

/* Footer */
footer{margin-top:40px; border-top:1px solid rgba(255,255,255,.06); background:rgba(15,23,42,.5)}
.footer-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:28px 0}
@media(max-width:880px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.foot-muted{color:#94A3B8}
.copyright{border-top:1px solid rgba(255,255,255,.06); padding:14px 0; color:#9CA3AF; font-size:14px}

/* Accessibility */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}