:root { --bg: #05060b; --panel: rgba(18, 21, 28, .82); --line: rgba(173, 185, 202, .14); --text: #f5f5fa; --muted: #9899a4; --green: #28e987; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; color: var(--text); font-family: Inter, sans-serif; background: radial-gradient(circle at 50% 20%, rgba(28, 111, 75, .18), transparent 30%), #05060b; }
a { color: inherit; }
.shell { width: min(100% - 28px, 780px); margin: 0 auto; padding: 18px 0 70px; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 24px; background: rgba(20, 18, 28, .8); backdrop-filter: blur(14px); }
.brand { color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: -.05em; font-size: 13px; }
.brand-mark { color: #e6d3ff; margin-right: 8px; }
.nav-links { display: flex; gap: 18px; align-items: center; font-size: 11px; color: #9a9ba5; }
.nav-links a { text-decoration: none; }
.nav-links a:hover, .nav-links .current { color: var(--green); }
.content { padding: 82px 0 0; text-align: center; }
h1 { margin: 0; font-size: clamp(2.8rem, 7vw, 5rem); letter-spacing: -.08em; line-height: .95; }
.lead { margin: 18px auto 35px; max-width: 480px; color: var(--muted); line-height: 1.7; font-size: 13px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: left; }
.card { padding: 22px; min-height: 145px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 16px 34px rgba(0,0,0,.2); }
.card h2 { margin: 0 0 10px; font-size: 15px; }
.card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.button { display: inline-block; border: 0; border-radius: 12px; padding: 12px 18px; color: #03160c; background: var(--green); font-weight: 800; text-decoration: none; cursor: pointer; }
.form { width: min(100%, 390px); margin: 0 auto; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); text-align: left; }
.form label { display: block; margin: 0 0 8px; color: #b3b5bf; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.form input { width: 100%; margin-bottom: 17px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--text); background: rgba(5, 8, 12, .72); }
.form input:focus { border-color: rgba(40, 233, 135, .7); }
.form .button { width: 100%; margin-top: 4px; }
.message { min-height: 18px; margin: 15px 0 0; color: #ff8787; font-size: 12px; text-align: center; }
@media (max-width: 650px) { .nav-links { gap: 10px; } .nav-links a:nth-child(2), .nav-links a:nth-child(3) { display: none; } .grid { grid-template-columns: 1fr; } .content { padding-top: 58px; } }