/* ===========================================================================
   GramSaarthi public web — landing page
   ---------------------------------------------------------------------------
   Values mirror lib/src/design/gs_tokens.dart so the website and the app read
   as one product. If a token moves there, move it here too; this file is the
   only place the site defines colour, space, radius or type.
   =========================================================================== */

:root {
  /* Identity — GsGreen */
  --brand:        #2F7D54;  /* c500 */
  --brand-strong: #164D31;  /* c700 */
  --brand-deep:   #0C2B1C;  /* c900 */
  --brand-subtle: #F0F7F2;  /* c50  */
  --brand-line:   #B9DBC5;  /* c200 */

  /* Supporting accents — GsOrange, GsBlue */
  --accent:       #E07A1F;
  --accent-deep:  #9C4F0B;
  --support:      #2C6EA8;
  --support-deep: #194167;

  /* GsNeutral */
  --bg:           #F6F8F6;
  --surface:      #FFFFFF;
  --surface-2:    #FBFCFB;
  --sunken:       #EDF1EE;
  --border:       #DFE5E1;
  --border-strong:#C4CDC7;
  --text:         #141A16;
  --text-2:       #4F5B54;
  --text-3:       #6E7C74;

  /* Status */
  --verified: #164D31;
  --warning:  #7D5D06;
  --critical: #752017;

  /* GsSpace — 4pt scale */
  --s-xxs: 2px;  --s-xs: 4px;  --s-sm: 8px;   --s-md: 12px;
  --s-lg: 16px;  --s-xl: 20px; --s-2xl: 24px; --s-3xl: 32px;
  --s-4xl: 40px; --s-5xl: 56px;

  /* GsRadius */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-pill: 999px;

  /* GsElevation — deliberately restrained */
  --shadow-card:   0 2px 8px rgba(20, 26, 22, .06);
  --shadow-raised: 0 6px 16px rgba(20, 26, 22, .10);

  --measure: 680px;     /* GsBreakpoints.maxProseWidth  */
  --content: 960px;     /* GsBreakpoints.maxContentWidth */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
          "Noto Sans Devanagari", "Noto Sans Bengali", sans-serif;
}

/* ---------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  /* Indic scripts need slightly more room; the measure cap keeps lines short
     enough to read comfortably. */
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s-md); letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 1.35rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); }
h3 { font-size: 1.075rem; }
p  { margin: 0 0 var(--s-md); }
ul, ol { margin: 0; padding: 0; }
a { color: var(--brand-strong); }

img, svg { max-width: 100%; }

/* The `hidden` attribute must always win.
   `.btn` sets `display: inline-flex`, and an author rule of any specificity
   beats the user-agent's `[hidden] { display: none }`. Without this, markup
   marked `hidden` still renders — which is how the Play Store badge was
   visible before the app was published. */
[hidden] { display: none !important; }

/* Visible keyboard focus everywhere. */
:focus-visible {
  outline: 3px solid var(--support);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-strong);
  color: #fff;
  padding: var(--s-md) var(--s-lg);
  z-index: 100;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--s-lg);
}

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
  min-height: 64px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  text-decoration: none;
  color: var(--brand-strong);
}
/* The real brand mark. It is a circular illustration supplied as a square PNG
   with a flat light background, so it is rendered inside a circle rather than
   given a border — a ring around a round image reads as a photo frame. */
.brand-mark {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  object-fit: cover;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 1.075rem; letter-spacing: -0.01em; }
.brand-text small { font-size: .7rem; color: var(--text-3); letter-spacing: .09em; text-transform: uppercase; }

.site-nav { display: flex; gap: var(--s-xl); flex-wrap: wrap; }
.site-nav a {
  color: var(--text-2);
  text-decoration: none;
  font-size: .94rem;
  font-weight: 600;
  padding-block: var(--s-xs);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--brand-strong); border-bottom-color: var(--brand-line); }

/* ----------------------------------------------------------------- hero -- */

