/* ==========================================================================
   PrivEsc v3 — контраст, мобилки, авто‑скрытие шапки, on-dark/on-light
   ========================================================================== */

/* ===== Токены ===== */
:root{
  /* светлая тема по умолчанию */
  --bg:#ffffff;
  --fg:#1f2937;             /* тёмно‑серый текст (не «глухо чёрный») */
  --fg-soft:#334155;
  --muted:#8a97ad;
  --surface:#F6F8FC;
  --accent:#7E98FF;

  --on-dark:#E7EEFB;        /* текст на тёмном фоне */
  --on-dark-soft:#BFD0F9;
  --on-light:#1f2937;

  --hero-scrim: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  --hero-scrim-light: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.2));

  --radius:12px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 10px 30px rgba(0,0,0,.10);

  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem; --s-6:4rem;

  --topbar-h:56px;

  /* новый «резиновый» боковой отступ для всего сайта */
  --page-gutter:clamp(16px, 5vw, 28px);
}

@media (max-width:860px){ :root{ --topbar-h:52px; } }

/* ===== База ===== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
  line-height:1.7; text-rendering:optimizeLegibility;
}
.container{ max-width:1100px; margin:0 auto; padding-inline:var(--page-gutter); }
main{ display:block; }

h1{ font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.2; margin:0 0 var(--s-2); color:var(--fg); }
h2{ font-size:clamp(1.4rem,2.8vw,1.9rem); line-height:1.25; margin:0 0 var(--s-2); color:var(--fg); }
h3{ font-size:clamp(1.15rem,2.2vw,1.35rem); line-height:1.3; margin:0 0 var(--s-1); color:var(--fg); }
p, ul, ol, .lead{ margin:0 0 var(--s-2); }
ul, ol{ padding-left:1.25rem; }
li + li{ margin-top:.4rem; }
.lead{ font-size:clamp(1.05rem,1.7vw,1.2rem); max-width:68ch; color:var(--fg-soft); }
a{ color:inherit; }

/* ==== Утилиты контраста ==== */
.on-dark, .on-dark *{ color:var(--on-dark); }
.on-dark .lead{ color:var(--on-dark-soft); }
.on-dark .btn--ghost{
  color:var(--on-dark);
  border-color:rgba(255,255,255,.7);
}
.on-light, .on-light *{ color:var(--on-light); }

/* ==========================================================================
   Навбар + Drawer
   ========================================================================== */
