/* Оформление страниц-инструкций.
   Токены и базовые правила повторяют главную (там стили лежат инлайном),
   чтобы инструкции выглядели частью сайта. Вынесено в отдельный файл,
   потому что таких страниц планируется много. */

:root{
  --bg:#000;
  --ink:#fff;
  --muted:#8b8b8b;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.34);
  --glitch:#c9f24d;
  --maxw:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 64px);
}

.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 24px}

header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand img{width:38px; height:38px; display:block}
.brand b{font-size:15px; letter-spacing:.22em; text-transform:uppercase; font-weight:800}
.nav{display:flex; align-items:center; gap:20px}
.nav a{color:var(--muted); text-decoration:none; font-size:13px; letter-spacing:.14em; text-transform:uppercase; transition:color .18s ease}
.nav a:hover{color:var(--ink)}

section{padding:64px 0; border-top:1px solid var(--line)}
.hero{padding:44px 0 64px; border-top:0}

h1{margin:0 0 18px; font-size:clamp(32px,6.4vw,64px); line-height:1.02; letter-spacing:-.03em; font-weight:900; text-transform:uppercase}
h2{margin:0 0 34px; font-size:clamp(23px,3.6vw,34px); line-height:1.1; letter-spacing:-.02em; font-weight:900; text-transform:uppercase}
.kicker{font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin:0 0 26px}
.lead{margin:0 0 34px; max-width:680px; font-size:clamp(16px,2.2vw,19px); color:var(--muted)}
.lead b{color:var(--ink); font-weight:600}
.accent{color:var(--glitch)}

.grid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.cell{background:var(--bg); padding:28px 24px; position:relative}
.cell h3{margin:0 0 8px; font-size:17px; font-weight:800; letter-spacing:-.01em}
.cell p{margin:0; color:var(--muted); font-size:14.5px}
.cell p + p{margin-top:10px}
.num{font-size:12px; letter-spacing:.2em; color:var(--muted); display:block; margin-bottom:14px}

/* Врезка с предупреждением или важной мыслью */
.note{
  border-left:2px solid var(--glitch);
  padding:14px 0 14px 18px;
  margin:0 0 24px;
  color:var(--muted);
  font-size:15px;
  max-width:760px;
}
.note b{color:var(--ink); font-weight:600}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative;
  font-size:16.5px; font-weight:700; letter-spacing:-.01em; transition:color .16s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:20px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:20px; font-weight:400; color:var(--muted); transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(45deg); color:var(--glitch)}
.faq summary:hover{color:var(--glitch)}
.faq p{margin:0 0 22px; padding-right:40px; color:var(--muted); font-size:15px; max-width:760px}

.btn{
  display:inline-flex; align-items:center; gap:10px; padding:17px 30px;
  font-size:15px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--ink); background:var(--ink); color:var(--bg);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(255,255,255,.22)}
.btn:active{transform:translate(0,0); box-shadow:none}

footer{
  border-top:1px solid var(--line); padding:34px 0 56px;
  display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between;
  color:var(--muted); font-size:13px;
}
footer a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line)}
footer a:hover{color:var(--ink); border-color:var(--line-strong)}

/* Статейный текст — для страниц, где основное содержание это проза */
.prose{max-width:760px}
.prose p{margin:0 0 20px; font-size:clamp(16px,2vw,18.5px); color:#b9b9b9}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--ink); font-weight:700}
.pull{
  margin:34px 0 0; padding:22px 0 0; border-top:1px solid var(--line);
  font-size:clamp(19px,2.8vw,25px); line-height:1.35; font-weight:800;
  letter-spacing:-.02em; color:var(--ink);
}
.pull span{color:var(--glitch)}

/* Ссылки внутри текста. Своего правила для них в стилях сайта не было —
   раньше их просто не встречалось, и браузер рисовал бы синее подчёркивание
   на чёрном фоне. */
.prose a, .cell a, .note a, .lead a, .faq a{
  color:var(--glitch);
  text-decoration:none;
  border-bottom:1px solid rgba(201,242,77,.35);
  transition:border-color .16s ease;
}
.prose a:hover, .cell a:hover, .note a:hover, .lead a:hover, .faq a:hover{
  border-bottom-color:var(--glitch);
}
.pull a{color:var(--glitch); text-decoration:none; border-bottom:1px solid rgba(201,242,77,.35)}
.pull a:hover{border-bottom-color:var(--glitch)}

@media (max-width:760px){
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
  section{padding:48px 0}
  .hero{padding:32px 0 48px}
  .nav a{display:none}
  .nav a.tg{display:inline}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}