/* instruction.css — стили страницы «Инструкция» PXpert */

/* ===== Переменные (те же, что на главной) ===== */
:root{
  --bg:#f3f5fa;
  --lilac:#96a4eb;
  --lilac-soft:#e9eefd;
  --surface:#ffffff;
  --surface-2:#f0f3f7;
  --text:#0F172A;
  --purple:#26426E;
  --purple-soft:#435c85;
  --purple-soft2:#53688c;
  --blue:#3a5c99;
  --line:#e5e9f0;
  --accent:#2563eb;
  --accent-dark:#1d4ed8;
  --accent-soft:#eaf2ff;
  --dark:#101827;
  --green:#16a34a;
  --shadow:0 18px 60px rgba(15,23,42,.10);
  --radius:22px;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{text-decoration:none;color:inherit}
button{font:inherit}

.container{width:min(calc(100% - 60px),var(--max));margin:auto}

/* Бургер-кнопка скрыта на десктопе */
.burger{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:26px;
  height:18px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  z-index:20;
}

.burger span{
  display:block;
  width:100%;
  height:2px;
  background:#111; /* подберите цвет под свой дизайн */
  border-radius:2px;
  transition:transform 0.3s ease, opacity 0.3s ease;
}

/* Анимация превращения в крестик при открытии */
.burger.active span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}
.burger.active span:nth-child(2){
  opacity:0;
}
.burger.active span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}


/* ===== Header ===== */
.header{
  background:#fff;
  position:relative;
  z-index:10;
}

.header .container{
  height:76px;
  display:grid;
  grid-template-columns:auto 1fr auto; /* лого | nav | кнопки */
  align-items:center;
  gap:24px;
}

.logo{
  justify-self:start;
  font-size:26px;
  font-weight:900;
  letter-spacing:-.045em;
  color:var(--purple);
}

/* На десктопе обёртка «растворяется», nav и кнопки становятся ячейками grid */
.header-menu{ display:contents; }

.nav{
  justify-self:center;              /* ровно по центру свободного места */
  display:flex;
  align-items:center;
  gap:28px;
  color:var(--purple);
  font-size:14px;
  font-weight:700;
}
.nav a{
  display:inline-block;             /* чтобы работал transform */
  transition:.18s ease;
}
.nav a:hover{
  color:var(--text);
  transform:translateY(-1px);
}

.nav .nav-mobile-only{ display:none; }

.header-actions{
  justify-self:end;                 /* прижаты к правому краю */
  display:flex;
  align-items:center;
  gap:10px;
}

.burger span{
  display:block;
  width:24px;
  height:2px;
  border-radius:2px;
  background:var(--purple);
  transition:transform .25s ease, opacity .2s ease;
}
/* Анимация в крестик: смещение = высота (2px) + gap (5px) = 7px */
.burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2){ opacity:0; }
.burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }


.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:0 18px;
  border-radius:12px;
  border:1px solid transparent;
  font-size:14px;
  font-weight:400;
  cursor:pointer;
  transition:.18s ease;
}
.btn-primary{  /*Войти*/
  color:white;
  background:var(--accent);
  box-shadow:0 7px 20px rgba(37,99,235,.20);
}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px)}

