/* ==========================================================================
   Wisdom Financial Services Pvt Ltd — Design System
   Palette + type are a proposed "new-age fintech" starting point.
   Swap the CSS variables below if you have existing brand colors/fonts.
   ========================================================================== */

:root {
  /* ---- Brand palette (PROPOSED — replace with real brand colors if you have them) ---- */
  --navy-900: #0a1930;
  --navy-800: #0f2547;
  --navy-700: #12386b;
  --navy-600: #1c4a86;
  --blue-500: #2e6ad1;
  --blue-100: #e7f0fd;
  --gold-600: #b9862f;
  --gold-500: #c99a44;
  --gold-300: #e8c77e;
  --gold-100: #faf3e2;
  --ink-900: #131c27;
  --ink-700: #33404d;
  --ink-500: #57626f;
  --ink-300: #97a2ad;
  --line-200: #e4e8ee;
  --line-100: #eef1f5;
  --bg: #f7f8fb;
  --surface: #ffffff;
  --success-700: #1e8a5f;
  --success-100: #e5f5ee;
  --danger-700: #b3261e;
  --danger-100: #fbeae9;

  /* ---- Type ---- */
  --font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* ---- Misc ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(10, 25, 48, 0.06);
  --shadow-md: 0 10px 30px rgba(10, 25, 48, 0.10);
  --shadow-lg: 0 20px 48px rgba(10, 25, 48, 0.14);
  --container: 1160px;
}

/* ---- Reset ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding-left: 1.25rem; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy-900);
  line-height: 1.25;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.05rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 1em; color: var(--ink-700); }
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 88px 0; }
.section-tight { padding: 40px 0; }
@media (max-width: 700px) {
  section { padding: 56px 0; }
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-600);
  background: var(--gold-100);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.lede { font-size: 1.15rem; line-height: 1.6; color: var(--ink-700); max-width: 62ch; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.muted { color: var(--ink-500); }
.small { font-size: 0.9rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--navy-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--navy-800); box-shadow: var(--shadow-md); }
.btn-gold { background: var(--gold-500); color: var(--navy-900); }
.btn-gold:hover { background: var(--gold-600); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-outline-navy { background: transparent; border-color: var(--line-200); color: var(--navy-800); }
.btn-outline-navy:hover { background: var(--blue-100); border-color: var(--blue-500); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line-200);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; color: var(--navy-900); font-size: 1.05rem; flex-shrink: 0; }
.brand-mark { width: 40px; height: 40px; flex-shrink: 0; }
.brand-logo { height: 54px; width: auto; display: block; }
.footer-mark { display: block; flex-shrink: 0; }
.brand-word span { display: block; font-size: 0.68rem; font-weight: 500; color: var(--ink-500); letter-spacing: 0.03em; }
.main-nav { display: flex; align-items: center; gap: 16px; }
.main-nav a { font-size: 0.87rem; font-weight: 500; color: var(--ink-700); padding: 6px 2px; white-space: nowrap; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a.active { color: var(--navy-800); border-bottom-color: var(--gold-500); }

/* ---- Nav dropdowns (Offering / Tools) ---- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: flex; align-items: center; gap: 4px; font: inherit; font-size: 0.87rem; font-weight: 500; color: var(--ink-700); background: none; border: none; padding: 6px 2px; white-space: nowrap; border-bottom: 2px solid transparent; cursor: pointer; }
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.active, .nav-dropdown.open .nav-dropdown-toggle { color: var(--navy-800); border-bottom-color: var(--gold-500); }
.nav-caret { flex-shrink: 0; transition: transform 0.15s ease; }
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; margin-top: 8px; background: var(--surface); border: 1px solid var(--line-200); border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 190px; padding: 8px; z-index: 50; }
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: block; padding: 10px 12px; border-radius: 8px; font-size: 0.87rem; font-weight: 500; color: var(--ink-700); white-space: nowrap; border-bottom: none; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active { background: var(--gold-100); color: var(--navy-800); }
@media (min-width: 1101px) {
  .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
  .nav-dropdown:hover .nav-caret, .nav-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
  /* .nav-dropdown-menu sits 8px below the toggle (margin-top:8px, for a
     floating-card look) — that 8px is dead space outside .nav-dropdown's own
     box, since the absolutely-positioned menu doesn't add to it. A mouse
     moving from the toggle down into the menu crosses that gap and briefly
     hovers neither element, which drops :hover on .nav-dropdown, hides the
     menu (display:none), and — since it's no longer rendered there — the
     mouse can never actually "arrive" on it. Confirmed by stepping the mouse
     down 1px at a time: the menu closes the instant it crosses the gap and
     stays closed. This invisible bridge is a real descendant of
     .nav-dropdown sized to cover that gap (full menu width, a little taller
     than the 8px it needs to span), so hovering through the gap still counts
     as hovering .nav-dropdown and the menu stays open all the way down. */
  .nav-dropdown::after {
    content: ''; position: absolute; top: 100%; left: 0;
    min-width: 220px; width: 100%; height: 12px;
  }
}
.header-actions { display: flex; align-items: center; gap: 14px; }
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line-200); border-radius: 10px;
  width: 42px; height: 42px; font-size: 1.2rem; cursor: pointer; color: var(--navy-800);
}

