/* ===========================================================
   CitizenHQ — Landing page starter
   Palette: deep maroon canvas + white/neutral panels. Copper appears in the
   imagery only -- no other hues anywhere in the UI.
   =========================================================== */

:root{
  /* base — clean neutral, no beige */
  --white:        #FFFFFF;
  --surface:      #F4F3F0;
  --ink:          #211D14;
  --ink-soft:     #675F51;
  --border:       #E3E0D7;
  --border-soft:  #ECEAE3;

  /* primary — oxblood maroon, sampled from the plane mark */
  --accent:       #7A0E0E;
  --accent-dark:  #560A0A;
  --accent-soft:  #F1DAD3;

  /* canvas — deep oxblood the whole page sits on; light panels float on top */
  --canvas:       #4A0A0A;
  --on-canvas:    #F0D9D4;
  --on-canvas-dim:#C79E96;

  /* copper lives in the imagery only -- never in UI chrome */
  --copper:       #B5651D;
  --copper-dark:  #8B4F27;
  --copper-light: #D9A066;

  /* vertical rhythm: sections share one padding scale and one min-height, and
     the min-height is capped below the viewport so no section outgrows a screen */
  --section-pad: 52px;
  --section-min: min(92vh, 830px);

  /* Indic families are listed as fallbacks so the native language names in the
     picker render even though the UI copy is still English-only. When the real
     translations land these should become properly loaded webfonts. */
  --font-ui: "Plus Jakarta Sans", "Noto Sans Devanagari", "Noto Sans Bengali",
             "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Kannada",
             "Noto Sans Malayalam", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Source Serif 4", "Noto Serif Devanagari", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --shadow-soft: 0 20px 60px -30px rgba(33, 29, 20, 0.35);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* Institutional serif for headings, grotesk for UI, mono for anything that
   behaves like a registry value (case IDs, status codes, step numbers). */
h1, h2, h3{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

p{ margin: 0; color: var(--ink-soft); line-height: 1.6; }

a{ color: inherit; text-decoration: none; }

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

.kicker{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(122, 14, 14, 0.5);
}
.btn-primary:hover{ background: var(--accent-dark); transform: translateY(-1px); }

.btn-outline{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover{ background: var(--ink); color: var(--white); }

.btn-ghost{
  background: transparent;
  color: var(--ink);
  padding: 11px 16px;
}
.btn-ghost:hover{ color: var(--accent); }

.btn-lg{ padding: 14px 28px; font-size: 0.98rem; }

.text-link{
  display: inline-block;
  margin-top: 18px;
  font-weight: 700;
  color: var(--accent);
}
.text-link-light{ color: #fff; }

/* ---------- layout helpers ---------- */
.section-head{
  max-width: 640px;
  margin: 0 auto 30px;
  text-align: center;
}
.section-head h2{ font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 14px; }
.section-sub{ font-size: 1.02rem; }

section{ padding: var(--section-pad) 6vw; }

/* Grid and flex children default to min-width:auto, which means a single long
   word can force a track wider than its parent and push the whole page into
   horizontal scroll. Opt every layout child out of that once, here. */
.steps > *,
.sec-grid > *,
.bento > *,
.audience-grid > *,
.cmp > *,
.tw-pillars > *,
.rot-nav > *,
.footer-top > *{ min-width: 0; }

/* The three content sections share a min-height so they read as equal blocks,
   and each is sized to sit inside one screen. The CTA + footer are deliberately
   exempt -- they're a short closing pair, and padding them to match would add
   ~1000px of dead space for no content. */
.how,
.audiences,
.stack,
.twoway,
.features,
.security,
.about{
  min-height: var(--section-min);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* One shared gutter, set here rather than per-section. Several panels had no
     vertical margin, so neighbours butted together with no canvas between them
     and same-coloured ones fused into a single block. */
  margin: 0 16px 16px;
  border-radius: var(--radius-lg);
}
.audiences{ margin-top: 16px; }

/* ---------- sticky bar ---------- */
.sticky-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
  pointer-events: none;
}
.sticky-bar.is-on{ transform: translateY(0); opacity: 1; pointer-events: auto; }
.sticky-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px clamp(20px, 5vw, 56px);
  display: flex;
  align-items: center;
  gap: 24px;
}
.sticky-inner .logo{ font-size: 1.02rem; }
.sticky-links{ display: flex; gap: 26px; margin-left: auto; font-size: 0.9rem; font-weight: 500; }
.sticky-links a:hover{ color: var(--accent); }
.sticky-inner .btn{ padding: 12px 18px; font-size: 0.88rem; }

/* ---------- language picker ---------- */
.lang{ position: relative; }
.lang-btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 12px 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lang-btn:hover{ border-color: var(--accent); color: var(--accent); }
.lang-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-globe{ width: 15px; height: 15px; flex: none; }
.lang-caret{ width: 13px; height: 13px; flex: none; transition: transform 0.18s ease; }
.lang.is-open .lang-caret{ transform: rotate(180deg); }

.lang-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  min-width: 208px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(33, 29, 20, 0.35);
  max-height: 320px;
  overflow-y: auto;
}
.lang-menu li{
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.94rem;
  cursor: pointer;
}
.lang-menu li span{
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-left: auto;
}
.lang-menu li:hover{ background: var(--surface); }
.lang-menu li:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; }
.lang-menu li[aria-selected="true"]{ color: var(--accent); font-weight: 600; }

