:root{
  --bg:#0a1220;
  --bg-2:#0c1626;
  --card:#131c2b;
  --ink:#e3eaf5;
  --muted:#7d8ca6;
  --line:rgba(255,255,255,.10);
  --brand:#2956a3;
  --brand-2:#1b2e4b;
  --radius-xl:10px;
  --radius-lg:8px;
  --radius-sm:5px;
  --shadow:0 4px 18px rgba(0,0,0,.18);
  --font:Segoe UI, Inter, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background: #0a1220;
}


.nav {
  position: sticky; top: 0; z-index: 10;
  background: #101a2b;
  border-bottom: 2px solid var(--brand);
  box-shadow: 0 2px 8px #0002;
}
.nav__wrap {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px 18px 18px;
  gap: 32px;
}
.nav__brand {
  display: flex; align-items: center; gap: 18px;
}
.brand__name {
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .5px;
  color: var(--ink);
  text-shadow: 0 1px 0 #0003;
}
.nav__links {
  display: flex; gap: 18px;
}
.nav__links a {
  color: var(--muted); text-decoration: none;
  padding: 8px 16px; border-radius: 6px;
  font-weight: 500;
  font-size: 1rem;
  transition: background .15s;
}
.nav__links a.active, .nav__links a:hover {
  color: var(--brand);
  background: #18243a;
}

.container{max-width:900px;margin:32px auto 40px;padding:0 16px}

.card{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%), var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow);backdrop-filter: blur(8px)}
.card--soft{background:rgba(255,255,255,.03);border:1px dashed var(--line);border-radius:16px;padding:12px;display:inline-block}

.panel--hero h1{margin:0 0 8px 0;font-size:34px;letter-spacing:.4px}
.panel--hero p{margin:0;color:var(--muted)}
.panel.panel--cta{text-align:center}
.panel.panel--cta h2{margin:4px 0 6px 0}
.panel.panel--cta p{color:var(--muted)}

.footer{display:flex;justify-content:center;margin-top:18px}

.sheet{
  border-radius: var(--radius-xl);
  background: var(--card);
  border: 1.5px solid var(--line);
  padding: 38px 32px 32px 32px;
  box-shadow: var(--shadow);
}

.group{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:780px){.group{grid-template-columns:1fr}}

.field{margin-bottom:22px}
label{
  display:block;
  margin:0 0 7px 0;
  font-weight:600;
  font-size:1.08rem;
  color:var(--brand);
  letter-spacing:.1px;
}
input[type="text"], textarea, select{
  width:100%;
  border:1.5px solid var(--line);
  background:rgba(255,255,255,.01);
  color:var(--ink);
  padding:13px 15px;
  border-radius:7px;
  outline:none;
  font-size:15.5px;
  font-family:var(--font);
  transition: border .18s;
}
input[type="text"]:focus, textarea:focus, select:focus{
  border:1.5px solid var(--brand);
}
textarea{resize:vertical;min-height:44px}
::placeholder{color:#7d8ca6}

.fieldset{
  border:1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding:18px 18px 10px 18px;
  margin-bottom:22px;
  background:rgba(255,255,255,.01);
}
.fieldset legend{
  padding:0 10px;
  color:var(--brand);
  font-weight:700;
  font-size:1.08rem;
}
.choices{display:flex;flex-wrap:wrap;gap:14px 28px;color:var(--muted)}
.choices input{transform:scale(1.08)}

.footerbar{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:18px;
}
.hint{color:var(--muted);font-size:13px}

.btn{
  border:1.5px solid var(--brand);
  border-radius:7px;
  padding:11px 22px;
  font-weight:700;
  letter-spacing:.2px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:var(--brand);
  color:#fff;
  font-size:1rem;
  box-shadow:none;
  transition:background .15s, color .15s, border .15s;
}
.btn--primary{
  background:var(--brand);
  color:#fff;
  border:1.5px solid var(--brand);
}
.btn--primary:hover{
  background:#1b2e4b;
  color:#fff;
  border:1.5px solid #1b2e4b;
}
.btn--ghost{
  background:transparent;
  color:var(--brand);
  border:1.5px solid var(--brand);
}
.btn--ghost:hover{
  background:rgba(41,86,163,0.08);
  color:var(--brand);
}
.errors{color:#ffd8dc}
.pre{white-space:pre-wrap;background:rgba(0,0,0,.18);border:1.5px solid var(--line);border-radius:7px;padding:12px;color:var(--ink)}