@media (max-width: 1100px) {
  .main-nav {
    position: absolute; top: 78px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line-200);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px 24px 18px; box-shadow: var(--shadow-md);
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line-100); }
  .header-cta-btn { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line-100); }
  .nav-dropdown-menu { position: static; box-shadow: none; border: none; border-radius: 0; background: var(--bg); margin: 0; padding: 0; }
  .nav-dropdown-menu a { padding: 10px 0 10px 16px; border-bottom: 1px solid var(--line-100); }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1100px 520px at 82% -10%, #163a6b 0%, var(--navy-900) 58%, var(--navy-900) 100%);
  color: #fff;
  padding: 104px 0 92px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(640px 420px at 6% 118%, rgba(201, 154, 68, 0.16), transparent 70%);
  pointer-events: none;
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.hero h1 { color: #fff; }
.hero .lede { color: rgba(255,255,255,0.82); }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.hero-art {
  background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: blur(6px);
}
.hero-stat { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.hero-stat:last-child { border-bottom: none; }
.hero-stat b { font-family: var(--font-head); font-size: 1.3rem; }
.hero-stat span { color: rgba(255,255,255,0.7); font-size: 0.88rem; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ---- Badges / trust chips ---- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 600; font-family: var(--font-head);
  padding: 9px 15px; border-radius: 999px;
  background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.18);
}
.badge-light { background: var(--blue-100); color: var(--navy-800); border-color: transparent; }
.badge-gold { background: var(--gold-100); color: var(--gold-600); border-color: transparent; }
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-400, #d8ab5a); flex-shrink: 0; }

/* ---- Trust strip ---- */
.trust-strip { background: var(--surface); border-bottom: 1px solid var(--line-200); }
.trust-strip .container { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; }
.trust-item { display: flex; align-items: center; gap: 10px; color: var(--ink-700); font-size: 0.92rem; font-weight: 500; }
.trust-item svg { flex-shrink: 0; color: var(--success-700); }

/* ---- Stats strip ---- */
.stats-strip { background: var(--surface); border-bottom: 1px solid var(--line-200); padding: 40px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.stat-item b { display: block; font-family: var(--font-head); font-size: clamp(2rem, 1.6rem + 1.5vw, 2.6rem); font-weight: 700; color: var(--navy-800); }
.stat-item span { font-size: 0.9rem; color: var(--ink-500); font-weight: 500; }
@media (max-width: 600px) { .stats-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---- Cards / grids ---- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }
/* A 9-product grid-3 plus this closing CTA card is 10 items — 3 full rows
   then a lone card at the 3-column breakpoint. Span it full-width there so
   it reads as an intentional closing banner instead of an orphan. */
@media (min-width: 901px) { .products-cta-card { grid-column: 1 / -1; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--blue-100); }
.card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue-100); color: var(--navy-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.card.text-center .card-icon { margin-left: auto; margin-right: auto; }
.card h3 { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }
.card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 600; color: var(--navy-700); font-size: 0.92rem; }
a.card-link-card { display: block; }
a.card-link-card h3 { color: var(--navy-800); }
a.card-link-card:hover { border-color: var(--blue-500); box-shadow: var(--shadow-md); }

/* ---- Progressive-disclosure "Learn more" on product/service cards ---- */
.card-details { margin: 12px 0; }
.card-details summary {
  cursor: pointer; list-style: none; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.88rem; color: var(--navy-700);
}
.card-details summary::-webkit-details-marker { display: none; }
.card-details summary::before {
  content: "+"; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--blue-100); color: var(--navy-700);
  font-size: 0.9rem; line-height: 1;
}
.card-details[open] summary::before { content: "\2212"; }
.card-details summary:hover { color: var(--navy-900); }
.card-details summary:hover::before { background: rgba(18,56,107,0.16); }
.card-details p { margin-top: 10px; margin-bottom: 0; }

