:root{
  --bg:#0e1013;
  --surface:#151922;
  --muted:#0f1320;
  --text:#eef2f6;
  --subtle:#b8c2cc;
  --brand:#4f8cff;      /* accent */
  --border:#202636;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
  --radius-sm:12px;

  /* Indian tricolor */
  --saffron:#ff9933;
  --flag-white:#ffffff;
  --green:#138808;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--saffron) 12%, transparent) 0%,
      color-mix(in srgb, var(--flag-white) 8%, transparent) 33%,
      color-mix(in srgb, var(--green) 12%, transparent) 66%,
      transparent 100%
    ),
    radial-gradient(1200px 600px at 10% -10%, rgba(79,140,255,.15), transparent 60%),
    radial-gradient(1200px 600px at 100% 10%, rgba(125,211,252,.12), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Nav */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(14,16,19,.55);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1100px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:800}
.logo{
  width:36px;height:36px;border-radius:10px; box-shadow:var(--shadow);
  display:grid;place-items:center;font-weight:900;color:#0b1020;
  background:conic-gradient(from 270deg,
    var(--saffron) 0 33%, var(--flag-white) 33% 66%, var(--green) 66% 100%);
}
.nav-links a{
  color:var(--subtle); text-decoration:none; margin-left:18px; font-weight:600;
}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{ color:var(--text); text-decoration:underline }

/* Containers & cards */
.section{ max-width:1100px; margin:24px auto 56px; padding:0 20px }
.section-header{ display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:14px }
.section h2{ margin:0; font-size:22px }
.sub{ color:var(--subtle); font-size:14px }

.card{
  position:relative; z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px;
}

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

.mini{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:var(--shadow)
}
.mini h3{ margin:0 0 6px; font-size:16px }
.mini p{ margin:0; color:var(--subtle); font-size:13px }
.mini .link{ display:inline-block; margin-top:8px; color:#7dd3fc; font-weight:700; text-decoration:none }
.mini .link:hover{ text-decoration:underline }

/* Blog-specific */
.blog-title{ margin:0 0 8px; font-size:clamp(28px,4vw,42px); line-height:1.15 }
.blog-meta{ color:var(--subtle); font-size:14px; margin:6px 0 16px }
.prose p{ margin:1rem 0; color:var(--text) }
.prose em, .prose strong{ color:var(--text) }
.article{ max-width:800px; margin:0 auto }

footer{ border-top:1px solid var(--border); margin-top:48px; padding:28px 20px; color:var(--subtle); text-align:center }
footer a{ color:#7dd3fc; text-decoration:none }