:root { --bg:#0f1013; --panel:#151821; --muted:#8b90a0; --text:#e8eaf1; --accent:#ff3b3b; --accent-2:#ffad33; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1140px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;background:rgba(15,16,19,0.75);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(255,255,255,0.06);z-index:10}
.header .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.brand .logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.nav{display:flex;gap:16px;font-size:14px;color:var(--muted)}
.nav a{color:var(--muted)}
.nav a.active{color:var(--text)}
.card{background:var(--panel);border:1px solid rgba(255,255,255,0.06);border-radius:14px;overflow:hidden}
.section{margin:24px 0}
.section h2{margin:0 0 10px;font-size:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.12);background:#202331;color:var(--text);cursor:pointer;font-weight:600}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#101114;border:none}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery img{width:100%;height:120px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,0.06)}
.footer{margin:32px 0;padding:16px 0;border-top:1px solid rgba(255,255,255,0.06);color:var(--muted);font-size:14px}
@media (max-width:900px){.header .inner{flex-wrap:wrap;gap:10px}.grid{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,1fr)}}

/* --- Typography refresh --- */
:root{ --measure:72ch; --lh:1.6; --h-lh:1.2 }
/* Типографика — простой и читабельный Inter */
body{ font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; line-height: 1.6; }
h1,h2,h3{ font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; line-height: 1.25; letter-spacing: .1px; }
h1{ font-size: 36px; font-weight: 700; margin: 0 0 12px; }
h2{ font-size: 26px; font-weight: 700; margin: 0 0 12px; }
h3{ font-size: 20px; font-weight: 600; margin: 0 0 8px; }

/* ограничение ширины текстовых колонок */
.prose{ max-width: 70ch; }
.prose p{ margin: 10px 0; }
.prose ul{ margin: 10px 0 0 20px; padding: 0 }
.prose li{ margin: 6px 0 }
.lead{ font-size: 18px; color: var(--muted) }
.kicker{ text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--muted); font-size: 12px; margin-bottom: 6px }
.badge.soft{ background: rgba(255,255,255,0.06); border: 1px dashed rgba(255,255,255,0.12); }
.stack-md > * + *{ margin-top: 10px }
.stack-lg > * + *{ margin-top: 14px }
hr.sep{ border: none; height: 1px; background: rgba(255,255,255,.08); margin: 16px 0 }

/* header alignment */
.header .inner { align-items: center; }
.header .actions { display:flex; align-items:center; gap:12px; }
.header .actions .phone { display:inline-flex; align-items:center; }

/* header tweaks */
.header .inner{ display:flex; align-items:center; }
.header .brand{ display:flex; align-items:center; gap:12px; }
.header .actions{ display:flex; align-items:center; gap:12px; }
.header .actions .phone{ display:flex; align-items:center; height:40px; padding:0 4px; line-height:1; color:var(--text); }
.header .actions .btn{ height:40px; padding:0 14px; display:inline-flex; align-items:center; }

/* --- Header layout fix --- */
.header .inner{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  min-height:64px;
}
.header .brand{display:flex;align-items:center;gap:12px}
.header nav.nav{display:flex;gap:16px;justify-content:center}
.header .actions{display:flex;align-items:center;gap:12px}
.header .actions .phone{display:flex;align-items:center;height:40px;padding:0 6px;color:var(--text)}
.header .actions .btn{height:40px;padding:0 14px;display:inline-flex;align-items:center}
.header .actions .btn.vk{background:#1f2a3a;border-color:rgba(255,255,255,0.12)}
@media (max-width:900px){
  .header .inner{grid-template-columns: 1fr; row-gap:8px}
  .header nav.nav{justify-content:flex-start; flex-wrap:wrap}
  .header .actions{justify-content:flex-start; flex-wrap:wrap}
}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
.lightbox.show{display:flex}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:12px;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.lightbox__close{position:absolute;top:16px;right:16px;height:44px;min-width:44px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:#1c1f2a;color:#fff;font-size:24px;line-height:1}
@media (max-width:900px){.lightbox img{max-width:96vw;max-height:80vh}}

/* Hero video */
.hero-video{
  width:100%;
  height:420px;           /* подгоните при желании */
  object-fit:cover;
  display:block;
  background:#000;        /* чтобы не мигал фон при загрузке */
  border:0;
}

@media (min-width:1024px){
  .hero-video{ height:520px; }  /* необязательно: повыше на десктопе */
}

/* Накладка-градиент для читабельности текста (опционально) */
#hero-cover .card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.25) 40%, rgba(0,0,0,0) 70%);
  pointer-events:none;
}

.quest-description{
  color: var(--muted);
  line-height: 1.7;
  font-size: 16px;
  max-width: 68ch;          /* узкая колонка легче читается */
  white-space: pre-line;    /* главное: \n → перенос строки */
}
.quest-description p{ margin: 0 0 12px; }
@media (min-width: 1024px){
  .quest-description{ font-size: 18px; }
}