/* -------------------------------------------------------
   WorkPulse Light Theme (matches your mockups)
   ------------------------------------------------------- */
@font-face{
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Inter"), url("https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fv.woff2") format("woff2");
}

:root{
  /* Colors */
  --bg: #FAFBFF;                 /* page background */
  --surface: #FFFFFF;            /* cards/nav/forms */
  --text: #0F172A;               /* headings/body */
  --muted:#6B7280;               /* helper text */
  --line: #E9EEF6;               /* hairline borders */
  --primary:#2E6AF6;             /* blue CTAs */
  --primary-600:#2557CC;
  --primary-soft:#EDF3FF;        /* pale blue */
  --success:#22C55E;

  /* Radii & shadows */
  --r-lg: 16px;
  --r-md: 12px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
  --shadow-md: 0 10px 25px rgba(15, 23, 42, .08);
  --ring: 0 0 0 3px rgba(46,106,246,.15);
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}
a{color:var(--primary); text-decoration:none}
.container{max-width:1120px; margin:0 auto; padding:0 20px}

/* Code blocks */
.code{background:#0b1020; color:#E5E7EB; border-radius:12px; padding:14px; overflow:auto; border:1px solid #1f2a44}
.code code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size:.92rem;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background: linear-gradient(180deg, #3B82F6, #2563EB); color:#fff; font-weight:600;
  border:0; padding:12px 20px; border-radius:var(--r-pill);
  box-shadow:0 8px 18px rgba(37,99,235,.25); transition:.2s ease;margin-top: 10px;
}
.btn:hover{filter:brightness(.96); transform:translateY(-1px)}
.btn.ghost{
  background:#fff; color:var(--primary);
  border:1.5px solid var(--primary); box-shadow:var(--shadow-sm);
}
.btn.google{
  background:#fff; color:#111827; border:1.5px solid var(--line);
}
.badge{padding:6px 12px; border-radius:var(--r-pill); background:var(--primary-soft); color:#1D4ED8; font-weight:600}
.pill{padding:6px 12px; border-radius:var(--r-pill); background:#F1F5F9; color:#334155; border:1px solid var(--line)}

/* Header (white bar, login on right) */
.site-header{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:20px}
.brand{display:flex; align-items:center; gap:10px}
.nav-toggle{display:none; appearance:none; border:1.5px solid var(--line); background:#fff; color:#111827; border-radius:10px; padding:8px 10px; line-height:1; font-weight:700}
.logo{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background: conic-gradient(from 200deg, #7DD3FC, #A78BFA, #60A5FA);
  box-shadow:var(--shadow-sm);
}
.nav a{color:#111827; opacity:.8; margin:0 8px; font-weight:600}
.nav a:hover{opacity:1}

/* Hero (light, airy, left text + right mock) */
.hero{padding:72px 0}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center}
h1{font-size:clamp(30px, 4.2vw, 48px); line-height:1.15; margin:.25rem 0 1rem}
.lead{color:var(--muted); font-size:1.05rem; max-width:65ch}
.strip{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.mock{
  min-height:360px; border-radius:36px; background:linear-gradient(180deg,#FFFFFFCC,#F8FAFFCC); backdrop-filter: blur(6px);
  border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(2,6,23,.08); padding:16px; display:grid; gap:12px;
}
.mock-card{
  background:#F8FAFF; border:1px solid var(--line); border-radius:20px;
  padding:18px; color:#1F2937; font-weight:700;
}

/* Sections / cards */
.section{padding:64px 0}
.section.alt{background:#FFFFFF}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px; box-shadow:0 10px 25px rgba(15,23,42,.06)
}
.icon{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--primary-soft); color:#1D4ED8; font-weight:800; margin-bottom:10px
}

/* Auth screens (login/register) — white card in center) */
.auth{display:grid; place-items:center; min-height:100vh; background:var(--bg)}
.auth-card{
  width:min(520px,94%); background:var(--surface); border:1px solid var(--line);
  border-radius:24px; padding:28px; box-shadow:var(--shadow-md)
}
.auth h1{margin:0 0 .25rem}
.muted{color:var(--muted)}

/* Inputs = pill-like, thin border, soft focus ring */
input, textarea{
  background:#fff; color:#111827;
  border:1.5px solid var(--line); border-radius:14px;
  padding:14px 16px; outline:0; transition:.15s ease; font-size:1rem;
  margin-top: 10px;
}
input:focus, textarea:focus{border-color:var(--primary); box-shadow:var(--ring)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.check{display:flex; gap:10px; align-items:flex-start; margin:.25rem 0; color:var(--muted);align-items: center;margin-top: 10px;}

/* Contact form on landing */
.contact{display:grid; gap:12px; margin-top:12px}
.contact button{justify-self:start}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:24px 0; color:var(--muted); text-align:center}

/* Responsive */
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr} .grid3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .grid3{grid-template-columns:1fr} }

/* Mobile header nav */
@media (max-width:820px){
  .nav{flex-wrap:wrap}
  .nav-toggle{display:inline-flex; margin-left:auto}
  .site-header nav{display:none; width:100%; padding-top:12px}
  body.nav-open .site-header nav{display:flex; flex-direction:column; gap:10px}
  .site-header nav a{margin:6px 0}
  .hero{padding:56px 0}
  .mock{min-height:280px}
}