.topbar{
  position:sticky; top:0; z-index:90;
  backdrop-filter:saturate(140%) blur(8px);
  background: color-mix(in oklab, var(--bg), transparent 12%);
  border-bottom:1px solid color-mix(in oklab, var(--fg), transparent 90%);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.topbar--hide{ transform: translateY(calc(-1 * var(--topbar-h) - 8px)); }

.nav{
  display:flex; align-items:center; gap:.8rem;
  height:var(--topbar-h); padding:.35rem 0; /* боковые даёт .container */
  justify-content:space-between;
}

/* логотип слегка отступает от левого края */
.brand{ text-decoration:none; font-weight:700; letter-spacing:.2px; color:inherit; }
.brand__txt{ padding-left: .1rem; }

.nav__inline{ display:flex; gap:.5rem; align-items:center; margin-left:auto; }
.nav__inline a{ padding:.4rem .7rem; border-radius:10px; text-decoration:none; }
.nav__inline a:hover{ background: color-mix(in oklab, var(--fg), transparent 92%); }
.nav__inline .cta{ background:var(--accent); color:#fff; }

.nav__toggle{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.nav__btn{
  display:none; width:46px; height:42px; align-items:center; justify-content:center;
  border:1px solid color-mix(in oklab, var(--fg), transparent 75%);
  background: color-mix(in oklab, var(--bg), transparent 6%);
  border-radius:12px; cursor:pointer;
}
.nav__btn span{
  display:block; width:22px; height:2px; background:currentColor; margin:3px 0; border-radius:2px;
  transition: transform .22s ease, opacity .2s ease, width .2s ease;
}

@media (max-width:1180px){
  .nav__btn{ display:inline-flex; margin-left:auto; }
  .nav__inline{ display:none; }
}

/* Drawer */
.drawer{
  position:fixed; inset:var(--topbar-h) 0 0 0; max-width:none;
  background:var(--bg);
  transform:translateX(-100%); transition:transform .28s ease;
  z-index:85; border-top:1px solid color-mix(in oklab, var(--fg), transparent 88%);
  padding:.8rem; display:grid; align-content:start; gap:.25rem;
  box-shadow:16px 0 40px rgba(0,0,0,.25);
}
.drawer nav a{ display:block; padding:.9rem 1rem; border-radius:12px; text-decoration:none; }
.drawer nav a:hover{ background: color-mix(in oklab, var(--fg), transparent 92%); }
.drawer .cta{ background:var(--accent); color:#fff; text-align:center; }

.scrim{
  position:fixed; inset:var(--topbar-h) 0 0 0; background: rgba(16,20,28,.45);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:80;
}
.nav__toggle:checked ~ .nav__btn span:nth-child(1){ transform: translateY(5px) rotate(45deg); width:22px; }
.nav__toggle:checked ~ .nav__btn span:nth-child(2){ opacity:0; }
.nav__toggle:checked ~ .nav__btn span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); width:22px; }
.nav__toggle:checked ~ .drawer{ transform:none; }
.nav__toggle:checked ~ .scrim{ opacity:1; pointer-events:auto; }

/* ==========================================================================
   Герои / Параллакс
   ========================================================================== */
.hero,
.pagehead,
main > section:first-child{ padding-top: calc(var(--topbar-h) + 24px); }

.hero{
  position:relative; min-height:62vh; display:flex; align-items:center;
}

.hero--parallax{
  background-image: var(--hero-bg);
  background-size:cover; background-position:center;
  background-attachment: fixed;
  color:var(--on-dark);
}
.hero__inner{ position:relative; padding: var(--s-6) 0 var(--s-5); z-index:2; }
.hero__cta{ display:flex; gap:.75rem; flex-wrap:wrap; }
.hero__bullets{ margin: var(--s-3) 0; padding-left:1.15rem; }
.hero__bullets li + li{ margin-top:.45rem; }

/* затемнение поверх любых картинок => читаемый текст */
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background: var(--hero-scrim);
}
.hero--light .hero__scrim{ background: var(--hero-scrim-light); }
.hero--parallax .hero__inner h1,
.hero--parallax .hero__inner h2,
.hero--parallax .hero__inner h3,
.hero--parallax .hero__inner p,
.hero--parallax .hero__inner li{ color:var(--on-dark); }

/* Pagehead */
.pagehead{ position:relative; padding: var(--s-5) 0 var(--s-4); overflow:hidden; }
.pagehead::before{
  content:""; position:absolute; inset:0; opacity:.55;
  background-image:
    radial-gradient(900px 360px at -10% -20%, color-mix(in oklab, var(--accent), transparent 84%) 0%, transparent 60%),
    radial-gradient(700px 320px at 110% 20%, color-mix(in oklab, var(--accent), transparent 88%) 0%, transparent 60%),
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--fg), transparent 96%) 0 18px, transparent 18px 36px);
}
.pagehead__inner{ position:relative; }

/* Параллакс‑перемычки */
.parallax{
  height:30vh; min-height:220px;
  background-image: var(--parallax-bg);
  background-size:cover; background-position:center;
  background-attachment: fixed; position:relative;
}
.parallax::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.18));
}

/* iOS fallback */
@supports (-webkit-overflow-scrolling: touch){
  .hero--parallax, .parallax{ background-attachment: scroll; }
}

/* ==========================================================================
   Секции / карточки / метрики
   ========================================================================== */
.section{ padding: var(--s-5) 0; background: var(--bg); }
.section:nth-of-type(odd){ background: var(--surface); }
.section__title{ margin-bottom: var(--s-3); }

