/* ==========================================================================
   NitiBharat Design System  —  nitibharat.css
   One stylesheet for the whole site. Link it on every page:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Public+Sans:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/nitibharat.css">

   Change a value in :root and it cascades everywhere.
   Class prefix = .nb-  (won't collide with existing site CSS).
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ---------------------------------------------- */
:root {
  /* Brand */
  --nb-ink:        #0c1322;   /* primary text / dark surfaces */
  --nb-blue:       #2f54eb;   /* primary accent / CTAs / links */
  --nb-blue-deep:  #1d39b3;   /* logo gradient end, pressed states */
  --nb-blue-soft:  #6f8cff;   /* accent on dark backgrounds */
  --nb-green:      #0f9d6b;   /* success / ticks */
  --nb-amber:      #d97706;   /* warning / attention */
  --nb-amber-warm: #f5a623;   /* highlight dot / "popular" */
  --nb-purple:     #7c3aed;   /* tertiary tag */
  --nb-red:        #e2526b;   /* critical / errors */

  /* Surfaces */
  --nb-bg:         #ffffff;
  --nb-bg-alt:     #fbfcfe;   /* alternating section bg */
  --nb-blue-50:    #eef2ff;   /* tinted tiles / chips */
  --nb-blue-25:    #f7f9ff;   /* faint blue wash */
  --nb-amber-50:   #fff4e6;
  --nb-green-50:   #eaf7f0;
  --nb-purple-50:  #f3edff;

  /* Lines & text */
  --nb-border:     #ecedf3;
  --nb-border-2:   #e0e3ee;   /* form fields */
  --nb-border-blue:#d7defb;   /* hovered card border */
  --nb-text:       #0c1322;
  --nb-muted:      #525c70;
  --nb-muted-2:    #697086;
  --nb-muted-3:    #9aa1b2;

  /* Typography */
  --nb-font-head: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --nb-font-body: 'Public Sans', system-ui, -apple-system, sans-serif;
  --nb-h1: clamp(35px, 5vw, 58px);
  --nb-h2: clamp(28px, 3.6vw, 44px);
  --nb-h3: clamp(20px, 2.2vw, 24px);
  --nb-lead: clamp(17px, 1.5vw, 20px);
  --nb-body: 16px;

  /* Radius */
  --nb-r-sm:  9px;
  --nb-r:     11px;
  --nb-r-md:  14px;
  --nb-r-lg:  18px;
  --nb-r-xl:  22px;
  --nb-r-pill:100px;

  /* Shadows */
  --nb-shadow-sm:   0 1px 3px rgba(12,19,34,.06);
  --nb-shadow-card: 0 20px 40px -22px rgba(12,19,34,.28);
  --nb-shadow-lift: 0 22px 44px -26px rgba(12,19,34,.28);
  --nb-shadow-blue: 0 12px 26px -10px rgba(47,84,235,.6);
  --nb-shadow-pop:  0 30px 70px -40px rgba(12,19,34,.4);

  /* Layout */
  --nb-maxw: 1200px;
  --nb-maxw-narrow: 760px;
  --nb-section-pad: clamp(60px, 8vw, 108px);
  --nb-gutter: 24px;

  /* Motion */
  --nb-ease: cubic-bezier(.4, 0, .2, 1);
  --nb-t: .15s;
}

/* ---------- 2. BASE / RESET ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--nb-font-body);
  font-size: var(--nb-body);
  color: var(--nb-text);
  background: var(--nb-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--nb-font-head); margin: 0; letter-spacing: -.02em; line-height: 1.1; text-wrap: pretty; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: #d7e0ff; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 3. LAYOUT ------------------------------------------------------ */
.nb-container { max-width: var(--nb-maxw); margin: 0 auto; padding-inline: var(--nb-gutter); }
.nb-container--narrow { max-width: var(--nb-maxw-narrow); }
.nb-section { padding-block: var(--nb-section-pad); }
.nb-section--alt { background: var(--nb-bg-alt); }
.nb-section--dark { background: var(--nb-ink); color: #fff; }
.nb-section[id] { scroll-margin-top: 80px; }

/* Responsive auto grids — no media queries needed */
.nb-grid { display: grid; gap: 18px; }
.nb-grid--cards   { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.nb-grid--wide    { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.nb-grid--rows    { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.nb-grid--two     { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(32px, 5vw, 64px); }
.nb-grid--stats   { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }

/* ---------- 4. TYPOGRAPHY HELPERS ----------------------------------------- */
.nb-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--nb-blue); font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
}
.nb-eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--nb-blue); }
.nb-h1   { font-size: var(--nb-h1); font-weight: 800; }
.nb-h2   { font-size: var(--nb-h2); font-weight: 800; margin-top: 16px; }
.nb-lead { font-size: var(--nb-lead); line-height: 1.6; color: var(--nb-muted); margin-top: 16px; }
.nb-accent { color: var(--nb-blue); }

