/* =========================================================================
   HRMSMax — landing page
   Built from the "HRMSMax Landing Page" design (Desktop 1440, Mobile 390,
   Mobile menu, Motion). Every value below is taken from those boards; the
   breakpoints between them are ours, because a page has to work at every
   width and the design only drew two.
   ========================================================================= */

/* ---- Fonts: the product's own. Latin-Ext carries ₹ (U+20B9). ----------- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-var-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: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-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: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-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: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-mono-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; }

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --ink: #0b1020;
  --ink-2: #465063;
  --ink-3: #626b7e; /* 4.7:1 or better on every light ground (WCAG AA) */
  --line: #dde2ea;
  --line-soft: #eaeef4;
  --ground: #eef1f6;
  --sunken: #f7f9fc;
  --surface: #ffffff;
  --surface-hover: #fbfbff;
  --line-strong: #d2d8e3;
  --header-bg: rgba(255,255,255,.9);
  --header-bg-solid: rgba(255,255,255,.94);
  --frame-glass: rgba(255,255,255,.6);
  --cta-bg: #4338ca;
  --roster-night: #0b1020;
  --bezel: #0b1020;
  --accent: #4338ca;
  --accent-hover: #3730a3;
  --accent-soft: #eef0ff;
  --accent-line: #c9cdfb;
  --accent-mid: #8f95ea;
  --ok: #0a7148;   --ok-soft: #e6f5ee;
  --warn: #95560a; --warn-soft: #fdf2e0;
  --bad: #a91f18;  --bad-soft: #fdeae8;
  --info: #1d5290; --info-soft: #e8f1fb;
  --bar: #c3c9d6;

  --night: #080a10;
  --night-2: #14181f;
  --night-line: #262b36;
  --night-ring: #2c3240;
  --night-ink: #eef0f4;
  --night-ink-2: #a3abb9;
  --night-accent: #6f74e6;
  --night-accent-soft: #1b1d3a;

  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow-sm: 0 1px 1px rgba(11,16,32,.04), 0 2px 6px -2px rgba(11,16,32,.06);
  --shadow-md: 0 1px 2px rgba(11,16,32,.06), 0 10px 24px -12px rgba(11,16,32,.22);

  --gutter: 32px;
  --header-h: 72px;
  color-scheme: light;
}

/* ---- Dark theme ----------------------------------------------------------
   The app's own dark palette (src/index.css, html[data-theme='dark']), value
   for value, and the same switch: `data-theme="dark"` on <html>, stored as
   `hrms.theme`. Choosing a theme here is choosing it for the dashboard too.
   The mockups in the hero and the tiles follow, so they show the product as
   it will actually look. */
