/* Общее оформление сайта ddhelp.ru (вариант 8 владельца, 27.10.2026): цвета, шрифты, кнопки, шапка, подвал.
   Перенесено из образца build/site_preview/variants/v8_benefits/base.css. Шрифты — свои файлы рядом
   (fonts/, Unbounded и Golos Text с кириллицей, лицензия SIL OFL 1.1 — fonts/OFL-*.txt), взяты с Google
   Fonts; страница ничего не грузит с чужих сайтов. Карточку покупки дополняет product.css, главную — свой файл. */
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/golos-text-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/golos-text-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/golos-text-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/golos-text-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/unbounded-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/unbounded-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/unbounded-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/unbounded-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --bg:#121417; --bg-2:#181b20; --bg-3:#1f232a; --line:#2c3139; --line-2:#3b424c;
  --text:#f5f3ef; --text-2:#c9cdd4; --text-3:#9ea5af;
  --gold:#ffb22e; --gold-ink:#1d1403; --gold-soft:rgba(255,178,46,.12); --gold-line:rgba(255,178,46,.5);
  --green:#3fd08a; --green-ink:#032112; --green-soft:rgba(63,208,138,.12); --green-line:rgba(63,208,138,.5);
  --red:#ff6242; --red-soft:rgba(255,98,66,.13);
  --head:"Unbounded","Segoe UI",Arial,sans-serif;
  --text-f:"Golos Text","Segoe UI",-apple-system,Roboto,Arial,sans-serif;
  --r-s:8px; --r-m:12px; --r-l:18px;
  --wrap:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 17px/1.65 var(--text-f);overflow-x:hidden}
a{color:var(--text)}
img,svg{display:block}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:60;background:var(--gold);color:var(--gold-ink);padding:8px 14px;border-radius:var(--r-s)}
.skip:focus{left:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;position:relative}
b,strong{font-weight:700}

/* логотип */
.logo .lg-plate{fill:none;stroke:none} .logo .lg-mark{fill:currentColor;stroke:none} .logo .lg-cut{fill:var(--bg);stroke:none}
.watermark{position:fixed;right:-240px;top:14vh;width:760px;height:760px;color:var(--text);opacity:.03;pointer-events:none;z-index:0}
.watermark .logo{width:100%;height:100%}
main,footer{position:relative;z-index:1}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:var(--r-s);
     font:700 16.5px/1.2 var(--text-f);text-decoration:none;cursor:pointer;border:1px solid transparent;
     background:var(--gold);color:var(--gold-ink);transition:filter .15s,transform .15s}
.btn svg{width:20px;height:20px;stroke-width:2.2}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn.green{background:var(--green);color:var(--green-ink)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line-2);font-weight:600}
.btn.ghost:hover{border-color:var(--text);filter:none}
.btn.ghost.gold{color:var(--gold);border-color:var(--gold-line)}
.btn.ghost.green{color:var(--green);border-color:var(--green-line)}
.btn.small{min-height:42px;padding:8px 16px;font-size:15px}
.btn.big{min-height:58px;padding:14px 30px;font-size:18px}
.code{font:700 1em/1 var(--text-f);letter-spacing:1.5px;color:var(--green);background:var(--green-soft);border:1px dashed var(--green-line);padding:3px 9px;border-radius:6px;white-space:nowrap}
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:13.5px;font-weight:600;line-height:1.5}
.tag.free{background:var(--green-soft);color:var(--green)}
.tag.gold{background:var(--gold-soft);color:var(--gold)}
.tag.red{background:var(--red-soft);color:var(--red)}
.pulse{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,208,138,.6)}70%{box-shadow:0 0 0 8px rgba(63,208,138,0)}100%{box-shadow:0 0 0 0 rgba(63,208,138,0)}}

/* шапка */
.top{position:sticky;top:0;z-index:40;background:rgba(18,20,23,.94);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand .logo{width:34px;height:34px;color:var(--gold)}
.brand b{font:700 21px/1 var(--head);letter-spacing:-.3px}
.brand b span{color:var(--text-3)}
.top nav{display:flex;gap:4px 16px;margin-left:auto}
.top nav a{color:var(--text-2);text-decoration:none;font-size:15.5px;padding:8px 0;white-space:nowrap}
/* «Ввести код» — на виду: золотом и со значком подарка (владелец, 27.10.2026) */
.top nav a.code{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-weight:600}
.top nav a.code svg{width:18px;height:18px}
.top nav a.code:hover{color:var(--text)}
.menu .drop a.code{color:var(--gold);font-weight:600}
.top nav a:hover{color:var(--text)}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;min-height:42px;display:flex;align-items:center;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--r-s);font-weight:600}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{border-color:var(--text)}
.menu:not([open]) .drop{display:none}
.menu .drop{position:fixed;right:12px;left:12px;top:66px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-m);padding:8px;display:grid;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.menu .drop a{padding:13px 14px;text-decoration:none;color:var(--text);border-radius:var(--r-s)}
.menu .drop a:hover{background:var(--bg-3)}

/* разделы */
section{padding:120px 0 0;scroll-margin-top:66px}
.h2{font:700 40px/1.15 var(--head);letter-spacing:-.8px;max-width:none;text-wrap:balance}
.lead{margin-top:18px;font-size:19px;color:var(--text-2);max-width:40em}
.kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--gold);font-weight:600;font-size:16px}
.kicker svg{width:22px;height:22px}
.kicker.green{color:var(--green)}

/* липкая кнопка на телефоне */
.mbar{display:none}

/* подвал */
footer{margin-top:120px;border-top:1px solid var(--line);padding:36px 0 56px;color:var(--text-3);font-size:15px}
footer .wrap{display:grid;grid-template-columns:auto 1fr;gap:20px 40px;align-items:start}
footer .brand .logo{color:var(--text-3)}
footer .docs{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
footer .contact{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 28px}
footer a{color:var(--text-2)}

/* «Наверх»: ссылка на начало страницы, без скрипта. Где браузер умеет шкалу прокрутки — появляется после
   первого экрана и не видна на коротких страницах; где не умеет — видна всегда. */
.totop{position:fixed;right:20px;bottom:20px;z-index:44;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.4);text-decoration:none}
.totop svg{width:22px;height:22px;stroke-width:2.2}
.totop:hover{border-color:var(--gold);color:var(--gold)}
@supports (animation-timeline: scroll()){
  .totop{opacity:0;visibility:hidden;animation:totop-in linear both;animation-timeline:scroll(root);animation-range:400px 700px}
  @keyframes totop-in{to{opacity:1;visibility:visible}}
}

@media (max-width:1240px){
  .top nav{display:none}
  .menu{display:block}
}
@media (max-width:960px){
  .h2{font-size:32px}
  section{padding-top:88px}
  footer .wrap{grid-template-columns:1fr}
  footer .docs{justify-content:flex-start}
}
@media (max-width:620px){
  .wrap{padding:0 16px}
  .top .btn.small{display:none}
  .h2{font-size:26px;letter-spacing:-.4px}
  .lead{font-size:17px}
  body{font-size:16.5px}
  .watermark{width:460px;height:460px;right:-200px}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
        background:rgba(18,20,23,.96);border-top:1px solid var(--line)}
  .mbar .btn{flex:1;min-height:48px;padding:10px 8px;font-size:15px}
  footer{padding-bottom:110px}
  .totop{right:14px;width:44px;height:44px}
  .mbar ~ .totop{bottom:calc(92px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .totop{opacity:1!important;visibility:visible!important}
}