:root{
  --bg: #0b1220;
  --fg: #e6edf6;
  --muted: #9fb0c3;
  --accent: #5eead4;
  --accent-2: #93c5fd;
  --card: rgba(255,255,255,0.08);
  --blur: 12px;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,0.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Noto Sans Bengali","Inter",-apple-system,system-ui,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background: radial-gradient(1200px 600px at 10% 10%, #1e293b 0%, transparent 60%),
              radial-gradient(1000px 500px at 90% 20%, #0ea5e9 0%, transparent 60%),
              var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Background animation */
#bg{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1}
.blob{
  position:absolute; filter: blur(60px); opacity:.35; border-radius:50%;
  width:600px; height:600px; animation: float 18s ease-in-out infinite;
}
.blob.b1{left:-120px; top:-80px; background:linear-gradient(135deg,#22d3ee,#6366f1)}
.blob.b2{right:-140px; top:120px; background:linear-gradient(135deg,#f59e0b,#22c55e); animation-delay: -6s}
.noise{
  position:absolute; inset:0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
@keyframes float{
  0%,100%{transform:translateY(0) translateX(0) scale(1)}
  50%{transform:translateY(-40px) translateX(20px) scale(1.04)}
}

.topbar{
  position:sticky; top:0; backdrop-filter:saturate(120%) blur(10px);
  background:linear-gradient( to bottom, rgba(11,18,32,0.7), rgba(11,18,32,0) );
  border-bottom:1px solid rgba(255,255,255,0.06);
  z-index:10; display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px}
.brand .brand-text{opacity:.9}
.chip{
  border:none; padding:8px 12px; border-radius:999px; color:var(--fg); background:rgba(255,255,255,0.08);
  cursor:pointer; transition:.2s transform ease, .2s background ease; font-weight:600
}
.chip:hover{transform:translateY(-1px); background:rgba(255,255,255,0.14)}
.chip.active{background:linear-gradient(135deg, rgba(94,234,212,0.25), rgba(147,197,253,0.25)); box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset}

main{width:min(1100px, 92%); margin: 28px auto 80px; display:grid; gap:22px}
.card{
  background: var(--card); border:1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius); box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur)) saturate(120%);
  padding:22px;
}
.hero{display:grid; grid-template-columns: 180px 1fr; gap:24px; align-items:center}
.hero .avatar{
  width:180px; height:180px; object-fit:cover; border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  border:2px solid rgba(255,255,255,0.25)
}
.hero-text h1{margin:0 0 6px 0; font-size: clamp(26px, 4vw, 42px); line-height:1.1}
.subtitle{margin:0 0 10px 0; color:var(--muted)}
.badge{
  display:inline-block; margin:6px 0 10px 0; padding:6px 10px; border-radius:999px;
  font-weight:700; font-size:.92rem; letter-spacing:.2px;
  background: linear-gradient(135deg, rgba(34,211,238,0.25), rgba(147,197,253,0.25));
  border:1px solid rgba(255,255,255,0.12);
}
.meta{list-style:none; padding:0; margin:10px 0 0 0; display:grid; gap:6px}
.meta .icon{opacity:.95; margin-right:6px; display:inline-flex; align-items:center}
.meta .icon svg{width:18px; height:18px}
.cta{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap}
.button{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; text-decoration:none; color:var(--fg);
  background: linear-gradient(135deg, rgba(94,234,212,0.2), rgba(147,197,253,0.2));
  border:1px solid rgba(255,255,255,0.1); font-weight:700;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.button:hover{transform: translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.25)}
.button.ghost{background:rgba(255,255,255,0.06)}

.grid.two{display:grid; grid-template-columns: 1fr 1fr; gap:22px}
.list{margin:0; padding-left:18px}
.list li{margin:8px 0}

.footer{
  width:min(1100px, 92%); margin:10px auto 40px; color:var(--muted); text-align:center;
}

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(12px); transition: .6s ease all}
.reveal.visible{opacity:1; transform: translateY(0)}

/* Responsive */
@media (max-width: 760px){
  .hero{grid-template-columns: 1fr; text-align:center}
  .hero .avatar{margin: 0 auto}
  .meta{justify-items:center}
  .grid.two{grid-template-columns: 1fr}
}