/* ==========================================================================
   IN4 CloudHR — design system (part 1: tokens, reset, typography, base)
   Pure HTML5 + CSS3. Palette derived from the IN4 logo:
   purple #6528F7 / green #72BF44.
   ========================================================================== */

:root {
  /* Brand — purple */
  --purple-800: #3b169b;
  --purple-700: #4c1dc8;
  --purple-600: #6528f7;
  --purple-500: #7b4bff;
  --purple-400: #9779ff;
  --purple-300: #b99cff;
  --purple-200: #cbb8ff;
  --purple-100: #e7dcff;
  --purple-50: #f6f2ff;

  /* Brand — green */
  --green-700: #508f2b;
  --green-600: #5fa235;
  --green-500: #72bf44;
  --green-400: #88d55b;
  --green-300: #a7df80;
  --green-100: #e3f4d5;
  --green-50: #f4faee;

  /* Neutrals */
  --ink-900: #0f0e20;
  --ink-800: #181632;
  --ink-700: #221f45;
  --charcoal: #2b2942;
  --text: #1a1833;
  --text-body: #3d3a5c;
  --text-muted: #56527a;
  --border: #e6e4f1;
  --border-soft: #efedf8;
  --bg: #ffffff;
  --bg-soft: #faf9fe;
  --bg-lav: #f7f5ff;
  --bg-green: #f3faed;

  /* Gradients */
  --grad-purple: linear-gradient(135deg, #6528f7 0%, #7b4bff 55%, #9779ff 100%);
  --grad-green: linear-gradient(135deg, #72bf44 0%, #97d75f 100%);

  /* Radii */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* ---- IN4 CloudHR canonical design tokens (2026 refresh) ----
     Single source of truth for every colour used across the homepage.
     Purple + green stay the dominant brand identity; the remaining hues are
     functional accents only (attendance, payroll, leave, visitor, parking,
     analytics, alerts) so the palette never drifts into a rainbow. */
  --in4-purple: #6C35FF;
  --in4-purple-dark: #4B20C8;
  --in4-purple-soft: #F3EEFF;

  --in4-green: #6DBE45;
  --in4-green-dark: #3E8E2D;
  --in4-green-soft: #F1F9EC;

  --in4-cyan: #22C7D6;

  --in4-navy: #111827;
  --in4-text-muted: #5F6472;

  --in4-bg-soft: #F8F9FC;
  --in4-border: #E7E8EE;

  /* Layout */
  --container: 1240px;
  --header-h: 76px;
  --space-section: clamp(2.5rem, 5vw, 4.5rem);
  --space-section-sm: clamp(2rem, 4vw, 3.25rem);
  --space-head: clamp(1.5rem, 3vw, 2.5rem);

  /* Fluid type scale — every size below interpolates between a phone
     (360px) and a desktop (1280px+) with no abrupt jumps.
     Prefer these over one-off px values so the whole page stays fluid. */
  --fs-body:    clamp(1rem,     0.96rem  + 0.20vw, 1.031rem); /* 16  -> 16.5  */
  --fs-lead:    clamp(1rem,     0.95rem  + 0.25vw, 1.094rem); /* 16  -> 17.5  */
  --fs-title:   clamp(1.625rem, 1.05rem + 1.35vw, 2rem);     /* 26  -> 32    */
  --fs-h3:      clamp(0.938rem, 0.89rem  + 0.24vw, 1.031rem); /* 15  -> 16.5  */
  --fs-sm:      clamp(0.813rem, 0.78rem  + 0.16vw, 0.906rem); /* 13  -> 14.5  */
  --fs-xs:      clamp(0.75rem,  0.72rem  + 0.13vw, 0.813rem); /* 12  -> 13    */
  --fs-eyebrow: clamp(0.688rem, 0.67rem  + 0.13vw, 0.781rem); /* 11  -> 12.5  */

  /* iOS zooms any input under 16px on focus — never go below this */
  --fs-input: 1rem;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(24, 22, 50, 0.05), 0 4px 14px rgba(24, 22, 50, 0.04);
  --shadow-md: 0 2px 4px rgba(24, 22, 50, 0.04), 0 14px 34px rgba(24, 22, 50, 0.08);
  --shadow-lg: 0 6px 16px rgba(24, 22, 50, 0.06), 0 24px 60px rgba(24, 22, 50, 0.12);
  --shadow-purple: 0 12px 30px rgba(101, 40, 247, 0.28);
  --shadow-green: 0 12px 30px rgba(114, 191, 68, 0.3);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text-body);
  background: var(--bg);
  line-height: 1.7;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-900);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p { max-width: 62ch; }

a {
  color: var(--purple-600);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

a:hover { color: var(--purple-700); }

ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; color: var(--text); }

::selection { background: var(--purple-100); color: var(--purple-800); }

:focus-visible {
  outline: 3px solid var(--purple-400);
  outline-offset: 2px;
  border-radius: 4px;
}

::placeholder { color: #a19dbc; }

kbd, code, pre { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; }

/* ---- Layout utilities ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}

.section { padding-block: var(--space-section); position: relative; }
.section-sm { padding-block: var(--space-section-sm); }
.section-alt { background: var(--bg-soft); }
.section-white { background: #ffffff; }
.section-lav { background: var(--bg-lav); }
.section-green { background: var(--bg-green); }
.section-blue { background: #f0f4ff; }
.section-peach { background: #fef7f0; }
.section-mint { background: #f0faf5; }
.section-rose { background: #fef5f7; }

/* Section icon accent colors */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--purple-600);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-green);
}

