/* ==========================================================================
   PrivEsc — Base Stylesheet (v3)
   Читаемость на светлой схеме + корректные цвета на тёмных блоках.
   ========================================================================== */

/* ===== Дизайн-токены ===== */
:root{
  /* Базовая светлая палитра */
  --bg: #ffffff;
  --fg: #0B1320;         /* основной текст темнее ради AA-контраста */
  --muted: #4A5568;      /* вторичный текст (не бледный) */
  --surface: #F2F5FA;    /* светлая секция */
  --accent: #3D5AFE;     /* акцент темнее, лучше читается */

  /* «Текст на тёмном фоне» */
  --on-dark: #E6EEF9;          /* основной */
  --on-dark-soft: #B8C4D9;     /* вторичный */
  --on-dark-weak: #93A1B7;     /* подписи/капшены */

  /* Границы/тени/радиусы/отступы */
  --border: color-mix(in oklab, var(--fg), transparent 84%);
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 10px 30px rgba(16,24,40,.12);

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

  --topbar-h: 56px;
}

@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,"Noto Sans",sans-serif;
  line-height:1.7; text-rendering: optimizeLegibility;
}
.container{ max-width:1100px; margin:0 auto; padding:0 var(--s-2); }
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); font-weight:750; letter-spacing:.1px; }
h2{ font-size:clamp(1.4rem, 2.8vw, 1.9rem); line-height:1.25; margin:0 0 var(--s-2); color:var(--fg); font-weight:730; }
h3{ font-size:clamp(1.15rem, 2.2vw, 1.3rem); line-height:1.3; margin:0 0 var(--s-1); color:var(--fg); font-weight:700; }
p, ul, ol, .lead{ margin:0 0 var(--s-2); }
ul, ol{ padding-left:1.25rem; }
li + li{ margin-top:.4rem; }
.lead{ color: color-mix(in oklab, var(--fg), transparent 12%); font-size:clamp(1.05rem, 1.7vw, 1.2rem); max-width:68ch; }
a{ color: color-mix(in oklab, var(--accent), transparent 8%); text-decoration:none; }
a:hover{ color: var(--accent); }

/* ==========================================================================
   Навбар + drawer
   ========================================================================== */
.topbar{
  position: sticky; top:0; z-index:90;
  background:#fff; border-bottom:1px solid var(--border);
  box-shadow: 0 2px 10px rgba(16,24,40,.05);
}
.nav{
  display:flex; align-items:center; gap:.8rem;
  height:var(--topbar-h); padding:.35rem var(--s-2);
  justify-content: space-between;
}
.brand{ margin-left:.4rem; text-decoration:none; font-weight:800; letter-spacing:.2px; color:var(--fg); flex:0 0 auto; }

.nav__inline{ display:flex; gap:.5rem; align-items:center; margin-left:auto; }
.nav__inline a{ padding:.4rem .7rem; border-radius:10px; color:var(--fg); }
.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 72%);
  background:#fff; 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; }
  .nav__inline{ display:none; }
}

/* Drawer */
.drawer{
  position: fixed; inset:0 40% 0 0; max-width:360px;
  background:#fff; transform: translateX(-100%); transition: transform .28s ease;
  z-index:85; border-right:1px solid var(--border); padding:.8rem;
  display:grid; align-content:start; gap:.25rem; box-shadow: 16px 0 40px rgba(16,24,40,.25);
}
.drawer nav a{ display:block; padding:.9rem 1rem; border-radius:12px; color:var(--fg); }
.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: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; }

/* Мобилка: меню под шапкой */
@media (max-width:1024px){
  .drawer{ inset: var(--topbar-h) 0 0 0; max-width:none; border-right:0; border-top:1px solid var(--border); }
  .scrim{ top: var(--topbar-h); }
}

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

.hero{ position:relative; min-height:62vh; display:flex; align-items:center; color: var(--on-dark); }
.hero--parallax{
  background-image: var(--hero-bg);
  background-size:cover; background-position:center; background-attachment: fixed;
}
.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__scrim{
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.58)); /* усилено */
  z-index:1;
}
.hero h1, .hero .lead{ color: var(--on-dark); text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 24px rgba(0,0,0,.25); }

/* Pagehead */
.pagehead{ position:relative; padding: var(--s-5) 0 var(--s-4); overflow:hidden; }
.pagehead::before{
  content:""; position:absolute; inset:0;
  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);
  opacity:.65;
}
.pagehead__inner{ position:relative; }
.pagehead .lead{ max-width:72ch; }

/* Параллакс-перемычки */
.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,.18), rgba(0,0,0,.22)); }

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

/* ==========================================================================
   Секции / карточки / KPI
   ========================================================================== */