.hero {
  background:
    radial-gradient(1100px 460px at 12% -12%, #E4F1E8 0%, rgba(228, 241, 232, 0) 62%),
    radial-gradient(760px 380px at 92% 8%, #FDF0E0 0%, rgba(253, 240, 224, 0) 58%),
    var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Two columns once there is room: the claim on the left, the app's real launch
   screen on the right. Below that width the demo moves under the copy, because
   the headline is what has to be read first. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3xl);
  align-items: center;
  padding-block: clamp(var(--s-4xl), 7vw, 88px);
}

.hero-inner { max-width: 620px; }

/* The brand mark above the headline. Big enough to register as the product's
   identity, restrained enough not to compete with the h1. */
.hero-mark { display: block; margin-bottom: var(--s-xl); }
.hero-mark img {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-raised);
}

.hero h1 { margin-bottom: var(--s-lg); }
.hero h1 .accent { color: var(--brand); }

.eyebrow {
  display: inline-block;
  margin-bottom: var(--s-lg);
  padding: var(--s-xs) var(--s-md);
  background: var(--brand-subtle);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-pill);
  color: var(--brand-strong);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ------------------------------------------------------- app entry screen -- */

.hero-demo {
  margin: 0;
  justify-self: center;
  width: min(100%, 320px);
}

/* The splash artwork is the screen *inside* the phone, so the card supplies the
   device silhouette. The radius is larger than the design system's --r-lg
   because a phone's screen corners are proportionally rounder than a card's. */
.hero-demo picture { display: block; }
.hero-demo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
}

.hero-demo figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  margin-top: var(--s-md);
  color: var(--text-2);
}
.hero-demo figcaption strong {
  display: block;
  font-size: .93rem;
  color: var(--text);
  line-height: 1.25;
}
.hero-demo figcaption small { display: block; font-size: .82rem; color: var(--text-3); }

.demo-badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--brand);
}
.demo-badge svg { width: 18px; height: 18px; }

/* A status dot that carries the same meaning as the label beside it, so the
   state is never conveyed by colour alone. */
.hero-demo small[data-state="soon"]::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.hero-demo small[data-state="available"]::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: var(--r-pill);
  background: var(--verified);
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(var(--s-2xl), 5vw, 64px);
  }
  .hero-demo { width: 100%; max-width: 340px; }
}

.lede {
  max-width: var(--measure);
  font-size: clamp(1.05rem, 1rem + .4vw, 1.28rem);
  color: var(--text-2);
  margin-bottom: var(--s-2xl);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
  margin-bottom: var(--s-2xl);
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md) var(--s-2xl);
  list-style: none;
  padding-top: var(--s-lg);
  border-top: 1px solid var(--border);
}
.hero-points li {
  position: relative;
  padding-left: var(--s-xl);
  color: var(--text-2);
  font-size: .95rem;
}
.hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--brand);
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  min-height: 48px;                 /* GsTouch.comfortable */
  padding: var(--s-md) var(--s-2xl);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 650;
  font-size: .98rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease-out, background-color .16s ease-out,
              border-color .16s ease-out, box-shadow .16s ease-out;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-card); }
.btn-primary:hover { background: var(--brand-strong); box-shadow: var(--shadow-raised); }

.btn-secondary {
  background: var(--surface);
  color: var(--brand-strong);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--brand); background: var(--brand-subtle); }

/* The official Play Store badge is dark; this mirrors it without shipping
   Google's trademark artwork for a listing that does not exist yet. */
