@import "/fonts.css";

:root{
  /* поверхности: бумага тёплая, лист белый, чернила глубокие */
  --paper:#F4F3EF;
  --sheet:#FFFFFF;
  --ink:#14161A;
  --ink-2:#5B6270;
  --ink-3:#8B909B;
  --line:#E7E5DE;

  /* акцент один, живёт в двух местах: действие и текущий узел */
  --acc:#4B2BD6;
  --acc-ink:#2A1580;
  --acc-tint:#EDEAFD;

  --ok:#0B7D57;      --ok-tint:#E4F3EC;
  --warn:#9A5B06;    --warn-tint:#FAEEDC;
  --bad:#C22B2B;     --bad-tint:#FBE8E8;

  --r-card:24px;
  --r-ctl:12px;
  --r-pill:999px;

  --e-display:cubic-bezier(.16,1,.3,1);
  --e-body:cubic-bezier(.25,.46,.45,.94);
  --e-ui:cubic-bezier(.4,0,.2,1);
  --t-state:.15s; --t-btn:.2s; --t-layout:.34s;

  --shadow-card:0 1px 2px rgba(20,22,26,.05), 0 14px 34px -18px rgba(20,22,26,.22);
  --shadow-lift:0 2px 4px rgba(20,22,26,.06), 0 22px 46px -20px rgba(20,22,26,.3);

  --gut:clamp(20px,4vw,56px);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Onest",system-ui,"Segoe UI",sans-serif;
  font-size:18px; line-height:1.55; font-weight:400;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Geologica","Onest",system-ui,sans-serif;font-weight:600;margin:0;letter-spacing:-.03em;line-height:1}
p{margin:0}
a{color:inherit}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
button,input{font:inherit;color:inherit}

/* поверхности браузера — тоже часть дизайна */
::selection{background:var(--acc-tint);color:var(--acc-ink)}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:6px}
input{caret-color:var(--acc)}
.pages__wrap{scrollbar-color:var(--ink-3) transparent;scrollbar-width:thin}
.pages__wrap::-webkit-scrollbar{height:10px;width:10px}
.pages__wrap::-webkit-scrollbar-thumb{background:#D6D3CA;border-radius:var(--r-pill);border:3px solid var(--sheet)}

/* ── шапка ─────────────────────────────────────────────────────────── */
.top{max-width:var(--maxw);margin:0 auto;padding:22px var(--gut) 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand__mark{width:32px;height:32px;flex:none}
.mk-bg{fill:var(--ink)}
.mk-line{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mk-dot{fill:#7CF3B0}
.brand__name{font-family:"Geologica",sans-serif;font-weight:600;letter-spacing:-.02em;font-size:19px}
.top__nav{display:flex;gap:6px}
.top__link{padding:8px 15px;border-radius:var(--r-pill);text-decoration:none;color:var(--ink-2);font-size:15px;transition:background var(--t-state) var(--e-ui),color var(--t-state) var(--e-ui)}
.top__link:hover{background:rgba(20,22,26,.055);color:var(--ink)}

.stage{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) 80px}

/* ── ввод ──────────────────────────────────────────────────────────── */
.ask{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:start;padding:clamp(44px,7vw,96px) 0 clamp(36px,5vw,64px)}
.ask__h{font-size:clamp(38px,5.5vw,70px);line-height:.9;letter-spacing:-.035em;font-weight:700}
.ask__lede{margin-top:24px;max-width:38ch;color:var(--ink-2);font-size:19px;line-height:1.5}

.field{margin-top:38px}
.field__label{display:block;font-size:14px;color:var(--ink-3);margin-bottom:9px;letter-spacing:.01em}
.field__row{display:flex;gap:10px;align-items:stretch}
.field__input{
  flex:1 1 auto;min-width:0;background:var(--sheet);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:17px 24px;font-size:19px;
  box-shadow:0 1px 2px rgba(20,22,26,.04);
  transition:border-color var(--t-state) var(--e-ui),box-shadow var(--t-state) var(--e-ui);
}
.field__input::placeholder{color:var(--ink-3)}
.field__input:hover{border-color:#D8D5CC}
.field__input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-tint)}
.field__note{margin-top:11px;font-size:14px;color:var(--ink-3)}
.field__err{margin-top:11px;font-size:15px;color:var(--bad);background:var(--bad-tint);padding:10px 16px;border-radius:var(--r-ctl)}

.btn{display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;border-radius:var(--r-pill);
  padding:17px 26px;font-size:17px;font-weight:600;font-family:"Geologica",sans-serif;letter-spacing:-.01em;
  transition:transform var(--t-btn) var(--e-ui),background var(--t-btn) var(--e-ui),box-shadow var(--t-btn) var(--e-ui)}
.btn--go{background:var(--acc);color:#fff;box-shadow:0 2px 3px rgba(43,21,128,.18),0 12px 26px -12px rgba(43,21,128,.5)}
.btn--go:hover{background:var(--acc-ink);transform:translateY(-1px);box-shadow:0 3px 5px rgba(43,21,128,.2),0 18px 34px -14px rgba(43,21,128,.55)}
.btn--go:active{transform:translateY(0)}
.btn--go[disabled]{background:#B9B2E4;box-shadow:none;cursor:progress;transform:none}
.btn__arrow{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-btn) var(--e-ui)}
.btn--go:hover .btn__arrow{transform:translateX(3px)}
.btn--ghost{background:transparent;color:var(--ink-2);padding:12px 20px;font-size:15px}
.btn--ghost:hover{background:rgba(20,22,26,.06);color:var(--ink)}

/* тёмная панель — тональное событие рядом со светлой бумагой */
.engine{background:var(--ink);color:#fff;border-radius:var(--r-card);padding:28px 28px 22px;box-shadow:var(--shadow-card);position:sticky;top:24px}
.engine__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:16px;margin-bottom:4px}
.engine__title{font-family:"Geologica",sans-serif;font-weight:600;font-size:17px;letter-spacing:-.01em}
.engine__count{font-size:14px;color:rgba(255,255,255,.55)}
.engine__count b{color:#fff;font-weight:600}
.engine__list{display:flex;flex-direction:column}
.engine__row{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:15px;color:rgba(255,255,255,.72)}
.engine__row+.engine__row{box-shadow:inset 0 1px 0 rgba(255,255,255,.075)}
.engine__row b{margin-left:auto;color:#fff;font-weight:600;font-size:15px}
.engine__ic{width:19px;height:19px;flex:none;fill:none;stroke:#7CF3B0;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.engine__foot{margin-top:18px;padding-top:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);display:flex;align-items:center;gap:9px;font-size:14px;color:rgba(255,255,255,.55)}
.dot{width:7px;height:7px;border-radius:50%;background:#7CF3B0;flex:none}
.dot--live{animation:pulse 2.6s var(--e-body) infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

/* ── прогон ────────────────────────────────────────────────────────── */
.run{padding:clamp(40px,7vw,90px) 0}
.run__panel{background:var(--ink);color:#fff;border-radius:var(--r-card);padding:clamp(28px,4vw,48px);box-shadow:var(--shadow-lift)}
.run__host{font-size:15px;color:rgba(255,255,255,.55);margin-bottom:14px;word-break:break-all}
.run__big{font-family:"Geologica",sans-serif;font-size:clamp(56px,11vw,124px);line-height:.86;letter-spacing:-.045em;font-weight:700;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.run__unit{font-size:clamp(15px,2vw,20px);font-weight:400;letter-spacing:-.01em;color:rgba(255,255,255,.5);font-family:"Onest",sans-serif}
.run__bar{margin-top:30px;height:5px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);overflow:hidden}
.run__bar i{display:block;height:100%;width:0;background:#7CF3B0;border-radius:var(--r-pill);transition:width .5s var(--e-body)}
.run__steps{margin-top:26px;display:flex;flex-direction:column;gap:11px}
.run__steps li{display:flex;align-items:center;gap:11px;font-size:15px;color:rgba(255,255,255,.38);transition:color var(--t-layout) var(--e-body)}
.run__steps li::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);flex:none;transition:background var(--t-layout) var(--e-body),transform var(--t-layout) var(--e-display)}
.run__steps li.is-now{color:#fff}
.run__steps li.is-now::before{background:#7CF3B0;transform:scale(1.45)}
.run__steps li.is-done{color:rgba(255,255,255,.6)}
.run__steps li.is-done::before{background:#7CF3B0}

/* ── отчёт ─────────────────────────────────────────────────────────── */
.report{padding:clamp(34px,5vw,64px) 0 0}
.report__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.report__for{font-size:15px;color:var(--ink-3);margin-bottom:7px;word-break:break-all}
.report__h{font-size:clamp(32px,4.4vw,52px);letter-spacing:-.035em;font-weight:700}

.scores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.score--facts{grid-column:1/-1}
.score{background:var(--sheet);border-radius:var(--r-card);padding:24px 24px 22px;box-shadow:var(--shadow-card)}
.score--lead{grid-column:1/-1;background:var(--ink);color:#fff;display:flex;flex-direction:column}
.score__num{font-family:"Geologica",sans-serif;font-weight:700;font-size:clamp(38px,5.4vw,68px);line-height:.88;letter-spacing:-.04em;display:flex;align-items:baseline;gap:4px}
.score--lead .score__num{font-size:clamp(52px,8vw,96px)}
.score__num i{font-style:normal;font-size:.32em;font-weight:400;color:var(--ink-3);letter-spacing:-.01em}
.score--lead .score__num i{color:rgba(255,255,255,.45)}
.score__name{margin-top:12px;font-size:15px;color:var(--ink-2)}
.score--lead .score__name{color:rgba(255,255,255,.68)}
.score__meter{margin-top:16px;height:4px;border-radius:var(--r-pill);background:rgba(20,22,26,.09);overflow:hidden}
.score--lead .score__meter{background:rgba(255,255,255,.16)}
.score__meter i{display:block;height:100%;width:0;border-radius:var(--r-pill);background:var(--acc);transition:width 1.1s var(--e-display),background .5s var(--e-body)}
.score__meter i.is-ok{background:var(--ok)} .score__meter i.is-warn{background:#D08A16} .score__meter i.is-bad{background:var(--bad)}
.score--lead .score__meter i.is-ok{background:#7CF3B0} .score--lead .score__meter i.is-warn{background:#F5C35C} .score--lead .score__meter i.is-bad{background:#FF8A8A}

.score--facts{display:flex;align-items:center;padding:20px 24px}
.facts{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px 40px;width:100%}
.facts div{display:flex;align-items:baseline;gap:10px}
.facts dt{font-size:14px;color:var(--ink-3)}
.facts dd{font-family:"Geologica",sans-serif;font-weight:600;font-size:21px;letter-spacing:-.02em}

/* список правок — сердце отчёта */
.fixes{display:flex;flex-direction:column;gap:10px}
.fix{background:var(--sheet);border-radius:var(--r-card);box-shadow:var(--shadow-card);overflow:hidden;
  opacity:0;translate:0 14px;transition:opacity .5s var(--e-body),translate .55s var(--e-display),box-shadow var(--t-btn) var(--e-ui)}
.fix.is-in{opacity:1;translate:0 0}
.fix:hover{box-shadow:var(--shadow-lift)}
.fix__btn{display:flex;align-items:center;gap:16px;width:100%;background:none;border:none;text-align:left;padding:19px 24px;cursor:pointer}
.fix__sev{width:9px;height:9px;border-radius:50%;flex:none}
.fix__sev--error{background:var(--bad)} .fix__sev--warning{background:var(--warn)} .fix__sev--notice{background:var(--ink-3)}
.fix__title{font-family:"Geologica",sans-serif;font-weight:600;font-size:18px;letter-spacing:-.015em;flex:1 1 auto;min-width:0}
.fix__reach{flex:none;font-size:14px;padding:6px 14px;border-radius:var(--r-pill);white-space:nowrap}
.fix__reach--server{background:var(--acc-tint);color:var(--acc-ink)}
.fix__reach--template{background:var(--ok-tint);color:var(--ok)}
.fix__reach--page{background:rgba(20,22,26,.06);color:var(--ink-2)}
.fix__chev{width:19px;height:19px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-layout) var(--e-ui)}
.fix.is-open .fix__chev{transform:rotate(180deg)}
.fix__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-layout) var(--e-body)}
.fix.is-open .fix__body{grid-template-rows:1fr}
.fix__inner{overflow:hidden}
.fix__pad{padding:2px 24px 24px;color:var(--ink-2);font-size:16px;line-height:1.6}
.fix__why{margin-bottom:16px}
.fix__lbl{font-family:"Geologica",sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-3);margin:0 0 5px}
.fix__why p{margin:0 0 14px;max-width:62ch;color:var(--ink-2)}
.fix__why p:last-child{margin-bottom:0}
.fix__urls{background:var(--paper);border-radius:var(--r-ctl);padding:13px 16px;display:flex;flex-direction:column;gap:6px;max-height:190px;overflow:auto}
.fix__urls a{font-size:14px;color:var(--ink-2);text-decoration:none;word-break:break-all}
.fix__urls a:hover{color:var(--acc);text-decoration:underline;text-underline-offset:3px}

/* убранный шум */
.noise{margin-top:46px;background:var(--acc-tint);border-radius:var(--r-card);padding:clamp(26px,3.4vw,40px)}
.noise__h{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.028em;color:var(--acc-ink)}
.noise__lede{margin-top:12px;max-width:62ch;color:#4A3E8C;font-size:16px}
.noise__list{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.noise__item{background:rgba(255,255,255,.72);border-radius:var(--r-ctl);padding:17px 19px}
.noise__n{font-family:"Geologica",sans-serif;font-weight:700;font-size:30px;letter-spacing:-.03em;color:var(--acc-ink);line-height:1}
.noise__t{margin-top:7px;font-size:14px;color:#4A3E8C}



.score--sub{grid-column:span 1}
.score__how{margin-top:20px;align-self:flex-start;background:rgba(255,255,255,.1);color:#fff;border:none;
  border-radius:var(--r-pill);padding:9px 18px;font:inherit;font-size:14px;cursor:pointer;
  transition:background var(--t-btn) var(--e-ui)}
.score__how:hover{background:rgba(255,255,255,.2)}
.how{background:var(--sheet);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:clamp(22px,3vw,32px);margin-bottom:34px}
.how__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,3vw,44px)}
.how__h{font-size:16px;letter-spacing:-.01em;margin-bottom:14px}
.how__list{display:flex;flex-direction:column;gap:10px}
.how__row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;font-size:15px;color:var(--ink-2)}
.how__row b{font-family:"Geologica",sans-serif;font-weight:600;color:var(--ink);font-size:17px}
.how__w{font-size:13px;color:var(--ink-3);min-width:44px;text-align:right}
.how__gate{margin-top:18px;padding-top:15px;box-shadow:inset 0 1px 0 var(--line);font-size:14px;color:var(--ink-2)}
.how__gate b{color:var(--ink)}

/* присутствие в сети */
.pres{margin:0 0 34px}
.pres__h{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.028em;margin-bottom:16px}
.pres__top{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:14px}
.pcard{background:var(--sheet);border-radius:var(--r-card);padding:20px 22px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:6px}
.pcard__n{font-family:"Geologica",sans-serif;font-weight:700;font-size:34px;letter-spacing:-.035em;line-height:1}
.pcard__n small{font-size:.42em;font-weight:400;color:var(--ink-3);letter-spacing:-.01em}
.pcard__t{font-size:14px;color:var(--ink-2)}
.pcard__s{font-size:13px;color:var(--ink-3)}
.pcard--none .pcard__n{color:var(--ink-3)}
.pres__bots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.pres__col{background:var(--sheet);border-radius:var(--r-card);padding:20px 22px 16px;box-shadow:var(--shadow-card)}
.pres__sub{font-size:14px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-bottom:12px;font-family:"Onest",sans-serif}
.bots{display:flex;flex-wrap:wrap;gap:7px;list-style:none}
.bots li{display:contents}
.bots li.bot{display:inline-flex}
.bot--link{text-decoration:none;transition:transform var(--t-btn) var(--e-ui),filter var(--t-btn) var(--e-ui)}
.bot--link:hover{transform:translateY(-1px);filter:brightness(.96)}
.bot__go{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.bot--link:hover .bot__go{opacity:1}
.pres__col--soc{margin-top:12px;grid-column:1/-1}
.soc-none{display:block;font-size:15px;color:var(--ink-2);max-width:70ch}
.bot{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-pill);font-size:14px}
.bot--allow{background:var(--ok-tint);color:var(--ok)}
.bot--partial{background:var(--warn-tint);color:var(--warn)}
.bot--block{background:var(--bad-tint);color:var(--bad)}
.bot i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pres__note{margin-top:14px;font-size:14px;color:var(--ink-3);max-width:78ch}
.pres__note a{color:var(--ink-2)}

/* страницы */
.pages{margin-top:46px}
.pages__h{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.028em;margin-bottom:16px}
.pages__wrap{background:var(--sheet);border-radius:var(--r-card);box-shadow:var(--shadow-card);overflow:auto;max-height:460px}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{position:sticky;top:0;background:var(--sheet);text-align:left;font-weight:500;color:var(--ink-3);font-size:13px;padding:15px 20px;box-shadow:inset 0 -1px 0 var(--line)}
.tbl td{padding:13px 20px;color:var(--ink-2)}
.tbl tbody tr{transition:background var(--t-state) var(--e-ui)}
.tbl tbody tr:nth-child(even){background:rgba(20,22,26,.022)}
.tbl tbody tr:hover{background:var(--acc-tint)}
.tbl .num{text-align:right;white-space:nowrap}
.tbl .u{color:var(--ink);word-break:break-all}
.tbl .bad{color:var(--bad);font-weight:600}

/* пояснение */
.what{padding:clamp(56px,8vw,110px) 0 0}
.what__h{font-size:clamp(24px,3vw,36px);letter-spacing:-.03em;margin-bottom:26px;max-width:20ch}
.what__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(20px,3vw,40px)}
.what__item h4{font-size:19px;letter-spacing:-.02em;margin-bottom:9px}
.what__item p{color:var(--ink-2);font-size:16px;line-height:1.6;max-width:42ch}

.foot{max-width:var(--maxw);margin:0 auto;padding:40px var(--gut) 44px;color:var(--ink-3);font-size:14px}

/* интро первого экрана: один авторский момент, не эффект на каждом блоке */
.js .ask__h,.js .ask__lede,.js .field,.js .engine{opacity:0;translate:0 18px}
.is-ready .ask__h{animation:rise .75s var(--e-display) forwards}
.is-ready .ask__lede{animation:rise .75s var(--e-display) .07s forwards}
.is-ready .field{animation:rise .75s var(--e-display) .14s forwards}
.is-ready .engine{animation:rise .8s var(--e-display) .2s forwards}
@keyframes rise{to{opacity:1;translate:0 0}}

@media (max-width:900px){
  .ask{grid-template-columns:1fr;gap:32px}
  .engine{position:static}
  .scores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .score--lead{grid-column:span 2}
}
@media (max-width:620px){
  body{font-size:17px}
  .report__head{align-items:center}
  .scores{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .score--facts{grid-column:1/-1}
  .score{padding:18px 18px 16px}
  .score--lead{grid-column:1/-1}
  .score__num{font-size:clamp(30px,10vw,40px)}
  .score--lead .score__num{font-size:clamp(46px,15vw,62px)}
  .score__name{margin-top:8px;font-size:14px}
  .facts{gap:8px 24px}
  .facts dd{font-size:18px}
  .top__nav{display:none}
  .ask{padding-top:26px}
  .ask__h{font-size:clamp(38px,10.5vw,54px)}
  .field__row{flex-direction:column}
  .btn--go{justify-content:center}
  .fix__btn{flex-wrap:wrap;gap:11px;padding:17px 18px}
  .fix__title{flex:1 1 100%;order:2}
  .fix__reach{order:3}
  .fix__chev{order:4;margin-left:auto}
  .fix__pad{padding:2px 18px 20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .ask__h,.js .ask__lede,.js .field,.js .engine{opacity:1;translate:none}
  .fix{opacity:1;translate:none}
}