.section-head { max-width: 720px; margin-bottom: var(--space-head); }
.section-head.center { max-width: 70%; margin-inline: auto; text-align: center; }
.section-head.center .section-title,
.section-head.center .section-lead { margin-inline: auto; }
.section-head .eyebrow { margin-bottom: clamp(0.625rem, 1.2vw, 0.875rem); }

/* 70% of a phone is too narrow for a headline — go full width on small screens */
@media (max-width: 640px) {
  .section-head.center { max-width: 100%; }
}

/* One uniform, fully fluid size shared by every section title on the page,
   so headings never step up or down between sections. 22px on a phone,
   ~29px on a tablet, 30px ceiling on desktop. */
.section-title {
  font-size: var(--fs-title);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

/* dual-colour section titles — the <em> phrase carries a section-specific accent.
   Green is deliberately excluded; every accent below is >=3.6:1 on white/lavender. */
.section-title em {
  font-style: normal;
  color: var(--tt-accent, #6C35FF);
}

.section-title em.a1 { color: #6C35FF; }  /* purple      5.9:1 */
.section-title em.a2 { color: #8B5CF6; }  /* violet      4.2:1 */
  /* blue        3.7:1 */
  /* teal        4.0:1 */
  /* pink        3.5:1 */
.section-title em.a6 { color: #C2410C; }  /* burnt orange 5.2:1 */
.section-title em.a7 { color: #4B20C8; }  /* deep purple 9.0:1 */
  /* cyan-blue   3.7:1 */

.section-lead {
  margin-top: clamp(0.875rem, 1.6vw, 1.125rem);
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--text-body);
  max-width: 58ch;
}

.grid {
  display: grid;
  gap: 24px;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Inline icon (Font Awesome base sizing; fa.css refines per-size overrides) */
.ico {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  flex-shrink: 0;
  stroke-width: 1.8;
}

/* Icon badge — the tinted rounded tile that sits behind a section glyph.
   Individual contexts override the size/radius; this base guarantees the
   glyph is centred in a real box even where no context rule exists. */
.icon-badge {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--purple-50);
  color: var(--purple-600);
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
}

.icon-badge .ico { width: 20px; height: 20px; }

.hidden { display: none !important; }