.cards{ display:grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.card{
  background:var(--bg);
  border:1px solid color-mix(in oklab, var(--fg), transparent 90%);
  border-radius: var(--radius);
  padding: var(--s-2);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card .more{ text-decoration:none; color:var(--accent); }

.card-grid{ display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:960px){ .card-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .card-grid{ grid-template-columns:1fr; } }

.kpi-row{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin:16px 0 20px; }
@media (max-width:960px){ .kpi-row{ grid-template-columns:1fr; } }
.kpi{ background:#0b101d; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:12px; color:var(--on-dark); }
.kpi__value{ display:block; font-weight:600; }
.kpi__label{ display:block; font-size:.9rem; color:#9aa3b2; }

/* Альтернативная тёмная секция */
.section--alt{
  background:#0b0f1a;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.section--alt h1, .section--alt h2, .section--alt h3,
.section--alt p, .section--alt li{ color:var(--on-dark); }
.section--alt .lead{ color:var(--on-dark-soft); }

/* Разделитель */
.divider{ height:1px; border:0; margin: var(--s-4) 0; background: color-mix(in oklab, var(--fg), transparent 88%); }

/* ==========================================================================
   Блог
   ========================================================================== */
.postlist{ list-style:none; padding-left:0; }
.postlist li{ padding:.7rem 0; border-bottom:1px dashed color-mix(in oklab, var(--fg), transparent 85%); }
.postlist li a{ text-decoration:none; }
.postlist li a:hover{ color:var(--accent); }

.blog-content{ max-width:72ch; margin:0 auto; }
.blog-content h2, .blog-content h3{ margin-top: var(--s-3); }
.blog-content blockquote{
  margin: var(--s-2) 0; padding: var(--s-2);
  border-left:3px solid var(--accent);
  background: color-mix(in oklab, var(--surface), transparent 0%);
  border-radius: var(--radius);
}
.blog-content pre, .blog-content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: color-mix(in oklab, var(--fg), transparent 94%);
  padding:.2rem .4rem; border-radius:6px;
}
.blog-content pre{ padding: var(--s-2); overflow:auto; }

/* ==========================================================================
   Формы / кнопки
   ========================================================================== */
.btn, button, input[type=submit]{
  display:inline-block; background:var(--accent); color:#fff;
  padding:.7rem 1.1rem; border:0; border-radius:10px; cursor:pointer; text-decoration:none;
}
.btn--ghost{
  background:transparent; color:var(--on-light);
  border:1px solid color-mix(in oklab, var(--fg), transparent 75%);
}
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ряды CTA не ломаются на мобилке */
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* Формы */
.contact-section{ padding: var(--s-5) 0; }
.form-container{
  background:var(--bg);
  border:1px solid color-mix(in oklab, var(--fg), transparent 90%);
  border-radius: var(--radius);
  padding: var(--s-3); box-shadow: var(--shadow-sm);
  max-width:620px; margin:0 auto;
}
.form-group{ margin-bottom: var(--s-2); }
.input, .textarea{
  width:100%; padding:.7rem .8rem;
  border:1px solid color-mix(in oklab, var(--fg), transparent 78%);
  border-radius:8px; background: color-mix(in oklab, var(--bg), transparent 0%); color:inherit;
}
.input:focus, .textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
}
.textarea{ min-height:140px; resize:vertical; }

/* ==========================================================================
   Футер
   ========================================================================== */
.footer{
  border-top:1px solid color-mix(in oklab, var(--fg), transparent 90%);
  padding: var(--s-3) 0; color: color-mix(in oklab, var(--fg), transparent 30%);
}

/* ==========================================================================
   Тёмная тема (авто)
   ========================================================================== */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#202833; --fg:#C3CEE8; --fg-soft:#D4DCF0; --surface:#222a36; --muted:#28313E; --accent:#7E98FF;
    --on-dark:#E7EEFB; --on-dark-soft:#C7D6FF; --on-light:#C3CEE8;
  }
  .hero__scrim{ background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.6)); }
  .blog-content pre, .blog-content code{ background: color-mix(in oklab, var(--fg), transparent 88%); }
  .card{ background:#0e1322; border:1px solid rgba(255,255,255,.06); }
  .kpi{ background:#0b101d; }
}

/* ==========================================================================
   Мелкие UX‑штрихи
   ========================================================================== */
html, body{ overscroll-behavior:none; }
/* === Slides / hero fixes (clickable + contrast) === */
.slide{
  position: relative;
  min-height: 92vh;           /* «слайд» почти на весь экран */
  display: flex; align-items: center;
  background-image: var(--slide-bg);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.slide__inner{ position: relative; z-index: 2; padding: var(--s-6) 0 var(--s-5); }

/* Вуаль поверх фона, НО не перехватываем клики */
.hero__scrim,
.slide__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  z-index: 1;
  pointer-events: none;       /* <<< ключ к кликабельности */
}

/* На всякий — элементы управления точно поверх */
.slide a, .slide button, .slide .btn { position: relative; z-index: 3; }

/* Контраст для светлой темы: не белое на белом */
.section--alt{
  background: color-mix(in oklab, var(--fg), transparent 92%);
}
.card, .legal-box{
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--fg), transparent 88%);
  color: #202833;
}
@media (prefers-color-scheme: dark){
  .card, .legal-box{ background:#0e1322; border:1px solid rgba(255,255,255,.06); color:#C3CEE8; }
}

/* Боковые отступы на мобилке, чтобы текст не лип к краям */
@media (max-width: 768px){
  .container{ padding-left:5vw; padding-right:5vw; }
}

/* Если где-то использовался "полароид" — убираем рамки/тени у фоновых слайдов */
.slide img{ display:none; } /* на этом лендинге фоны через CSS, <img> не нужен */
/* ===== MOBILE NAV FIXES ===== */

/* Делаем шапку всегда контрастной на мобилке */
@media (max-width: 1024px){
  .topbar{
    backdrop-filter: none !important;
    background: var(--bg) !important;              /* сплошной фон */
    border-bottom: 1px solid color-mix(in oklab, var(--fg), transparent 85%) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
  }
  .nav__btn{ margin-left:auto; }                    /* бургер к правому краю */
  .brand{ margin-left:.6rem; }                      /* маленький отступ слева у логотипа */
}

/* На десктопе — «умная» прозрачность, но если скрипт добавил .topbar--solid — делаем плотной */
.topbar--solid{
  backdrop-filter: none !important;
  background: var(--bg) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--fg), transparent 88%) !important;
}