/* ---------- 5. BUTTONS ---------------------------------------------------- */
.nb-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: inherit; font-weight: 600; font-size: 16px;
  padding: 15px 26px; border-radius: var(--nb-r); border: 1px solid transparent;
  cursor: pointer; transition: transform var(--nb-t), box-shadow var(--nb-t), background var(--nb-t), border-color var(--nb-t);
  text-align: center; line-height: 1;
}
.nb-btn--primary { background: var(--nb-blue); color: #fff; box-shadow: var(--nb-shadow-blue); }
.nb-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(47,84,235,.65); }
.nb-btn--ghost { background: #fff; color: var(--nb-ink); border-color: var(--nb-border-2); }
.nb-btn--ghost:hover { border-color: var(--nb-blue); background: var(--nb-blue-25); }
.nb-btn--sm { padding: 10px 18px; font-size: 14.5px; border-radius: var(--nb-r-sm); }
.nb-btn--block { width: 100%; justify-content: center; }
.nb-btn:disabled { background: var(--nb-blue-50); color: var(--nb-muted-3); box-shadow: none; cursor: not-allowed; transform: none; }

/* ---------- 6. BADGES / TAGS --------------------------------------------- */
.nb-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  padding: 4px 9px; border-radius: var(--nb-r-pill);
  color: var(--nb-blue); background: var(--nb-blue-50);
}
.nb-badge--green  { color: var(--nb-green);  background: var(--nb-green-50); }
.nb-badge--amber  { color: var(--nb-ink);    background: var(--nb-amber-warm); }
.nb-badge--purple { color: var(--nb-purple); background: var(--nb-purple-50); }
.nb-badge--ghost  { color: var(--nb-muted-2);background: #f1f2f6; }

/* Pill chip used in hero badge / "now in force" */
.nb-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid #e3e7f3; border-radius: var(--nb-r-pill);
  padding: 7px 14px 7px 9px; font-size: 13px; font-weight: 600; color: #3b4356;
  box-shadow: 0 2px 10px -4px rgba(12,19,34,.1);
}

/* ---------- 7. CARDS ------------------------------------------------------ */
.nb-card {
  background: #fff; border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg); padding: 28px;
  box-shadow: var(--nb-shadow-sm);
}
.nb-card--pad-lg { padding: clamp(22px, 3vw, 30px); }
.nb-card--lift { transition: transform var(--nb-t), box-shadow var(--nb-t), border-color var(--nb-t); }
.nb-card--lift:hover { transform: translateY(-4px); box-shadow: var(--nb-shadow-card); border-color: var(--nb-border-blue); }
.nb-card--dark { background: var(--nb-ink); color: #fff; border: none; }

/* Icon tile (the rounded square that holds an SVG) */
.nb-icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--nb-r-md);
  background: var(--nb-blue-50); color: var(--nb-blue); flex: none;
}
.nb-icon-tile--green  { background: var(--nb-green-50);  color: var(--nb-green); }
.nb-icon-tile--amber  { background: var(--nb-amber-50);  color: var(--nb-amber); }
.nb-icon-tile--purple { background: var(--nb-purple-50); color: var(--nb-purple); }
.nb-icon-tile--lg { width: 48px; height: 48px; }

/* Tool card (icon + title + desc + link), supports a corner badge */
.nb-tool-card { position: relative; display: block; padding: 24px; }
.nb-tool-card__badge { position: absolute; top: 16px; right: 16px; }
.nb-tool-card h3 { font-size: 18.5px; font-weight: 700; margin-top: 18px; }
.nb-tool-card p  { font-size: 14.5px; line-height: 1.55; color: var(--nb-muted-2); margin-top: 9px; }
.nb-tool-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--nb-blue); }

