body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #0f172a;
color: #e5e7eb;
}

a { color: #38bdf8; text-decoration: none; }
a:hover { text-decoration: underline; }

header {
padding: 20px 24px;
max-width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo{
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 14px;
}

nav a {
margin-left: 16px;
font-size 14px;
}

.hero {
max-width: 960px;
margin: 40px auto 32px;
padding: 0 24px;
}

.hero p {
max-width: 540px;
line-height: 1.6;
}

.tagline {
display: inline-block;
margin-top: 16px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid #22c55e33;
font-size: 13px;
color: #bbf7d0;
}

.section h2 {
font-size: 22px;
margin: 20px 0 10px;
}

.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin-top: 12px;
}

.card {
background: #020617;
border-radius: 12px;
padding: 16px;
border: 1px solid #1e293b;
font-size: 14px;
}

.badge {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.00em;
color: #a5b4fc;
margin-bottom: 4px;
}

.price {
font-size: 26px;
font-weight: 600;
margin: 8px 0;
}

small {
font-size: 11px;
color: #9ca3af;
}

footer {
max-width: 960px;
margin: 16px auto 32px;
padding: 0 24px;
font-size: 12px;
color: #6b7200;
border-top: 1px solid #1f2937;
padding-top: 12px;
}