/* Контраст бургер-иконки/линков в шапке на любом фоне */
.topbar, .topbar a, .nav__btn span{ color: var(--fg); }
.nav__btn span{ background: currentColor; }

/* Drawer под шапкой, во всю ширину на мобилке, плотный фон */
@media (max-width: 1024px){
  .drawer{
    inset: var(--topbar-h) 0 0 0 !important;
    max-width: none !important;
    background: var(--bg) !important;
    border-right: 0 !important;
    border-top: 1px solid color-mix(in oklab, var(--fg), transparent 88%);
    box-shadow: 0 16px 40px rgba(0,0,0,.15);
  }
  .scrim{
    top: var(--topbar-h);                            /* затемнение начинается под шапкой */
    background: rgba(16,20,28,.45);
  }
}

/* Крупные кликабельные зоны в drawer */
.drawer nav a{
  display:block;
  padding: 1rem 1.1rem;
  font-size: 1.05rem;
  border-radius: 12px;
}
.drawer nav a:hover{
  background: color-mix(in oklab, var(--fg), transparent 92%);
}
.drawer .cta{
  background: var(--accent);
  color:#fff;
  text-align:center;
}

/* Блокируем прокрутку страницы при открытом меню */
html.drawer-open, body.drawer-open{
  overflow: hidden;
  height: 100%;
}

/* Небольшие «внутренние поля» по бокам на мобилке, чтобы текст не лип к краю */
@media (max-width: 600px){
  .container{
    padding-left: max(var(--s-2), 4vw);
    padding-right: max(var(--s-2), 4vw);
  }
}

/* Гарантируем читаемость заголовков/текста внутри hero/slide, даже на светлых картинках */
.on-dark h1, .on-dark h2, .on-dark p, .on-dark li, .on-dark .btn--ghost{
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.hero__scrim, .slide__scrim{
  background: linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.55));
}

/* Для светлой темы усилим контраст в «белых» секциях с карточками/юридикой */
@media (prefers-color-scheme: light){
  .section{ background: var(--bg); }
  .section--alt{
    background: var(--surface);
    border-top: 1px solid color-mix(in oklab, var(--fg), transparent 88%);
    border-bottom: 1px solid color-mix(in oklab, var(--fg), transparent 88%);
  }
  .legal-box{
    background: #ffffff;
    border: 1px solid color-mix(in oklab, var(--fg), transparent 85%);
  }
  .pill-list li{
    background: var(--surface);
    border: 1px solid color-mix(in oklab, var(--fg), transparent 82%);
    color: color-mix(in oklab, var(--fg), transparent 15%);
  }
}
/* ===== Fix: readable text on dark slides (over background images) ===== */

/* Повышаем контраст приглушённых текстов на тёмном фоне */
.on-dark .muted{
  color: #E6ECF8;            /* светло‑серый, хорошо читается на тёмном */
  opacity: 1;                /* на всякий — убираем возможные понижения */
}

/* Карточки внутри тёмных слайдов — полупрозрачные и читаемые */
.on-dark .card{
  background: rgba(10, 14, 24, .55);                 /* тёмное стекло */
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}
.on-dark .card h3{ color:#fff; }
.on-dark .card p,
.on-dark .card li{ color: #E6ECF8; }
.on-dark .card .more{ color:#fff; }

/* Кнопки на тёмном фоне */
.on-dark .btn{ background: var(--accent); color:#fff; }
.on-dark .btn--ghost{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
}
.on-dark .btn--ghost:hover{
  border-color: #fff;
}

/* Заголовки и базовый текст на тёмных слайдах — уже есть, но усилим */
.on-dark h1, .on-dark h2, .on-dark p, .on-dark li{
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Затемнение подложки у слайдов/героев — чтобы текст всегда читался */
.hero__scrim, .slide__scrim, .hero__scrim + .container.on-dark::before{
  background: linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.55));
}
/* ===== Hero/Slide text slight right offset (align under logo) ===== */
.hero__inner--offset,
.slide__inner--offset{
  padding-left: clamp(12px, 2.5vw, 28px);  /* extra nudge to the right */
}
@media (max-width: 640px){
  .hero__inner--offset,
  .slide__inner--offset{
    padding-left: clamp(8px, 2vw, 16px);   /* a bit smaller on phones */
  }
}