:root{
  --bg:#ffffff;
  --ink:#1d1d1f;
  --muted:#555;
  --brand:#111111;
  --accent:#f5c;
  --line:#eaeaea;
  --ok:#0a8a1f;
  --err:#c62828;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}
a{color:var(--brand); text-underline-offset:2px}
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--line);
}
.container{max-width:1120px; margin:0 auto; padding:0 16px}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.logo{font-weight:700; letter-spacing:.2px}
nav ul{display:flex; gap:20px; list-style:none; padding:0; margin:0}
nav a{color:#333; text-decoration:none; font-weight:500}
.hero{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:32px; padding:48px 0}
.hero h1{font-size:clamp(28px,4vw,44px); margin:.2em 0 .4em}
.hero p.lead{font-size:clamp(16px,2.4vw,20px); color:var(--muted); margin:0 0 16px}
.badges{display:flex; gap:12px; flex-wrap:wrap; margin:12px 0 8px}
.badges span{border:1px solid var(--line); padding:6px 10px; border-radius:999px; font-size:13px; color:#444}
.hero img{width:100%; border-radius:14px; border:1px solid var(--line)}
.card{
  border:1px solid var(--line); border-radius:14px; padding:18px; background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.form label{display:block; font-weight:600; margin:12px 0 6px}
.form input, .form textarea, .form select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; font:inherit;
}
.form textarea{min-height:110px; resize:vertical}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.btn{display:inline-block; padding:14px 18px; border-radius:12px; background:var(--brand); color:#fff; border:none; font-weight:700; cursor:pointer}
.btn[disabled]{opacity:.6; cursor:not-allowed}
small.help{color:#666; display:block; margin-top:6px}
.error{color:var(--err); font-size:13px; margin-top:6px; display:none}
footer{border-top:1px solid var(--line); margin-top:48px; padding:18px 0; color:#555}
.grid{display:grid; grid-template-columns: repeat(3,1fr); gap:14px}
.grid .card{padding:10px}
.grid img{width:100%; border-radius:10px; border:1px solid var(--line)}
.cta{display:flex; gap:12px; align-items:center; margin-top:6px; color:#333}
.kv{font-size:14px; color:#666}
#cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:60;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
  display:none;
}
#cookie-banner .inner{padding:14px 14px; display:flex; gap:12px; align-items:flex-start; justify-content:space-between}
#cookie-banner p{margin:0; color:#333; font-size:14px}
#cookie-banner .actions{display:flex; gap:10px}
#cookie-banner button{padding:10px 14px; border-radius:10px; border:1px solid var(--line); background:#fff}
#cookie-banner .primary{background:var(--brand); color:#fff; border-color:var(--brand)}

@media (max-width: 960px){
  .hero{grid-template-columns:1fr; padding:28px 0}
  .grid{grid-template-columns: repeat(2,1fr)}
}
@media (max-width: 560px){
  nav ul{display:none}
  .row{grid-template-columns:1fr}
  .grid{grid-template-columns: 1fr}
}