/* =========================================================================
   rohelper.ru — витрина хелпера. Палитра та же, что у панели: люди приходят
   сюда и туда, разнобой в цветах читался бы как два разных проекта.
   ========================================================================= */
/* Шрифты — один файл на все страницы, подробно в бренд-буке.
   Версию в ссылке поднимать при каждой правке fonts.css: сам он
   не версионируется, в отличие от этого файла. */
@import url("fonts.css?v=1");
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080b12; --bg2:#0d1220; --panel:#111827; --panel2:#151d2e;
  --line:#222e45; --line2:#2e3d59;
  --txt:#e7ecf5; --dim:#8d9ab3; --dim2:#65718a;
  --gold:#d8b25a; --gold-d:#a8802f; --gold-l:#f0d183;
  --blue:#2f6fd0; --blue-d:#1b4a91; --red:#c0392b;
  --r:16px;
  --ff:"Archivo","Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fd:"Russo One","Arial Black",Impact,sans-serif;
}

/* Заголовки — Russo One. Начертание у неё одно и уже тяжёлое, поэтому
   насыщенность здесь ничего не меняет: в fonts.css она объявлена на весь
   диапазон, и браузер не дорисует поверх неё жирный. */
h1,h2,h3{font-family:var(--fd);font-weight:400}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff);background:var(--bg);color:var(--txt);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
::selection{background:var(--gold);color:#101010}
a{color:inherit;text-decoration:none}
img{max-width:100%}
code{font-family:Consolas,"Courier New",monospace;font-size:.92em;
  background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:1px 6px}

/* мягкое свечение по краям — единственное, что движется на фоне */
.glow{position:fixed;border-radius:50%;filter:blur(90px);opacity:.5;z-index:-1;pointer-events:none}
.g1{width:640px;height:640px;top:-220px;left:-160px;
  background:radial-gradient(circle,rgba(47,111,208,.55),transparent 70%);
  animation:drift1 26s ease-in-out infinite}
.g2{width:560px;height:560px;top:80px;right:-200px;
  background:radial-gradient(circle,rgba(216,178,90,.42),transparent 70%);
  animation:drift2 32s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(90px,70px) scale(1.12)}}
@keyframes drift2{50%{transform:translate(-70px,120px) scale(1.08)}}

/* ------------------------------- шапка ------------------------------- */
.nav{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;
  padding:14px 26px;background:rgba(8,11,18,.72);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:34px;height:37px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
.brand b{display:block;font-family:var(--fd);font-size:15px;letter-spacing:.3px}
.brand small{display:block;font-size:11px;color:var(--dim2);letter-spacing:1.6px;text-transform:uppercase}
.nav nav{margin-left:auto;display:flex;gap:22px;font-size:14px;color:var(--dim)}
.nav nav a{position:relative;padding:4px 0;transition:color .18s}
.nav nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right .25s}
.nav nav a:hover{color:var(--txt)}
.nav nav a:hover:after{right:0}
@media(max-width:640px){.nav nav{display:none}}

main{max-width:1160px;margin:0 auto;padding:0 22px 40px}

/* ---------------------------- первый экран ---------------------------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding:78px 0 86px}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:40px;padding:48px 0 60px}}

.badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gold);
  border:1px solid var(--gold-d);background:rgba(216,178,90,.10);
  border-radius:999px;padding:5px 14px;letter-spacing:.4px;margin-bottom:20px}
.badge:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(216,178,90,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(216,178,90,0)}100%{box-shadow:0 0 0 0 rgba(216,178,90,0)}}

.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1.1;font-weight:800;letter-spacing:-.5px}
.hero h1 .gold{background:linear-gradient(100deg,var(--gold-l),var(--gold) 45%,var(--gold-d));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--dim);font-size:16.5px;margin-top:18px;max-width:34em}

.cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:34px}
.cta-note{font-size:12.5px;color:var(--dim2);line-height:1.7}

/* большая кнопка: блик пробегает раз в несколько секунд, чтобы её было
   видно сразу, но она не мигала непрерывно перед глазами */
.dl{display:inline-flex;align-items:center;gap:14px;padding:16px 28px;border-radius:14px;
  background:linear-gradient(180deg,var(--gold-l),var(--gold) 40%,var(--gold-d));
  color:#171003;position:relative;overflow:hidden;
  box-shadow:0 14px 34px rgba(216,178,90,.24),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .16s,box-shadow .16s}
.dl:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(216,178,90,.34),inset 0 1px 0 rgba(255,255,255,.5)}
.dl:active{transform:translateY(0)}
.dl:before{content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:sweep 5.5s ease-in-out infinite}
@keyframes sweep{0%,55%{left:-60%}85%,100%{left:130%}}
.dl-ico{display:grid;place-items:center}
.dl-ico svg{width:23px;height:23px}
.dl-txt b{display:block;font-size:17px;font-weight:700}
.dl-txt small{display:block;font-size:12px;opacity:.72;margin-top:1px}
.dl.off{background:var(--panel2);color:var(--dim);box-shadow:none;cursor:default;
  border:1px solid var(--line2)}
