:root{
  --vcc-blue:#0d47a1;
  --vcc-dark:#0b3a80;
  --vcc-accent:#073a9b;
  --card-bg:#ffffff;
  --text:#0b0f14;
  --muted:#4a5568;
  --radius:16px;
  --shadow: 0 10px 25px rgba(13,71,161,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;color:var(--text);background:#f5f7fb;}
a{color:var(--vcc-blue);text-decoration:none}
header{
  background:var(--vcc-blue);
  color:#fff;
  padding:20px 16px 28px;
}
.container{max-width:980px;margin:0 auto;padding:0 16px}
.brand{display:flex;align-items:center;gap:16px}
.brand img{width:88px;height:auto;border-radius:8px;box-shadow:var(--shadow);background:#fff;object-fit:cover}
.site-title{font-size:28px;font-weight:800;line-height:1.1;margin:0}
.site-sub{margin:4px 0 0 0;opacity:.9;font-weight:600}

nav{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}
nav a{color:#e6efff;font-weight:700;letter-spacing:.1px}
nav a:hover{text-decoration:underline}

.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin:24px 0}
.hero h1{font-size:36px;margin:0 0 14px}
.hero p{color:var(--muted);font-size:18px;margin:0 0 18px}

.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.btn{display:inline-block;padding:14px 22px;border-radius:12px;font-weight:800}
.btn.primary{background:var(--vcc-dark);color:#fff}
.btn.success{background:#1b5e20;color:#fff}

h2{font-size:28px;margin:0 0 14px}

.section-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.section-grid img{width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow)}

label{display:block;margin:14px 0 6px;font-weight:700}
input,textarea,select{
  width:100%;padding:14px;border-radius:12px;border:1px solid #d7deea;background:#fff;
  font-size:16px
}
textarea{min-height:140px;resize:vertical}
form .actions{margin-top:14px}

.footer{background:var(--vcc-blue);color:#fff;padding:24px;margin-top:36px}
.footer .container{display:flex;justify-content:center;font-weight:600}

@media (min-width: 740px){
  .brand img{width:110px}
  .hero h1{font-size:44px}
  .section-grid.side-by-side{grid-template-columns:1.2fr 1fr}
}