/* Self-hosted fonts (2026-10-06): no Google Fonts CDN — CSP-safe, works offline. */
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/notosansdevanagari-400-devanagari.woff2') format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/notosansdevanagari-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/notosansdevanagari-500-devanagari.woff2') format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/notosansdevanagari-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/notosansdevanagari-600-devanagari.woff2') format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/notosansdevanagari-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/notosansdevanagari-700-devanagari.woff2') format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/notosansdevanagari-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Noto Serif Devanagari';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/notoserifdevanagari-500-devanagari.woff2') format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;}
@font-face{font-family:'Noto Serif Devanagari';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/notoserifdevanagari-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Noto Serif Devanagari';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/notoserifdevanagari-600-devanagari.woff2') format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;}
@font-face{font-family:'Noto Serif Devanagari';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/notoserifdevanagari-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Noto Serif Devanagari';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/notoserifdevanagari-700-devanagari.woff2') format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;}
@font-face{font-family:'Noto Serif Devanagari';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/notoserifdevanagari-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/manrope-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/manrope-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* =====================================================================
   Jalgaon District ITSM — public landing, Collector Office reference
   layout (2026-10-13, owner-provided images).
   Deep forest green + restrained gold, building-photo hero, light
   services workspace, dark institutional footer. Zero blue. No slogans.
   Marathi-first; English via client-side toggle (landing.js).
   ===================================================================== */
:root {
  --forest-950: #07150f;
  --forest-900: #0a1f18;
  --forest-800: #0f2e22;
  --forest-700: #14532d;
  --forest-600: #1d6b3a;
  --gold: #d9a441;
  --gold-pale: #f0cf8b;
  --ink: #12281c;
  --text: #2a3d32;
  --muted: #57685c;            /* retune 2026-10-23: calmer, cooler */
  --line: #dfe7df;
  --paper: #f9f8f5;            /* retune 2026-10-23: warmer-neutral */
  --card: #ffffff;
  /* Motion tokens (2026-10-23): the same scale as the staff shell
     (design-v2.css / theme.css) — JS (landing.js GSAP + count-ups)
     uses matching durations (.22–.5s power2/power3.out ≈ --ease-out,
     900ms count-ups). */
  --ease-out: cubic-bezier(.22, .8, .3, 1);
  --ease-spring: cubic-bezier(.3, 1.25, .4, 1);
  --dur-fast: .18s;
  --dur-med: .32s;
  --dur-slow: .55s;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--text);
  font-family: "Noto Sans Devanagari", "Manrope", sans-serif;
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--forest-700); outline-offset: 2px; }
.container { width: min(1240px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -5rem; background: var(--gold);
  color: #172017; padding: .7rem 1rem; z-index: 300; border-radius: 4px; font-weight: 700; }
.skip:focus { top: 1rem; }
.cms-announce { background: #fdf0d5; color: #5a440e; text-align: center;
  padding: .6rem 1rem; font-size: .9rem; font-weight: 600; }
/* Flash messages on the landing (post-logout destination, 2026-10-23):
   same class contract as base.html (.flashes/.flash-*), landing colours. */
.lnd-flashes { width: min(1240px, 100% - 32px); margin: 14px auto 0; }
.lnd-flashes .flash { border-radius: 10px; padding: .75rem 1rem; font-weight: 600;
  font-size: .95rem; border: 1px solid transparent; margin-bottom: .5rem; }
.lnd-flashes .flash-success { background: #e7f4e4; color: #14532d;
  border-color: #bcd8b4; }
.lnd-flashes .flash-error { background: #fdecec; color: #8c1d18;
  border-color: #f2c1bd; }
.lnd-flashes .flash-warning { background: #fdf0d5; color: #5a440e;
  border-color: #ecd9a0; }
.lnd-flashes .flash-info { background: #eef4ea; color: #1c2b22;
  border-color: #cfdcc9; }
.seal { width: 46px; height: 46px; flex: 0 0 auto; color: var(--gold-pale); }

/* ================= Header ================= */
.lnd-header { position: sticky; top: 0; z-index: 100; background: var(--forest-900);
  color: #fff; border-bottom: 2px solid var(--gold);
  box-shadow: 0 2px 14px rgba(0,0,0,.3); }
.lnd-header-inner { display: flex; align-items: center; gap: 18px; min-height: 58px;
  padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
/* The brand never shrinks (2026-10-23 fix): its nowrap lines used to
   overflow the squeezed brand box and collide with the first nav row. */
.lnd-brand { flex: 0 0 auto; }
.lnd-nav { min-width: 0; }
.lnd-nav-toggle { display: none; border: 0; background: transparent; color: #fff;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 8px; cursor: pointer; flex: 0 0 auto; }
.lnd-nav-toggle svg { width: 22px; height: 22px; }
.lnd-nav-toggle:hover { background: rgba(255,255,255,.12); }
.lnd-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; min-height: 44px; }
.lnd-brand-copy { display: grid; gap: 0; line-height: 1.25; min-width: 0; }
.lnd-brand-mr { font-size: 1.02rem; font-weight: 700; white-space: nowrap; }
.lnd-brand-en { font-family: "Manrope", sans-serif; font-size: .56rem; font-weight: 700;
  letter-spacing: .16em; color: var(--gold-pale); white-space: nowrap; }
.lnd-brand-sub { font-size: .66rem; color: rgba(255,255,255,.8); white-space: nowrap; }
.lnd-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.lnd-nav-link { color: rgba(255,255,255,.88); text-decoration: none; font-size: .84rem;
  font-weight: 600; padding: 7px 10px; border-radius: 999px; border: 0;
  min-height: 44px;
  background: transparent; cursor: pointer; display: inline-flex; align-items: center;
  gap: 4px; white-space: nowrap; }
.lnd-nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.lnd-nav-link.active { background: var(--gold); color: #172017; font-weight: 700; }
.lnd-more { position: relative; }
.lnd-more-menu { position: absolute; left: 0; top: calc(100% + 8px); min-width: 230px;
  padding: 6px; z-index: 120; display: none; background: #fff; border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.lnd-more:hover .lnd-more-menu, .lnd-more:focus-within .lnd-more-menu { display: block; }
.lnd-more-menu a { display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--text); font-size: .86rem; font-weight: 600; text-decoration: none; }
.lnd-more-menu a:hover { background: #f3f5f2; color: var(--forest-700); }
.lnd-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lnd-search-btn { border: 0; background: transparent; color: #fff; width: 44px;
  height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; }
.lnd-search-btn:hover { background: rgba(255,255,255,.12); }
.lnd-search-btn svg { width: 20px; height: 20px; }
.lang-switch { display: flex; background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 2px; }
.lang-switch button { border: 0; background: transparent; color: rgba(255,255,255,.85);
  font-size: .74rem; font-weight: 700; padding: 8px 12px; border-radius: 999px;
  cursor: pointer; min-height: 44px; }
.lang-switch button[aria-pressed="true"] { background: var(--gold); color: #172017; }
.login-menu { position: relative; }
.lnd-login-btn { display: inline-flex; align-items: center; gap: 8px; border: 0;
  background: var(--gold); color: #172017; font-weight: 700; font-size: .84rem;
  min-height: 44px; padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.lnd-login-btn svg { width: 17px; height: 17px; }
.lnd-login-btn:hover { filter: brightness(1.07); }
/* Glass menus (2026-10-23, Jitendra 16:38 — plain white menu panels
   banned site-wide): the login dropdown and the mega-menu panel use
   the same frosted recipe as the login glass — light pista/white
   frost over the dark forest header, dark ink text (contrast > 9:1
   on the composite, measured in the dashboard-v2 audit). Fallback:
   near-opaque tinted white when backdrop-filter is unsupported. */
.login-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px;
  padding: 6px; z-index: 120; display: none; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,.94),
    rgba(240,248,236,.90));
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 24px 48px rgba(3,12,7,.35),
    inset 0 1px 0 rgba(255,255,255,.85); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .login-dropdown, .mega-panel, .gsuggest { background: #f2f8ee; }
  html.lnd-js .svc-panel.open .svc-panel-inner { background: #f4f9f1; }
}
.login-menu:hover .login-dropdown, .login-menu:focus-within .login-dropdown { display: block; }
.login-dropdown a { display: block; padding: 10px 12px; border-radius: 8px;
  color: var(--text); font-size: .88rem; font-weight: 600; text-decoration: none; }
.login-dropdown a:hover { background: #f3f5f2; color: var(--forest-700); }

/* ================= Hero (Design V2 cinematic) =================
   Real Collector Office photo as a parallax depth layer; entrance
   choreography is GSAP-driven (landing.js, transform/opacity only,
   gsap.matchMedia + prefers-reduced-motion). With JS off the hero is
   fully visible and static — progressive enhancement. */
.lnd-hero { position: relative; color: #fff; overflow: hidden;
  background: var(--forest-950); }
.lnd-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.lnd-hero-photo { width: 100%; height: 118%; object-fit: cover;
  object-position: center 38%; display: block; will-change: transform; }
.lnd-hero-scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(7,21,15,.94) 0%, rgba(7,21,15,.82) 40%,
    rgba(7,21,15,.45) 66%, rgba(7,21,15,.62) 100%); }
.lnd-hero-inner { position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0, 1fr) 360px; gap: 28px;
  align-items: center; min-height: min(68vh, 560px);
  padding-top: 56px; padding-bottom: 76px; }
.lnd-hero-copy { flex: 1 1 640px; min-width: 0; max-width: 720px; }
.lnd-hero h1 { margin: 0; font-family: "Noto Serif Devanagari", "Noto Sans Devanagari", serif;
  font-size: clamp(1.8rem, 3.8vw, 2.7rem); line-height: 1.22; font-weight: 700; }
.ht-line { display: block; }
.lnd-hero h1 .gold { color: var(--gold-pale); font-size: .78em; margin-top: 6px; }
.lnd-hero-sub { margin: 16px 0 0; max-width: 620px; font-size: 1rem; color: #dbe8de; }
.hero-banner { margin-top: 18px; max-width: 640px; }
.hero-banner img { width: 100%; height: auto; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25); display: block; }
.lnd-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cta { display: inline-flex; align-items: center; gap: 9px; min-height: 46px;
  padding: 11px 20px; border-radius: 999px; font-size: .92rem; font-weight: 700;
  text-decoration: none; }
.cta svg { width: 18px; height: 18px; }
.cta-gold { background: var(--gold); color: #172017; }
.cta-gold:hover { filter: brightness(1.07); }
.cta-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.75); }
.cta-outline:hover { background: rgba(255,255,255,.12); }
/* Global stat chips REMOVED 2026-10-23 (Jitendra: aggregate counters
   are "बकवास" on a landing page). Live figures live only on the
   per-system pranali cards below. */
.tint-mint { background: #e2f2e8; color: #1d7a4d; }
.tint-peach { background: #fdeeda; color: #b35c10; }
.tint-slate { background: #e8edf2; color: #3d5a73; }
.tint-rose { background: #fde8e8; color: #c9402e; }
.tint-amber { background: #fdf0d5; color: #8a6414; }
.tint-purple { background: #f0eaf9; color: #6b4fa0; }
.tint-cyan { background: #e0f4f6; color: #0f6d7e; }

/* ============ Pranali strip (per-system entry + own KPI) ============
   Overlaps the hero's lower edge; white cards on the warm paper
   ground. Each card is ONE link to the system's working entry and
   features only that system's own live figure. */
.lnd-systems { position: relative; z-index: 3; /* margin-top stays 0:
  item-F construction (hero padding-bottom carries the clearance);
  the -38px overlap is banned — it hid the hero CTAs/panel. */
  background: linear-gradient(180deg, rgba(233, 244, 227, 0.85),
    rgba(255, 255, 255, 0) 120px); }
.sys-title { margin: 0 0 14px; font-size: 1.15rem; font-weight: 700;
  color: var(--ink); }
.sys-grid { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; }
.sys-card { display: flex; align-items: center; gap: 13px;
  flex: 0 1 calc(25% - 11px); /* 4 per row; the 3-card last row centres
  as a group (2026-10-24 placing pass) instead of trailing a gap */
  /* GLASS KPI CARDS (2026-10-24, Jitendra): transparent glass-type,
     never flat white — translucent + blur + light border, so the
     strip reads as glass over the page. Figures stay the live KPIs
     from routes_dashboard._landing_system_cards. */
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px; padding: 16px; text-decoration: none;
  color: var(--ink); box-shadow: 0 10px 26px rgba(10, 31, 24, .10);
  transition: box-shadow .2s ease, border-color .2s ease; }
.sys-card:hover { border-color: #bcd3bd;
  box-shadow: 0 14px 30px rgba(10, 31, 24, .14); }
.sys-ic { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; }
.sys-ic svg { width: 25px; height: 25px; }
.sys-body { display: grid; gap: 1px; min-width: 0; }
.sys-name { font-weight: 700; font-size: .98rem; line-height: 1.3; }
.sys-benefit { font-size: .78rem; color: var(--muted); font-weight: 600;
  line-height: 1.4; }
.sys-kpi { font-size: .82rem; color: var(--muted); font-weight: 600; }
.sys-kpi .sys-num { font-size: 1.3rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; vertical-align: -2px; }
.sys-sub { font-size: .78rem; color: var(--muted); font-weight: 600; }
.sys-sub strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.sys-go { margin-left: auto; color: var(--forest-600); font-weight: 700;
  font-size: 1.05rem; flex: 0 0 auto; }

/* ================= Services (grouped sections) ================= */
.lnd-services { padding: 44px 0 8px; }
.lnd-sec-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; }
.lnd-sec-head h2 { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--ink); }
.lnd-sec-sub { margin: 5px 0 0; color: var(--muted); font-size: .92rem; }
/* The old .lnd-filter bar + stacked .svc-group bands were replaced
   2026-10-23 (Jitendra 16:41) by the Google-style search pill, the
   category bullet buttons and the group popup panels — see the final
   section of this file. Group identity (one accent colour per group)
   is unchanged and now also drives the buttons, panels and the
   suggestion rows via the shared [data-group] palette below. */
.svc-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.svc-group-title { margin: 0; font-size: 1.18rem; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.svc-group-title::before { content: ""; width: 10px; height: 10px; border-radius: 3px;
  background: var(--grp, var(--forest-700)); flex: 0 0 auto; }
.grp-count { font-size: .78rem; font-weight: 700; color: var(--grp, var(--forest-700));
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.svc-group-rule { flex: 1; height: 1px; background: var(--line); }
.svc-group[data-group="eOffice"], .svc-panel[data-group="eOffice"],
.svc-cat-btn[data-group="eOffice"], .gsuggest-row[data-group="eOffice"] { --grp: #1d7a4d; }
.svc-group[data-group="Hardware"], .svc-panel[data-group="Hardware"],
.svc-cat-btn[data-group="Hardware"], .gsuggest-row[data-group="Hardware"] { --grp: #b23a2e; }
.svc-group[data-group="Network"], .svc-panel[data-group="Network"],
.svc-cat-btn[data-group="Network"], .gsuggest-row[data-group="Network"] { --grp: #5f4b96; }
.svc-group[data-group="Software"], .svc-panel[data-group="Software"],
.svc-cat-btn[data-group="Software"], .gsuggest-row[data-group="Software"] { --grp: #106576; }
.svc-group[data-group="Security"], .svc-panel[data-group="Security"],
.svc-cat-btn[data-group="Security"], .gsuggest-row[data-group="Security"] { --grp: #a55a14; }
.lnd-service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; perspective: 1000px; }
.lnd-card { display: flex; gap: 13px; align-items: flex-start; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  text-decoration: none; transition: box-shadow .18s ease, border-color .18s ease;
  transform-style: preserve-3d; }
.lnd-card:hover { border-color: #c8d2cc;
  box-shadow: 0 8px 20px rgba(18,40,28,.08); }
/* Hover lift only when GSAP tilt is not driving transforms. */
html:not(.gsap-on) .lnd-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
html:not(.gsap-on) .lnd-card:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  html:not(.gsap-on) .lnd-card:hover { transform: none; }
}
.lnd-card.is-hidden { display: none; }
.lnd-card-ic { width: 46px; height: 46px; border-radius: 11px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; }
.lnd-card-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.lnd-card-copy strong { font-size: .94rem; color: var(--ink); line-height: 1.35; }
.lnd-card-copy span { font-size: .8rem; color: var(--muted); line-height: 1.45; }
.lnd-card-arrow { color: var(--forest-700); font-weight: 700; flex: 0 0 auto; }

/* Discovery strip removed 2026-10-23 — see landing.html note. */

/* ================= Footer ================= */
.lnd-footer { background: var(--forest-900); color: rgba(255,255,255,.88);
  padding: 32px 0 0; margin-top: 56px; }
.lnd-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px;
  padding-bottom: 24px; }
.lnd-foot-brand { display: flex; gap: 13px; align-items: flex-start; }
.lnd-foot-brand .seal { width: 52px; height: 52px; }
.lnd-foot-brand div { display: grid; gap: 2px; line-height: 1.4; }
.lnd-foot-brand strong { color: #fff; font-size: 1rem; }
.lnd-foot-brand span { font-size: .8rem; color: rgba(255,255,255,.75); }
.lnd-foot-col h3 { margin: 0 0 13px; font-size: .95rem; color: #fff; }
.lnd-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lnd-foot-col li { display: flex; gap: 9px; align-items: flex-start;
  font-size: .86rem; }
.lnd-foot-col li svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px;
  color: var(--gold-pale); }
.lnd-foot-col a { color: rgba(255,255,255,.88); text-decoration: none; }
.lnd-foot-col a:hover { color: #fff; text-decoration: underline; }
.lnd-footer-bottom { border-top: 1px solid rgba(255,255,255,.14);
  padding: 12px 0; display: flex; justify-content: center; gap: 12px;
  font-size: .8rem; color: rgba(255,255,255,.65); text-align: center; }
.lnd-footer-bottom a { color: rgba(255,255,255,.85); text-decoration: none; }
.lnd-footer-bottom a:hover { color: #fff; text-decoration: underline; }
.footer-note { padding: 0 0 18px; font-size: .84rem; color: rgba(255,255,255,.7);
  text-align: center; }

/* ================= Responsive ================= */
/* Header collapse breakpoint = 1199px (Jitendra 2026-10-23, item D):
   below 1200 the header is the mobile bar + hamburger panel, at 1200+
   it is the single-row desktop bar — no in-between ragged state. The
   two CONTENT rules that used to share this block (service grid,
   hero stacking) stay at 1100px in the block right after. */
@media (max-width: 1199px) {
  .lnd-nav { display: none; }
  .lnd-nav-toggle { display: inline-flex; }
  body.lnd-nav-open .lnd-nav { display: flex; position: absolute; left: 0; right: 0;
    top: 100%; flex-direction: column; align-items: stretch; background: var(--forest-900);
    padding: 10px 16px 16px; border-bottom: 2px solid var(--gold); }
  body.lnd-nav-open .lnd-nav-link { padding: 10px 12px; }
  body.lnd-nav-open .lnd-more-menu { position: static; display: none; }
  body.lnd-nav-open .lnd-more:hover .lnd-more-menu,
  body.lnd-nav-open .lnd-more:focus-within .lnd-more-menu { display: block; background: rgba(255,255,255,.06); box-shadow: none; }
  body.lnd-nav-open .lnd-more-menu a { color: #fff; }
}
@media (max-width: 1100px) {
  .lnd-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Hero stacks as: copy → search band → login panel, so the search
     stays high on the image on tablet/mobile instead of sinking
     below the long login panel. */
  .lnd-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .lnd-hero-copy { order: 1; }
  .lnd-hero-panel, .lnd-hero-searchband { min-width: 0; }
  .lnd-hero-searchband { order: 2; }
  .lnd-hero-panel { order: 3; }
}
@media (max-width: 900px) {
  .lnd-footer-grid { grid-template-columns: 1fr 1fr; }
  .lnd-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-card { flex-basis: calc(50% - 7px); }
  /* Showcase: 2 per row, the 5th card centres on its own row. */
  .svc-cats { display: flex; flex-wrap: wrap; justify-content: center; }
  .svc-cat-btn { flex: 0 1 calc(50% - 7px); }
}
@media (max-width: 640px) {
  .lnd-hero-inner { min-height: 0; padding-top: 34px; padding-bottom: 64px; }
  .lnd-hero-scrim { background: linear-gradient(180deg, rgba(7,21,15,.9) 0%, rgba(7,21,15,.78) 55%, rgba(7,21,15,.60) 100%); }
  .svc-group { margin-top: 24px; }
  .svc-group-title { font-size: 1.05rem; }
  .lnd-brand-sub, .lnd-brand-en { display: none; }
  .lnd-brand-mr { font-size: .92rem; }
  .lnd-search-btn { display: none; }
  .sys-card { flex-basis: 100%; }
  .lnd-sec-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .lnd-service-grid { grid-template-columns: 1fr; }
  .lnd-footer-grid { grid-template-columns: 1fr; }
  .lnd-footer-bottom { flex-direction: column; gap: 6px; }
  .cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ================= Mega-menu (2026-10-13, reference) ================= */
.lnd-mega-bar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.lnd-mega-btn { display: inline-flex; align-items: center; gap: 5px; }
.lnd-mega-btn svg { width: 12px; height: 12px; }
.lnd-mega-btn[aria-expanded="true"] { background: var(--gold); color: #172017; }
.mega-ic { display: inline-flex; width: 18px; height: 18px; flex: none;
  vertical-align: -3px; }
.mega-ic svg { width: 100%; height: 100%; }
.lnd-mega-btn .mega-ic, .lnd-nav-link .mega-ic { width: 16px; height: 16px; }
.mega-panel { display: none; position: absolute; left: 12px; right: 12px;
  top: calc(100% + 8px); color: var(--text);
  border-radius: 16px; z-index: 110;
  background: linear-gradient(160deg, rgba(255,255,255,.94),
    rgba(240,248,236,.90));
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 24px 48px rgba(3,12,7,.35),
    inset 0 1px 0 rgba(255,255,255,.85); }
@media (min-width: 1200px) {
  /* Invisible hover bridge across the 8px gap, so moving from a nav
     button into the floating panel never closes it. */
  .mega-panel::before { content: ""; position: absolute; top: -8px;
    left: 0; right: 0; height: 8px; }
}
.lnd-nav:hover .mega-panel, .lnd-nav:focus-within .mega-panel,
.mega-panel.open { display: block; }
.mega-grid { width: min(1240px, 100% - 32px); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 18px; padding: 18px 0 20px; }
.mega-col { min-width: 0; }
.mega-col h3 { margin: 0 0 8px; font-size: .82rem; color: var(--forest-700);
  padding-bottom: 2px; line-height: 1.3; display: flex; align-items: center;
  gap: 7px; }
.mega-col h3 a { color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; }
.mega-col h3 a:hover { text-decoration: underline; }
.mega-col.is-active h3 { background: #eaf4ec; border-radius: 6px 6px 0 0;
  padding-left: 6px; }
.mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mega-col li a { display: block; padding: 6px; font-size: .83rem;
  color: var(--text); text-decoration: none; border-radius: 6px;
  line-height: 1.35; overflow-wrap: break-word; }
.mega-col li a:hover { background: #f3f5f2; color: var(--forest-700); }
@media (max-width: 1199px) {
  .lnd-mega-bar { display: none; }
  .mega-panel { position: static; border-bottom: 0;
    border-top: 1px solid rgba(255,255,255,.18); border-radius: 16px;
    padding: 4px 12px; }
  body.lnd-nav-open .mega-panel { display: block; }
  .mega-grid { grid-template-columns: 1fr; gap: 14px; padding: 14px 0 8px; }
}

/* ============ Login popup — cinematic glass (2026-10-23) ============
   Same frosted-glass recipe as the standalone /login page (see
   templates/auth/login.html): the landing hero stays visible through
   the panel; dark ink on >= .72-alpha white keeps contrast >= 4.5:1.
   Opened by landing.js (GSAP rise/settle; instant under
   prefers-reduced-motion or without JS-libs). */
.login-modal { position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.login-modal[hidden] { display: none; }
.login-modal-backdrop { position: absolute; inset: 0;
  background: rgba(7, 21, 15, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.login-modal-panel { position: relative; width: min(430px, 100%);
  max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 20px; padding: 30px 30px 24px; color: var(--ink);
  background: linear-gradient(155deg, rgba(255,255,255,.88),
    rgba(255,255,255,.78) 55%, rgba(244,250,241,.74));
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 30px 70px rgba(3, 12, 7, .45),
    inset 0 1px 0 rgba(255,255,255,.85); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .login-modal-panel { background: rgba(255,255,255,.97); }
}
.login-modal-panel::before { content: ""; position: absolute; top: 0;
  left: 0; right: 0; height: 4px; border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, #f4901e 0 33%, #f7f3ea 33% 66%,
    #1d7a4d 66% 100%); }
.login-modal-x { position: absolute; top: 8px; right: 8px; width: 44px;
  height: 44px; border: 0; background: transparent; color: var(--muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 12px; }
.login-modal-x:hover { background: rgba(20, 83, 45, .08); color: var(--ink); }
.lm-brand { display: flex; gap: 13px; align-items: center; }
.lm-seal { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
  background: var(--forest-700); color: #fff; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; letter-spacing: .02em; }
.lm-brand h2 { margin: 0; font-size: 1.3rem; color: var(--ink); }
.lm-brand p { margin: 2px 0 0; font-size: .84rem; color: var(--muted); }
.lm-form { display: grid; gap: 13px; margin-top: 18px; }
.lm-field { display: grid; gap: 6px; }
.lm-field label { font-size: .86rem; font-weight: 700; color: var(--ink); }
.lm-field input { width: 100%; min-height: 52px; padding: 12px 14px;
  border-radius: 12px; font: inherit; color: var(--ink);
  background: rgba(255,255,255,.9); border: 1px solid rgba(28,43,34,.22); }
.lm-field input:focus { background: #fff; border-color: var(--forest-600);
  outline: 3px solid rgba(29, 122, 77, .22); outline-offset: 0; }
.lm-pwwrap { position: relative; }
.lm-pwwrap input { padding-right: 52px; }
.lm-eye { position: absolute; right: 5px; top: 50%;
  transform: translateY(-50%); width: 44px; height: 44px; border: 0;
  background: transparent; color: var(--muted); cursor: pointer;
  border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; }
.lm-eye svg { width: 20px; height: 20px; }
.lm-submit { width: 100%; min-height: 52px; border: 0; border-radius: 13px;
  background: linear-gradient(90deg, #4a1410, #14532d); color: #fff;
  font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 4px;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
.lm-submit:hover { filter: brightness(1.08); }
.lm-forgot { margin: 2px 0 0; text-align: right; }
.lm-forgot a, .lm-full a { color: var(--forest-700); font-weight: 700;
  font-size: .85rem; text-decoration: none; }
.lm-forgot a:hover, .lm-full a:hover { text-decoration: underline; }
.lm-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px;
  color: var(--muted); font-size: .8rem; font-weight: 600; }
.lm-or::before, .lm-or::after { content: ""; flex: 1; height: 1px;
  background: rgba(20, 83, 45, .22); }
.lm-google { display: flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 50px; border-radius: 13px;
  background: rgba(255,255,255,.9); border: 1px solid rgba(28,43,34,.16);
  color: var(--ink); font-weight: 700; text-decoration: none; }
.lm-google:hover { background: #fff; }
.lm-note { margin: 16px 0 0; padding: 11px 13px; border-radius: 10px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(28,43,34,.12);
  font-size: .86rem; color: var(--text); }
.lm-full { margin: 14px 0 0; text-align: center; }
body.login-modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .login-modal { padding: 0; align-items: flex-end; }
  .login-modal-panel { width: 100%; max-height: 94dvh;
    border-radius: 20px 20px 0 0; padding: 26px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .login-modal-panel::before { border-radius: 20px 20px 0 0; }
}

/* ============ FINAL richness layer (2026-10-23 bar-raise) ============
   Craft pass under Jitendra's lock mandate: layered hero (photo +
   depth fade + floating glass panel), premium type scale, medallion
   system cards with per-system accent identity, coloured group
   bands. Content law unchanged — no aggregate counters, no invented
   stats, no slogans; the only live elements are real per-system
   figures and the real IST clock. */
.lnd-hero h1 { font-size: clamp(2rem, 4.2vw, 3.05rem); }
.lnd-hero::after { content: ""; position: absolute; left: 0; right: 0;
  bottom: 0; height: 120px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(249,248,245,0),
    rgba(249,248,245,.55)); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 16px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(240,207,139,.55); color: var(--gold-pale);
  background: rgba(7,21,15,.38); font-size: .78rem; font-weight: 700;
  letter-spacing: .05em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.eb-dot { width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(217,164,65,.25); }

/* Floating glass quick panel (dark glass over the photo). */
.lnd-hero-panel { flex: 0 1 322px; min-width: 280px; margin-left: auto;
  border-radius: 18px; padding: 20px; color: #fff;
  background: linear-gradient(160deg, rgba(10,31,24,.55),
    rgba(10,31,24,.38));
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 24px 50px rgba(3,12,7,.35),
    inset 0 1px 0 rgba(255,255,255,.25); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .lnd-hero-panel { background: rgba(10,31,24,.88); }
}
.hp-clock { display: grid; gap: 1px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.18); }
.hp-clock-label { font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; color: var(--gold-pale);
  text-transform: uppercase; }
.hp-time { font-size: 2rem; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.hp-date { font-size: .86rem; color: rgba(255,255,255,.82); }
.hp-rows { display: grid; margin-top: 8px; }
.hp-row { display: flex; align-items: center; gap: 11px;
  padding: 11px 6px; min-height: 44px; color: #fff;
  text-decoration: none; font-weight: 600; font-size: .93rem;
  border-radius: 10px; transition: background .18s ease; }
.hp-row + .hp-row { border-top: 1px solid rgba(255,255,255,.1); }
.hp-row svg { width: 19px; height: 19px; color: var(--gold-pale);
  flex: 0 0 auto; }
.hp-row:hover { background: rgba(255,255,255,.09); }
.hp-arrow { margin-left: auto; color: var(--gold-pale);
  transition: transform .18s ease; }
.hp-row:hover .hp-arrow { transform: translateX(3px); }

/* System cards: medallions, accent identity, numeral presence. */
.sys-title { position: relative; padding-bottom: 9px; }
.sys-title::after { content: ""; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--forest-600)); }
.sys-card { position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease,
    border-color .2s ease; }
.sys-card::before { content: ""; position: absolute; top: 0; left: 0;
  right: 0; height: 3px; background: var(--acc, var(--forest-600)); }
.sys-card:hover { transform: translateY(-3px); }
.sys-ic { width: 52px; height: 52px; border-radius: 14px;
  box-shadow: inset 0 0 0 1.5px rgba(18,40,28,.08),
    0 4px 10px rgba(18,40,28,.08); }
.sys-ic svg { width: 27px; height: 27px; }
.sys-name { font-size: 1.02rem; }
.sys-kpi .sys-num { font-size: 1.62rem; color: var(--acc, var(--ink)); }
.sys-go { transition: transform .18s ease; }
.sys-card:hover .sys-go { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .sys-card:hover { transform: none; }
  .sys-card:hover .sys-go, .hp-row:hover .hp-arrow { transform: none; }
}

/* Categorised sections: coloured group identity bands. */
.svc-group-head { padding: 10px 14px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--grp, #14532d) 6%, #fff);
  border-color: color-mix(in srgb, var(--grp, #14532d) 18%, #fff); }
.svc-group-rule { background: color-mix(in srgb,
  var(--grp, #14532d) 25%, transparent); }
.lnd-sec-head h2 { position: relative; padding-bottom: 9px; }
.lnd-sec-head h2::after { content: ""; position: absolute; left: 0;
  bottom: 0; width: 46px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--forest-600)); }
.lnd-card-ic { box-shadow: inset 0 0 0 1.5px rgba(18,40,28,.07),
  0 3px 8px rgba(18,40,28,.06); }
.svc-panel .lnd-card:hover { border-color: var(--grp, #bcd3bd); }

.lnd-footer { border-top: 3px solid var(--gold); }

@media (max-width: 1100px) {
  .lnd-hero-panel { flex: none; width: 100%; min-width: 0;
    margin-left: 0; }
}
@media (max-width: 640px) {
  .hp-time { font-size: 1.55rem; }
  .lnd-hero-panel { padding: 16px; }
  .hero-eyebrow { font-size: .72rem; }
}

/* ============ V3 CRAFT ELEVATION (2026-10-23) ============
   Raises the LOCKED landing to the approved V3 reference
   (dash-proto/concept-landing-v3): rich serif typography with a
   letterspaced kicker, gold-gradient hero line + warm glow,
   gradient gold login pill, hero glass panel carrying today's real
   per-system figures, and the categorised services as a SHOWCASE —
   full-width tinted group bands with medallion headers and elevated
   service tiles. Structure and content law unchanged: one catalog,
   real figures only, no slogans. Group order: eOffice → Software →
   Network → Hardware → Security (Jitendra, 2026-10-23 09:27). */

/* Group identity palette (concept): deepened, one colour per group.
   Applies to the band-era headers (inside the popups now) AND to the
   category buttons, popup panels and suggestion rows (2026-10-23). */
.svc-group[data-group="eOffice"], .svc-panel[data-group="eOffice"],
.svc-cat-btn[data-group="eOffice"], .gsuggest-row[data-group="eOffice"] { --grp: #14755c; }
.svc-group[data-group="Software"], .svc-panel[data-group="Software"],
.svc-cat-btn[data-group="Software"], .gsuggest-row[data-group="Software"] { --grp: #6a3d9a; }
.svc-group[data-group="Network"], .svc-panel[data-group="Network"],
.svc-cat-btn[data-group="Network"], .gsuggest-row[data-group="Network"] { --grp: #1f6e8c; }
.svc-group[data-group="Hardware"], .svc-panel[data-group="Hardware"],
.svc-cat-btn[data-group="Hardware"], .gsuggest-row[data-group="Hardware"] { --grp: #2b4c9a; }
.svc-group[data-group="Security"], .svc-panel[data-group="Security"],
.svc-cat-btn[data-group="Security"], .gsuggest-row[data-group="Security"] { --grp: #a93226; }

/* Hero richness: warm gold glow + gradient second headline line. */
.lnd-hero::before { content: ""; position: absolute; z-index: 1;
  width: 620px; height: 620px; border-radius: 50%; top: -230px;
  right: -100px; pointer-events: none;
  background: radial-gradient(circle, rgba(242,197,114,.20),
    rgba(242,197,114,0) 65%); }
.lnd-hero h1 .gold { color: var(--gold-pale);
  background: linear-gradient(92deg, #f6d488 0%, #eec27a 45%,
    #e9a13b 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }

/* Gold login pill: gradient + lift (was flat gold). */
.lnd-login-btn { background: linear-gradient(135deg, #f0b95a, #e9a13b);
  box-shadow: 0 10px 22px rgba(233,161,59,.35); }

/* Rich typography: serif display for section + group titles. */
.lnd-sec-head h2, .sys-title, .svc-group-title {
  font-family: "Noto Serif Devanagari", "Noto Sans Devanagari", serif; }
.lnd-sec-head h2 { font-size: 1.9rem; }
.lnd-sec-kicker { margin: 0 0 5px; font-size: .72rem; font-weight: 800;
  letter-spacing: .24em; color: #9a6a14; }

/* Hero panel rows now carry today's real per-system figures. */
.hp-row { justify-content: space-between; gap: 14px; }
.hp-val { color: var(--gold-pale); font-size: 1.12rem; font-weight: 800;
  font-variant-numeric: tabular-nums; }

/* ---- Categorised services zone (bands retired 2026-10-23) ----
   The full-width tinted bands became the popup panels' stacked
   no-JS presentation (final section of this file); the services
   section itself now ends after the search + buttons zone. */
.lnd-services { padding-bottom: 64px; }
.lnd-footer { margin-top: 0; }

/* Band header: gradient medallion + गट index + serif title + count. */
.svc-band-head { display: flex; align-items: center; gap: 17px;
  margin-bottom: 22px; }
.svc-band-med { width: 58px; height: 58px; border-radius: 18px;
  flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; color: #fff;
  background: linear-gradient(140deg, var(--grp),
    color-mix(in srgb, var(--grp) 62%, #10281a));
  box-shadow: 0 12px 24px rgba(13,46,28,.16),
    inset 0 0 0 1.5px rgba(255,255,255,.28); }
.svc-band-med svg { width: 27px; height: 27px; }
.svc-band-titles { display: grid; gap: 1px; min-width: 0; }
.svc-band-idx { font-size: .68rem; font-weight: 800;
  letter-spacing: .18em; color: var(--grp); }
.svc-group-title { font-size: 1.5rem; line-height: 1.25; }
.svc-group-title::before { content: none; }
.svc-band-sub { margin: 2px 0 0; font-size: .86rem; color: var(--muted); }
.grp-count { margin-left: auto; display: grid; text-align: right;
  background: transparent; border: 0; padding: 0; border-radius: 0;
  font-size: 1.75rem; font-weight: 800; line-height: 1.05;
  color: var(--grp); font-variant-numeric: tabular-nums; }
.grp-count-label { font-size: .72rem; font-weight: 600;
  color: var(--muted); letter-spacing: .04em; }

/* Service TILES: elevated vertical cards, group-tinted icon tile,
   dashed meta row with a type tag + circular group-colour arrow. */
.lnd-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px; }
.lnd-card { flex-direction: column; align-items: stretch; gap: 11px;
  border-radius: 16px; padding: 18px 18px 14px;
  box-shadow: 0 10px 24px rgba(13,46,28,.07); }
.lnd-card:hover { box-shadow: 0 16px 32px rgba(13,46,28,.12); }
.lnd-card-ic { width: 44px; height: 44px; border-radius: 13px;
  background: color-mix(in srgb, var(--grp) 12%, #fff);
  color: var(--grp);
  box-shadow: inset 0 0 0 1.5px
    color-mix(in srgb, var(--grp) 16%, #fff); }
.lnd-card-copy strong { font-size: 1rem; }
@media (min-width: 641px) {
  .lnd-card-copy span { min-height: 2.9em; }
}
.lnd-card-meta { display: flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 11px;
  border-top: 1px dashed color-mix(in srgb, var(--grp) 22%, #fff); }
.lnd-card-tag { font-size: .7rem; font-weight: 700; padding: 4px 11px;
  border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--grp) 10%, #fff);
  color: var(--grp); }
.lnd-card-arrow { margin-left: auto; width: 28px; height: 28px;
  flex: 0 0 auto; border-radius: 50%; background: var(--grp);
  color: #fff; display: inline-flex; align-items: center;
  justify-content: center; font-size: .85rem; line-height: 1; }

@media (max-width: 1100px) {
  .lnd-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lnd-service-grid { grid-template-columns: 1fr; }
  .svc-panel { padding: 26px 0 30px; }
  .svc-band-head { gap: 12px; margin-bottom: 16px; }
  .svc-band-med { width: 48px; height: 48px; border-radius: 14px; }
  .svc-band-med svg { width: 23px; height: 23px; }
  .svc-group-title { font-size: 1.22rem; }
  .grp-count { font-size: 1.35rem; }
}

/* ============ Mega-menu TABS + living background (2026-10-23) ======
   Jitendra reopened the locked landing for three points only:
   (1) the mega-menu shows ONE group at a time — tabs on desktop,
       accordion on mobile — instead of all 53 links at once;
   (2) a dignified living background below the hero;
   (3) >=44px tap targets inside the opened mobile menu.
   Every show/hide rule below is scoped under html.lnd-js (the class
   landing.js adds): with JS off, the panel renders all columns in
   the grid exactly as before — progressive enhancement. */

/* ---- (2) Living background ---------------------------------------
   Fixed ambient layer behind <main>: two soft radial washes in the
   pista/forest family (+ a restrained gold breath) drift VERY
   slowly (transform only), under a faint grid at 5% opacity. The
   layer sits at z-index:-1 inside main's stacking context, so the
   hero photo, the pranali cards and the tinted service bands keep
   their own identities on top of it. Static when reduced motion. */
body > main { position: relative; z-index: 1; }
.lnd-ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none; }
.lnd-ambient::before { content: ""; position: absolute; inset: -16%;
  background:
    radial-gradient(560px 380px at 18% 26%, rgba(29, 122, 77, .13), rgba(29, 122, 77, 0) 62%),
    radial-gradient(680px 460px at 82% 58%, rgba(217, 164, 65, .10), rgba(217, 164, 65, 0) 62%),
    radial-gradient(760px 520px at 55% 96%, rgba(20, 83, 45, .10), rgba(20, 83, 45, 0) 62%);
  animation: lnd-drift 48s ease-in-out infinite alternate;
  will-change: transform; }
.lnd-ambient::after { content: ""; position: absolute; inset: 0; opacity: .05;
  background-image:
    linear-gradient(rgba(20, 83, 45, .55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 83, 45, .55) 1px, transparent 1px);
  background-size: 54px 54px; }
@keyframes lnd-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .lnd-ambient::before { animation: none; }
}

/* ---- Panel header count chip (all viewports, JS or not) ---------- */
.mega-count { margin-left: auto; flex: 0 0 auto; min-width: 30px; height: 30px;
  padding: 0 8px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-size: .85rem;
  font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--mega-c, var(--forest-700)); background: #edf3ed;
  background: color-mix(in srgb, var(--mega-c, #14532d) 12%, #fff); }

/* ---- (1a) Desktop tabs: one group panel at a time ---------------- */
@media (min-width: 1200px) {
  html.lnd-js .mega-grid { display: block; padding: 20px 0 22px; }
  html.lnd-js .mega-col { display: none; }
  html.lnd-js .mega-col.is-active { display: block; }
  html.lnd-js .mega-col.is-active h3 { background: transparent;
    padding-left: 0; }
  html.lnd-js .mega-col h3 { font-size: 1.02rem; margin: 0 0 12px;
    padding-bottom: 12px; gap: 12px; line-height: 1.35;
    border-bottom: 2px solid var(--mega-c, var(--forest-700)); }
  html.lnd-js .mega-col h3 .mega-ic { width: 42px; height: 42px;
    border-radius: 12px; align-items: center; justify-content: center;
    background: #edf3ed;
    background: color-mix(in srgb, var(--mega-c, #14532d) 13%, #fff); }
  html.lnd-js .mega-col h3 .mega-ic svg { width: 22px; height: 22px; }
  html.lnd-js .mega-col ul { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 3px 20px; }
  html.lnd-js .mega-col li a { padding: 9px 10px; font-size: .9rem; }
  html.lnd-js .mega-col li a:hover { background: #f3f5f2;
    background: color-mix(in srgb, var(--mega-c, #14532d) 9%, #fff); }
  .lnd-mega-btn[aria-selected="true"] { background: var(--gold);
    color: #172017; }
}

/* ---- (1b) + (3) Mobile accordion, one group open, >=44px targets - */
@media (max-width: 1199px) {
  body.lnd-nav-open .lnd-nav-link { padding: 12px; min-height: 44px;
    display: flex; align-items: center; }
  html.lnd-js .mega-grid { gap: 0; padding: 6px 0 10px; }
  html.lnd-js .mega-col { border-top: 1px solid rgba(18, 40, 28, .09); }
  html.lnd-js .mega-col:first-child { border-top: 0; }
  html.lnd-js .mega-col h3 { min-height: 48px; margin: 0; padding: 6px 4px;
    display: flex; align-items: center; gap: 9px; cursor: pointer; }
  html.lnd-js .mega-col h3::after { content: ""; width: 9px; height: 9px;
    flex: 0 0 auto; margin-left: 10px; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; transform: rotate(45deg);
    transition: transform .18s ease; }
  html.lnd-js .mega-col.is-active h3::after { transform: rotate(225deg); }
  html.lnd-js .mega-col ul { display: none; }
  html.lnd-js .mega-col.is-active ul { display: grid; }
  html.lnd-js .mega-col li a { min-height: 44px; padding: 10px 8px;
    display: flex; align-items: center; }
}

/* ================================================================
   2026-10-23 (B / D / F + plain-language strip) — Jitendra's orders:
   B. the hero glass panel is a LOGIN form (markup in landing.html);
   D. the header is ONE clean row at >=1200px and the mobile bar
      below it (the collapse breakpoint moved 1100 -> 1199 above);
   F. the pranali strip NEVER overlaps the hero — the negative
      margin is gone and the hero carries its own bottom padding,
      so the CTAs and the login panel are fully visible at every
      viewport height.
   ================================================================ */

/* ---- (F) hero / strip geometry -------------------------------- */
.lnd-hero { padding-bottom: 56px; }
.lnd-systems { margin-top: 0; }
@media (max-width: 640px) {
  .lnd-hero { padding-bottom: 40px; }
}

/* ---- (B) hero login panel -------------------------------------- */
.hp-panel { flex-basis: 344px; }
.hp-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding-bottom: 13px;
  border-bottom: 1px solid rgba(255,255,255,.16); }
.hp-head-title { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; }
.hp-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--gold); animation: hp-pulse 2.6s ease-in-out infinite; }
@keyframes hp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .hp-dot { animation: none; } }
.hp-panel .hp-clock { display: grid; gap: 0; padding: 0; border: 0;
  text-align: right; }
.hp-panel .hp-time { font-size: 1.02rem; font-weight: 800; line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.hp-panel .hp-date { font-size: .72rem; color: rgba(255,255,255,.78); }
.hp-form { display: grid; gap: 13px; margin-top: 16px; }
.hp-panel .lm-field label { color: rgba(255,255,255,.9); }
.hp-panel .lm-field .lm-label { font-size: .86rem; font-weight: 700;
  color: rgba(255,255,255,.9); }
.hp-benefit { margin: 12px 0 0; font-size: .82rem; line-height: 1.5;
  color: rgba(255,255,255,.78); }
/* ---- Hero system selector: ONE compact dropdown (2026-10-26) -----
   Replaces the 9-tile radio grid, which repeated every system name
   already on the page. Same field name/values, so the server
   allowlist is untouched. The base select style lives in the
   .hp-panel .lm-field select rule below; this adds only a quiet
   custom chevron (inline SVG icon, never emoji) so the control reads
   as one calm field. Native keyboard behaviour + focus ring kept. */
.hp-panel .lm-field select.lm-sysselect { appearance: none;
  -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2b22' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  background-size: 18px 18px; }
.lm-sys-hint { margin: 0; font-size: .76rem; line-height: 1.45;
  color: rgba(255,255,255,.72); }
.hp-panel .lm-field select { width: 100%; min-height: 52px; padding: 12px 14px;
  border-radius: 12px; font: inherit; color: var(--ink);
  background: rgba(255,255,255,.9); border: 1px solid rgba(28,43,34,.22);
  cursor: pointer; }
.hp-panel .lm-field select:focus { background: #fff;
  border-color: var(--forest-600);
  outline: 3px solid rgba(29,122,77,.22); outline-offset: 0; }
.hp-panel .lm-forgot a { color: var(--gold-pale); }
.hp-panel .lm-or { color: rgba(255,255,255,.72); }
.hp-panel .lm-or::before, .hp-panel .lm-or::after {
  background: rgba(255,255,255,.25); }
.hp-panel .lm-note { background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22); color: #fff; }

/* ---- (D) tidy desktop header at >=1200px -------------------------
   Width math (measured): the category bar alone (9 tabs) is ~1027px;
   brand ~267 + tools ~247 + Home ~76 + section links ~198 — a single
   row needs ~1800px at legible sizes, so the header takes TWO
   deliberate rows: brand + tools aligned on row 1, the full category
   bar on row 2 under a hairline. Nothing wraps, nothing is orphaned,
   at any width >=1200. Below 1200 it is the mobile bar (above). */
@media (min-width: 1200px) {
  .lnd-header-inner { flex-wrap: wrap; gap: 0 14px;
    width: min(1560px, 100% - 24px); min-height: 0;
    padding-top: 8px; padding-bottom: 0; }
  .lnd-brand { order: 1; gap: 9px; }
  .seal { width: 40px; height: 40px; }
  .lnd-brand-mr { font-size: .96rem; }
  .lnd-brand-sub { font-size: .62rem; }
  .lnd-tools { order: 2; margin-left: auto; gap: 8px; }
  .lnd-login-btn { padding: 8px 14px; }
  .lnd-nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; gap: 0;
    border-top: 1px solid rgba(255,255,255,.14);
    margin-top: 8px; padding: 5px 0 7px; }
  .lnd-mega-bar { display: flex; align-items: center; flex-wrap: wrap; }
  .lnd-nav-link { font-size: .8rem; padding: 7px 8px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  /* In this band the three section-shortcut links yield to the
     category tabs (targets stay reachable: the tabs themselves, the
     strip below the hero, the footer; the links remain in the
     mobile menu and return at >=1400px where the row has room). */
  .mega-panel ~ .lnd-nav-link { display: none; }
}

/* ---- (3-fix) accordion header anchor fills the 48px row --------- */
@media (max-width: 1199px) {
  html.lnd-js .mega-col h3 a { flex: 1; min-height: 44px;
    display: inline-flex; align-items: center; }
}

/* ================================================================
   SEARCH + CATEGORY POPUPS (2026-10-23, Jitendra 16:41)
   "हे खूप scrolling होईल — category wise BULLET BUTTONS दिले असते,
   user ने त्यावर click केले की त्या related KPI pop up होतील. AND
   SEARCH BOX LIKE GOOGLE SEARCH ENGINE STYLE."
   The services zone is now: ONE Google-style search pill (the
   primary finder, with a glass suggestion list) + five category
   bullet buttons. Each group's tiles live in a panel: a glass popup
   with JS (centred dialog on desktop, bottom sheet on mobile), and
   — because every hide rule is scoped under html.lnd-js — a plainly
   stacked tinted section without JS, so all 34 services stay
   reachable in every mode. Group colours come from the shared
   [data-group] palette above.
   ================================================================ */

/* ---- Google-style search pill ---- */
.lnd-gsearch { position: relative; display: flex; align-items: center;
  gap: 12px; max-width: 780px; margin: 26px auto 0; height: 62px;
  padding: 6px 6px 6px 24px; background: #fff;
  border: 1px solid #d8e2d8; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(13,46,28,.07), 0 14px 34px rgba(13,46,28,.07);
  transition: box-shadow .2s ease, border-color .2s ease; }
.lnd-gsearch:hover, .lnd-gsearch:focus-within { border-color: #b9cdb9;
  box-shadow: 0 3px 8px rgba(13,46,28,.09), 0 20px 44px rgba(13,46,28,.13); }
.lnd-gsearch-ic { color: var(--muted); display: inline-flex; flex: 0 0 auto; }
.lnd-gsearch-ic svg { width: 22px; height: 22px; }
.lnd-gsearch input { flex: 1; min-width: 0; border: 0; outline: none;
  background: transparent; font-size: 1.06rem; color: var(--ink);
  height: 100%; }
.lnd-gsearch input::placeholder { color: var(--muted); }
.lnd-gsearch-btn { flex: 0 0 auto; border: 0; cursor: pointer;
  min-height: 48px; padding: 0 26px; border-radius: 999px;
  font-weight: 700; font-size: .98rem; color: #172017;
  background: linear-gradient(135deg, #f0b95a, #e9a13b);
  box-shadow: 0 8px 18px rgba(233,161,59,.30); }
.lnd-gsearch-btn:hover { filter: brightness(1.06); }

/* ---- Hero search: the same pill, as glass over the hero image ---- */
.lnd-hero .lnd-gsearch { margin: 26px 0 0; max-width: 640px;
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.38);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 18px 40px rgba(3,12,7,.35); }
.lnd-hero .lnd-gsearch:hover, .lnd-hero .lnd-gsearch:focus-within {
  border-color: rgba(255,255,255,.60);
  box-shadow: 0 20px 46px rgba(3,12,7,.42); }
.lnd-hero .lnd-gsearch .lnd-gsearch-ic { color: rgba(255,255,255,.88); }
.lnd-hero .lnd-gsearch input { color: #fff; }
.lnd-hero .lnd-gsearch input::placeholder { color: rgba(255,255,255,.72); }

/* ---- Hero search band: search + system tabs, glass ON the photo ----
   (2026-10-24, Jitendra). The band is its own full-width glass strip
   over the hero image, so the photo shows through the blur behind
   the pill and the tabs — the search never reads as sitting on a
   dark panel. The pill inside keeps the same glass style; its margin
   is centred here (the old below-CTA margin is gone with the move). */
.lnd-hero-searchband { grid-column: 1 / -1; padding: 18px 20px;
  border-radius: 22px; background: rgba(7, 21, 15, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 18px 40px rgba(3, 12, 7, 0.35); }
.lnd-hero .lnd-hero-searchband .lnd-gsearch { margin: 0 auto; max-width: 720px; }
/* ---- Hero search band: ONE quiet quick-link row (2026-10-26) ------
   The colourful system tabs and glass task pills are gone; what
   remains under the pill is a single row of small plain text links
   for the public destinations with no other landing presence.
   Links keep a >=44px touch height via padding. */
.lnd-hero-quicklinks { display: flex; flex-wrap: wrap; gap: 2px 20px;
  align-items: center; justify-content: center; margin-top: 14px; }
.lnd-hero-quicklink { display: inline-flex; align-items: center;
  min-height: 44px; padding: 10px 4px; color: rgba(255,255,255,.88);
  font-size: .9rem; font-weight: 600; text-decoration: none; }
.lnd-hero-quicklink:hover { color: #fff; text-decoration: underline; }
.lnd-hero-quicklink:focus-visible { outline: 3px solid #fff;
  outline-offset: 2px; border-radius: 8px; }
/* Revenue Department official portals (2026-10-24, Jitendra):
   public section between services and the minimal footer. Cards use
   the showcase language (white, bordered, green accent) — this is a
   content section, not an overlay, so flat white cards are correct
   here (the glass law covers menus/overlays). */
.lnd-revenue { padding: 44px 0 8px; }
.lnd-revenue h2 { font-size: 1.35rem; color: var(--forest-900); margin: 0 0 8px; }
.lnd-revenue-sub { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 20px; max-width: 720px; }
.lnd-revenue-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.lnd-revenue-group { font-size: 1.05rem; color: var(--forest-700); margin: 20px 0 10px; }
.lnd-revenue-group:first-of-type { margin-top: 0; }
.rev-search-label { display: block; font-weight: 600; color: var(--forest-900); margin: 0 0 18px; }
.rev-search { display: block; width: 100%; max-width: 520px; margin-top: 6px; padding: 10px 14px; font-size: 1rem; border: 1.5px solid #cfe4c6; border-radius: 999px; background: #fff; color: var(--forest-900); }
.rev-nomatch { color: var(--ink-soft); font-size: 0.95rem; margin: 14px 0; }
@media (min-width: 640px) { .lnd-revenue-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lnd-revenue-grid { grid-template-columns: repeat(3, 1fr); } }
.lnd-revenue-card { display: grid; gap: 4px; background: #fff;
  border: 1px solid var(--line); border-top: 3px solid var(--forest-700);
  border-radius: 14px; padding: 16px 18px; text-decoration: none; color: inherit;
  box-shadow: 0 2px 10px rgba(20, 60, 35, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease; }
.lnd-revenue-card:hover { transform: translateY(-2px); text-decoration: none;
  box-shadow: 0 8px 22px rgba(20, 60, 35, 0.12); }
.lnd-revenue-name { font-weight: 700; color: var(--forest-900); font-size: 1rem; }
.lnd-revenue-desc { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; }
.lnd-revenue-url { font-size: 0.8rem; color: var(--forest-700); font-weight: 600;
  word-break: break-all; }

/* ============ COMPACT HERO (2026-10-25, Jitendra: hero too long,
   search below the fold) ============
   Design (ui-ux-pro-max: mobile-first, no horizontal page scroll,
   44px targets; frontend-design: boldness in one place — the photo
   + search — everything else quiet):
   - Desktop (>1100px): the search band moves into the LEFT column
     under the copy; the login panel spans both rows. Hero height is
     then capped by the panel instead of copy+panel+band stacked.
   - Mobile: copy tightened (smaller H1, tighter gaps), tabs + task
     pills become ONE horizontal scroll row each (never wrapped
     rows), so the band shrinks from ~476px to ~200px.
   - The section's extra bottom padding (56px on top of the inner
     76px) is removed — it was pure dead space.
   Dictated copy (eyebrow, office name, brand line), search
   IDs/hooks, suggestions, fallback route and login function are
   all untouched; this is spacing + placement only. */
.lnd-hero { padding-bottom: 0; }
@media (min-width: 1101px) {
  .lnd-hero-inner { padding-top: 40px; padding-bottom: 48px; }
  .lnd-hero-copy { grid-column: 1; grid-row: 1; }
  .lnd-hero-panel { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .lnd-hero-searchband { grid-column: 1; grid-row: 2; padding: 16px 18px 18px; }
}
@media (max-width: 640px) {
  .lnd-hero-inner { padding-top: 16px; padding-bottom: 32px; }
  .lnd-hero h1 { font-size: 1.65rem; }
  .lnd-hero-sub { margin-top: 10px; }
  .lnd-hero-actions { margin-top: 14px; }
  .cta { min-height: 44px; padding: 9px 14px; font-size: .85rem; }
  .lnd-hero-searchband { padding: 10px 10px 12px; }
}
@media (max-width: 640px) {
  .lnd-hero-searchband { padding: 14px 12px 16px; border-radius: 18px; }
}

/* ---- Suggestion list: glass panel under the pill ---- */
.gsuggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  z-index: 130; padding: 8px; border-radius: 20px;
  max-height: min(430px, 62vh); overflow: auto; text-align: left;
  background: linear-gradient(160deg, rgba(255,255,255,.95),
    rgba(240,248,236,.92));
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 24px 48px rgba(3,12,7,.28),
    inset 0 1px 0 rgba(255,255,255,.85); }
.gsuggest-row { display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 12px; border-radius: 13px;
  text-decoration: none; color: var(--ink); }
.gsuggest-row:hover, .gsuggest-row.is-active {
  background: #eef4ec;
  background: color-mix(in srgb, var(--grp, #14532d) 9%, #fff); }
.gsuggest-ic { width: 38px; height: 38px; border-radius: 11px;
  flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center;
  background: #eef4ec;
  background: color-mix(in srgb, var(--grp, #14532d) 12%, #fff);
  color: var(--grp, var(--forest-700)); }
.gsuggest-ic svg { width: 21px; height: 21px; }
.gsuggest-name { font-weight: 600; font-size: .97rem; line-height: 1.3;
  min-width: 0; }
.gsuggest-grp { margin-left: auto; flex: 0 0 auto; font-size: .74rem;
  font-weight: 700; color: var(--grp, var(--forest-700));
  background: #eef4ec;
  background: color-mix(in srgb, var(--grp, #14532d) 10%, #fff);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.gsuggest-empty { padding: 18px 14px; text-align: center;
  color: var(--muted); font-size: .95rem; }

/* ---- Category showcase cards (2026-10-24: designed showcase,
   not plain rows) ---- */
.svc-cats { display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px; margin-top: 24px; }
.svc-cat-btn { display: flex; flex-direction: column; align-items: center;
  gap: 8px; min-height: 196px; padding: 20px 14px 16px;
  border-radius: 20px; text-align: center;
  background: #fff; cursor: pointer; font: inherit; color: var(--ink);
  border: 1px solid #cfdccf;
  border-color: color-mix(in srgb, var(--grp, #14532d) 32%, #fff);
  box-shadow: 0 8px 20px rgba(13,46,28,.07);
  transition: transform .18s ease, box-shadow .18s ease,
    border-color .18s ease; }
.svc-cat-btn:hover { transform: translateY(-2px);
  border-color: var(--grp, var(--forest-700));
  box-shadow: 0 14px 28px rgba(13,46,28,.12); }
.svc-cat-med { width: 56px; height: 56px; border-radius: 50%;
  flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; color: #fff;
  background: linear-gradient(140deg, var(--grp, #14532d),
    color-mix(in srgb, var(--grp, #14532d) 62%, #10281a));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.svc-cat-med svg { width: 26px; height: 26px; }
.svc-cat-name { font-family: "Noto Serif Devanagari",
    "Noto Sans Devanagari", serif; font-weight: 700;
  font-size: 1.08rem; line-height: 1.25; text-align: center; }
.svc-cat-sub { font-size: .84rem; line-height: 1.5; color: var(--muted);
  font-weight: 500; }
.svc-cat-count { margin-top: auto; min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; font-size: .88rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--grp, var(--forest-700));
  background: #eef4ec;
  background: color-mix(in srgb, var(--grp, #14532d) 12%, #fff); }
@media (prefers-reduced-motion: reduce) {
  .svc-cat-btn:hover { transform: none; }
}

/* ---- Group panels: stacked (no JS) → glass popup (JS) ---- */
.svc-panel { scroll-margin-top: 92px; padding: 34px 0 38px;
  background: #f2f6f0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--grp) 8%, #fff),
    color-mix(in srgb, var(--grp) 3%, #fff)); }
.svc-panel + .svc-panel { border-top: 1px solid rgba(18,40,28,.05); }
/* The × belongs to the popup only — in the stacked no-JS view it
   would be a dead control, so it renders solely inside .open. */
.svc-pop-x { display: none; width: 44px; height: 44px; flex: 0 0 auto;
  margin-left: 10px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 1.35rem; line-height: 1;
  cursor: pointer; align-items: center; justify-content: center; }
.svc-pop-x:hover { border-color: var(--grp, var(--forest-700));
  color: var(--grp, var(--forest-700)); }
.svc-pop-backdrop { position: fixed; inset: 0; z-index: 205;
  background: rgba(4,15,9,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.svc-pop-open { overflow: hidden; }
html.lnd-js .svc-panel { display: none; }
html.lnd-js .svc-panel.open { display: flex; position: fixed; inset: 0;
  z-index: 210; align-items: center; justify-content: center;
  padding: 20px; background: transparent; border-top: 0; }
html.lnd-js .svc-panel.open .svc-panel-inner { position: relative;
  width: 100%; max-width: 1020px; max-height: 88dvh; overflow: auto;
  padding: 26px 30px 30px; border-radius: 22px;
  background: linear-gradient(165deg, rgba(255,255,255,.96),
    color-mix(in srgb, var(--grp, #14532d) 6%, rgba(244,249,241,.94)));
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(255,255,255,.65);
  border-top: 3px solid var(--grp, var(--forest-700));
  box-shadow: 0 30px 70px rgba(3,12,7,.38),
    inset 0 1px 0 rgba(255,255,255,.85); }
html.lnd-js .svc-panel.open .svc-pop-x { display: inline-flex; }

@media (max-width: 640px) {
  .lnd-gsearch { height: 56px; padding-left: 18px; gap: 9px;
    margin-top: 20px; }
  .svc-cat-btn { flex-basis: 100%; min-height: 0; padding: 18px 16px; }
  .lnd-gsearch input { font-size: 1rem; }
  .lnd-gsearch-btn { min-height: 44px; padding: 0 17px;
    font-size: .92rem; }
  .svc-cats { gap: 9px; margin-top: 18px; }
  .svc-cat-btn { flex: 1 1 44%; min-height: 54px;
    padding: 7px 12px 7px 8px; gap: 9px; }
  .svc-cat-med { width: 38px; height: 38px; }
  .svc-cat-name { font-size: .93rem; }
  /* Bottom sheet on mobile. */
  html.lnd-js .svc-panel.open { align-items: flex-end; padding: 0; }
  html.lnd-js .svc-panel.open .svc-panel-inner { max-height: 92dvh;
    border-radius: 22px 22px 0 0; padding: 20px 16px 24px; }
}

/* ================================================================
   MOTION SYSTEM (2026-10-23, Jitendra 17:28: "अजून पण कोणताच
   animation effect नाही आहे — smooth आणि responsive पाहिजे").
   The landing's choreography lives in landing.js (GSAP hero +
   scroll reveals + popup tweens); this section gives every
   CSS-driven surface the same token scale and feel:
   • transitions re-paced on --dur-fast/--dur-med + --ease-out;
   • class-toggled surfaces (mega-menu, suggestion list, header
     dropdowns) ENTER with a keyframe instead of snapping — a
     keyframe restarts whenever display flips back from none, so
     no JS change is needed and no-JS rendering is untouched;
   • press/hover micro-feedback on the search pill, the category
     bullet buttons and the pranali cards.
   Transform + opacity only. prefers-reduced-motion removes every
   animation and every hover transform below.
   ================================================================ */
.sys-card { transition: box-shadow var(--dur-med) var(--ease-out),
  border-color var(--dur-med) var(--ease-out),
  transform var(--dur-med) var(--ease-out); }
.sys-card:hover { transform: translateY(-3px); }
.sys-card:active { transform: translateY(-1px) scale(.99); }
.sys-card:hover .sys-go { transform: translateX(3px); }
.lnd-gsearch { transition: box-shadow var(--dur-med) var(--ease-out),
  border-color var(--dur-med) var(--ease-out); }
.lnd-gsearch-btn { transition: transform var(--dur-fast) var(--ease-out),
  filter var(--dur-fast) var(--ease-out),
  box-shadow var(--dur-fast) var(--ease-out); }
.lnd-gsearch-btn:active { transform: scale(.96); }
.svc-cat-btn { transition: transform var(--dur-fast) var(--ease-out),
  box-shadow var(--dur-fast) var(--ease-out),
  border-color var(--dur-fast) var(--ease-out); }
.svc-cat-btn:active { transform: translateY(0) scale(.97); }
.cta { transition: transform var(--dur-fast) var(--ease-out),
  filter var(--dur-fast) var(--ease-out),
  background var(--dur-fast) var(--ease-out),
  box-shadow var(--dur-fast) var(--ease-out); }
.cta:active { transform: scale(.97); }
.lnd-nav-link, .lnd-mega-btn { transition: background var(--dur-fast)
  var(--ease-out), color var(--dur-fast) var(--ease-out),
  transform var(--dur-fast) var(--ease-out); }
.lnd-mega-btn:active { transform: scale(.96); }
.mega-col li a, .gsuggest-row { transition: background var(--dur-fast)
  var(--ease-out), color var(--dur-fast) var(--ease-out); }

@media (prefers-reduced-motion: no-preference) {
  /* Suggestion list: pops in under the pill (restarts each open). */
  .gsuggest { transform-origin: top center;
    animation: lnd-pop-in var(--dur-fast) var(--ease-out); }
  /* Mega-menu panel + the active group's content. */
  .mega-panel.open { animation: lnd-menu-in var(--dur-med) var(--ease-out); }
  .mega-col.is-active { animation: lnd-fade-rise var(--dur-med) var(--ease-out); }
  /* Header hover dropdowns (login + more). */
  .login-menu:hover .login-dropdown,
  .login-menu:focus-within .login-dropdown,
  .lnd-more:hover .lnd-more-menu,
  .lnd-more:focus-within .lnd-more-menu {
    animation: lnd-menu-in var(--dur-fast) var(--ease-out); }
  @keyframes lnd-pop-in {
    from { opacity: 0; transform: translateY(-6px) scale(.99); }
    to { opacity: 1; transform: none; }
  }
  @keyframes lnd-menu-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes lnd-fade-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sys-card:hover, .sys-card:active, .svc-cat-btn:active,
  .cta:active, .lnd-gsearch-btn:active, .lnd-mega-btn:active {
    transform: none; }
}

/* ---- Login-fit tightening (2026-10-25): hero panel + login popup share
   .lm-* classes, so one spacing pass compacts both. Touch floors kept:
   tiles 44px, inputs/buttons 48px. No behaviour, copy or hook change. ---- */
.lnd-hero-panel { padding: 16px; }
.hp-head { padding-bottom: 4px; }
.hp-benefit { margin: 6px 0 0; line-height: 1.4; }
.lm-form { display: grid; gap: 6px; margin-top: 10px; }
.lm-field { gap: 2px; }
.lm-field label { font-size: .84rem; }
.lm-field input { min-height: 48px; padding: 10px 14px; }
.hp-panel .lm-field select { min-height: 48px; padding: 10px 14px; }
.lm-sys-hint { font-size: .72rem; line-height: 1.35; }
.lm-submit { min-height: 48px; }
.lm-note { margin: 8px 0 0; padding: 4px 12px; }
.lm-forgot { margin: 0; }
@media (min-width: 1101px) {
  /* Wider panel column: long Marathi tile labels wrap to fewer lines. */
  .lnd-hero-inner { grid-template-columns: minmax(0, 1fr) 440px;
    padding-top: 20px; }
  .lnd-hero-panel { padding: 10px 16px; }
  .hp-panel .hp-time { font-size: .95rem; }
}

/* =====================================================================
   LANDING MOTION PATTERNS (2026-10-25 — approved picks 01/05/08 only).
   01 HERO REVEAL: headline words stagger in, CSS only, opacity
   ONLY (inline words; the GSAP parent-line tween supplies motion) —
   no margin, padding, font or layout property, so the verified hero
   measurements (723px desktop / 1181px mobile, search-top 481 / 470)
   do not move. Word spans are created by the
   appended landing.js block (server HTML keeps the headline as one
   contiguous string, so the existing landing tests keep passing);
   with JS off there are no spans and the headline is fully visible.
   05 COUNT-UP: no new CSS — the existing landing.js §4c counts the
   server-rendered .sys-num figures up from 0 (see its note).
   08 PROCESS DRAW: the compact 'विनंती कशी करावी' strip below the
   hero; one line draws through the three step circles. The line
   animation ends fully drawn (forwards fill), so a late scroll-down
   still finds the complete strip. BANNED patterns are not here:
   no sale pings, review shuffle, price roll, comparison, confetti
   or word rotator (the 8 hero system tabs already do that job).
   ===================================================================== */

/* ---- 01: hero word reveal ---- */
@keyframes ht-word-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* display:inline, deliberately NOT inline-block: verified in Chromium
   (2026-10-25) that inline-block word spans inside the GSAP-animated
   .ht-line squash the gold line's Devanagari paint into an unreadable
   band, while inline words paint correctly. Transforms do not apply
   to pure inline boxes, so the word stagger here is opacity-only;
   the GSAP parent-line tween still supplies the rise motion. */
.ht-word {
  display: inline;
  animation: ht-word-in .6s cubic-bezier(.22, .61, .36, 1) both;
}

/* ---- 08: process strip (compact, below the hero) ---- */
.lnd-process { padding: 26px 0 6px; }
.lnd-process-title {
  margin: 0 0 14px; font-size: 1.15rem; font-weight: 700; color: var(--ink);
}
.lnd-process-steps {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: flex; gap: 14px;
}
@keyframes lnd-process-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.lnd-process-steps::before {
  content: ""; position: absolute; z-index: 0;
  top: 22px; left: 16%; right: 16%; height: 2px;
  background: #1d7a4d; opacity: .35;
  transform-origin: left center;
  animation: lnd-process-line 1.1s ease .25s both;
}
.lnd-process-step {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; text-align: center;
}
.lnd-process-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
  background: #fff; border: 2px solid #1d7a4d; color: #14532d;
  font-size: 1.05rem; font-weight: 700;
}
.lnd-process-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lnd-process-name {
  font-size: .98rem; font-weight: 700; color: var(--ink); text-decoration: none;
}
a.lnd-process-name:hover { text-decoration: underline; }
.lnd-process-desc { font-size: .84rem; line-height: 1.4; color: var(--land-muted, #5b6470); }
@media (max-width: 640px) {
  .lnd-process { padding: 20px 0 4px; }
  .lnd-process-steps { gap: 8px; }
  .lnd-process-steps::before { top: 20px; left: 14%; right: 14%; }
  .lnd-process-num { width: 40px; height: 40px; font-size: .95rem; }
  .lnd-process-name { font-size: .88rem; }
  .lnd-process-desc { font-size: .78rem; }
}

/* ---- Reduced motion: everything final, immediately. ---- */
@media (prefers-reduced-motion: reduce) {
  .ht-word { animation: none; opacity: 1; transform: none; will-change: auto; }
  .lnd-process-steps::before { animation: none; transform: scaleX(1); }
}

/* ---- FINALIZE 2026-10-25 (responsive + skills) ---- */
/* R2: showcase .svc-cats grid (repeat(5,1fr)) overrode the <=900px
   flex-wrap rule and forced 5 columns at 360px (page 402px wide).
   Restore the approved 2-per-row wrap on <=900px. */
@media (max-width: 900px) {
  .svc-cats { display: flex; flex-wrap: wrap; justify-content: center; }
}
/* M3: hover gating, override form. The file duplicates the header
   block, so moving each :hover rule into a media block would mean
   editing several copies; a single (hover: none) override is the one
   gating point. On hover-capable pointers the originals apply
   unchanged; on touch, tapped cards/tabs never stick translated. */
@media (hover: none) {
  .sys-card:hover, .sys-card:hover .sys-go, .hp-row:hover .hp-arrow,
  html:not(.gsap-on) .lnd-card:hover,
  .lnd-revenue-card:hover { transform: none; }
}
/* Reduced-motion stays authoritative after the hover block. */
@media (prefers-reduced-motion: reduce) {
  .sys-card:hover, .sys-card:hover .sys-go, .hp-row:hover .hp-arrow,
  html:not(.gsap-on) .lnd-card:hover,
  .lnd-revenue-card:hover { transform: none; }
}
/* M5/M6: mobile-native platform layer (landing surfaces only). */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button, a, [role="button"] { touch-action: manipulation; }
.svc-cat-btn, .lang-switch button,
.lnd-nav-toggle, .lnd-login-btn, .lnd-nav-link, .lnd-mega-btn,
.lnd-search-btn {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* Press feedback, 100-160ms band via --dur-fast (.18s token). */
.cta:active, .lnd-login-btn:active, .lm-submit:active,
.svc-cat-btn:active {
  transform: scale(0.97);
}