:root{
  --bg:#0b1020;
  --panel:#0f172a;
  --card:#111827;
  --soft:#0b1222;
  --text:#e5e7eb;
  --muted:#9aa4b2;
  --brand:#22c55e;      /* emerald */
  --accent:#60a5fa;     /* blue */
  --accent-2:#a78bfa;   /* violet */
  --border:#1f2937;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#0b0f1a,#0c1224 40%,#0b0f1a 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.65}
a{color:#c7d2fe}
.hidden{display:none!important}
.muted{color:var(--muted)}
.container{max-width:1200px;margin:0 auto;padding:1.2rem 1.2rem}
.fx-between{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.topbar{position:sticky;top:0;z-index:40;background:#0d121b;border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800}
.brand-mark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--accent));color:#001b10;font-weight:900}
.brand-name{letter-spacing:.4px}
.nav a{margin:0 .35rem;padding:.45rem .7rem;border-radius:999px;border:1px solid transparent;color:#e5e7eb;text-decoration:none}
.nav a[aria-current="page"]{border-color:#1e293b;background:linear-gradient(90deg,rgba(34,197,94,.12),rgba(96,165,250,.12))}
.lang .btn.small{padding:.4rem .6rem;font-size:.9rem}
.skip{position:absolute;left:-9999px;top:auto}
/* Buttons */
.btn{display:inline-block;background:linear-gradient(90deg,var(--brand),#2dd4bf);color:#001b10;padding:.72rem 1.05rem;border-radius:12px;border:0;box-shadow:var(--shadow);font-weight:700;text-decoration:none}
.btn.ghost{background:transparent;border:1px solid #1f2937;color:#e5e7eb}
.btn.slim{padding:.5rem .8rem}
.btn.small{padding:.4rem .6rem}
/* Hero */
.hero{background:radial-gradient(1200px 600px at 10% -10%,rgba(34,197,94,.15),transparent 60%),radial-gradient(1200px 600px at 100% 0,rgba(96,165,250,.12),transparent 50%);border-bottom:1px solid var(--border)}
.display{font-family:"Playfair Display",serif;font-weight:700;font-size:2.4rem;line-height:1.15;margin:1rem 0 .4rem}
.lead{color:#cbd5e1;margin-top:0}
.pill-list{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 0}
.pill-list li{list-style:none;border:1px solid #1f2937;padding:.25rem .6rem;border-radius:999px;background:rgba(255,255,255,.02)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1.2rem}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr}}
.gallery-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
@media (max-width:940px){.gallery-3{grid-template-columns:1fr}}
@media (max-width:640px){
  .card{width: unset;}
}
@media (min-width:650px){
  .card{width: 100%;}
}
.card{background:linear-gradient(180deg,var(--panel),#0b1222);border:1px solid var(--border);border-radius:16px;padding:1rem}
.shadow{box-shadow:var(--shadow)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem 0}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.grid-2 .span-2{grid-column:span 2}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr} .grid-2 .span-2{grid-column:span 1}}
.tight li{margin:.1rem 0}
.callout{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid #1f2937;background:linear-gradient(90deg,rgba(34,197,94,.1),rgba(167,139,250,.08));padding:1rem;border-radius:14px}
.mt{margin-top:1rem}
/* Timeline */
.timeline{list-style:none;padding:0;margin:1rem 0;border-left:3px solid #334155}
.timeline li{padding:.5rem 1rem;margin-left:.5rem;position:relative}
.timeline li::before{content:'';position:absolute;left:-9px;top:.8rem;width:.75rem;height:.75rem;border-radius:50%;background:linear-gradient(90deg,var(--brand),var(--accent))}
/* Tabs */
.tabs{display:flex;gap:.5rem;margin:.6rem 0}
.tab{border:1px solid #1f2937;background:#0b1222;border-radius:999px;padding:.42rem .85rem;cursor:pointer;color:#e5e7eb}
.tab.active{background:linear-gradient(90deg,var(--brand),var(--accent));color:#001b10;border-color:transparent}
.panels .panel{display:none;border:1px dashed #1f2937;border-radius:12px;padding:.8rem;background:#0b1222}
.panels .panel.active{display:block}
/* Forms */
.form label{display:flex;flex-direction:column;gap:.25rem}
input,select,textarea{padding:.6rem .7rem;border:1px solid #1f2937;border-radius:12px;background:#0b1222;color:#e5e7eb}
textarea{min-height:120px}
.success{color:#34d399}
/* Footer */
.footer{margin-top:2rem;border-top:1px solid var(--border);background:linear-gradient(180deg,#0b1222,#0b0f1a)}
img{max-width:100%;height:auto;border-radius:12px}
/* --- Brand (logo) --- */
.brand { display: flex; align-items: center; }
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: #e5e7eb;           /* цвет текста бренда на тёмной шапке */
}
.brand-logo {
  width: 256px;              /* подгони под свой логотип при желании */
  height: 256px;
  object-fit: contain;      /* чтобы не искажался */
  border-radius: 8px;       /* убери, если нужен острый квадрат */
  background: transparent;
}
.brand-name {
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1;
  color: #e5e7eb;           /* дублируем на всякий случай */
}

/* Удаляем визуальный след от старого .brand-mark, если где-то остался */
.brand-mark { display: none !important; }

/* Небольшое уменьшение на очень узких экранах */
@media (max-width: 420px) {
  .brand-logo { width: 28px; height: 28px; }
  .brand-name { font-size: .95rem; }
}
/* ↓ Сделать topbar компактнее ↓ */
.topbar .container {
  padding: 0.4rem 1rem;       /* было ~1.2rem */
}

.nav a {
  padding: 0.3rem 0.6rem;     /* уменьшить отступы в навигации */
  font-size: 0.95rem;         /* чуть меньше шрифт */
}

.brand-mark {
  width: 22px;
  height: 22px;
  font-size: 0.85rem;
}

.brand-name {
  font-size: 1.05rem;
}