.dl.off:before{display:none}
.dl.small{padding:13px 22px}
.dl.small .dl-txt b{font-size:15px}

/* ------------------------- макет оверлея в игре ------------------------ */
.hero-shot{position:relative;min-height:330px}
.float{position:relative;animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}

.ov-block{
  background:rgba(9,13,22,.9);border:1px solid rgba(216,178,90,.28);border-radius:12px;
  padding:14px 16px;box-shadow:0 22px 50px rgba(0,0,0,.6);backdrop-filter:blur(3px);
}
.ov-block .ov-h{font-size:13px;font-weight:700;letter-spacing:.6px;color:#fff;
  padding-bottom:7px;margin-bottom:9px;border-bottom:1px solid rgba(216,178,90,.35)}
.b1{width:min(300px,72%)}
.b1 ol{list-style:none;counter-reset:n;font-size:12.5px;color:#dbe3f0}
.b1 li{counter-increment:n;padding:2px 0}
.b1 li:before{content:counter(n) ". ";color:var(--dim2)}
.b2{position:absolute;top:118px;left:min(190px,28%);width:min(330px,80%);animation:float 7s ease-in-out infinite reverse}
@media(max-width:900px){.b2{position:static;margin-top:16px;width:100%}.b1{width:100%}}
.b2 .art{font-size:12.5px;color:#dbe3f0;margin-top:5px}
.b2 .part{font-size:12.5px;color:#aab6cc;padding-left:2px}
.st{color:var(--gold);font-style:normal;letter-spacing:2px;font-size:11px;
  animation:starin .5s both}
@keyframes starin{from{opacity:0;transform:scale(.7)}}

/* клавиша F9 рядом с макетом — намёк на горячие клавиши */
.keycap{position:absolute;right:6px;top:-14px;font-size:12px;color:var(--dim);
  border:1px solid var(--line2);border-bottom-width:3px;border-radius:8px;
  padding:5px 11px;background:var(--panel);letter-spacing:1px;
  animation:tap 4.5s ease-in-out infinite}
@keyframes tap{0%,88%,100%{transform:translateY(0)}92%{transform:translateY(3px)}}
@media(max-width:900px){.keycap{display:none}}

/* ------------------------------ секции -------------------------------- */
.block{padding:64px 0;border-top:1px solid var(--line)}
.block h2{font-size:clamp(23px,3vw,32px);font-weight:750;letter-spacing:-.2px;margin-bottom:10px}
.block > h2{margin-bottom:30px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:940px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--panel),rgba(17,24,39,.5));
  border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;
  transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);border-color:var(--line2);
  box-shadow:0 16px 38px rgba(0,0,0,.45)}
.card .ico{width:38px;height:38px;margin-bottom:13px;border-radius:11px;
  display:grid;place-items:center;color:var(--gold);
  background:rgba(216,178,90,.10);border:1px solid var(--gold-d)}
.card .ico svg{width:20px;height:20px}
.card:hover .ico{background:rgba(216,178,90,.16)}
.card h3{font-size:16px;margin-bottom:7px}
.card p{font-size:13.7px;color:var(--dim);line-height:1.62}

/* Одна возможность вынесена в широкую карточку: она новее остальных
   и объясняется дольше, чем помещается в колонку сетки. Название и текст
   стоят рядом, иначе строка растягивается на всю ширину и не читается. */
.cards .hi{grid-column:1/-1;display:grid;align-items:start;gap:0 22px;
  grid-template-columns:auto minmax(200px,290px) minmax(0,1fr)}
.cards .hi .ico{margin:2px 0 0}
.cards .hi h3{margin:0;padding-top:5px}
@media(max-width:940px){.cards .hi{grid-template-columns:auto minmax(0,1fr)}
  .cards .hi h3{margin-bottom:7px;padding-top:6px}
  .cards .hi p{grid-column:2}}
@media(max-width:620px){.cards .hi{grid-template-columns:1fr}
  .cards .hi .ico{margin:0 0 13px}
  .cards .hi h3{padding-top:0}
  .cards .hi p{grid-column:auto}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:28px}}
.ticks{list-style:none;margin-top:20px;display:grid;gap:11px}
.ticks li{position:relative;padding-left:28px;font-size:14.5px;color:var(--dim)}
.ticks li:before{content:"✓";position:absolute;left:0;top:-1px;color:var(--gold);
  font-weight:700}

