:root {
  --primary: #1f7ea7;
  --primary-dark: #165c78;
  --accent: #00c853;
  --text: #0f2a33;
}
* { box-sizing: border-box; }
body { margin:0; color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height:1.4; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.nav { position: sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #eee; }
.nav .wrap{ display:flex; align-items:center; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; }
.brand img{ width:40px; height:40px; border-radius:8px; object-fit:cover; }
.nav nav{ margin-left:auto; display:flex; gap:14px; align-items:center; }
.nav nav a{ text-decoration:none; padding:10px 12px; border-radius:10px; color:var(--text); }
.nav nav a.btn{ background:var(--primary); color:#fff; }
.burger{ display:none; width:36px; height:36px; border-radius:8px; background:linear-gradient(#444,#444) center/70% 2px no-repeat; border:1px solid #ddd; }
#navtoggle{ display:none; }
@media (max-width:900px){
  .nav nav{ position:fixed; right:16px; top:64px; background:#fff; border:1px solid #eee; border-radius:14px; padding:8px; display:none; flex-direction:column; }
  #navtoggle:checked ~ nav{ display:flex; }
  .burger{ display:block; }
}
.hero{ position:relative; height:min(72vh,720px); display:grid; }
.hero picture, .hero img{ width:100%; height:100%; object-fit:cover; filter:brightness(0.85); }
.hero-copy{ position:absolute; inset:auto 0 10% 0; text-align:center; color:#fff; }
.hero h1{ font-size:clamp(28px,5vw,44px); margin:0 0 8px; }
.hero p{ font-size:clamp(16px,2.6vw,20px); opacity:.95; }
.btn{ background:var(--primary); color:#fff; padding:10px 16px; border-radius:12px; text-decoration:none; display:inline-block; border:none; cursor:pointer; }
.btn.lg{ padding:14px 22px; font-size:18px; }
.btn:hover{ background:var(--primary-dark); }
.section{ padding:56px 0; }
.section h2{ margin:0 0 20px; font-size:clamp(24px,4vw,34px); }
.cards{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.card{ border:1px solid #eee; border-radius:16px; overflow:hidden; background:#fff; display:grid; }
.card img{ width:100%; height:180px; object-fit:cover; }
.card div{ padding:14px; }
.band{ background:#f7fbfd; padding:28px 0; }
.promo-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.promo-grid img{ width:100%; height:220px; object-fit:cover; border-radius:14px; border:1px solid #e8eef2; background:#fff; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:900px){
  .two{ grid-template-columns:1fr; }
}
.embed iframe{ width:100%; height:600px; border:0; }
.embed.ratio-16x9 iframe{ aspect-ratio:16/9; height:auto; }
.note{ border:1px dashed #bcd; border-radius:12px; padding:16px; background:#f9fcff; }
.masonry{ columns: 3 260px; column-gap: 12px; }
.masonry img{ width:100%; margin:0 0 12px; border-radius:14px; display:block; }
.form{ display:grid; gap:12px; }
.form label{ display:grid; gap:6px; font-weight:600; }
.form input, .form select, .form textarea{ padding:10px 12px; border:1px solid #d7e1e8; border-radius:12px; background:#fff; }
.form button{ width:max-content; }
.alt{ font-size:14px; color:#4b5; }
.footer{ background:#0b1f27; color:#cfe7f2; padding:28px 0; margin-top:24px; }
.footer a{ color:#9be0ff; }
.footer .mini{ display:flex; align-items:center; gap:14px; }
.wapp{ position:fixed; right:16px; bottom:16px; background:var(--accent); color:#fff; padding:14px; border-radius:50%; display:grid; place-items:center; box-shadow:0 10px 25px rgba(0,0,0,.25); }
.wapp svg{ width:28px; height:28px; }
.wapp:hover{ filter:brightness(.95); }