:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #10151c; color: #e7edf5; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; background: radial-gradient(circle at 75% 10%, #1c3d4d, transparent 38%), #10151c; }
.landing { width: min(900px, calc(100% - 40px)); padding: 48px 0; }.eyebrow { margin: 0 0 12px; color: #7fc3d5; letter-spacing: .12em; font-size: 12px; font-weight: 700; } h1 { margin: 0; font-size: clamp(32px, 6vw, 56px); }.intro { max-width: 560px; margin: 18px 0 36px; color: #b7c7d5; line-height: 1.7; } nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.tool-card { min-height: 220px; padding: 24px; display: flex; flex-direction: column; gap: 13px; color: inherit; text-decoration: none; background: #19232e; border: 1px solid #3d5365; border-radius: 10px; transition: transform .15s, border-color .15s, background .15s; }.tool-card:hover, .tool-card:focus-visible { transform: translateY(-3px); border-color: #72bdd1; background: #20313f; outline: none; }.tool-tag { color: #8ea2b5; font-size: 11px; font-weight: 700; letter-spacing: .1em; }.tool-card strong { font-size: 21px; }.tool-card span:not(.tool-tag) { color: #c5d2de; line-height: 1.6; }.tool-card b { margin-top: auto; color: #f0c95b; } @media (max-width: 600px) { .landing { width: min(100% - 32px, 900px); } nav { grid-template-columns: 1fr; } }