/* ==========================================================================
   АУДИТ (#audit) — светлая секция, тёмная панель проверки
   --------------------------------------------------------------------------
   Слева оффер и два формата проверки, справа панель 600×560: домен
   (кольцо оценки, метрики скорости и технический чек-лист) и Метрика +
   Вордстат (спрос, график визитов, позиции и конверсия). Сцены сменяются
   сами по кругу, синхронно подсвечивая пункт списка: js/audit2.js.
   Палитра — как у тёмных блоков сайта: графит #0a0a0a, бумага #f2efe7,
   белый акцент.
   ========================================================================== */

.aud2{
  --a-accent:#fff;--a-accent-2:#d0d0d0;
  --a-ink:#141414;--a-muted:#5c5c5c;--a-soft:#ececea;
  --a-line:rgba(16,18,12,.12);
  --a-paper:#f2efe7;
  --a-dark:#0a0a0a;--a-dark-2:#0f0f0f;--a-dark-line:rgba(255,255,255,.09);
}

/* ---------- секция на тёмном фоне — как тёмные блоки сайта ----------
   верхний отступ на 120px больше базового (.s2): блок опускается ниже */
.aud2{background:var(--a-dark);color:#fff;padding-bottom:100px;padding-top:212px}
@media (max-width:760px){
  .aud2{padding-top:176px}
}

.aud2::before{
  background:
    radial-gradient(34% 60% at 14% 30%,rgba(255,255,255,.15),transparent 72%),
    radial-gradient(28% 54% at 88% 22%,rgba(255,255,255,.08),transparent 72%);
}
.aud2 .s2-eyebrow{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.72);box-shadow:none}
.aud2 .s2-eyebrow::before{background:var(--a-accent)}
.aud2 .s2-title{color:#fff}
.aud2 .s2-title em{
  background:linear-gradient(135deg,#d4d4d4,var(--a-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.aud2 .s2-lead{color:rgba(255,255,255,.6)}
.aud2 .aud2-point.is-on{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.45);box-shadow:0 22px 48px -38px rgba(0,0,0,.6)}
.aud2 .aud2-num{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.6)}
.aud2 .aud2-point b{color:#fff}
.aud2 .aud2-point p{color:rgba(255,255,255,.55)}
.aud2 .s2-btn--primary{background:var(--a-accent);color:var(--a-ink);box-shadow:0 10px 26px -12px rgba(255,255,255,.7)}
.aud2 .s2-btn--primary:hover{box-shadow:0 16px 34px -14px rgba(255,255,255,.85)}
.aud2-grid{display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:56px;align-items:center}

/* ---------- пункты проверки ---------- */
.aud2-points{display:grid;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.aud2-point{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;
  padding:16px;border-radius:14px;border:1px solid transparent;
  cursor:pointer;outline:none;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.aud2-point.is-on{
  background:#fff;border-color:rgba(18,18,18,.55);
  box-shadow:0 22px 48px -38px rgba(16,18,12,.45);
  transform:translateX(2px);
}
.aud2-point:focus-visible{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.aud2-num{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--a-line);background:#fff;
  display:grid;place-items:center;
  font:700 10px/1 var(--site-font);letter-spacing:.06em;color:#7a7a7a;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.aud2-point.is-on .aud2-num{background:var(--a-accent);border-color:var(--a-accent);color:var(--a-ink)}
.aud2-point b{display:block;font-size:14px;font-weight:600;line-height:1.3;color:var(--a-ink)}
.aud2-point p{margin-top:4px;font-size:12px;line-height:1.5;color:var(--a-muted)}

/* что именно проверяем — теги под описанием */
.aud2-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.aud2-tags li{
  padding:4px 8px;border-radius:7px;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04);
  font:500 10.5px/1.2 var(--site-font);letter-spacing:.01em;
  color:rgba(255,255,255,.6);
}
.aud2-price{
  display:inline-flex;align-items:baseline;gap:7px;margin-top:11px;
  font-size:11px;color:rgba(255,255,255,.5);
}
.aud2-price em{
  font-style:normal;font-family:var(--display);font-size:20px;font-weight:600;
  letter-spacing:-.04em;line-height:1;color:#fff;
}

.aud2-actions{display:flex;align-items:center;gap:16px;margin-top:26px}
.aud2-actions span{font-size:11px;line-height:1.5;color:var(--s2-soft,#8b8b8b);max-width:24ch}

/* ---------- панель ---------- */
.aud2-stage{position:relative;width:100%;max-width:600px;justify-self:end}
.aud2-panel{
  position:relative;height:560px;overflow:hidden;
  background:var(--a-dark);border:1px solid rgba(255,255,255,.1);border-radius:26px;
  box-shadow:0 48px 96px -58px rgba(8,10,9,.75);
  color:#fff;
}
.aud2-bar{
  display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;
  border-bottom:1px solid var(--a-dark-line);
  background:linear-gradient(180deg,#111111,#0a0a0a);
}
.aud2-dots{display:flex;gap:5px}
.aud2-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.aud2-url{
  flex:1;display:flex;align-items:center;gap:6px;min-width:0;
  padding:5px 9px;border-radius:7px;background:rgba(255,255,255,.07);
  font-size:10px;color:rgba(255,255,255,.52);
}
.aud2-url svg{width:10px;height:10px;flex:none}
.aud2-live{display:inline-flex;align-items:center;gap:5px;font:600 8.5px/1 var(--site-font);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.44)}
.aud2-live i{width:5px;height:5px;border-radius:50%;background:var(--a-accent);animation:auLive 1.6s ease-in-out infinite}
@keyframes auLive{50%{opacity:.25}}

.aud2-status{display:flex;align-items:baseline;gap:10px;padding:12px 20px 8px}
.aud2-step{font:700 9px/1 var(--site-font);letter-spacing:.1em;color:rgba(255,255,255,.38)}
.aud2-status b{
  min-width:0;font-size:13px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.aud2-pct{margin-left:auto;font:600 10px/1 var(--site-font);color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums}
.aud2-progress{height:2px;margin:0 20px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.aud2-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a-accent),var(--a-accent-2))}

.aud2-scenes{position:absolute;inset:82px 0 44px;overflow:hidden}
.au-scene{
  position:absolute;inset:0;padding:20px 22px 18px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.au-scene.is-on{opacity:1;visibility:visible;transform:none}

.aud2-foot{
  position:absolute;left:0;right:0;bottom:0;height:44px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 20px;border-top:1px solid var(--a-dark-line);background:#0a0a0a;
  font-size:10px;color:rgba(255,255,255,.42);
}
.aud2-foot b{font-weight:600;color:#fff}

/* ==========================================================================
   01. ДОМЕН — кольцо 48 → 92, метрики и технический чек-лист
   ========================================================================== */
.au-tech{display:grid;gap:16px;align-content:start}

.au-tech-top{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px 26px;align-items:center}

@property --au-p{syntax:"<number>";inherits:false;initial-value:48}
.au-ring{
  --au-p:48;position:relative;width:150px;height:150px;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--a-accent) calc(var(--au-p)*1%),rgba(255,255,255,.12) 0);
}
.au-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--a-dark-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.au-score{position:relative;display:flex;align-items:baseline;gap:2px}
.au-score b{
  font-family:var(--display);font-size:40px;font-weight:600;letter-spacing:-.05em;
  color:#fff;font-variant-numeric:tabular-nums;
}
.au-score i{font-style:normal;font-size:10px;color:rgba(255,255,255,.4)}
.au-scene.is-on .au-ring{animation:auRing 2.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes auRing{from{--au-p:48}to{--au-p:92}}

.au-metrics{display:grid;gap:14px}
.au-metric{display:grid;grid-template-columns:30px minmax(0,1fr) 46px;align-items:center;gap:10px;font-size:10.5px}
.au-metric b{font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.5)}
.au-metric em{font-style:normal;text-align:right;font-weight:600;color:rgba(255,255,255,.86);font-variant-numeric:tabular-nums}
.au-track{height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.au-track i{
  display:block;height:100%;width:var(--w);border-radius:99px;
  background:linear-gradient(90deg,var(--a-accent),var(--a-accent-2));
  transform:scaleX(0);transform-origin:left;
}
.au-scene.is-on .au-track i{animation:auBar .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.12s + .15s)}
@keyframes auBar{to{transform:scaleX(1)}}

/* чек-лист: строки появляются по очереди, галочки «проставляются» */
.au-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.au-check{
  display:flex;align-items:center;gap:9px;min-width:0;
  padding:9px 11px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  opacity:0;transform:translateY(6px);
}
.au-check b{font-size:11px;font-weight:600;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-check i{position:relative;flex:none;width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.14)}
.au-check i::after{
  content:"";position:absolute;left:4px;top:3px;width:5px;height:8px;
  border:1.5px solid var(--a-accent);border-top:0;border-left:0;transform:rotate(42deg);
}
.au-scene.is-on .au-check{animation:auRow .5s ease-out both;animation-delay:calc(var(--i)*.09s + .3s)}
@keyframes auRow{to{opacity:1;transform:none}}

.au-fix{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 13px;border-radius:10px;
  background:rgba(255,255,255,.12);color:var(--a-accent);font-size:11px;font-weight:600;
  opacity:0;transform:translateY(6px);
}
.au-fix i{width:6px;height:6px;flex:none;border-radius:50%;background:currentColor;box-shadow:0 0 10px rgba(255,255,255,.8)}
.au-scene.is-on .au-fix{animation:auRow .5s ease-out 1.05s both}

/* ==========================================================================
   02. МЕТРИКА + ВОРДСТАТ — спрос, визиты, позиции и конверсия
   ========================================================================== */
.au-metrika{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:14px;height:100%}

.au-card-box{
  display:flex;flex-direction:column;min-width:0;
  padding:15px 15px 13px;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
}
.au-card-label{font:700 8.5px/1 var(--site-font);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}

.au-queries{display:grid;flex:1;gap:14px;margin-top:16px;align-content:space-between}
.au-query{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:3px 10px;
  opacity:0;transform:translateY(6px);
}
.au-query b{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.84);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-query em{
  font-style:normal;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.46);
  font-variant-numeric:tabular-nums;
}
.au-query span{grid-column:1/-1;height:5px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.au-query span i{
  display:block;height:100%;width:var(--w);border-radius:99px;
  background:linear-gradient(90deg,var(--a-accent),var(--a-accent-2));
  transform:scaleX(0);transform-origin:left;
}
.au-scene.is-on .au-query{animation:auRow .45s ease-out both;animation-delay:calc(var(--i)*.11s + .15s)}
.au-scene.is-on .au-query span i{animation:auBar .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.11s + .22s)}

/* низ карточки Вордстата: сколько всего запросов в семантике */
.au-q-note{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);
  font-size:9.5px;color:rgba(255,255,255,.42);
}
.au-q-note b{font-size:11px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}

/* график визитов: линия прорисовывается, под ней проявляется заливка */
.au-chart{display:flex;align-items:center;flex:1;margin-top:14px}
.au-chart svg{display:block;width:100%;height:auto}
.au-line{
  fill:none;stroke:var(--a-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.au-area{fill:url(#auTrafficFill);opacity:0}
.au-dot{fill:var(--a-accent);opacity:0}
.au-scene.is-on .au-line{animation:auDraw 1.5s cubic-bezier(.4,0,.2,1) .3s forwards}
.au-scene.is-on .au-area{animation:auFade .8s ease-out 1.15s forwards}
.au-scene.is-on .au-dot{animation:auFade .5s ease-out 1.6s forwards}
@keyframes auDraw{to{stroke-dashoffset:0}}
@keyframes auFade{to{opacity:1}}

.au-chart-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;margin-top:auto;padding-top:14px}
.au-chart-stats div{padding-top:9px;border-top:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(6px)}
.au-scene.is-on .au-chart-stats div{animation:auRow .45s ease-out both;animation-delay:calc(var(--i,0)*.1s + 1.4s)}
.au-chart-stats div:nth-child(2){--i:1}
.au-chart-stats div:nth-child(3){--i:2}
.au-chart-stats div:nth-child(4){--i:3}
.au-chart-stats b{
  display:block;font-family:var(--display);font-size:20px;font-weight:600;
  letter-spacing:-.04em;line-height:1;color:#fff;
}
.au-chart-stats span{display:block;margin-top:4px;font-size:9px;line-height:1.3;color:rgba(255,255,255,.42)}

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width:1180px){
  .aud2-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .aud2-stage{justify-self:start;max-width:600px}
}
@media (max-width:760px){
  .aud2-stage{max-width:none}
  .aud2-panel{height:620px;border-radius:20px}
  .aud2-scenes{inset:82px 0 44px}
  .au-scene{padding:16px 16px 14px}
  .au-tech{gap:14px}
  .au-tech-top{grid-template-columns:112px minmax(0,1fr);gap:16px}
  .au-ring{width:112px;height:112px}
  .au-ring::before{inset:9px}
  .au-score b{font-size:30px}
  .au-metrics{gap:10px}
  .au-metric{grid-template-columns:24px minmax(0,1fr) 38px;gap:8px;font-size:9px}
  .au-checks{gap:7px}
  .au-check{padding:8px 9px;gap:7px}
  .au-check b{font-size:9.5px;white-space:normal;line-height:1.2}
  .au-fix{font-size:10px;padding:9px 11px}
  .au-metrika{grid-template-columns:1fr;gap:12px}
  .au-card-box{padding:12px 13px 11px}
  /* в узкой панели пять запросов и большой график не влезают —
     показываем четыре запроса и график компактнее */
  .au-queries{gap:10px;margin-top:12px}
  .au-query:nth-child(5){display:none}
  .au-chart svg{width:100%;height:118px}
  .au-q-note{padding-top:10px}
  .au-chart-stats{grid-template-columns:repeat(4,1fr);gap:8px}
  .au-chart-stats b{font-size:16px}
  .aud2-point{padding:12px}
  .aud2-price em{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  .au-scene,.au-scene *{animation:none!important}
  .au-check,.au-query,.au-fix,.au-chart-stats div{opacity:1!important;transform:none!important}
  .au-track i,.au-query span i{transform:none}
  .au-line{stroke-dashoffset:0}
  .au-area,.au-dot{opacity:1}
}