/* макет поиска по законам */
.law-demo{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.law-demo .search{display:flex;align-items:center;gap:9px;padding:11px 13px;
  border:1px solid var(--line2);border-radius:11px;background:var(--panel2);
  font-size:14px;color:var(--txt);margin-bottom:12px}
.law-demo .search em{font-style:normal}
.law-demo .search > span{display:grid;place-items:center;color:var(--dim2)}
.law-demo .search svg{width:15px;height:15px}
.caret{width:1.5px;height:16px;background:var(--gold);animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.law-demo .row{padding:9px 12px;border-radius:10px;border:1px solid transparent;
  transition:background .18s}
.law-demo .row b{display:block;font-size:12px;color:var(--gold);font-weight:600}
.law-demo .row span{font-size:13.5px;color:var(--dim)}
.law-demo .row.on{background:rgba(47,111,208,.16);border-color:var(--blue-d)}
.law-demo .row.on span{color:var(--txt)}

/* шаги установки */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.step span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:rgba(216,178,90,.13);border:1px solid var(--gold-d);color:var(--gold);
  font-weight:700;margin-bottom:12px}
.step h3{font-size:16px;margin-bottom:7px}
.step p{font-size:13.7px;color:var(--dim);line-height:1.62}
.tail{margin-top:30px;display:flex;justify-content:center}

/* ------------------------------- подвал ------------------------------- */
footer{border-top:1px solid var(--line);padding:26px 22px 40px;text-align:center;
  color:var(--dim2);font-size:13px;display:grid;gap:6px}
footer .q{color:var(--dim2);text-decoration:none}
footer .q:hover{color:var(--gold)}

/* ------------------------- появление при прокрутке ---------------------
   Прячем только когда скрипт работает: без него страница должна остаться
   читаемой, а не пустой. */
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.68,.35,1)}
.js .reveal.in{opacity:1;transform:none}

/* Человеку, который выключил анимации в системе, ничего не двигаем:
   для части людей это вопрос самочувствия, а не вкуса. */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------------------------- короткие факты ---------------------------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  padding:26px 0 4px}
/* полоса фактов и так отделена карточками — черты сверху и снизу лишние */
.facts + .block{border-top:0}
@media(max-width:720px){.facts{grid-template-columns:repeat(2,1fr)}}
.facts div{text-align:center;padding:18px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:linear-gradient(180deg,var(--panel),rgba(17,24,39,.4))}
.facts b{display:block;font-size:26px;font-weight:800;color:var(--gold);
  font-variant-numeric:tabular-nums}
.facts span{display:block;font-size:12.5px;color:var(--dim2);margin-top:4px}

/* ------------------------------- вопросы -------------------------------- */
.faq{display:grid;gap:10px;max-width:900px}
.faq details{border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,var(--panel),rgba(17,24,39,.5));
  transition:border-color .18s}
.faq details[open]{border-color:var(--line2)}
.faq summary{cursor:pointer;padding:15px 46px 15px 18px;font-size:15px;
  font-weight:600;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
/* стрелка вместо системного треугольника: он в каждом браузере свой */
.faq summary:after{content:"";position:absolute;right:20px;top:calc(50% - 4px);
  width:8px;height:8px;border-right:1.7px solid var(--gold);
  border-bottom:1.7px solid var(--gold);transform:rotate(45deg);
  transition:transform .2s}
.faq details[open] summary:after{transform:rotate(-135deg);top:calc(50% - 2px)}
.faq summary:hover{color:var(--gold)}
.faq p{padding:0 18px 16px;color:var(--dim);font-size:14.5px;line-height:1.65;
  max-width:72ch}

/* ------------------------------ скриншоты ------------------------------- */
/* Рамка вокруг снимка повторяет окно приложения: та же линия, то же
   скругление — картинка не выглядит вклеенной из другого мира. */
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:12px;cursor:zoom-in;
  border:1px solid var(--line2);background:var(--bg2);
  box-shadow:0 18px 44px rgba(0,0,0,.5);transition:transform .18s,box-shadow .18s}
.shot img:hover{transform:translateY(-3px);box-shadow:0 24px 56px rgba(0,0,0,.6)}
.shot figcaption{color:var(--dim);font-size:13.5px;line-height:1.6;margin-top:12px;
  max-width:60ch}
.shot figcaption b{color:var(--txt);font-weight:600}
.shot.wide{max-width:900px;margin:0 auto 26px}
.shot.wide figcaption{max-width:none;text-align:center;margin-left:auto;margin-right:auto;
  max-width:70ch}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.shots{grid-template-columns:1fr}}

/* просмотр во весь экран */
.lb{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:28px;
  background:rgba(4,7,13,.92);backdrop-filter:blur(6px);cursor:zoom-out;
  animation:lbin .18s ease}
@keyframes lbin{from{opacity:0}}
.lb[hidden]{display:none}
.lb img{max-width:min(1200px,96vw);max-height:92vh;width:auto;border-radius:12px;
  border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.lb-x{position:absolute;top:18px;right:20px;width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;color:var(--dim);background:var(--panel);
  border:1px solid var(--line2);cursor:pointer}
.lb-x:hover{color:var(--gold);border-color:var(--gold-d)}
.lb-x svg{width:18px;height:18px}