/* ---------- header / nav (sits at the top of the full-bleed hero) ---------- */
.site-header{
  position: relative;
  width: 100%;
  border-bottom: 1px solid var(--border-soft);
}
.nav-wrap{
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px clamp(20px, 5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
/* maroon on light surfaces; flips to white on the canvas (see footer) */
.logo-mark{ color: var(--accent); display: flex; }

.main-nav{
  display: flex;
  gap: 30px;
  font-weight: 500;
  font-size: 0.94rem;
}
.main-nav a:hover{ color: var(--accent); }

.nav-actions{ display: flex; align-items: center; gap: 8px; }
/* reset the UA button chrome here too, not just in the mobile rule */
.nav-toggle{ display: none; background: none; border: 0; padding: 6px; cursor: pointer; }

/* ---------- hero ----------
   Full-bleed, no panel. The render already runs off both edges, so a bordered
   card would only fight it. The card treatment picks up again below. */
.hero-frame{
  position: relative;
  /* no overflow clipping here -- the language dropdown has to escape the header.
     The render is clipped by .hero-visual instead. */
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--white);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-visual{
  position: relative;
  width: 100%;
  margin: 0;
  /* the copy block runs ~236px tall and the dome apex sits at 48.5% of the
     image, so the visual has to stay above ~490px for the two to clear */
  min-height: clamp(500px, 43vw, 700px);
  overflow: hidden;
}
/* Fills the visual and scales to whichever axis needs it -- the render is built
   to bleed off both edges, so trimming a little width on narrow-ratio viewports
   costs nothing, and trimming height only eats empty sky above the roofline. */
.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  line-height: 0;
}
.hero-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}
.hero-scrim{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* light touch only -- the render already carries white where the copy sits, so
     this just softens the colonnade's top corners behind the nav */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.38) 22%,
    rgba(255, 255, 255, 0) 42%);
}

.hero-content{
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px clamp(20px, 5vw, 40px) 0;
  text-align: center;
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.hero-frame h1{
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  margin-bottom: 10px;
}
.hero-sub{
  font-size: 1rem;
  max-width: 520px;
  margin: 0 auto;
}
.hero-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 18px;
}

/* ---------- how it works ---------- */
.how{ background: var(--white); }
.steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.step{
  position: relative;
  padding: 26px 24px 28px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
}
/* the numbers are real sequence, not decoration -- so they get the mono face */
.step-no{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 14px;
}
.step h3{ font-size: 1.14rem; margin-bottom: 8px; }
.step p{ font-size: 0.92rem; }

