/* ===========================================================================
   InvestVerdict — one banner for every calculator
   ---------------------------------------------------------------------------
   TaxCalc, NiveshCalc, RentVsBuy, CarCalc and GharCalc each carried their own
   copy of the same hero, in an amber-on-black palette that belonged to no other
   page on the site. Five copies meant five places to change and five chances to
   drift. This file replaces all five with the InvestVerdict banner — the navy
   and gold used on the home page — and lives in one place so it stays that way.

   WHAT THIS FILE MAY TOUCH
     The banner block only: the hero surface, its badge, headline, sub-line,
     pills, live stat strip, and the sticky tab bar that sits inside it. Nothing
     below the banner is styled here, no markup is changed, and no calculation
     is touched — every id, class and script stays exactly as it was.

   IT MUST BE LINKED LAST
     Each calculator carries its own <style> block with the old hero in it.
     These rules win on source order and on specificity (.hero h1 beats a bare
     h1), so the <link> belongs after the final </style> in <head>. Move it
     earlier and the old amber comes straight back.

   THE MOBILE RULES ARE REPEATED HERE ON PURPOSE
     Each page already narrows .hero-inner and wraps .hero-stats below 900px.
     Those live in the page's own <style>, which is now EARLIER in the document
     — so a plain rule in this file would beat them at every width and the
     banner would keep desktop padding on a phone. A media query does not raise
     specificity; only source order settles it. So the small-screen rules are
     restated here, after the desktop ones, where they can still win.
   =========================================================================== */

/* ── the surface ──────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(900px 480px at 78% -12%, rgba(201,152,42,0.13), transparent 62%),
    radial-gradient(760px 420px at 4% 112%, rgba(16,41,74,0.85), transparent 62%),
    linear-gradient(158deg, #05111f 0%, #081929 46%, #0c2038 100%);
  padding: 60px 0 0;
  position: relative;
  overflow: hidden;
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(201,152,42,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,152,42,0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  /* Fading the grid at the edges keeps it a texture. Left hard, it reads as a
     table and the eye starts looking for rows that are not there. */
  -webkit-mask-image: radial-gradient(ellipse 78% 88% at 50% 40%, #000, transparent);
          mask-image: radial-gradient(ellipse 78% 88% at 50% 40%, #000, transparent);
}

.hero-glow {
  position: absolute;
  width: 540px; height: 540px;
  top: -190px; right: -90px;
  background: radial-gradient(circle, rgba(201,152,42,0.13) 0%, transparent 70%);
  pointer-events: none;
}

.hero-glow2 {
  position: absolute;
  width: 430px; height: 430px;
  bottom: -150px; left: 6%;
  background: radial-gradient(circle, rgba(232,184,75,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

/* ── the badge ────────────────────────────────────────────────────────── */
.hero .badge-pro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(201,152,42,0.07);
  border: 1px solid rgba(201,152,42,0.28);
  color: #c9982a;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 26px;
}
.hero .badge-dot { background: #c9982a; }

/* ── the headline ─────────────────────────────────────────────────────── */
/* Fraunces stays. It is already common to all five, and it carries the rupee
   sign and the punctuation these headlines actually use — a condensed display
   face matching the home page would drop ₹ to a fallback mid-sentence. */
.hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #e4dfd0;
  margin-bottom: 18px;
}
.hero h1 .accent  { color: #c9982a; font-style: italic; }
.hero h1 .accent2 { color: #e8b84b; font-style: normal; }

.hero .hero-sub {
  font-size: 15.5px;
  line-height: 1.75;
  color: #7a8799;
  /* One width for all five. They had drifted to 560, 580, 600 and 620, which is
     invisible on any one page and obvious the moment you flip between them. */
  max-width: 600px;
  margin-bottom: 40px;
}

/* ── the pills ────────────────────────────────────────────────────────── */
.hero .hero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }

.hero .pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  color: #8b98aa;
  font-size: 12.5px;
  padding: 8px 16px;
  border-radius: 9px;
  transition: border-color 0.22s, color 0.22s, background 0.22s;
}
.hero .pill:hover {
  border-color: rgba(201,152,42,0.5);
  color: #e4dfd0;
  background: rgba(201,152,42,0.10);
}
/* The dot colours are set inline, per pill, and are left alone — they are the
   one place these five are meant to differ, and they say what the tool does. */
.hero .pill-dot { width: 5px; height: 5px; border-radius: 50%; flex: none; }

/* ── the live figures ─────────────────────────────────────────────────── */
.hero .hero-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(201,152,42,0.16);
}
.hero .hstat { padding: 22px 32px 22px 0; flex: 1; }
.hero .hstat-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 19px;
  font-weight: 600;
  color: #e8b84b;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.hero .hstat-label {
  font-size: 10px;
  color: #66738a;
  text-transform: uppercase;
  letter-spacing: 1.6px;
}

/* ── the sticky tab bar, which sits inside the banner ─────────────────── */
/* Colour only. It is the bottom edge of the banner, so leaving it amber under
   a gold banner would look like a mistake rather than a choice. Its layout,
   stickiness and behaviour are untouched. */
.hero .tabs-bar {
  background: rgba(5,17,31,0.94);
  border-top: 1px solid rgba(201,152,42,0.14);
}
.hero .tab-btn.active { color: #e8b84b; border-bottom-color: #c9982a; }
.hero .tab-btn:hover:not(.active) { color: rgba(228,223,208,0.7); }

/* ── small screens (see the note at the top: order matters here) ──────── */
@media (max-width: 900px) {
  .hero-inner { padding: 0 20px; }
  .hero .hero-stats { flex-wrap: wrap; }
  .hero .hstat { min-width: 45%; padding: 18px 20px 18px 0; }
}

@media (max-width: 600px) {
  .hero { padding-top: 42px; }
  .hero h1 { font-size: 32px; }
  .hero .hero-sub { font-size: 14.5px; margin-bottom: 30px; }
  .hero .badge-pro { font-size: 9.5px; letter-spacing: 0.12em; margin-bottom: 20px; }
}

/* CarCalc and GharCalc tighten the banner for print. Restated so this file's
   padding shorthand does not quietly undo it. */
@media print {
  .hero { padding-bottom: 24px; }
}
