:root{
  --bg:#f7f9fc;
  --surface:#ffffff;
  --ink:#0f172a;
  --sub:#475569;
  --accent:#0ea5a5;
  --accent-ink:#075e5e;
  --ring: rgba(14,165,165,.18);
  --radius: 16px;
  --shadow: 0 8px 24px rgba(2,8,23,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Hind Siliguri", sans-serif;
  background:var(--bg); color:var(--ink);
}
a{color:inherit; text-decoration:none}
.container{width:100%; max-width:1100px; margin-inline:auto; padding: 0 20px}
.site-header{position:sticky; top:0; z-index:40; background:var(--surface); box-shadow: var(--shadow)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; gap:10px; align-items:center; font-weight:800; color:var(--accent-ink)}
.brand__dot{width:10px; height:10px; border-radius:999px; background:radial-gradient(circle at 30% 30%, var(--accent), transparent 60%), radial-gradient(circle at 70% 70%, #9ff, transparent 55%); box-shadow:0 0 0 6px var(--ring)}
.menu{display:flex; gap:22px; align-items:center; font-weight:600}
.menu a{opacity:.9} .menu a:hover{opacity:1; color:var(--accent-ink)}
.footer{margin-top:40px; border-top:1px solid #eaeef5}
.footer .container{display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--sub); padding:14px 20px}

/* Hero / top bar for pages */
.hero{background:linear-gradient(135deg, #e9fbfb, #f7f9fc); border-bottom: 1px solid #eaf3f6}
.hero .container{display:grid; grid-template-columns: 1.2fr .8fr; gap:32px; align-items:center; padding:40px 20px}
.hero h1{font-size: clamp(28px, 6vw, 48px); line-height:1.1; margin:6px 0 10px}
.hero p{color:var(--sub); max-width:60ch}
.portrait{display:grid; place-items:center}
.portrait .frame{width:min(340px,80vw); aspect-ratio:1/1; border-radius:50%; padding:10px; background: radial-gradient(60% 70% at 50% 40%, rgba(14,165,165,.25), transparent 70%); box-shadow: 0 30px 60px var(--ring), inset 0 0 0 8px rgba(255,255,255,.75)}
.portrait img{width:100%; height:100%; object-fit:cover; border-radius:50%}

/* Cards grid */
.section{padding: 26px 0 40px}
.grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px}
.card{background:var(--surface); border:1px solid #edf2f7; border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.card h3{margin:4px 0 4px; font-size:18px; color:var(--accent-ink)}
.card p{margin:0; color:var(--sub)}
.card .link{display:inline-flex; gap:6px; align-items:center; margin-top:10px; color:var(--accent-ink); font-weight:700}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; background:var(--surface); border:1px solid #e6eef2; border-radius:999px; color:var(--accent-ink); font-weight:700; box-shadow: var(--shadow)}

/* Topic page layout */
.page{min-height:100%; display:flex; flex-direction:column}
.main{flex:1}
.topic-head{padding:20px 0}
.topic-title{font-size: clamp(24px, 4.6vw, 36px); margin:8px 0 6px}
.kicker{color:var(--sub); text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:12px}
.preview{background:var(--surface); border:1px solid #e6eef2; border-radius:16px; padding:16px; box-shadow: var(--shadow)}
.preview h4{margin:0 0 8px; color:var(--accent-ink)}
.points{margin:8px 0 0; padding-left:22px; color:var(--sub)}
.nav-steps{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:12px; font-weight:700; border:1px solid #e6eef2; background:#fff}
.btn.primary{background: var(--accent); color:#fff; border-color:transparent; box-shadow: 0 8px 24px var(--ring)}
.note{color:var(--sub); font-size:14px}

/* Responsive */
@media (max-width: 960px){
  .hero .container{grid-template-columns: 1fr}
  .grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px){
  .menu{gap:14px; font-size:14px}
  .grid{grid-template-columns: 1fr}
}

  to { transform: translateX(-50%); }
}