.section-head { max-width: 680px; margin: 0 auto 52px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }

/* ---- Founder ---- */
.founder-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  background: linear-gradient(180deg, #fff, var(--blue-100) 180%);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
  align-items: start;
}
@media (max-width: 760px) { .founder-card { grid-template-columns: 1fr; } }
.founder-photo {
  width: 220px; height: 220px; border-radius: 50%;
  background: linear-gradient(150deg, var(--navy-700), var(--blue-500));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 3.2rem;
  border: 6px solid #fff; box-shadow: var(--shadow-md);
  margin: 0 auto;
  object-fit: cover;
}
.founder-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; }
.founder-badges .badge { background: var(--navy-700); }
.team-photo {
  width: 168px; height: 168px; border-radius: 50%;
  object-fit: cover;
  border: 5px solid #fff; box-shadow: var(--shadow-md);
  margin: 0 auto 18px; display: block;
}
@media (max-width: 600px) {
  .team-photo { width: 136px; height: 136px; }
}

/* ---- LinkedIn badge ---- */
.linkedin-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: #0a66c2; color: #fff; vertical-align: middle;
}
.linkedin-badge:hover { background: #004182; }
.linkedin-badge svg { width: 15px; height: 15px; }

/* ---- Timeline ----
   Alternating left/right layout on a centered spine. Each .timeline-item is a
   block-level box at 50% width; giving it a relative "left" offset shifts it
   visually without pulling it out of normal flow, so items still stack top to
   bottom in order while the card alternates which side of the spine it sits
   on. .timeline-year is a plain full-width divider dropped between items to
   mark where a new year begins — the spine's gradient runs behind it. */
.timeline { position: relative; max-width: 920px; margin: 0 auto; padding: 4px 0 0; }
.timeline::before {
  content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px;
  width: 2px; margin-left: -1px;
  /* Deliberately gets more confident toward the bottom — soft grey at the
     founding, warming to gold by "Now" — so the line itself echoes the
     growth story instead of just decorating it. */
  background: linear-gradient(180deg, var(--line-200) 0%, var(--blue-100) 40%, var(--blue-500) 75%, var(--gold-500) 100%);
}
.timeline-year { position: relative; text-align: center; margin: 0 0 30px; }
.timeline-year:first-child { margin-top: 0; }
.timeline-year span {
  position: relative; z-index: 2; display: inline-block;
  background: var(--navy-800); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.06em; padding: 6px 20px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.timeline-item { position: relative; width: 50%; padding-bottom: 40px; box-sizing: border-box; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item.side-left { left: 0; padding-right: 46px; }
.timeline-item.side-right { left: 50%; padding-left: 46px; }
.timeline-icon {
  position: absolute; top: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--blue-100); color: var(--navy-700);
  display: flex; align-items: center; justify-content: center;
  border: 4px solid var(--gold-100);
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.timeline-item.side-left .timeline-icon { right: -23px; }
.timeline-item.side-right .timeline-icon { left: -23px; }
.timeline-item.is-current .timeline-icon { background: var(--gold-500); color: #fff; box-shadow: var(--shadow-md); }
.timeline-item.is-current .timeline-icon::after {
  content: ''; position: absolute; top: -8px; right: -8px; bottom: -8px; left: -8px;
  border-radius: 50%; border: 2px solid var(--gold-300); opacity: 0.6;
  animation: timeline-pulse 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .timeline-item.is-current .timeline-icon::after { animation: none; display: none; }
}
@keyframes timeline-pulse {
  0% { transform: scale(0.85); opacity: 0.55; }
  70%, 100% { transform: scale(1.4); opacity: 0; }
}
.timeline-content {
  background: var(--surface); border: 1px solid var(--line-200);
  border-radius: var(--radius-md); padding: 18px 22px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.timeline-content:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.timeline-item.is-current .timeline-content {
  border-color: var(--gold-300); box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, var(--gold-100), var(--surface) 60%);
}
.timeline-date {
  font-family: var(--font-head); font-weight: 700; color: var(--navy-700);
  font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 4px;
}
.timeline-item.is-current .timeline-date { color: var(--gold-600); }
.timeline-content h4 { margin-bottom: 4px; }
.timeline-content p { margin: 0; }
@media (max-width: 760px) {
  .timeline { padding-left: 58px; max-width: 100%; }
  .timeline::before { left: 21px; margin-left: 0; }
  .timeline-year { text-align: left; margin-bottom: 22px; }
  .timeline-item,
  .timeline-item.side-left,
  .timeline-item.side-right {
    width: auto; left: 0; padding-left: 0; padding-right: 0; padding-bottom: 32px;
  }
  .timeline-item.side-left .timeline-icon,
  .timeline-item.side-right .timeline-icon { left: -58px; right: auto; width: 40px; height: 40px; }
  .timeline-icon svg { width: 18px; height: 18px; }
  .timeline-content { padding: 14px 16px 16px; }
}
.placeholder-note {
  background: var(--gold-100); border: 1px dashed var(--gold-500);
  border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.88rem; color: var(--gold-600);
  margin-top: 16px;
}
.placeholder-note strong { color: var(--navy-800); }

/* ---- Pull-quote (founder voice / human-toned callouts) ---- */
.pull-quote {
  position: relative;
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy-900);
  padding: 4px 0 4px 28px;
  border-left: 3px solid var(--gold-500);
  margin: 22px 0;
}
.pull-quote::before {
  content: "\201C";
  position: absolute;
  left: -6px;
  top: -20px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.4rem;
  color: var(--gold-300);
  line-height: 1;
}
.pull-quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-500);
}

/* ---- CTA band ---- */
.cta-band {
  background: linear-gradient(120deg, var(--navy-800), var(--navy-700));
  color: #fff; border-radius: var(--radius-lg);
  padding: 56px; text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.82); }
