/* Pro Bau & Design final styles */
:root{
  --bg:#0e1530;
  --bg2:#0b1126;
  --text:#f2f5ff;
  --muted:#a9b0c7;
  --accent:#33b1ff;
  --wa:#25D366;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55}
a{color:var(--accent);text-decoration:none}
.container{width:min(1100px,92vw);margin:0 auto;padding:24px}

.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--text)}
.logo{height:140px;width:auto;border-radius:10px}
.nav a{margin-left:18px;opacity:.9}
.nav a:hover{opacity:1}

@media (max-width: 600px) {
  .logo {
    height: 80px;
  }
}

.hero{padding-block:42px;text-align:left}
h1{margin:0 0 12px;font-size:36px}
.sub{max-width:820px;color:var(--muted);margin-bottom:22px}

.btn{display:inline-block;padding:12px 16px;border-radius:10px;border:1px solid transparent;font-weight:600}
.btn.primary{background:var(--accent);color:#081120}
.btn.wa{background:var(--wa);color:#081120;margin-left:10px}

h2{margin:0 0 8px}
.intro{color:var(--muted);margin:0 0 14px}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);padding:16px;border-radius:14px}
.card h3{margin-top:0}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid figure{margin:0;background:rgba(255,255,255,.03);border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.07)}
.grid img{width:100%;height:200px;object-fit:cover;display:block}
.grid figcaption{padding:8px 10px;color:#c8cff1;font-size:14px}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Поля формы — белый фон и чёрный текст */
form input,
form select,
form textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  color: #000;
  font-size: 15px;
  font-weight: 400;
  appearance: none;
}

/* Опции выпадающего списка */
form select option {
  color: #000;
  background: #fff;
}

/* Плейсхолдеры */
form input::placeholder,
form textarea::placeholder {
  color: #555;
}


/* На всякий случай красим пункты списка */
form select option {
  color: #000;
  background: #fff;
}

/* Если оставишь required, можно подсерить именно плейсхолдер (необязательно) */
form select:required:invalid {
  color: #000; /* хочешь серый — поставь #666 */
}

form button{cursor:pointer}
.contact-aside .btn{display:inline-block}

.plain{list-style:none;padding:0;margin:10px 0}
.plain li{margin-bottom:6px}

.site-footer{border-top:1px solid rgba(255,255,255,.08);margin-top:24px}
.footer-row{display:flex;justify-content:space-between;align-items:center;color:#c5cbea}

@media (max-width:980px){
  .cards{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
}