.section{ padding: var(--s-5) 0; background:#fff; color: var(--fg); }
.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:#fff; border:1px solid var(--border); 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{ color: var(--accent); }

/* Тёмная секция */
.section--alt{
  background:#0b0f1a;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  color: var(--on-dark);
}
.section--alt .muted,
.section--alt .kpi__label,
.section--alt .lead{ color: var(--on-dark-soft); }
.section--alt h1, .section--alt h2, .section--alt h3{ color: var(--on-dark); }
.section--alt a{ color: color-mix(in oklab, var(--on-dark), transparent 15%); }
.section--alt a:hover{ color: #ffffff; }

/* Карточки внутри тёмной секции остаются светлыми по желанию дизайна */
.section--alt .card{
  background:#0e1322; border:1px solid rgba(255,255,255,.10);
  color: var(--on-dark);
}
.section--alt .card .more{ color:#9DB4FF; }

/* KPI-блоки */
.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,.10);
  border-radius:10px; padding:12px; color: var(--on-dark);
}
.kpi__value{ display:block; font-weight:700; }
.kpi__label{ display:block; font-size:.92rem; color: var(--on-dark-soft); }

/* Разделитель */
.divider{ height:1px; border:0; margin: var(--s-4) 0; background: var(--border); }

/* ==========================================================================
   Блог
   ========================================================================== */
.postlist{ list-style:none; padding-left:0; }
.postlist li{ padding:.7rem 0; border-bottom:1px dashed color-mix(in oklab, var(--fg), transparent 78%); }
.postlist li a{ color: inherit; }
.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: #EEF2FF; border-radius: var(--radius);
}
.blog-content pre, .blog-content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #0b101d; color: var(--on-dark);
  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;
  box-shadow: 0 2px 10px rgba(61,90,254,.18);
}
.btn:hover{ filter: brightness(.96); }
.btn--ghost{
  background:#fff; color:var(--fg);
  border:1px solid color-mix(in oklab, var(--fg), transparent 78%);
}
.btn--ghost:hover{ color: var(--accent); border-color: var(--accent); }

.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }

.contact-section{ padding: var(--s-5) 0; }
.form-container{
  background:#fff; border:1px solid var(--border); 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; color:inherit;
  border:1px solid color-mix(in oklab, var(--fg), transparent 72%);
  border-radius:8px; background:#fff;
}
.input::placeholder, .textarea::placeholder{ color: color-mix(in oklab, var(--fg), transparent 50%); }
.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; }

/* ==========================================================================
   Юридические/пилюли/шаги/FAQ
   ========================================================================== */
.muted{ color:#6B7280; }

.legal-grid{ display:grid; gap:12px; grid-template-columns: repeat(4,minmax(0,1fr)); }
@media (max-width:1024px){ .legal-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .legal-grid{ grid-template-columns:1fr; } }

.legal-box{
  background:#0e1322; color: var(--on-dark);
  border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:16px;
}
.legal-box h3{ color: var(--on-dark); }
.legal-box p{ color: var(--on-dark-soft); }

.pill-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-left:0; }
.pill-list li{
  list-style:none; border:1px solid rgba(255,255,255,.18);
  padding:6px 10px; border-radius:999px; background:#0b101d; color: var(--on-dark);
  font-size:.95rem;
}

.steps{ counter-reset:s; margin-left:0; padding-left:0; }
.steps li{ list-style:none; margin:10px 0; padding-left:36px; position:relative; color:inherit; }
.steps li::before{
  counter-increment:s; content:counter(s);
  position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-weight:700;
  background:#1a2240; color: var(--on-dark); border:1px solid rgba(255,255,255,.15);
}

.stoplist li{ margin:6px 0; }

.faq{ border-top:1px solid rgba(0,0,0,.08); padding:10px 0; }
.faq summary{ cursor:pointer; font-weight:700; }
.faq summary::-webkit-details-marker{ display:none; }

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

/* ==========================================================================
   Тёмная тема (auto) — несём прежнюю логику
   ========================================================================== */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#202833; --fg:#C3CEE8; --surface:#222a36; --muted:#b7bfcc; --accent:#7E98FF;
    --on-dark:#EAF2FF; --on-dark-soft:#C8D4EA; --on-dark-weak:#A9B6CC;
    --border: rgba(255,255,255,.12);
  }

  .topbar{ background: color-mix(in oklab, var(--bg), transparent 8%); border-bottom:1px solid var(--border); box-shadow:none; }
  .brand, .nav__inline a{ color: var(--fg); }
  .nav__btn{ background: color-mix(in oklab, var(--bg), transparent 6%); border-color: var(--border); }

  .hero__scrim{ background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45)); }
  .parallax::after{ background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22)); }

  .card{ background:#0e1322; border:1px solid rgba(255,255,255,.10); }
  .section{ background: var(--bg); color: var(--fg); }
  .section:nth-of-type(odd){ background: var(--surface); }
  .section--alt{ background:#0b0f1a; color: var(--on-dark); }

  .blog-content blockquote{ background: color-mix(in oklab, var(--surface), transparent 0%); }
  .blog-content pre, .blog-content code{ background: color-mix(in oklab, var(--fg), transparent 88%); color: var(--on-dark); }

  .form-container{ background: var(--bg); border:1px solid var(--border); }
  .input, .textarea{ background: color-mix(in oklab, var(--bg), transparent 0%); border:1px solid color-mix(in oklab, var(--fg), transparent 30%); }
  .footer{ color: color-mix(in oklab, var(--fg), transparent 30%); }
}