/* Download row (icon + name + meta + download glyph) */
.nb-download {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-md); padding: 18px;
  transition: transform var(--nb-t), box-shadow var(--nb-t), border-color var(--nb-t);
}
.nb-download:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(12,19,34,.3); border-color: var(--nb-border-blue); }
.nb-download__body { flex: 1; min-width: 0; }
.nb-download__name { display: block; font-family: var(--nb-font-head); font-weight: 700; font-size: 15.5px; }
.nb-download__meta { display: block; font-size: 12.5px; color: var(--nb-muted-3); margin-top: 3px; font-weight: 500; }

/* Ticked feature list */
.nb-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.nb-ticks li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #414b5e; }
.nb-tick { flex: none; width: 16px; height: 16px; color: var(--nb-green); }
.nb-divider { height: 1px; background: #f0f1f6; margin: 18px 0; border: 0; }

/* ---------- 8. HEADER / NAV ----------------------------------------------- */
.nb-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--nb-border);
}
.nb-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; }
.nb-logo { display: flex; align-items: center; gap: 11px; }
.nb-logo__word { font-family: var(--nb-font-head); font-weight: 800; font-size: 20px; letter-spacing: -.02em; line-height: 1; }
.nb-logo__tag  { font-size: 9.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--nb-muted-3); margin-top: 4px; }
.nb-nav { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 500; color: #3b4356; }
.nb-nav a { transition: color var(--nb-t); }
.nb-nav a:hover { color: var(--nb-blue); }

/* ---------- 9. ANNOUNCEMENT / STATS --------------------------------------- */
.nb-announce {
  background: var(--nb-ink); color: #cfd6ea; font-size: 13.5px; line-height: 1.5;
  text-align: center; padding: 10px 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px 16px; flex-wrap: wrap;
}
.nb-announce strong { color: #fff; font-weight: 600; }
.nb-dot { display: inline-flex; width: 7px; height: 7px; border-radius: 50%; background: var(--nb-amber-warm); box-shadow: 0 0 0 4px rgba(245,166,35,.18); }
.nb-stat { text-align: center; }
.nb-stat__num { font-family: var(--nb-font-head); font-weight: 800; font-size: clamp(34px, 4.5vw, 52px); color: #fff; }
.nb-stat__label { color: #9aa3bd; font-size: 14.5px; margin-top: 8px; font-weight: 500; }

/* ---------- 10. FORMS ----------------------------------------------------- */
.nb-field { display: flex; flex-direction: column; gap: 6px; }
.nb-field > span { font-size: 13px; font-weight: 600; color: #3b4356; }
.nb-input, .nb-select, .nb-textarea {
  border: 1px solid var(--nb-border-2); border-radius: var(--nb-r-sm);
  padding: 12px 13px; font-size: 15px; font-family: inherit; outline: none;
  background: #fff; transition: border-color var(--nb-t); width: 100%;
}
.nb-input:focus, .nb-select:focus, .nb-textarea:focus { border-color: var(--nb-blue); }
.nb-textarea { resize: vertical; }

/* ---------- 11. FOOTER ---------------------------------------------------- */
.nb-footer { background: var(--nb-ink); color: #aab2cc; padding: clamp(48px,6vw,72px) var(--nb-gutter) 36px; }
.nb-footer a { transition: color var(--nb-t); }
.nb-footer a:hover { color: #fff; }
.nb-footer__cols { max-width: var(--nb-maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 36px; }
.nb-footer__head { font-family: var(--nb-font-head); font-weight: 700; font-size: 14px; color: #fff; letter-spacing: .02em; }
.nb-footer__links { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; font-size: 14px; }
.nb-footer__bar { max-width: var(--nb-maxw); margin: 36px auto 0; padding-top: 24px; border-top: 1px solid #1c2740; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #7d88a8; }

/* ---------- 12. UTILITIES ------------------------------------------------- */
.nb-stack   { display: flex; flex-direction: column; }
.nb-row     { display: flex; align-items: center; }
.nb-wrap    { flex-wrap: wrap; }
.nb-gap-8   { gap: 8px; }  .nb-gap-12 { gap: 12px; } .nb-gap-16 { gap: 16px; } .nb-gap-24 { gap: 24px; }
.nb-mt-16   { margin-top: 16px; } .nb-mt-24 { margin-top: 24px; } .nb-mt-32 { margin-top: 32px; }
.nb-center  { text-align: center; }
.nb-muted   { color: var(--nb-muted); }
.nb-fade-in { animation: nb-fade .6s var(--nb-ease) both; }
@keyframes nb-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }