/* 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: 70px;
  padding-top: 8px; padding-bottom: 8px; 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: 40px; height: 40px; 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; }
.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;
  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: 38px;
  height: 38px; 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: 5px 10px; border-radius: 999px;
  cursor: pointer; min-height: 28px; }
.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;
  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: flex; 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. */ }
.sys-title { margin: 0 0 14px; font-size: 1.15rem; font-weight: 700;
  color: var(--ink); }
.sys-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; }
.sys-card { display: flex; align-items: center; gap: 13px;
  background: var(--card); border: 1px solid var(--line);
  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-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: 52px 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: 44px 0 0; margin-top: 56px; }
.lnd-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px;
  padding-bottom: 32px; }
.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: 16px 0; display: flex; justify-content: space-between; gap: 12px;
  font-size: .8rem; color: rgba(255,255,255,.65); }
.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)); }
  .lnd-hero-inner { flex-direction: column; align-items: stretch; }
}
@media (max-width: 900px) {
  .lnd-footer-grid { grid-template-columns: 1fr 1fr; }
  .lnd-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@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,.82) 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-grid { grid-template-columns: 1fr; }
  .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;
  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; }
.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 20px; }
  .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 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: nowrap; }
  .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); }

/* ---- 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 bullet buttons ---- */
.svc-cats { display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-top: 24px; }
.svc-cat-btn { display: inline-flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 8px 20px 8px 9px; border-radius: 999px;
  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: 42px; height: 42px; 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: 21px; height: 21px; }
.svc-cat-name { font-family: "Noto Serif Devanagari",
    "Noto Sans Devanagari", serif; font-weight: 700;
  font-size: 1.02rem; line-height: 1.2; text-align: left; }
.svc-cat-count { 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; }
  .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; }
}