.btn-secondary{   /*Зарегистрироваться*/
  color:var(--text);
  background: var(--lilac-soft); /*фон второстепенной кнопки*/
}
.btn-secondary:hover{border-color:#cbd3df;background:#fbfcfe}
.btn-lg{min-height:52px;padding:0 23px;font-size:15px;border-radius:14px}  /*Попробовать*/


/* ===== Типографика ===== */
.eyebrow{
  margin-bottom:18px;
  color:var(--accent);
  font-size: clamp(11px, 1.1vw, 17px);
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

h1,h2,h3,p{margin-top:0}

h1{
  font-weight:700;
  word-spacing:0.1em;
  max-width:720px;
  margin-bottom:24px;
  font-size:clamp(40px,5vw,63px);
  line-height:1.02;
  letter-spacing:-.055em;
}

h2{
  font-weight:600;
  margin-bottom:20px;
  font-size:clamp(36px,4vw,52px);
  line-height:1.06;
  letter-spacing:-.045em;
}
h3{
  font-weight:500;
  margin-bottom:27px;
  font-size:clamp(30px,3vw,44px);
  line-height:1.06;
  letter-spacing:-.045em;
  color:var(--text);
}

.lead {
  font-weight: 400;
  color: var(--purple);
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.6;

  margin-bottom: 10px;
}

.lead_bold{
  font-weight: 500;
  color: var(--purple);
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.6;

  margin-bottom: 10px;
}

.lead2 {
  font-weight: 500;
  color: var(--purple);
  font-size: clamp(14px, 1.35vw, 19px);
  line-height: 1.5;
  margin-bottom: 10px;

}

.lead-gap {
  margin-bottom: 40px;   /* отступ до следующего блока */
}

/*Спец шрифты*/
.special ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.special li {
  font-weight: 400;
  color: var(--purple-soft);
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.6;

  margin-bottom: 1em;
}

.special li b {color: var(--purple); font-weight: 600}




/* ===== Футер ===== */
footer{padding:45px 0;background:#fff;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px}
.footer-logo{font-size:22px;font-weight:900;margin-bottom:8px;letter-spacing:-.045em;color:var(--purple)}
.footer-desc{color:var(--text);font-size:13px;max-width:290px}
.footer-links{display:flex;flex-direction:column;gap:10px;font-size:14px;width:max-content;color:var(--text)}
.footer-contact{font-size:13px}
.footer-bottom{margin-top:35px;margin-bottom:-20px;padding-top:20px;border-top:1px solid var(--line);color:#98a1af;font-size:12px}

/* ======================================== */
/* ========== Инструкция ================== */
/* ======================================== */

/* Первый блок — с градиентом как на главной */

.instr{
  padding-top: 80px;
}

.instr-hero{
  background: linear-gradient(to top, var(--bg) 0%, #ffffff 60%, #ffffff 100%);
  padding: 80px 0;
}

.instr-hero h1 {
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.instr-hero .lead {
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Оглавление */
.instr-toc{
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 48px;
  justify-content: center;
}

.instr-toc a{
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--lilac-soft);
  color: var(--text);
  font-size: 19px;
  transition: .18s ease;
}

.instr-toc a:hover{
  background: #fbfcfe;
  border: 1px solid #cbd3df;
}

/* Секции инструкции */
/* Разновидность 1: слева текст, справа картинка */
.instr-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 80px;
}


/* Картинка центрируется по обеим осям */
.instr-media{
  display: flex;
  justify-content: center;
  align-items: center;
}

.instr-media img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  cursor: zoom-in;
  transition: transform .18s ease;
  margin-bottom: 48px;
}



.img-1 { width: clamp(200px, 350px, 70%); }
.img-2 { width: 600px }
.img-3 {
    width: clamp(200px, 1000px, 100%);
    margin-right: auto;
}
.img-4 {
    width: 100%;
    margin-right: auto;
}



.instr-media img:hover{
  transform: scale(1.01);
}

/* Разновидность 2: текст сверху, картинка снизу */
.instr-copy--wide{
  max-width: 80%;
  margin-bottom: 48px;
  margin-top: 48px;
}

.instr-center{
  text-align: center;
  margin-top: 48px;
}


/* Лайтбокс */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(15, 23, 42, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  cursor: zoom-out;
}

.lightbox[hidden]{
  display: none;
}

.lightbox img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
}

/* ======================================== */
/* ============ Планшет ≤950px ============ */
/* ======================================== */
@media (max-width: 950px){
  .instr-split{
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ======================================== */
/* ============ Мобильный ≤650px ========== */
/* ======================================== */
@media (max-width: 650px){
  /* Общее */
  .container{width:min(calc(100% - 28px),var(--max))}
  .header{height:68px}

  .instr-copy--wide{
    max-width: 100%;
  }

  .burger{ display:flex; justify-self:end; }

/* ВАЖНО: переопределяем display:contents */
  .header-menu{
    display:flex;
    flex-direction:column;
    gap:10px;
    position:absolute;
    top:100%;                          /* сразу под шапкой */
    left:0;              /* было left:0 */
    right:auto;
    min-width:200px;        /* чтобы не получилось слишком узко */
    max-width:100%;         /* и не вылезало за экран */
    padding:16px;
    background:rgba(255,255,255,.65);
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(7px);
    box-shadow:0 8px 16px rgba(0,0,0,.08);

    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .header-menu.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .nav{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    justify-self:stretch;
  }
  .nav a{
    padding:14px 0;
    border-bottom:1px solid var(--line);
  }
  .nav a:hover{ transform:none; }
  .nav a:last-child{ border-bottom:none; }

  .nav .nav-mobile-only{ display:block; }  /* показываем в меню */
  .header-actions{ display:none; }         /* настоящие кнопки прячем */


/* ==========   Burger  end   ===========*/


  /* Футер */
  .footer-grid{grid-template-columns:1fr;gap:25px}

  /* Инструкция */
  .instr-hero{
    padding: 48px 0;
  }
  .instr{
    padding: 48px 0;
  }
  .instr:last-child{
    padding-bottom: 48px;
  }
  .instr-split{
    gap: 24px;
    margin-bottom: 48px;
  }
  .instr-copy--wide{
    margin-bottom: 32px;
    margin-top: 32px;
  }
  .instr-center{
    margin-top: 32px;
  }
  .instr-media img{
    margin-bottom: 32px;
  }
  .instr-toc{
    gap: 8px;
    margin-top: 32px;
  }
  .instr-toc a{
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }
  .instr-media img{cursor: default;}
}