.cta-band .btn-group { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* ---- Compliance / content pages ---- */
.page-hero {
  background: var(--navy-900);
  color: #fff;
  padding: 56px 0 44px;
}
.page-hero h1 { color: #fff; margin-bottom: 8px; }
.breadcrumbs { font-size: 0.85rem; color: rgba(255,255,255,0.65); margin-bottom: 14px; }
.breadcrumbs a { color: rgba(255,255,255,0.85); }
.breadcrumbs a:hover { text-decoration: underline; }

.content-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 44px; align-items: start; padding: 56px 0 88px; }
@media (max-width: 860px) { .content-wrap { grid-template-columns: 1fr; } }

/* Grid items default to a content-based automatic minimum width, so a table
   with long unbreakable values (CIN/PAN/GSTIN etc.) inside .prose can force
   this whole track — and .side-nav, sharing it at the single-column mobile
   breakpoint — wider than the viewport, defeating .table-wrap's own
   overflow-x:auto. min-width:0 lets each item shrink to the track/viewport
   width so the table scrolls within its own box instead. */
.side-nav, .prose { min-width: 0; }

.side-nav {
  position: sticky; top: 96px;
  background: var(--surface); border: 1px solid var(--line-200); border-radius: var(--radius-md);
  padding: 10px; box-shadow: var(--shadow-sm);
}
.side-nav a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; color: var(--ink-700); }
.side-nav a:hover { background: var(--blue-100); color: var(--navy-800); }
.side-nav a.active { background: var(--navy-700); color: #fff; font-weight: 600; }

.prose { max-width: 76ch; }
.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.4em; color: var(--navy-800); }
.prose ul { margin-bottom: 1.2em; }
.prose li { margin-bottom: 8px; color: var(--ink-700); }
.prose p { color: var(--ink-700); }

