: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: linear-gradient(135deg,#1E3A8A,#3B82F6); /* nice blue gradient */
  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,#3B82F6,#60A5FA); /* blue gradient */
  display:grid;
  place-items:center;
  font-weight:800;
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.logo-title{
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
}

/* Main nav */
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(255,255,255,.12);
  color:#fff;
}

/* Right side menu */
.menu-right{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Dropdown menu */
.dropdown{
  position:relative;
  display:inline-block;
}

.dropbtn{
  background:none;
  border:none;
  color:inherit;
  font-weight:500;
  cursor:pointer;
  padding:10px 12px;
  border-radius:10px;
}

.dropdown-content{
  display:none;
  position:absolute;
  right:0;
  background:#1E40AF;
  min-width:160px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 5px 20px rgba(0,0,0,.3);
  z-index:999;
}

.dropdown-content a{
  display:block;
  padding:10px 14px;
  color:#E5E7EB;
  text-decoration:none;
}

.dropdown-content a:hover{
  background:rgba(255,255,255,.1);
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content{
  display:block;
}

/* 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}