/* ===== Дизайн-токены ===== */
:root{
  --bg:#ffffff; --fg:#0b0b0b; --muted:#6b7280;
  --primary:#2563eb; --primary-fg:#ffffff;
  --card:#ffffff; --border:#e5e7eb;
  --radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 12px 24px rgba(0,0,0,.12);

  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:40px; --space-6:64px;
  --maxw:1100px;
  --font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
:root.theme-dark{
  --bg:#0b0f16; --fg:#e5e7eb; --muted:#9aa3b2;
  --primary:#60a5fa; --primary-fg:#0b0f16;
  --card:#121826; --border:#1f2937;
  --shadow:0 1px 2px rgba(0,0,0,.7), 0 12px 24px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--fg); font-family:var(--font); line-height:1.6}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--primary); outline-offset:2px}
[aria-invalid="true"]{border-color:#ef4444!important}

/* ===== Каркас ===== */
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(16px,4vw,28px)}
.section{padding-block:var(--space-6)}
.section--tight{padding-block:var(--space-5)}
h1{font-size:clamp(28px,4vw,44px); line-height:1.2; margin:0 0 var(--space-3)}
h2{font-size:clamp(22px,3vw,32px); line-height:1.2; margin:0 0 var(--space-3)}
p{margin:0 0 var(--space-3); color:var(--muted)}

/* ===== Хедер ===== */
.site-header{position:sticky; top:0; z-index:20; backdrop-filter:saturate(180%) blur(12px);
  background:color-mix(in srgb, var(--bg) 85%, transparent); border-bottom:1px solid var(--border)}
.site-header .container{display:flex; align-items:center; gap:var(--space-3); padding-block:12px}
.brand{font-weight:800; text-decoration:none; color:inherit}
.site-nav__list{list-style:none; display:flex; gap:var(--space-3); margin:0; padding:0}
.site-nav__link{color:inherit; text-decoration:none; opacity:.9}
.site-nav__link[aria-current="page"]{text-decoration:underline; text-underline-offset:4px}
.theme-toggle{margin-left:auto}

/* ===== Кнопки ===== */
.btn{display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--card); color:inherit; text-decoration:none; box-shadow:var(--shadow); cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--primary); color:var(--primary-fg); border-color:transparent}

/* ===== Hero ===== */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-5); align-items:center}
.hero__media{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.hero__kicker{display:inline-block; padding:6px 10px; border-radius:999px; background:var(--card); border:1px solid var(--border); color:var(--muted); margin-bottom:10px}

/* ===== Карточки ===== */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3)}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.card h3{margin-top:0}

/* ===== Галерея ===== */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3)}
.gallery figure{margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border)}
.gallery img{display:block; width:100%; height:auto}

/* ===== Видео (адаптивный контейнер) ===== */
.video{position:relative; padding-top:56.25%; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border)}
.video iframe, .video video{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ===== Диалог / форма ===== */
dialog{ width:min(560px,92vw); border:none; border-radius:var(--radius); padding:24px; background:var(--card); color:var(--fg); box-shadow:var(--shadow); border:1px solid var(--border)}
dialog::backdrop{ background:rgba(0,0,0,.5)}
dialog[open]::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.5)}
label{display:block; margin-top:12px}
input,select,textarea{width:100%; padding:12px; border-radius:12px; border:1px solid var(--border); background:var(--bg); color:var(--fg); font:inherit}
small{color:var(--muted)}
.form-actions{display:flex; gap:var(--space-3); justify-content:flex-end; margin-top:var(--space-4)}

/* ===== Футер ===== */
.site-footer{border-top:1px solid var(--border); color:var(--muted); padding:var(--space-4)}

/* ===== Медиа ===== */
img,video{max-width:100%; height:auto; display:block}
.hero__media img{width:100%; height:auto; display:block}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr; gap:var(--space-4)}
  .cards,.gallery{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .cards,.gallery{grid-template-columns:1fr}
}