/* Workplace Wellness Surveys — v2 with client-provided content */
* { box-sizing: border-box; } html, body { margin:0; padding:0; }
:root{ --bg:#f8fafc; --card:#fff; --ink:#0f172a; --muted:#475569; --border:#e2e8f0; --indigo:#4f46e5; --cyan:#06b6d4; --shadow:0 10px 25px rgba(2,6,23,.08); --radius:16px; }
body{ font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:var(--ink); background:linear-gradient(135deg,#f8fafc,#fff); line-height:1.6; }
.container{ max-width: 1120px; margin: 0 auto; padding: 0 20px; }
a{ color:var(--indigo); text-decoration:none; } a:hover{ opacity:.9; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.1rem; border-radius:14px; font-weight:600; font-size:.95rem; border:1px solid transparent; transition:.2s; cursor:pointer; }
.btn.primary{ background:var(--indigo); color:#fff; box-shadow:var(--shadow); }
.btn.ghost{ background:#fff; color:var(--ink); border-color:var(--border); }
.header{ position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background:rgba(255,255,255,.85); border-bottom:1px solid var(--border); }
.header .row{ height:64px; display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:.75rem; font-weight:900; }
.logo svg{ width:34px; height:34px; border-radius:12px; }
.nav{ display:none; gap:1.25rem; font-size:.95rem; }
@media(min-width: 860px){ .nav{ display:flex; } }
.hero{ position:relative; overflow:hidden; }
.hero::before{ content:''; position:absolute; inset:-10%; z-index:-1; background:radial-gradient(600px 300px at 10% 10%, rgba(79,70,229,.08), transparent 70%), radial-gradient(500px 280px at 90% 10%, rgba(6,182,212,.08), transparent 70%); }
.hero .grid{ display:grid; gap:32px; padding:72px 0; }
@media(min-width:980px){ .hero .grid{ grid-template-columns:1fr 1fr; align-items:center; } }
h1{ font-size: clamp(2rem, 1.2rem + 2.5vw, 3rem); line-height:1.15; margin:.25rem 0 0 0; font-weight:900; }
.lead{ font-size:1.05rem; color:var(--muted); max-width:65ch; }
.section{ padding: 56px 0; }
h2{ font-size: 2rem; margin: 0 0 .5rem 0; }
.small{ color:var(--muted); }
.grid-2{ display:grid; gap:18px; grid-template-columns:1fr; } @media(min-width: 960px){ .grid-2{ grid-template-columns:1fr 1fr; } }
.cards{ display:grid; gap:18px; } @media(min-width: 980px){ .cards{ grid-template-columns: repeat(3,1fr); } }
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:0 4px 18px rgba(2,6,23,.04); }
.list{ list-style: none; padding:0; margin:0; display:grid; gap:10px; }
.list li::before{ content:'✓'; margin-right:.6rem; color:#10b981; font-weight:900; }
.step-list{ counter-reset: s; list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.step-list li{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow:0 6px 16px rgba(2,6,23,.04); position:relative; }
.step-list li::before{ counter-increment:s; content: counter(s, decimal-leading-zero); position:absolute; top:-12px; left:16px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:var(--indigo); color:#fff; font-size:.8rem; font-weight:700; box-shadow:var(--shadow); }
.footer{ border-top:1px solid var(--border); padding: 30px 0; color:var(--muted); }
.badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; font-size:.8rem; border:1px solid var(--border); background:#fff; border-radius: 999px; color: var(--muted); box-shadow: 0 2px 10px rgba(2,6,23,.04); }
.gradient-text{ background: linear-gradient(90deg, var(--indigo), var(--cyan)); -webkit-background-clip:text; background-clip:text; color: transparent; }