:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 0; background: #0b0f17; color: #e9eef7; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1050px; margin: 0 auto; padding: 18px; }

.site-header { position: sticky; top: 0; background: rgba(11,15,23,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.logo { width: 34px; height: 34px; object-fit: contain; }
.nav { display: flex; gap: 14px; align-items: center; }
.nav a { opacity: .9; }
.nav a:hover { opacity: 1; }

.btn { display: inline-block; padding: 10px 14px; border-radius: 10px; background: #3b82f6; color: white; font-weight: 600; border: 1px solid rgba(255,255,255,.12); }
.btn.secondary { background: transparent; }
.btn:hover { filter: brightness(1.05); }

.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; align-items: center; padding: 22px 0; }
.hero img { width: 100%; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); }
.hero-actions { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 16px; }
.lead { opacity: .9; max-width: 70ch; }

.list li { margin: 10px 0; }

.form { display: grid; gap: 12px; max-width: 520px; }
input, textarea {
  width: 100%; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color: #e9eef7;
}
label { display: grid; gap: 6px; }

.flash-wrap { margin: 14px 0; display: grid; gap: 10px; }
.flash { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); }
.flash.success { background: rgba(34,197,94,.15); }
.flash.error { background: rgba(239,68,68,.15); }

.site-footer { border-top: 1px solid rgba(255,255,255,.08); margin-top: 28px; padding: 18px 0; opacity: .85; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
}