.callout {
  border-left: 4px solid var(--gold-500);
  background: var(--gold-100);
  padding: 16px 20px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.92rem;
  color: var(--navy-800);
  margin: 20px 0;
}

.table-wrap { overflow-x: auto; margin: 20px 0 28px; border: 1px solid var(--line-200); border-radius: var(--radius-md); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: var(--surface); }
thead th { background: var(--navy-800); color: #fff; text-align: left; padding: 13px 16px; font-family: var(--font-head); font-weight: 600; font-size: 0.84rem; }
tbody td { padding: 13px 16px; border-top: 1px solid var(--line-100); color: var(--ink-700); }
tbody tr:nth-child(even) { background: var(--bg); }

.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.link-list a { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line-200); border-radius: var(--radius-sm); font-weight: 500; }
.link-list a:hover { border-color: var(--blue-500); background: var(--blue-100); }

.compliance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 700px) { .compliance-grid { grid-template-columns: 1fr; } }
.compliance-tile { display: block; background: var(--surface); border: 1px solid var(--line-200); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-sm); }
.compliance-tile:hover { border-color: var(--blue-500); box-shadow: var(--shadow-md); }
.compliance-tile h3 { margin-bottom: 6px; font-size: 1.05rem; }
.compliance-tile p { margin: 0; font-size: 0.88rem; color: var(--ink-500); }

/* ---- Forms ---- */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; color: var(--navy-800); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-200); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.95rem; background: #fff; color: var(--ink-900);
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); }

