/* ═══════════════════════════════════
   DESIGN TOKENS — ClockIn HR
═══════════════════════════════════ */
:root{
  --pu:#6242D4;--pu-d:#4E31B0;--pu-m:#7C5CE6;--pu-l:#A68EF5;
  --pu-bg:#F0EAFE;--pu-bg2:#EAE3FC;--border-pu:rgba(98,66,212,.18);
  --pk:#FF6B81;--pk-bg:#FFECEE;
  --gn:#22C55E;--gn-bg:#F0FDF4;
  --am:#F59E0B;--am-bg:#FFFBEB;
  --rd:#EF4444;--rd-bg:#FEF2F2;
  --tl:#0891B2;--tl-bg:#ECFEFF;
  --bg:#F3F5F2;--white:#FFFFFF;
  --dark:#111111;--mid:#374151;--muted:#6B7280;--light:#9CA3AF;
  --border:rgba(0,0,0,.08);
  --r6:6px;--r10:10px;--r16:16px;--r24:24px;--rpill:100px;
  --sh-sm:0 1px 3px rgba(0,0,0,.07);
  --sh-md:0 4px 16px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.04);
  --sh-lg:0 12px 40px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.05);
  --sh-pu:0 8px 32px rgba(98,66,212,.22);
  --ff:'Inter',sans-serif;--fd:'Manrope',sans-serif;
  --t:.25s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff);color:var(--mid);background:var(--bg);line-height:1.7;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--fd);font-weight:800;line-height:1.2;letter-spacing:-.025em;color:var(--dark)}
a{text-decoration:none;color:inherit}

/* ── LAYOUT ── */
.w{max-width:1160px;margin:0 auto;padding:0 40px}

/* ── REVEAL ANIMATIONS ── */
.rv{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}.rv.d5{transition-delay:.5s}.rv.d6{transition-delay:.6s}
.rv.on{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-32px);transition:opacity .65s ease,transform .65s ease}.rv-l.on{opacity:1;transform:none}
.rv-r{opacity:0;transform:translateX(32px);transition:opacity .65s ease,transform .65s ease}.rv-r.on{opacity:1;transform:none}
.rv-scale{opacity:0;transform:scale(.88);transition:opacity .55s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}.rv-scale.on{opacity:1;transform:scale(1)}

/* ── EYEBROW PILL ── */
.eyebrow-pill{display:inline-flex;align-items:center;gap:7px;background:var(--pu-bg);border:1.5px solid var(--border-pu);border-radius:var(--rpill);padding:5px 14px;margin-bottom:1.5rem;font-size:.7rem;font-weight:700;color:var(--pu);letter-spacing:.08em;text-transform:uppercase}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--pu);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}