/* styles.css - Velki static bundle (Bangla) */
:root{
  --bg:#191a1b;
  --card:#242526;
  --text:#e6e6e6;
  --muted:#bdbdbd;
  --brand:#ff9800;
  --brand-2:#ffa726;
  --radius:14px;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(90rem 60rem at 50% -20%, #34363a 0%, #1b1c1d 35%, #141516 100%);
  color:var(--text);
  line-height:1.6;
}

.container{max-width:1100px;margin:0 auto;padding:16px}
.header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(20,20,21,.95) 0%, rgba(20,20,21,.85) 100%);
  backdrop-filter: blur(6px);
  border-bottom:1px solid #2b2c2e;
}
.nav{display:flex; align-items:center; gap:14px; padding:12px 0;}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px;
}
.brand .logo{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(145deg,var(--brand),var(--brand-2)); color:#000; font-weight:900}
.menu{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.menu a{
  color:var(--text); text-decoration:none; padding:8px 14px; border-radius:12px; border:1px solid #2c2d2f;
  background: #1b1c1d; transition:.2s ease; font-weight:600; font-size:15px;
}
.menu a:hover{transform:translateY(-1px); border-color:#3a3b3d}
.menu a.active{background:linear-gradient(145deg,#2a2b2e,#1f2022); color:#fff; box-shadow: inset 0 0 0 1px #36373a}
.hamburger{display:none; margin-left:auto; font-size:24px; background:#2a2b2e; border:1px solid #3a3b3d; border-radius:12px; width:40px; height:40px; display:grid; place-items:center; color:#fff}

.hero{padding:28px 0}
.card{
  background:linear-gradient(180deg,#202123,#1a1b1c);
  border:1px solid #2b2c2e; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:26px; overflow:hidden;
}
.kicker{display:inline-block; background:rgba(255,152,0,.15); color:#ffcc80; border:1px solid rgba(255,152,0,.35); padding:4px 10px; border-radius:999px; font-size:13px; font-weight:700}
h1{font-size:34px; line-height:1.2; margin:12px 0 10px}
.lead{color:#d9d9d9; margin:0 0 18px; font-size:16px}
.btn{display:inline-block; background:linear-gradient(145deg,var(--brand),var(--brand-2)); color:#191919; border:none; font-weight:800; padding:12px 18px; border-radius:12px; text-decoration:none}
.btn.secondary{background:#2a2b2e; color:#fff; border:1px solid #3a3b3d}

.grid{display:grid; gap:16px; grid-template-columns:repeat(12,1fr)}
.col-8{grid-column:span 8}
.col-4{grid-column:span 4}
.widget{background:#1b1c1d; border:1px solid #2b2c2e; border-radius:14px; padding:16px}
.widget h3{margin:0 0 10px; font-size:16px}
.badge{display:inline-flex; align-items:center; gap:6px; background:#2a2b2e; border:1px solid #3a3b3d; padding:4px 10px; border-radius:999px; color:#e9e9e9; font-size:12px}

.footer{margin-top:28px; border-top:1px solid #2b2c2e; padding:22px 0; color:var(--muted); font-size:14px}

@media (max-width: 880px){
  .menu{display:none}
  .hamburger{display:grid}
  .grid{grid-template-columns:1fr}
  .col-8,.col-4{grid-column:1 / -1}
  h1{font-size:26px}
}