.btn-store {
  background: #141A16;
  color: #fff;
  border-color: #141A16;
  padding-inline: var(--s-lg);
}
.btn-store:hover { background: #242C27; }
.play-glyph { display: grid; place-items: center; width: 22px; height: 22px; }
.play-glyph svg { width: 100%; height: 100%; }
.play-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.play-text small { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.play-text strong { font-size: .95rem; font-weight: 650; }

/* ------------------------------------------------------------- sections -- */

.section { padding-block: clamp(var(--s-4xl), 6vw, 72px); }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }

.section-title { text-align: center; }
.section-lede {
  max-width: var(--measure);
  margin-inline: auto;
  margin-bottom: var(--s-3xl);
  text-align: center;
  color: var(--text-2);
}

/* ------------------------------------------------------------- pipeline -- */

.pipeline {
  list-style: none;
  display: grid;
  gap: var(--s-md);
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  counter-reset: step;
}

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-xl);
  box-shadow: var(--shadow-card);
}
.step h3 { margin-bottom: var(--s-xs); }
.step p { margin: 0; color: var(--text-2); font-size: .93rem; }

.step-index {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: var(--s-md);
  border-radius: var(--r-pill);
  background: var(--brand-subtle);
  border: 1px solid var(--brand-line);
  color: var(--brand-strong);
  font-size: .85rem;
  font-weight: 700;
}

/* The last step is the one that earns trust, so it is the only one marked. */
.step-evidence { border-color: var(--brand); background: var(--brand-subtle); }
.step-evidence .step-index { background: var(--brand); border-color: var(--brand); color: #fff; }
.step-evidence h3 { color: var(--brand-strong); }

.trust-note {
  max-width: var(--measure);
  margin: var(--s-3xl) auto 0;
  padding: var(--s-xl);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--support);
  border-radius: var(--r-sm);
}
.trust-note h3 { color: var(--support-deep); font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; }
.trust-note p { margin: 0; color: var(--text-2); font-size: .95rem; }

/* ---------------------------------------------------------------- cards -- */

.cards {
  display: grid;
  gap: var(--s-lg);
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-xl);
  box-shadow: var(--shadow-card);
}
.card h3 { color: var(--brand-strong); }
.card p { margin: 0; color: var(--text-2); font-size: .94rem; }

/* ------------------------------------------------------------- app band -- */

.app-inner {
  display: grid;
  gap: var(--s-2xl);
  grid-template-columns: 1fr;
  align-items: center;
}
.app-copy .section-title, .app-copy .section-lede { text-align: left; margin-inline: 0; }

.app-cta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-2xl);
  box-shadow: var(--shadow-card);
}
.app-status { margin: 0; color: var(--text-2); font-weight: 600; }
.app-status[data-state="soon"]::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: var(--s-sm);
  border-radius: var(--r-pill);
  background: var(--accent);
}
.app-note { margin: var(--s-sm) 0 0; color: var(--text-3); font-size: .85rem; }

/* --------------------------------------------------------------- footer -- */

.site-footer {
  background: var(--brand-deep);
  color: #D8E6DC;
  padding-block: var(--s-4xl) var(--s-2xl);
}
.footer-grid {
  display: grid;
  gap: var(--s-2xl);
  grid-template-columns: minmax(200px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  align-items: start;
}
.footer-brand strong { display: block; font-size: 1.2rem; color: #fff; margin-bottom: var(--s-xs); }
.footer-brand p { color: #A9C4B3; font-size: .9rem; max-width: 34ch; }

.footer-col h3 {
  color: #fff;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: var(--s-md);
}
.footer-col ul { list-style: none; display: grid; gap: var(--s-sm); }
.footer-col a { color: #D8E6DC; text-decoration: none; font-size: .92rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-col .app-status { color: #A9C4B3; font-size: .9rem; }

.footer-base {
  margin-top: var(--s-3xl);
  padding-top: var(--s-lg);
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-xl);
  justify-content: space-between;
  align-items: baseline;
}
.footer-base p { margin: 0; font-size: .88rem; }
.footer-fine { color: #9CB6A6; max-width: 62ch; font-size: .82rem; }

/* ---------------------------------------------------------- breakpoints -- */

@media (min-width: 720px) {
  .app-inner { grid-template-columns: 1.2fr 1fr; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .site-nav { gap: var(--s-md); }
  .hero-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Honour the platform's reduced-motion preference, matching
   GsMotion.respecting() in the Flutter app. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .site-footer, .hero-actions { display: none; }
  body { background: #fff; }
}