html[data-theme="dark"] {
  --ink: #eef0f4;
  --ink-2: #a3abb9;
  --ink-3: #8b93a2; /* 5.3:1 or better on every dark ground; the app's #6e7787 is 3.6–4.4 */
  --line: #262b36;
  --line-soft: #1a1e27;
  --line-strong: #333a48;
  --ground: #080a10;
  --sunken: #0e1218;
  --surface: #14181f;
  --surface-hover: #1a1e27;
  --header-bg: rgba(20,24,31,.86);
  --header-bg-solid: rgba(20,24,31,.94);
  --frame-glass: rgba(20,24,31,.6);
  --accent: #6f74e6;
  --accent-hover: #9095ea;
  --accent-soft: #1c1d3d;
  --accent-line: #3a3a7d;
  --accent-mid: #5c5cae;
  --ok: #54cb95;   --ok-soft: #0f2a20;
  --warn: #eab765; --warn-soft: #2b2114;
  --bad: #f4938a;  --bad-soft: #2e1716;
  --info: #74a6dd; --info-soft: #101d2d;
  --bar: #333a48;
  /* The dark sections sit a step above the page so they still read as bands. */
  --night: #0e1218;
  --roster-night: #3a4150;
  --bezel: #2c3240;
  --shadow-sm: 0 1px 1px rgba(0,0,0,.3), 0 2px 6px -2px rgba(0,0,0,.45);
  --shadow-md: 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -12px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Links with no URL yet are hidden by landing.js; no display rule may bring them back. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ink { color: var(--ink); }
.ink2 { color: var(--ink-2) !important; }
.mt8 { margin-top: 8px; }
.grow { flex-grow: 1; min-width: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.skip {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 14px; border-radius: 7px; font-weight: 500; text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 12px; color: #fff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Until the entrance runs (see the inline script in <head>). */
.js-motion [data-anim="product"],
.js-motion [data-anim="float"] { visibility: hidden; }

/* The hero copy rises in CSS, from the first frame — not in GSAP.
   It used to be hidden until GSAP had downloaded, which made the H1 (the
   page's Largest Contentful Paint) wait ~3s on a phone for an animation
   library. The H1 now only moves, never fades, so it is visible, and counted,
   on first paint; the lines around it fade and rise as before. `hero-anim` is
   set in <head> and never removed (so a late script cannot cut it short), and
   not at all under reduced motion. */
@keyframes hero-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes hero-rise-solid { from { transform: translateY(28px); } to { transform: none; } }
.hero-anim [data-anim="hero-copy"] > * { animation: hero-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-anim [data-anim="hero-copy"] > h1 { animation-name: hero-rise-solid; }
.hero-anim [data-anim="hero-copy"] > :nth-child(1) { animation-delay: .05s; }
.hero-anim [data-anim="hero-copy"] > :nth-child(2) { animation-delay: .12s; }
.hero-anim [data-anim="hero-copy"] > :nth-child(3) { animation-delay: .19s; }
.hero-anim [data-anim="hero-copy"] > :nth-child(4) { animation-delay: .26s; }
.hero-anim [data-anim="hero-copy"] > :nth-child(n+5) { animation-delay: .33s; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic.thick { stroke-width: 2.3; }
.ic.ok { color: var(--ok); stroke-width: 2; }
.ic.ok.thick { stroke-width: 2.3; }
.ic.on-dark { color: #fff; }
.ic.muted { color: var(--ink-3); }
.ic-12 { width: 12px; height: 12px; } .ic-13 { width: 13px; height: 13px; } .ic-14 { width: 14px; height: 14px; }
.ic-15 { width: 15px; height: 15px; } .ic-16 { width: 16px; height: 16px; } .ic-18 { width: 18px; height: 18px; }
.ic-20 { width: 20px; height: 20px; } .ic-22 { width: 22px; height: 22px; } .ic-24 { width: 24px; height: 24px; }

.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Desktop vs the 390 board. The two boards carry different copy in places. */
.only-mobile-inline, .only-mobile-block { display: none; }
.only-desktop-inline { display: inline; }
.only-desktop-block { display: block; }
.only-desktop-grid { display: grid; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 7px; border: 1px solid transparent; font-weight: 500; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: background-color .2s cubic-bezier(.2,.7,.2,1), border-color .2s, color .2s, filter .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn-24 { height: 24px; padding: 0 8px; font-size: 11px; }
.btn-30 { height: 30px; padding: 0 10px; font-size: 12px; }
.btn-36 { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-44 { height: 44px; padding: 0 18px; font-size: 15px; }
.btn-48 { height: 48px; padding: 0 22px; font-size: 16px; }
.btn-50 { height: 50px; padding: 0 24px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(11,16,32,.12); }
.btn-primary:hover { color: #fff; filter: brightness(1.1); }
.btn-secondary { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { color: var(--ink); border-color: var(--accent-line); background: var(--surface-hover); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink); background: var(--sunken); }
.btn-white { background: #fff; border-color: #fff; color: var(--cta-bg); font-weight: 600; }
.btn-white:hover { color: var(--accent-hover); background: #f4f4ff; }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-outline-white:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.7); }
.btn .ic-16 { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.btn:hover .ic-16 { transform: translateX(3px); }
span.btn { cursor: default; }

/* ---- Badges ------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; line-height: 18px; font-weight: 500; padding: 0 8px;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.b-ok { background: var(--ok-soft); color: var(--ok); }
.b-warn { background: var(--warn-soft); color: var(--warn); }
.b-bad { background: var(--bad-soft); color: var(--bad); }
.b-info { background: var(--info-soft); color: var(--info); }
.b-brand { background: var(--accent-soft); color: var(--accent); }
.b-mute { background: var(--sunken); color: var(--ink-2); border-color: var(--line); }

.blip { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.eyebrow { font-size: 9.5px; font-weight: 600; letter-spacing: .09em; color: var(--ink-3); text-transform: uppercase; }
.kicker { font-family: var(--mono); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.kicker.on-dark { color: var(--night-accent); }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .3s, background-color .3s;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px -18px rgba(11,16,32,.35); background: var(--header-bg-solid); }
.header-row { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.header-left { display: flex; align-items: center; gap: 48px; }
.header-right { display: flex; align-items: center; gap: 8px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark { width: 41px; height: 30px; }
.brand-word { width: 118px; height: 17px; }

.main-nav { display: flex; align-items: center; gap: 28px; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  transition: color .2s;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--ink); }
.nav-link .chev { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.nav-menu {
  position: absolute; left: -14px; top: calc(100% + 14px);
  min-width: 300px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md);
  display: grid; gap: 2px;
}
.nav-menu[hidden] { display: none; }
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-menu a {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 8px;
  text-decoration: none; color: var(--ink);
}
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--sunken); }
.nav-menu a > .ic { color: var(--accent); margin-top: 2px; }
.nav-menu b { display: block; font-size: 14px; font-weight: 600; }
.nav-menu small { display: block; font-size: 12.5px; color: var(--ink-2); }

.menu-toggle {
  display: none; width: 44px; height: 44px; border: 0; background: none; color: var(--ink);
  align-items: center; justify-content: center; cursor: pointer; border-radius: 8px;
}
.menu-toggle .when-open { display: none; }
.menu-toggle[aria-expanded="true"] .when-open { display: block; }
.menu-toggle[aria-expanded="true"] .when-closed { display: none; }

/* Mobile menu — the "menu open" board */
.mobile-menu {
  /* The header's backdrop-filter makes it the containing block for this
     fixed panel, so bottom: 0 would collapse it to the header's edge;
     the height is stated against the viewport instead. */
  position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 49;
  height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
  background: var(--surface); overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }
.mm-inner { min-height: 100%; display: flex; flex-direction: column; padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.mm-link, .mm-group > summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  border-bottom: 1px solid var(--line-soft); font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none;
  cursor: pointer; list-style: none;
}
.mm-group > summary::-webkit-details-marker { display: none; }
.mm-group > summary .ic { color: var(--ink-3); transform: rotate(-90deg); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.mm-group[open] > summary .ic { transform: rotate(0deg); }
.mm-sub { display: grid; padding: 6px 0 10px; border-bottom: 1px solid var(--line-soft); }
.mm-sub a { padding: 9px 0 9px 4px; font-size: 15px; color: var(--ink-2); text-decoration: none; }
.mm-sub a:hover { color: var(--ink); }
.mm-popular { margin-top: 20px; }
.mm-label { font-size: 11px; font-weight: 600; letter-spacing: .09em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 6px; }
.mm-popular a { display: flex; align-items: center; gap: 12px; padding: 10px 0; text-decoration: none; }
.mm-ico { width: 36px; height: 36px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.mm-popular b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.mm-popular small { display: block; font-size: 12.5px; color: var(--ink-2); }
.mm-actions { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
body.menu-open { overflow: hidden; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; overflow: hidden; background: var(--surface); padding: 100px 0 60px; }
.hero-grid {
  position: absolute; left: 0; right: 0; top: 0; height: 900px;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}
.hero-copy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.hero h1 {
  font-size: clamp(44px, calc(1.6rem + 3.6vw), 76px);
  line-height: 1.03; font-weight: 600; letter-spacing: -0.04em; max-width: 1000px; text-wrap: balance;
}
.hero h1 .accent { color: var(--accent); }
.hero-lede { font-size: 20px; line-height: 30px; color: var(--ink-2); max-width: 640px; text-wrap: balance; }
.hero-ctas { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.trust li { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Desktop showcase: a 1200 × 720 drawing, scaled to its column ------- */
.showcase-wrap { position: relative; margin-top: 48px; height: calc(720px * var(--s, 1)); }
.showcase {
  position: absolute; left: 0; top: 0; width: 1200px; height: 720px;
  transform: scale(var(--s, 1)); transform-origin: 0 0;
}
.glow { pointer-events: none; }
.sc-glow {
  position: absolute; left: 50%; top: 40px; width: 1100px; height: 560px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(67,56,202,.28), rgba(67,56,202,0));
  filter: blur(30px); transform: translateX(-50%); opacity: .55;
}
.sc-frame {
  position: absolute; left: 80px; top: 40px; padding: 8px; border-radius: 20px;
  background: var(--frame-glass); border: 1px solid var(--line); box-shadow: 0 30px 80px -30px rgba(11,16,32,.35);
}
.app-window {
  width: 1040px; height: 620px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column;
}
.app-bar {
  height: 34px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  border-bottom: 1px solid var(--line); background: var(--sunken);
}
.app-bar img { width: 22px; height: 16px; }
.app-bar-title { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.app-bar-org { font-size: 10.5px; color: var(--ink-3); padding-left: 10px; border-left: 1px solid var(--line); }
.app-body { flex-grow: 1; min-height: 0; display: flex; }
.app-side { width: 184px; flex-shrink: 0; border-right: 1px solid var(--line); background: var(--surface); padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.side-item { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; color: var(--ink-2); }
.side-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.app-main { flex-grow: 1; background: var(--ground); padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.app-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-greet { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.app-sub { font-size: 11px; color: var(--ink-3); }
.app-actions { display: flex; gap: 6px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); padding: 12px 14px; }
.stat-val { font: 500 22px/28px var(--mono); margin-top: 4px; }
.stat-note { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.app-cols { display: grid; grid-template-columns: 1.45fr 1fr; gap: 12px; flex-grow: 1; min-height: 0; }
.app-left { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); }
.card-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-title { font-size: 12.5px; font-weight: 600; }
.muted-xs { font-size: 10.5px; color: var(--ink-3); }
.chart-card { padding: 14px; display: flex; flex-direction: column; flex-grow: 1; }
.bars { flex-grow: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 12px; border-bottom: 1px solid var(--line); min-height: 110px; }
.bars > span { flex: 1; max-width: 20px; height: var(--h); background: var(--bar); border-radius: 4px 4px 0 0; transform-origin: bottom; }
.bars > span.now { background: var(--accent); }
.run-card { padding: 12px 14px; }
.run-card .card-row { font-size: 12px; }
.run-card .card-title { font-size: 12px; }
.run-pct { color: var(--accent); font-weight: 500; }
.run-track { position: relative; height: 6px; border-radius: 3px; background: var(--accent-soft); margin-top: 10px; overflow: hidden; }
.run-fill { position: relative; height: 6px; background: var(--accent); border-radius: 3px; overflow: hidden; }
.shim { position: absolute; top: 0; left: 0; width: 40%; height: 6px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); transform: translateX(-100%); }
.chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.punches-card { padding: 12px 14px 0; display: flex; flex-direction: column; min-height: 0; }
.punches-card > .card-row { padding-bottom: 6px; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ok); font-weight: 500; }
.feed {
  flex-grow: 1; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%);
}
.punch { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.av { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.av.lg { width: 32px; height: 32px; font-size: 12px; }
.who { min-width: 0; flex-grow: 1; }
.nm { font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }

/* Floating cards (design coordinates inside the 1200 × 720 showcase) */
.float { position: absolute; }
.fcard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); }
.fc-punch { left: 0; top: 150px; }
.fc-punch .fcard { width: 236px; padding: 14px; }
.fc-head { display: flex; align-items: center; gap: 10px; }
.fc-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.fc-title { font-size: 12.5px; font-weight: 600; }
.fc-sub { font-size: 11px; color: var(--ink-3); }
.fc-foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; }
.fc-big { font: 500 26px var(--mono); }
.fc-toast { right: 0; top: 70px; }
.toast { width: 268px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.toast-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--ok-soft); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fc-payslip { right: 10px; top: 598px; }
.fc-payslip .fcard { width: 250px; padding: 14px 16px; }
.split { display: flex; gap: 4px; margin-top: 10px; }
.split > span { height: 5px; border-radius: 3px; }
.fc-statutory { left: 30px; top: 500px; }
.statutory { padding: 10px 14px; display: flex; gap: 8px; align-items: center; }
.statutory .fc-title { font-size: 12px; margin-right: 4px; }
.stat-chip { display: inline-flex; align-items: center; gap: 4px; font: 600 11px var(--mono); color: var(--ok); background: var(--ok-soft); padding: 3px 7px; border-radius: 6px; }
/* Fix: moved to the left so the payslip card can sit at the window's foot. */
.demo-note { position: absolute; left: 92px; bottom: 0; font-size: 11px; color: var(--ink-3); }

/* ---- Mobile showcase ---------------------------------------------------- */
.m-showcase { position: relative; margin-top: 64px; padding-bottom: 44px; }
.m-glow {
  position: absolute; left: 50%; top: 20px; width: 420px; height: 360px; max-width: 110%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(67,56,202,.28), rgba(67,56,202,0));
  filter: blur(24px); transform: translateX(-50%); opacity: .55;
}
.m-frame { position: relative; padding: 6px; border-radius: 18px; background: var(--frame-glass); border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(11,16,32,.35); }
.m-app { border-radius: 12px; background: var(--ground); border: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.m-greet { font-size: 14px; font-weight: 600; }
.m-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.m-stats .stat { padding: 10px 12px; }
.m-stats .eyebrow { font-size: 9px; }
.m-stats .stat-val { font: 500 19px/24px var(--mono); margin-top: 2px; }
.m-punches { padding: 8px 12px 0; }
.m-punches > .card-row { padding-bottom: 6px; }
.m-punches .feed { height: 236px; flex-grow: 0; }
.m-float { position: absolute; z-index: 2; }
.fcard.small { border-radius: 12px; padding: 10px 12px; }
.m-toast { right: -4px; top: -48px; }
.m-toast .toast { width: 214px; gap: 10px; }
.m-toast .toast-ico { width: 30px; height: 30px; border-radius: 8px; }
.m-toast .fc-title { font-size: 11.5px; }
.m-toast .fc-sub { font-size: 10.5px; }
.m-punch { left: -4px; bottom: 0; }
.m-punch .fcard { width: 176px; }
.m-punch .fc-title { font-size: 11px; }
.m-pay { right: -4px; bottom: 16px; }
.m-pay .fcard { width: 170px; }
.m-pay .eyebrow { font-size: 9px; }
.fc-big.m { font-size: 20px; margin-top: 6px; }

/* =========================================================================
   MARQUEE
   ========================================================================= */
.marquee {
  height: 120px; background: var(--surface); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mq-track { display: flex; align-items: center; width: max-content; will-change: transform; }
.mq-item { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: var(--ink-2); white-space: nowrap; padding: 0 28px; }
.mq-item .ic { color: var(--accent); }
.mq-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-line); flex-shrink: 0; }

/* =========================================================================
   THE PLATFORM
   ========================================================================= */
.platform { background: var(--ground); padding: 128px 0; }
.sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 56px; }
.sec-head.center { align-items: center; text-align: center; }
.sec-head h2 { font-size: clamp(32px, calc(1.2rem + 2.4vw), 52px); line-height: 1.077; font-weight: 600; letter-spacing: -0.035em; max-width: 820px; text-wrap: balance; }

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.tile {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm);
  transition: box-shadow .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s;
}
.tile:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.t-attendance { grid-column: span 7; min-height: 440px; }
.t-payroll { grid-column: span 5; min-height: 440px; }
.t-leave, .t-shifts, .t-mobile { grid-column: span 4; min-height: 360px; }
.t-reports, .t-india { grid-column: span 6; min-height: 340px; }
.tile-copy { display: flex; flex-direction: column; gap: 8px; padding: 26px 28px 0; position: relative; z-index: 1; }
.tile-kicker { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.tile h3 { font-size: 23px; line-height: 29px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.tile p { font-size: 15px; line-height: 22px; color: var(--ink-2); }
/* The visual follows the copy instead of being pinned over it — which is what
   made headings run underneath the charts on the 390 board. */
.tile-visual { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 28px 24px; }
.tile-visual.center { justify-content: center; }
.tile-visual.bottom { padding-bottom: 24px; }
.t-leave .tile-visual, .t-shifts .tile-visual { padding-inline: 24px; }

/* Attendance */
.att-table { padding: 6px 16px 4px; }
.att-head { padding: 8px 0; }
.att-row { display: grid; grid-template-columns: 150px 52px 1fr 118px; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.att-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-time { font-size: 12px; color: var(--ink-2); }
.att-bar { height: 10px; background: var(--accent-soft); border-radius: 5px; overflow: hidden; }
.att-bar .fill { display: block; height: 10px; width: var(--w); background: var(--accent); border-radius: 5px; transform-origin: left; }
.att-bar .fill.soft { background: var(--accent-mid); }
.att-bar .fill.missing { width: 100%; background: repeating-linear-gradient(45deg, var(--bad-soft) 0 5px, transparent 5px 10px); }
.att-state { text-align: right; }
.t-attendance .live { font-size: 11px; }

/* Payroll */
.pay-grid { display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: center; }
.ring { position: relative; width: 112px; height: 112px; }
.ring svg { width: 112px; height: 112px; display: block; }
.ring circle { fill: none; stroke-width: 10; }
.ring-bg { stroke: var(--accent-soft); }
.ring-fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 302; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 56px 56px; }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-label .mono { font-size: 18px; font-weight: 600; }
.ring-label small { font-size: 10.5px; color: var(--ink-3); }
.ded { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.ded > .mono { color: var(--ink-2); }
.ded-name { display: inline-flex; align-items: center; gap: 8px; }
.tick { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--ok-soft); align-items: center; justify-content: center; flex-shrink: 0; }

/* Leave */
.leave-card { border-radius: 12px; box-shadow: var(--shadow-md); padding: 14px; }
.leave-top { display: flex; align-items: center; gap: 10px; }
.lv-name { font-size: 13px; font-weight: 600; }
.lv-meta { font-size: 11.5px; color: var(--ink-3); }
.swap { position: relative; display: inline-block; width: 76px; height: 20px; flex-shrink: 0; }
.swap .badge { position: absolute; right: 0; top: 0; }
/* At rest (no script, reduced motion): the outcome, not the question. */
.sw-a { opacity: 0; }
.leave-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.lv-bal { font-size: 12px; color: var(--ink-2); }
.lv-actions { display: flex; gap: 6px; }
.mini-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.mini-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; padding: 0 12px; }

/* Shifts */
.roster { padding: 12px; }
.roster-days, .roster-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.roster-days { margin-bottom: 6px; }
.roster-days span { font-size: 10px; font-weight: 600; color: var(--ink-3); text-align: center; }
.c { height: 26px; border-radius: 6px; }
/* Fix: in the design these cells had no colour of their own — only the
   animation gave them one — so with reduced motion they vanished. */
/* The animation moves `--lit` (0 → 1), not the colour, so the cell fades
   between THIS theme's soft and full accent, and a theme switch mid-loop
   takes effect at once. Static (and reduced motion): fully lit. */
.c.live { --lit: 1; background: var(--accent); background: color-mix(in srgb, var(--accent) calc(var(--lit) * 100%), var(--accent-soft)); }
.c.eve { background: var(--info-soft); }
.c.off { background: var(--warn-soft); }
/* A night shift is the darkest block in either theme; `--ink` would turn
   it white in dark. */
.c.night { background: var(--roster-night); }
.c.hol { background: var(--sunken); border: 1px dashed var(--line); }

/* Mobile */
.t-mobile .tile-visual { padding: 18px 0 0; align-items: center; }
/* The handset's body, not text: stays a dark bezel in both themes. */
.phone { width: 240px; height: 200px; border-radius: 30px 30px 0 0; background: var(--bezel); padding: 8px 8px 0; }
.phone-screen { height: 100%; border-radius: 23px 23px 0 0; background: var(--ground); display: flex; flex-direction: column; align-items: center; padding-top: 16px; gap: 10px; }
.ph-shift { font-size: 10.5px; color: var(--ink-3); }
.ph-button { position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }
.ph-ring { position: absolute; inset: 14px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.ph-core { width: 84px; height: 84px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; font-size: 11.5px; font-weight: 600; }
.ph-loc { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ink-2); }

/* Reports */
.report-kpi { position: absolute; right: 28px; top: 28px; text-align: right; z-index: 1; }
.report-kpi .mono { font-size: 30px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.report-kpi small { font-size: 12px; color: var(--ink-3); }
.t-reports .tile-copy { padding-right: 180px; }
.report-bars { height: 130px; display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--line); }
.report-bars > span { flex: 1; height: var(--h); background: var(--bar); border-radius: 5px 5px 0 0; transform-origin: bottom; }
.report-bars > span.now { background: var(--accent); }

/* India-ready */
.tile.dark { background: var(--night); border-color: var(--night-line); }
.tile.dark:hover { border-color: #343a48; }
.tile.dark .tile-kicker { color: var(--night-accent); }
.tile.dark h3 { color: var(--night-ink); }
.tile.dark p { color: var(--night-ink-2); }
.statutes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.statute { position: relative; background: var(--night-2); border: 1px solid var(--night-line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.statute .mono { font-size: 24px; font-weight: 600; color: var(--night-ink); }
.statute small { font-size: 12px; color: var(--night-ink-2); }
.tick.dark { position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; background: #0f2a20; color: #54cb95; }

/* =========================================================================
   ONE SYSTEM
   ========================================================================= */
.one-system { background: var(--night); overflow: hidden; }
.os-grid { min-height: 900px; display: grid; grid-template-columns: 480px 1fr; gap: 40px; align-items: center; }
.os-copy { display: flex; flex-direction: column; gap: 22px; }
.os-copy h2 { font-size: clamp(32px, calc(1.2rem + 2.4vw), 52px); line-height: 1.077; font-weight: 600; letter-spacing: -0.035em; color: var(--night-ink); text-wrap: balance; }
.os-lede { font-size: 18px; line-height: 28px; color: var(--night-ink-2); }
.os-points { display: flex; flex-direction: column; gap: 20px; margin-top: 12px; }
.os-points li { display: flex; gap: 14px; align-items: flex-start; }
.os-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--night-accent-soft); color: var(--night-accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.os-points b { display: block; font-size: 17px; font-weight: 600; color: var(--night-ink); }
.os-points span span { font-size: 15px; color: var(--night-ink-2); }
.os-points div > span { display: block; margin-top: 2px; }

.orbit-wrap { display: flex; justify-content: center; }
.orbit { --box: 640px; --chip-h: 38px; --chip-fs: 13px; position: relative; width: var(--box); height: var(--box); flex-shrink: 0; }
.ring-outer, .ring-inner { position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ring-outer { width: 94.06%; height: 94.06%; border: 1px dashed var(--night-ring); }
.ring-inner { width: 60%; height: 60%; border: 1px solid var(--night-ring); }
.orbit-glow {
  position: absolute; left: 50%; top: 50%; width: 46.9%; height: 46.9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(111,116,230,.45), rgba(111,116,230,0));
  transform: translate(-50%, -50%); opacity: .55;
}
.lane { position: absolute; inset: 0; }
.chip {
  position: absolute; left: 50%; top: 50%;
  display: inline-flex; align-items: center; gap: 6px; height: var(--chip-h); padding: 0 14px;
  border-radius: 999px; background: var(--night-2); border: 1px solid var(--night-line); color: var(--night-ink);
  font-size: var(--chip-fs); font-weight: 500; white-space: nowrap; box-shadow: 0 8px 24px -10px rgba(0,0,0,.6);
  transform: translate(-50%, -50%);
}
.chip .ic { color: var(--night-accent); }
.core {
  position: absolute; left: 50%; top: 50%; width: 20%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 25%; background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 10px rgba(111,116,230,.12), 0 20px 60px -10px rgba(111,116,230,.6);
}
.core img { width: 64%; height: auto; }

/* =========================================================================
   CALL TO ACTION
   ========================================================================= */
.cta-sec { background: var(--surface); padding: 120px 0; }
.cta { position: relative; min-height: 460px; border-radius: 28px; overflow: hidden; background: var(--cta-bg); display: flex; }
.cta-cells { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .1925; }
.cta-cells rect { fill: #5b52d6; }
.cta-fade { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 70% at 50% 50%, var(--accent) 35%, rgba(67,56,202,0) 100%); }
.cta-body { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; padding: 56px 80px; }
.cta h2 { font-size: clamp(32px, calc(1.3rem + 2.5vw), 56px); line-height: 1.07; font-weight: 600; letter-spacing: -0.035em; color: #fff; max-width: 820px; text-wrap: balance; }
.cta p { font-size: 19px; line-height: 28px; color: #dcdcfb; max-width: 560px; }
.cta-actions { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }

/* =========================================================================
   FOOTER
   ========================================================================= */
/* A band of its own: one step sunken, so it reads as the page's foot in both
   themes rather than more of the CTA section's white. */
.site-footer { background: var(--sunken); border-top: 1px solid var(--line); padding: 64px 0 28px; }
.foot-top { display: flex; justify-content: space-between; gap: 48px 64px; }

.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 340px; flex: 0 1 340px; }
.foot-brand .brand { gap: 10px; }
.foot-brand .brand-mark { width: 38px; height: 28px; }
.foot-brand .brand-word { width: 111px; height: 16px; }
.foot-brand p { font-size: 14px; line-height: 22px; color: var(--ink-2); }
.foot-statutory { display: flex; flex-wrap: wrap; gap: 6px; }
.foot-statutory li {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
}
.foot-mail {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink);
  text-decoration: none; padding: 8px 12px; margin-left: -12px; border-radius: 8px;
}
.foot-mail .ic { color: var(--accent); }
.foot-mail:hover { color: var(--accent); background: var(--surface); }

/* Flex, not a fixed grid: a column hidden for want of URLs closes up. */
.foot-cols { display: flex; flex-wrap: wrap; gap: 32px 56px; }
.foot-col { display: flex; flex-direction: column; gap: 11px; min-width: 120px; }
.foot-col h2 { font-size: 12px; line-height: 1.5; margin-top: 0; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.foot-col a { font-size: 14px; color: var(--ink-2); text-decoration: none; width: fit-content; }
.foot-col a:hover { color: var(--accent); }

.foot-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line);
}
.foot-legal { font-size: 13px; color: var(--ink-3); }
.foot-dot { margin: 0 6px; }
.foot-tools { display: flex; align-items: center; gap: 12px; }

/* Light / Dark as a segmented control: it shows which is on, where a lone
   icon button only shows what pressing it would do. */
.theme-switch { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.theme-switch button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 0; border-radius: 7px; background: transparent; color: var(--ink-3);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.theme-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.foot-top-link {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 10px;
  font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: none; border: 1px solid var(--line); background: var(--surface);
}
.foot-top-link:hover { color: var(--accent); border-color: var(--accent-line); }

@media (max-width: 1023px) {
  .foot-top { flex-direction: column; }
  .foot-brand { max-width: 520px; flex-basis: auto; }
}
@media (max-width: 767px) {
  .site-footer { padding: 44px 0 24px; }
  .foot-top { gap: 36px; }
  /* Two columns of links; hidden ones drop out of the grid entirely. */
  .foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .foot-col { min-width: 0; }
  .foot-bottom { flex-direction: column-reverse; align-items: stretch; margin-top: 36px; }
  .foot-legal { text-align: center; }
  .foot-tools { justify-content: space-between; }
  .theme-switch { flex: 1; }
  .theme-switch button { flex: 1; justify-content: center; }
}

/* =========================================================================
   RESPONSIVE — the widths between and below the two boards
   ========================================================================= */
@media (max-width: 1199px) {
  .os-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .orbit { --box: min(560px, 48vw); --chip-h: 34px; --chip-fs: 12.5px; }
}

@media (max-width: 1023px) {
  :root { --header-h: 64px; }
  .main-nav, .only-desktop { display: none !important; }
  .menu-toggle { display: inline-flex; }
  .header-left { gap: 0; }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .t-attendance, .t-payroll, .t-reports, .t-india { grid-column: 1 / -1; min-height: 0; }
  .t-leave, .t-shifts { grid-column: span 1; min-height: 340px; }
  .t-mobile { grid-column: 1 / -1; min-height: 0; }
  .t-payroll .tile-visual { padding-top: 28px; }

  .os-grid { grid-template-columns: 1fr; gap: 48px; padding-block: 96px; min-height: 0; }
  .orbit { --box: min(560px, 86vw); }

}

/* ---- The 390 board ------------------------------------------------------ */
@media (max-width: 767px) {
  :root { --gutter: 16px; --header-h: 56px; }
  .only-desktop-inline, .only-desktop-block, .only-desktop-grid { display: none !important; }
  .only-mobile-inline { display: inline; }
  .only-mobile-block { display: block; }

  .brand { gap: 8px; }
  .brand-mark { width: 30px; height: 22px; }
  .brand-word { width: 90px; height: 13px; }
  .hdr-demo { height: 30px; padding: 0 10px; font-size: 12px; }
  .header-right { gap: 4px; }

  .hero { padding: 40px 0 56px; }
  .hero-grid { height: 520px; background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%); }
  .hero-copy { gap: 18px; }
  .hero h1 { font-size: 42px; line-height: 44px; }
  .hero-lede { font-size: 16px; line-height: 25px; }
  .hero-ctas { flex-direction: column; width: 100%; gap: 10px; margin-top: 4px; }
  .hero-ctas .btn { width: 100%; }
  .trust { display: none; }

  .marquee { height: 76px; }
  .mq-item { font-size: 15px; padding: 0 20px; gap: 8px; }
  .mq-item .ic { width: 18px; height: 18px; }

  .platform { padding: 72px 0; }
  .sec-head { gap: 14px; margin-bottom: 28px; }
  .sec-head h2 { font-size: 32px; line-height: 36px; letter-spacing: -0.03em; }
  .bento { grid-template-columns: 1fr; gap: 14px; }
  .t-leave, .t-shifts { grid-column: 1 / -1; min-height: 0; }
  /* The 390 board leaves Reports out; so do we. */
  .t-reports { display: none; }
  .tile-copy { padding: 22px 20px 0; }
  .tile h3 { font-size: 21px; line-height: 27px; }
  .tile p { font-size: 14.5px; }
  .tile-visual { padding: 18px 20px 20px; }
  .t-leave .tile-visual, .t-shifts .tile-visual { padding-inline: 20px; }
  .att-table { padding: 4px 14px 2px; }
  .att-head { display: none; }
  /* The 390 board's rows: name and state on one line, the bar beneath. */
  .att-row { grid-template-columns: 1fr auto; grid-template-areas: "name state" "bar bar"; gap: 8px 10px; padding: 12px 0; }
  .att-row:first-of-type { border-top: 0; }
  .att-name { grid-area: name; }
  .att-time { display: none; }
  .att-bar { grid-area: bar; height: 8px; }
  .att-bar .fill { height: 8px; }
  .att-state { grid-area: state; }
  .pay-grid { grid-template-columns: 96px 1fr; gap: 16px; }
  .ring, .ring svg { width: 96px; height: 96px; }
  .ring-label .mono { font-size: 16px; }
  .statutes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .statute { padding: 14px; }
  .statute .mono { font-size: 20px; }
  .tick.dark { right: 10px; top: 10px; }

  .os-grid { padding-block: 72px; gap: 28px; }
  .os-copy { gap: 14px; }
  .os-copy h2 { font-size: 32px; line-height: 36px; letter-spacing: -0.03em; }
  .os-lede { font-size: 16px; line-height: 25px; }
  .os-points { order: 3; gap: 14px; margin-top: 0; }
  .os-points b { font-size: 15px; }
  .os-points span span { font-size: 13px; }
  .os-ico { width: 36px; height: 36px; }
  .orbit { --box: min(320px, 82vw); --chip-h: 30px; --chip-fs: 11.5px; }
  .chip { padding: 0 10px; gap: 5px; }
  .chip .ic { width: 13px; height: 13px; }
  .core { box-shadow: 0 0 0 7px rgba(111,116,230,.12), 0 14px 40px -8px rgba(111,116,230,.6); }

  .cta-sec { padding: 56px 0; }
  .cta { min-height: 400px; border-radius: 24px; }
  .cta-body { padding: 48px 20px; gap: 16px; }
  .cta h2 { font-size: 32px; line-height: 36px; letter-spacing: -0.03em; }
  .cta p { font-size: 15px; line-height: 23px; }
  .cta-actions { flex-direction: column; width: 100%; gap: 10px; }
  .cta-actions .btn { width: 100%; height: 48px; }

}

/* A pointer that cannot hover gets no hover lift. */
@media (hover: none) {
  .tile:hover { box-shadow: var(--shadow-sm); border-color: var(--line); }
  .tile.dark:hover { border-color: var(--night-line); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .tile, .nav-link .chev, .btn .ic-16 { transition: none; }
}

/* =========================================================================
   SIGN-IN MODAL — the app's own sign-in card, framed
   ========================================================================= */
.login-modal {
  width: min(400px, 100% - 32px); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(11,16,32,.06), 0 24px 64px -16px rgba(11,16,32,.35);
  overflow: auto; overscroll-behavior: contain;
}
.login-modal::backdrop { background: rgba(11,16,32,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
html.modal-open { overflow: hidden; }

.lm-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 4px; }
.lm-mark { flex: none; margin-top: 3px; }
.lm-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.lm-head p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.lm-close {
  flex: none; margin: -6px -8px 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer;
}
.lm-close:hover { background: var(--line-soft); color: var(--ink); }
.lm-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lm-body { position: relative; padding: 9px 17px 17px; }
/* Hidden until the app inside says it is ready, so nobody sees it paint. */
.lm-frame { display: block; width: 100%; height: 160px; border: 0; background: var(--surface); opacity: 0; transition: opacity .2s ease; }
.login-modal.is-ready .lm-frame { opacity: 1; }
.lm-loading {
  position: absolute; inset: 12px 20px 20px; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13px; color: var(--ink-3);
}
.login-modal.is-ready .lm-loading { display: none; }
.lm-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: lm-spin .8s linear infinite; }
@keyframes lm-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
  /* A bottom sheet on phones: the thumb is at the bottom, and so is the keyboard's edge. */
  .login-modal { width: 100%; margin: auto 0 0; max-height: calc(100dvh - 24px); border-radius: 18px 18px 0 0; border-bottom: 0; }
  .lm-body { padding-bottom: calc(17px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .lm-frame { transition: none; }
  .lm-spinner { animation-duration: 2s; }
}

/* =========================================================================
   THEME SWITCH — shares `hrms.theme` with the app (the control is in the footer)
   ========================================================================= */
/* Only while switching, so the whole page crossfades instead of snapping;
   never on load, where it would animate the page in from the wrong theme. */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, fill .25s ease !important;
}

/* =========================================================================
   WHAT IS HRMSMAX — a plain answer and its questions (#about)
   The question cards share their look with the content pages (site.css);
   this page does not load site.css, so the few rules it needs are here.
   ========================================================================= */
.about-sec { background: var(--sunken); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 110px 0; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: start; }
.about-copy { display: flex; flex-direction: column; gap: 18px; }
.about-copy h2 { font-size: clamp(30px, calc(1.1rem + 2vw), 44px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.about-copy p { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 560px; }
.about-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.about-links a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none;
}
.about-links a:hover { border-color: var(--accent-line); color: var(--accent); }
.about-sec .faq { display: grid; gap: 10px; }
.about-sec .faq-item { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.about-sec .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; }
.about-sec .faq-item summary::-webkit-details-marker { display: none; }
.about-sec .faq-item summary h3 { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.about-sec .faq-item summary .ic { flex: none; color: var(--ink-3); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.about-sec .faq-item[open] summary .ic { transform: rotate(180deg); }
.about-sec .faq-a { padding: 0 18px 16px; }
.about-sec .faq-a p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
@media (max-width: 1023px) { .about-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 767px) { .about-sec { padding: 72px 0; } .about-copy p { font-size: 16px; } }