/* ==========================================================================
   Daftar — page layout, header, hero, section headings, footer
   ========================================================================== */

.page {
  position: relative;
  z-index: 2;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-7));
}

/* --- Sticky header — always visible so Auto · English never hides -------- */
.topbar {
  position: fixed;
  inset-inline: 0;
  top: 3px; /* sit under tiranga hairline */
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--border);
  transform: translateY(0);
}

.topbar__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-7));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
}

.topbar__spacer { flex: 1; min-width: 0.5rem; }

.lang--fixed { flex: none; }

.lang--fixed .lang__select {
  border-color: var(--ink);
  color: var(--text);
  font-weight: 650;
  max-width: min(46vw, 14rem);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --- Masthead ------------------------------------------------------------ */

.masthead {
  /* Clear the always-on topbar */
  padding-block: calc(56px + clamp(var(--space-5), 4vw, var(--space-6))) var(--space-4);
}

.masthead__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}

.masthead__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: 0.5em;
}

.masthead__rule { margin-top: var(--space-5); }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  padding-block: clamp(var(--space-5), 4vw, var(--space-7));
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
    gap: clamp(var(--space-6), 5vw, var(--space-7));
  }
}

.hero__kicker {
  margin-bottom: var(--space-3);
  color: var(--text-faint);
}

.hero__title {
  font-size: clamp(2.35rem, 1.35rem + 3.4vw, 4.25rem);
  margin-bottom: var(--space-4);
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 12ch;
}

.hero__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 100;
  color: var(--text);
  background: linear-gradient(120deg, transparent 0%, color-mix(in oklab, var(--highlight) 35%, transparent) 40%, transparent 100%);
  background-size: 100% 0.35em;
  background-repeat: no-repeat;
  background-position: 0 88%;
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  align-items: center;
}

.hero__cta-hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-faint);
  max-width: 42ch;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.stat__n {
  display: block;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1;
  color: var(--text);
}
.stat__l {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Section heading -----------------------------------------------------
   Every section is titled in Hinglish, glossed in Urdu + English. This is
   the pattern that ties the whole product back to the logo. */
.section { padding-block: var(--space-section) 0; scroll-margin-top: 5rem; }

.head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
}

.head__lat {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 72;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.head__ur {
  font-family: var(--font-urdu);
  direction: rtl;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--accent);
}

.head__gloss {
  font-size: var(--text-sm);
  color: var(--text-faint);
  margin-inline-start: auto;
  text-align: end;
}

.section__note {
  color: var(--text-muted);
  max-width: var(--measure);
  margin-bottom: var(--space-5);
  text-wrap: pretty;
}

/* --- Footer -------------------------------------------------------------- */

.foot {
  margin-top: var(--space-section);
  padding-block: var(--space-6) var(--space-7);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--text-faint);
}

.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.foot__map-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-faint);
  max-width: 62ch;
}
.foot a { text-decoration-color: var(--border); text-underline-offset: 3px; }
.foot a:hover { color: var(--text); text-decoration-color: var(--accent); }

/* ==========================================================================
   Trust layer

   India runs on trust, and online that trust is mostly destroyed by OTP and
   payment fraud committed in the name of government services. So the trust
   signals here are not decorative — they are the three things a wary person
   actually checks: is this official, what will it ask me for, where does the
   link go.
   ========================================================================== */

/* A 3px tricolour hairline pinned to the very top of the page. Restrained
   on purpose — a flag-sized banner would read as impersonation. */
.tiranga {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--saffron) 0 33.33%,
    var(--paper-raised) 33.33% 66.66%,
    var(--green) 66.66% 100%
  );
}

/* --- Safety notice ------------------------------------------------------- */

.safety {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--green-soft);
  border: 1px solid color-mix(in oklab, var(--green) 30%, transparent);
  border-radius: var(--radius-card);
}

.safety__icon { flex: none; color: var(--green); margin-top: 2px; }
.safety__title { font-weight: 650; color: var(--text); margin-bottom: 2px; }
.safety__body {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-wrap: pretty;
  max-width: 62ch;
}

/* --- Language switcher --------------------------------------------------- */

.lang {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang__select {
  appearance: none;
  padding: var(--space-2) calc(var(--space-5) + var(--space-2)) var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 550;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.lang__select:hover { border-color: var(--accent); color: var(--text); }

.lang__chev {
  position: absolute;
  inset-inline-end: var(--space-3);
  pointer-events: none;
  color: var(--text-faint);
}

/* --- RTL ----------------------------------------------------------------
   Logical properties carry most of this. The map is the exception: it is a
   picture of a country, and mirroring it would put Gujarat on the east. */
[dir="rtl"] .map,
[dir="rtl"] .maplist,
[dir="rtl"] .map-stage,
[dir="rtl"] .indiamap { direction: ltr; }
[dir="rtl"] .head__gloss { text-align: start; }