/* ---------- digital infrastructure / the suite ---------- */
.stack{ background: var(--surface); }
/* --- auto-rotating showcase --- */
.rot{ max-width: 1180px; margin: 0 auto; width: 100%; }
.rot-stage{
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rot-panel{
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  align-items: center;
  gap: 36px;
  padding: 30px 34px;
}
.rot-panel > *{ min-width: 0; }
.rot-panel[hidden]{ display: none; }
.rot-panel.is-on{ animation: rot-in 0.45s ease both; }
@keyframes rot-in{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: none; }
}
.rot-media{
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* grid items default to min-width:auto, so without this the phone pair
     refuses to shrink and pushes straight through the panel edge */
  min-width: 0;
  overflow: hidden;
}

/* ---- illustrative product UI, drawn in markup ----
   Deliberately not generated images: text stays legible, the palette can't
   drift, and it costs nothing to load on a weak connection. */
.ui{
  --ui-line: #E6E3DA;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink);
  width: 100%;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--ui-line);
  border-radius: 11px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 26px -16px rgba(33, 29, 20, 0.4);
}
/* a case ID is a single token; letting it wrap mid-reference reads as broken */
.ui-id{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.02em; color: var(--accent); white-space: nowrap; }
.ui-cell{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-pill{
  font-size: 8.5px;
  font-weight: 600;
  padding: 2.5px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  white-space: nowrap;
}
.ui-pill-done{ background: var(--surface); color: var(--ink-soft); }
.ui-pill-late{ background: var(--accent); color: #fff; }
.ui-title{ font-size: 11.5px; font-weight: 600; margin: 5px 0 0; color: var(--ink); }
.ui-meta{ font-size: 9px; color: var(--ink-soft); margin: 6px 0 0; }
.ui-row{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-chip{
  font-size: 8.5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--ui-line);
  color: var(--ink-soft);
  white-space: nowrap;
}
.ui-chip.on{ border-color: var(--accent); color: var(--accent); }

/* phone -- iPhone proportions, with the Dynamic Island cut into the top */
.rot-media-pair{ gap: 26px; align-items: flex-start; }
.ui-phone{
  position: relative;
  width: 158px;
  /* explicit height: the pair is staggered, so filling the container would push
     the lower phone past the bottom edge */
  height: 248px;
  flex: none;
  border-radius: 26px;
  border-width: 2.5px;
  border-color: var(--ink);
  padding-top: 20px;
}
/* the second screen sits slightly lower so the pair reads as two screenshots */
.ui-phone-back{ transform: translateY(14px); }
.ui-island{
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 15px;
  border-radius: 999px;
  background: var(--ink);
  z-index: 2;
}
.ui-back{
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 1.4px solid var(--accent); position: relative;
}
.ui-back::before{
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 5px; height: 5px; border-left: 1.4px solid var(--accent);
  border-bottom: 1.4px solid var(--accent); transform: rotate(45deg) translate(1px, -1px);
}
.ui-cta{
  margin-top: 2px;
  background: var(--accent);
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  text-align: center;
  padding: 7px;
  border-radius: 7px;
}
.ui-top{ display: flex; align-items: center; gap: 7px; padding: 10px 11px; border-bottom: 1px solid var(--ui-line); }
.ui-avatar{ width: 20px; height: 20px; border-radius: 50%; background: var(--accent); flex: none; }
.ui-top-name{ font-size: 9.5px; font-weight: 600; line-height: 1.25; }
.ui-top-name em{ display: block; font-style: normal; font-weight: 400; font-size: 8.5px; color: var(--ink-soft); }
/* clips a long list at the fold like a real screen, instead of shoving the
   tab bar out of the frame */
.ui-scroll{ flex: 1; min-height: 0; overflow: hidden; padding: 9px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.ui-card{ background: var(--white); border: 1px solid var(--ui-line); border-radius: 8px; padding: 9px 10px; }
.ui-steps{ display: flex; gap: 3px; margin-top: 8px; }
.ui-steps i{ height: 3px; flex: 1; border-radius: 2px; background: var(--ui-line); }
.ui-steps i.on{ background: var(--accent); }
.ui-steps i.now{ background: var(--accent); opacity: 0.45; }
.ui-tabs{ display: flex; gap: 20px; justify-content: center; padding: 9px 0; border-top: 1px solid var(--ui-line); }
.ui-tabs i{ width: 15px; height: 3px; border-radius: 2px; background: var(--ui-line); }
.ui-tabs i.on{ background: var(--accent); }

/* desktop window */
.ui-win{ max-width: 460px; }
.ui-bar{ display: flex; align-items: center; gap: 5px; padding: 8px 11px; border-bottom: 1px solid var(--ui-line); background: var(--surface); }
.ui-bar i{ width: 6px; height: 6px; border-radius: 50%; background: var(--ui-line); flex: none; }
.ui-bar span{ margin-left: 6px; font-size: 9px; font-weight: 600; color: var(--ink-soft); }
.ui-win-body{ flex: 1; display: flex; min-height: 0; }
.ui-rail{ width: 36px; border-right: 1px solid var(--ui-line); padding: 10px 0; display: flex; flex-direction: column; align-items: center; gap: 9px; background: var(--surface); }
.ui-rail-mark{ width: 13px; height: 13px; border-radius: 4px; background: var(--accent); margin-bottom: 3px; }
.ui-rail i{ width: 14px; height: 3px; border-radius: 2px; background: var(--ui-line); }
.ui-rail i.on{ background: var(--accent); }
.ui-pane{ flex: 1; min-width: 0; padding: 10px 12px; }
.ui-search{
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--ui-line); border-radius: 6px;
  padding: 5px 8px; font-size: 9px; color: var(--ink-soft); margin-bottom: 9px;
}
.ui-search-dot{ width: 7px; height: 7px; border: 1.4px solid var(--ink-soft); border-radius: 50%; opacity: 0.6; flex: none; }
.ui-pane-head{ display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.ui-pane-head strong{ font-size: 11px; margin-right: 2px; }
.ui-list{ list-style: none; margin: 0; padding: 0; }
.ui-list li{ display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--ui-line); }
.ui-list li:first-child{ border-top: 0; }
.ui-due{ font-family: var(--font-mono); font-size: 9px; color: var(--ink-soft); width: 22px; text-align: right; flex: none; }

/* broadcast compose */
.ui-compose{ flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ui-label{ display: block; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px; }
.ui-chips{ display: flex; gap: 5px; flex-wrap: wrap; }
.ui-msg{ background: var(--surface); border: 1px solid var(--ui-line); border-radius: 7px; padding: 9px 10px; font-size: 10px; color: var(--ink-soft); }
.ui-send{ margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-reach{ font-size: 9px; color: var(--ink-soft); }
.ui-reach strong{ font-family: var(--font-mono); color: var(--ink); font-size: 10px; }
.ui-btn{ background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 600; padding: 5px 14px; border-radius: 999px; }

/* pulse dashboard */
.ui-pulse{ flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.ui-stat{ display: flex; align-items: baseline; gap: 7px; }
.ui-stat strong{ font-family: var(--font-mono); font-size: 17px; color: var(--accent); font-weight: 600; letter-spacing: -0.01em; }
.ui-stat span{ font-size: 9px; color: var(--ink-soft); }
.ui-chart{ display: flex; align-items: flex-end; gap: 5px; height: 60px; }
.ui-chart i{ flex: 1; height: var(--h); background: var(--accent-soft); border-radius: 3px 3px 0 0; }
.ui-chart i:last-child{ background: var(--accent); }
.ui-wards{ list-style: none; margin: 0; padding: 0; }
.ui-wards li{ display: flex; align-items: center; gap: 8px; padding: 5.5px 0; border-top: 1px solid var(--ui-line); font-size: 10px; }
.ui-wards li:first-child{ border-top: 0; }
.ui-trend{ font-family: var(--font-mono); font-size: 9px; color: var(--ink-soft); }
.ui-trend.up{ color: var(--accent); font-weight: 600; }
.rot-body h3{ font-size: 1.5rem; margin-bottom: 10px; }
.rot-body p{ font-size: 0.98rem; }

/* the tabs are real buttons with a numbered sequence, and the active one's bar
   fills as it counts down -- together that reads as "these advance, and you can
   drive them", which bare labels did not */
.rot-controls{
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
}
.rot-arrow{
  appearance: none;
  flex: none;
  width: 40px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.rot-arrow svg{ width: 17px; height: 17px; }
.rot-arrow:hover{ border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.rot-arrow:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

.rot-nav{
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  min-width: 0;
}
.rot-tab{
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 9px;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.rot-tab:hover{ border-color: var(--ink-soft); color: var(--ink); }
.rot-tab:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.rot-tab.is-on{ border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }

.rot-num{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  opacity: 0.75;
}
.rot-tab.is-on .rot-num{ color: var(--accent); opacity: 1; }
.rot-name{
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rot-tab.is-on .rot-name{ color: var(--accent); }
.rot-track{
  display: block;
  height: 4px;
  margin-top: 2px;
  border-radius: 2px;
  background: rgba(122, 14, 14, 0.14);
  overflow: hidden;
}
.rot-tab:not(.is-on) .rot-track{ background: var(--border); }
.rot-fill{
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 2px;
}
/* the active tab's bar fills over the dwell time, then the next takes over */
.rot-tab.is-on .rot-fill{ animation: rot-fill var(--rot-dwell, 6s) linear both; }
.rot.is-paused .rot-tab.is-on .rot-fill{ animation-play-state: paused; }
.rot-tab.is-done .rot-fill{ width: 100%; }
@keyframes rot-fill{ from{ width: 0; } to{ width: 100%; } }

.stack-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 12px;
}

/* ---------- two-way / ground network ---------- */
.twoway{ background: var(--white); }

/* before / after contrast */
.cmp{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 940px;
  margin: 0 auto;
}
.cmp-card{
  padding: 24px 26px 26px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: center;
}
.cmp-before{ color: var(--ink-soft); }
/* the working half gets the accent, so the difference is legible at a glance */
.cmp-after{
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(122, 14, 14, 0.28);
}
.cmp-tag{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.cmp-svg{ width: 100%; max-width: 240px; height: auto; margin: 0 auto 16px; display: block; }
.cmp-node{ fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.55; }
.cmp-label{
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  fill: currentColor;
}
.cmp-flow line{ stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cmp-flow polygon{ fill: currentColor; }
.cmp-before .cmp-flow{ opacity: 0.5; }
.cmp-card p{ font-size: 0.93rem; margin: 0 auto; max-width: 34ch; }
.cmp-after p{ color: var(--accent-dark); }

/* the three capabilities, compressed to one line each */
.tw-pillars{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 940px;
  margin: 22px auto 0;
  padding: 0;
}
.tw-pillars li{
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
  padding-top: 14px;
  border-top: 1.5px solid var(--border);
}
.tw-k{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 6px;
}

/* ---------- security & privacy ---------- */
.security{ background: var(--surface); }
.sec-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}
.sec-card{
  padding: 24px 26px 26px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
}
.sec-card h3{ font-size: 1.1rem; margin-bottom: 8px; }
.sec-card p{ font-size: 0.9rem; }
/* the DPDP card is the anchor claim -- give it the full width and the accent */
.sec-card-lead{
  grid-column: 1 / -1;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.sec-card-lead p{ color: var(--on-canvas); max-width: 78ch; }
.sec-card-lead h3{ font-size: 1.36rem; }
.sec-badge{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.sec-icon{
  display: block;
  width: 24px;
  height: 24px;
  color: var(--copper);
  margin-bottom: 14px;
}
.sec-icon svg{ width: 100%; height: 100%; display: block; }

/* ---------- audiences ---------- */
.audiences{ background: var(--white); }
.audiences .section-head{ text-align: left; margin: 0 0 40px; max-width: none; }
.audience-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.audience-card{
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1.5px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* The renders are isolated objects, so they're shown whole on a tinted plate
   rather than cropped edge-to-edge -- the tint makes the surrounding space read
   as a deliberate frame instead of an image that failed to fill its box. */
.audience-media{
  background: var(--white);
  border-bottom: 1.5px solid var(--border);
  padding: 22px;
  line-height: 0;
}
.audience-media img{
  width: 100%;
  height: 180px;
  object-fit: contain;
  display: block;
}
.audience-body{ padding: 28px 32px 32px; }
.audience-tag{
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 16px;
}
.audience-card h3{ font-size: 1.5rem; margin-bottom: 12px; }
.audience-card p{ font-size: 0.98rem; }

/* ---------- bento features ---------- */
.features{ background: var(--surface); }

/* --- track switch --- */
.track-switch{
  display: flex;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 22px;
  padding: 4px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 999px;
}
.track-btn{
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  padding: 13px 22px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.track-btn:hover{ color: var(--accent); }
.track-btn.is-active{ background: var(--accent); color: #fff; }
.track-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

.track-panel.is-hidden{ display: none; }
/* short, purposeful -- the panel settles rather than hard-swapping */
.track-panel:not(.is-hidden){ animation: track-in 0.26s ease both; }
@keyframes track-in{
  from{ opacity: 0; transform: translateY(6px); }
  to  { opacity: 1; transform: none; }
}

.bento{
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  /* minmax rather than fixed px -- if copy grows the row grows with it instead
     of the content being clipped */
  grid-template-rows: minmax(205px, auto) minmax(175px, auto);
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}
.bento-card{
  border-radius: var(--radius-md);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--border);
}
.bento-card h3{ font-size: 1.3rem; }
.bento-card p{ font-size: 0.94rem; color: var(--ink-soft); }
.bento-icon{
  margin-bottom: auto;
  color: var(--copper);
  display: block;
  width: 26px;
  height: 26px;
}
.bento-icon svg{ width: 100%; height: 100%; display: block; }

.bento-tall{ grid-column: 1; grid-row: 1 / 3; }
.bento-wide{ grid-column: 2 / 4; grid-row: 1; }
.bento-card:nth-child(3){ grid-column: 2; grid-row: 2; }
.bento-card:nth-child(4){ grid-column: 3; grid-row: 2; }

/* the tall card leads with a copper render, dark panel beneath for the copy */
.bento-media{
  padding: 0;
  overflow: hidden;
  justify-content: flex-start;
  gap: 0;
  background: var(--white);
}
/* fixed height, not flex:auto -- with `auto` the portrait render's intrinsic
   height drove the card, and because this card spans both grid rows it dragged
   the whole bento taller with it */
.bento-media img{
  width: 100%;
  height: 170px;
  flex: none;
  object-fit: contain;
  padding: 18px;
  display: block;
}
.bento-media-body{
  background: var(--accent);
  color: #fff;
  padding: 22px 26px 24px;
}
.bento-media-body h3{ margin-bottom: 8px; }
.bento-media-body p{ color: var(--on-canvas); }
.bento-chip{
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 6px 12px;
  border-radius: 999px;
  color: #fff;
}

/* ---------- about ---------- */
.about{ background: var(--white); }
.about-inner{
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}
.about-media img{
  width: 100%;
  height: 320px;
  object-fit: contain;
  display: block;
  padding: 24px;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
}
.about-content h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 6px; margin-bottom: 20px; }
.about-text p{ margin-bottom: 18px; font-size: 1.02rem; }
.about-text p:last-child{ margin-bottom: 0; }

/* ---------- CTA band ---------- */
/* sits directly on the maroon canvas -- no panel, the canvas is the moment */
.cta-band{
  text-align: center;
  color: #fff;
  margin: 0;
  padding: 96px 6vw 80px;
}
.cta-band h2{ font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 14px; }
.cta-band p{ color: var(--on-canvas); margin-bottom: 30px; }
.cta-band .btn-primary{ background: #fff; color: var(--accent); box-shadow: none; }
.cta-band .btn-primary:hover{ background: var(--accent-soft); }

/* ---------- footer (also on the canvas) ---------- */
.site-footer{ padding: 0 6vw 30px; color: var(--on-canvas); }
.footer-top{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.15fr;
  gap: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.site-footer .logo{ color: #fff; font-size: 1.24rem; }
/* maroon would vanish against the canvas, so the mark goes white here */
.site-footer .logo-mark{ color: #fff; }
.footer-line{
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.4;
  color: #fff;
  max-width: 300px;
}
/* small proof points, the things an official actually wants confirmed */
.footer-badges{ display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.fbadge{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-canvas);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}
.footer-col h4{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--on-canvas-dim);
  margin-bottom: 16px;
}
.footer-col a{ display: block; margin-bottom: 10px; font-size: 0.94rem; color: var(--on-canvas); }
.footer-col a:hover{ color: #fff; }
.footer-cta p{ font-size: 0.88rem; color: var(--on-canvas-dim); margin-bottom: 16px; }
.footer-col .btn{ margin-top: 0; }
.site-footer .btn-primary{ background: #fff; color: var(--accent); box-shadow: none; }
.site-footer .btn-primary:hover{ background: var(--accent-soft); }

.footer-bottom{
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  font-size: 0.84rem;
  color: var(--on-canvas-dim);
}
.made-in{ display: inline-flex; align-items: center; gap: 10px; color: var(--on-canvas); white-space: nowrap; }
/* the tiranga is the single deliberate exception to the no-other-colour rule */
.flag{
  width: 26px;
  height: auto;
  border-radius: 2px;
  flex: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* ---------- responsive ---------- */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Short laptops (768px-tall and similar): the features grid is the tallest
   block and its fixed rows are what push it past the fold, so tighten the
   rows and padding rather than letting the section overflow. */
@media (min-width: 901px) and (max-height: 820px){
  :root{ --section-pad: 44px; }
  .bento{ grid-template-rows: minmax(185px, auto) minmax(170px, auto); }
  .bento-card{ padding: 22px 24px; }
  .section-head{ margin-bottom: 22px; }
  .step{ padding: 22px 20px 24px; }
  .sec-card{ padding: 20px 22px 22px; }
  .cmp-card{ padding: 20px 20px 22px; }
  .rot-panel{ padding: 22px 28px; gap: 28px; }
  .rot-media{ height: 250px; padding: 14px; }
  .ui-phone{ width: 172px; }
}

@media (max-width: 1100px){
  .steps{ grid-template-columns: repeat(2, 1fr); }
  .sec-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px){
  /* the two-column panel squeezes the media column below the width of the
     phone pair well before the tablet breakpoint, so it stacks here */
  .rot-panel{ grid-template-columns: 1fr; gap: 24px; padding: 24px 26px; }
  .rot-media{ height: 280px; }
}

@media (max-width: 900px){
  .nav-wrap{ flex-wrap: wrap; }

  /* the mid links do not fit beside the logo + CTA at this width */
  .sticky-links{ display: none; }
  .sticky-inner{ gap: 12px; }
  .sticky-inner .btn{ margin-left: auto; }

  /* the picker sits at the left of the wrapped action row here, so a
     right-anchored menu would open off the left edge of the screen */
  .lang-menu{ right: auto; left: 0; }
  .main-nav{ display: none; }
  .nav-toggle{
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 14px 10px;
  }
  .nav-toggle span{ width: 22px; height: 2px; background: var(--ink); }
  /* inline expanding panel, not an overlay -- the hero card clips overflow
     for its rounded corners, so an absolutely-positioned dropdown would be cut off */
  .main-nav.open{
    display: flex;
    flex-direction: column;
    order: 5;
    flex-basis: 100%;
    width: 100%;
    padding: 12px 0 4px;
    border-top: 1px solid var(--border-soft);
    gap: 14px;
  }

  /* touch targets: everything tappable clears ~44px from here down */
  .btn{ padding: 13px 22px; }
  /* higher specificity than .btn, so it needs raising on its own */
  .sticky-inner .btn{ padding: 12px 18px; }
  .lang-btn{ padding: 12px 14px; }
  .rot-arrow{ min-height: 44px; }
  .track-btn{ padding: 13px 22px; }

  /* At these ratios, filling the visual would scale the 21:9 render to the
     container height and crop most of its width away, leaving an unreadable
     sliver. Instead sit it along the base at its own ratio and give the copy
     dedicated headroom above it. */
  .hero-visual{ min-height: 500px; }
  .hero-bg{
    inset: auto 0 0 0;
    aspect-ratio: 2.358;
  }
  .hero-scrim{ background: none; }

  .audience-grid{ grid-template-columns: 1fr; }

  .bento{ grid-template-columns: 1fr; grid-template-rows: none; }
  /* :nth-child selectors above are specificity 0,2,0 -- match that here or the
     multi-column placement survives into the stacked layout */
  .bento .bento-card,
  .bento .bento-tall,
  .bento .bento-wide,
  .bento .bento-card:nth-child(3),
  .bento .bento-card:nth-child(4){ grid-column: 1; grid-row: auto; min-height: 220px; }
  .bento .bento-media{ min-height: 0; }
  .bento-media img{ aspect-ratio: 3 / 2; flex: 0 0 auto; }

  .about-inner{ grid-template-columns: 1fr; gap: 24px; }

  .footer-top{ grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 820px){
  /* stack the panel; the tab strip wraps to two rows rather than squashing */
  .rot-panel{ grid-template-columns: 1fr; gap: 22px; padding: 18px; }
  .rot-media{ height: 262px; padding: 14px; }
  .rot-nav{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
  /* let the label wrap here instead of clipping mid-word */
  .rot-name{ font-size: 0.78rem; white-space: normal; }
  .rot-arrow{ width: 34px; }
  /* the mockups are drawn at desktop scale, so step them down to fit */
  .ui{ font-size: 10px; }
  .ui-win{ max-width: 100%; }
  .ui-phone{ width: 152px; height: 242px; }
  /* the phone narrows here, so the id + status pill row needs a step down too */
  .ui-id{ font-size: 8.8px; }
  .ui-pill{ font-size: 7.8px; padding: 2px 6px; }
  .ui-row{ gap: 6px; }
  .ui-pane{ padding: 8px 9px; }
  .ui-rail{ width: 28px; }
  .ui-compose{ padding: 10px; gap: 8px; }
  .ui-pulse{ padding: 10px; }
  .ui-chart{ height: 52px; }
}

@media (max-width: 760px){
  /* the contrast only collapses when the two panels genuinely stop fitting */
  .cmp{ grid-template-columns: 1fr; }
  .tw-pillars{ grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 620px){
  /* below this the two phones cannot sit side by side, so they overlap into a
     fanned pair rather than being shrunk until the text stops being readable */
  .rot-media-pair{ gap: 0; }
  .ui-phone{ width: 150px; height: 232px; }
  .ui-phone-back{ margin-left: -50px; transform: translateY(12px); }
}

@media (max-width: 560px){
  section{ padding: 56px 5vw; }
  /* two columns leave ~120px tracks here, too narrow for the copy */
  .steps{ grid-template-columns: 1fr; }
  .sec-grid{ grid-template-columns: 1fr; }
  /* side by side the two labels no longer fit, so the control stacks */
  .track-switch{ width: 100%; flex-direction: column; border-radius: 18px; }
  .track-btn{ font-size: 0.86rem; padding: 13px 14px; text-align: center; }
  .footer-top{ grid-template-columns: 1fr; gap: 30px; }
  /* side by side these two collide and the "Made in India" line wraps */
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 14px; }
  .nav-actions .btn-ghost{ display: none; }
}

@media (max-width: 430px){
  .ui-phone{ width: 134px; height: 224px; }
  .ui-phone-back{ margin-left: -46px; }
  .rot-media{ height: 250px; padding: 12px; }
  /* the id is nowrap, so at this width the id + status pill no longer share a
     row; step both down, tighten the card and drop the SLA column */
  .ui-id{ font-size: 8px; }
  .ui-pill{ font-size: 7px; padding: 2px 5px; }
  .ui-row{ gap: 5px; }
  .ui-card{ padding: 8px; }
  .ui-scroll{ padding: 7px; gap: 6px; }
  .ui-due{ display: none; }
  /* the arrows squeeze the tab tracks below the width of a single word here,
     and every surface is reachable from the tabs anyway */
  .rot-arrow{ display: none; }
}

@media (max-width: 350px){
  /* a fanned pair stops being legible here; one clean screen reads better */
  .ui-phone-back{ display: none; }
  .ui-phone{ width: 156px; height: 236px; }
}