:root { --ink:#0f172a; --slate:#334155; --mint:#10b981; --mintDark:#059669; --sky:#0ea5e9; --paper:#f8fafc; }
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--paper);color:var(--ink)}
.header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #e5e7eb;background:#fff;position:sticky;top:0}
.logo-wrap{display:flex;align-items:center;gap:10px} .logo-wrap img{height:40px}
.nav a{margin-left:16px;color:var(--slate);font-weight:600;text-decoration:none}
.nav .btn,.btn{background:linear-gradient(135deg,var(--mint),var(--sky));color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;text-decoration:none}
.hero{padding:64px 24px;background:linear-gradient(180deg,#fff,var(--paper))}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;max-width:1100px;margin:auto}
.hero h1{font-size:2.5rem;margin:0 0 12px} .hero p.lead{font-size:1.1rem;color:var(--slate)}
.kudos span{display:inline-block;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:6px 12px;margin:4px}
.section{padding:48px 24px} .container{max-width:1100px;margin:auto}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(2,6,23,.05)}
.form{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px}
.form label{display:block;font-weight:600;margin-top:12px}
.form input,.form select,.form textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #e5e7eb}
.footer{padding:32px 24px;border-top:1px solid #e5e7eb;color:var(--slate)}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr}}