/* ---- Footer welcome band ---- */
.footer-welcome { background: var(--navy-800); border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-welcome .container { padding: 20px 24px; text-align: center; }
.footer-welcome p { margin: 0; color: #fff; font-family: var(--font-head); font-weight: 500; font-size: 0.98rem; }
.footer-welcome p b { color: var(--gold-300); font-weight: 600; }

/* ---- Footer ---- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.78); padding-top: 64px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 36px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; color: #fff; margin-bottom: 14px; font-size: 1.05rem; }
.footer-logo { height: 42px; width: auto; display: block; }
.footer-brand + p { font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,0.88); max-width: 42ch; }
.site-footer h4 { color: #fff; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }
.site-footer a { display: block; color: rgba(255,255,255,0.72); font-size: 0.9rem; margin-bottom: 10px; }
.site-footer a:hover { color: var(--gold-300); }
.site-footer address { font-style: normal; color: rgba(255,255,255,0.72); font-size: 0.9rem; margin-bottom: 12px; }
.footer-bottom { padding: 28px 0 30px; }
.footer-bottom p { font-size: 0.8rem; line-height: 1.7; color: rgba(255,255,255,0.6); max-width: 900px; }
.footer-bottom .copyright { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 18px; font-size: 0.8rem; color: rgba(255,255,255,0.55); }

/* ---- Footer social icons ---- */
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.site-footer .footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.78);
  margin-bottom: 0; flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.site-footer .footer-social a svg { width: 16px; height: 16px; }
.site-footer .footer-social a:hover { background: var(--gold-300); color: var(--navy-900); transform: translateY(-2px); }
.footer-social a .yt-tri { fill: var(--navy-900); transition: fill 0.2s ease; }
.footer-social a:hover .yt-tri { fill: var(--gold-300); }

/* ---- Floating WhatsApp button ---- */
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 8px 26px rgba(0,0,0,0.36); }
@media (max-width: 600px) {
  .whatsapp-float { width: 50px; height: 50px; bottom: 16px; right: 16px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

/* ---- Calculators ---- */
.calc-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; scroll-margin-top: 96px; }
.calc-nav a { background: var(--surface); border: 1px solid var(--line-200); padding: 10px 18px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; color: var(--navy-700); }
.calc-nav a:hover, .calc-nav a.active { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.calc-card { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 36px; scroll-margin-top: 96px; }
@media (max-width: 800px) { .calc-card { grid-template-columns: 1fr; } }
.calc-result { background: var(--bg); border: 1px solid var(--line-200); border-radius: var(--radius-md); padding: 24px; align-self: start; }
.calc-result .amount { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: var(--navy-800); }
.calc-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin: 16px 0; background: var(--line-200); }
.calc-bar span { height: 100%; }
.calc-bar .invested { background: var(--navy-700); }
.calc-bar .returns { background: var(--gold-500); }
.calc-legend { display: flex; gap: 18px; font-size: 0.85rem; flex-wrap: wrap; margin-bottom: 6px; }
.calc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.calc-row { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px dashed var(--line-200); font-size: 0.92rem; color: var(--ink-700); }
.calc-row:first-child { border-top: none; padding-top: 0; }
.range-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
/* .val is now an editable input, not a plain span — click or tap it to type an
   exact figure instead of dragging the slider. Default look still reads as
   plain bold text (transparent border/background); a hover/focus state makes
   the fact that it's editable discoverable. */
.range-row .val {
  font-weight: 700; color: var(--navy-800); font-family: var(--font-head); font-size: 0.95rem;
  width: 132px; text-align: right; border: 1px solid transparent; background: transparent;
  border-radius: 6px; padding: 3px 7px; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.range-row .val:hover { border-color: var(--line-200); background: var(--surface); }
.range-row .val:focus { outline: none; border-color: var(--blue-500); background: #fff; box-shadow: 0 0 0 3px var(--blue-100); }
input[type="range"] { width: 100%; accent-color: var(--navy-700); }

/* ---- Calculator growth charts ---- */
.calc-chart { grid-column: 1 / -1; border-top: 1px solid var(--line-200); margin-top: 8px; padding-top: 28px; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.chart-head h4 { margin: 0; font-size: 1rem; }
.chart-caption { font-size: 0.85rem; color: var(--ink-500); }
.chart-svg-wrap { position: relative; width: 100%; margin-top: 12px; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid { stroke: var(--line-200); stroke-width: 1; }
.chart-axis-label { font-family: var(--font-body); font-size: 10.5px; fill: var(--ink-500); }
.chart-crosshair { stroke: var(--ink-500); stroke-width: 1; opacity: 0; }
.chart-hit { cursor: crosshair; }
.chart-hit:focus { outline: none; }
.chart-dot { pointer-events: none; opacity: 0; }
.chart-tooltip {
  position: absolute; top: 4px; z-index: 5; pointer-events: none;
  background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 10px 12px; font-size: 0.82rem; white-space: nowrap;
}
.chart-tooltip-x { font-weight: 700; color: var(--navy-900); margin-bottom: 6px; font-family: var(--font-head); }
.chart-tooltip-row { display: flex; align-items: center; gap: 7px; padding: 2px 0; color: var(--ink-700); }
.chart-tooltip-row strong { color: var(--navy-900); font-weight: 700; }
.chart-tooltip-key { width: 10px; height: 3px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
@media (max-width: 800px) { .chart-tooltip { font-size: 0.78rem; padding: 8px 10px; } }

/* ---- Careers ---- */
.job-card { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding: 24px 28px; }
.job-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ---- misc utility ---- */
.section-cream { background: var(--gold-100); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.divider { height: 1px; background: var(--line-200); border: none; margin: 40px 0; }
.icon-check { color: var(--success-700); flex-shrink: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 10px; top: 10px; }