/* v2: попапы, тарифы с юридическим сопровождением, оффер проверки, анимации загрузки и прокрутки */

/* ---------- юридическое сопровождение в тарифах ---------- */
.legal-shared{border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));background:linear-gradient(135deg,var(--accent-soft),var(--surface) 70%)}
.incl-badge{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--f-body);padding:8px 12px;border-radius:999px;background:var(--accent);color:var(--on-accent)}
.incl-badge .ph-fill{font-size:15px}
.plan-legal.yes .ph-fill{color:var(--accent);font-size:20px}
.plan-legal.yes{background:var(--accent-soft)}
.plan.hot .plan-legal.yes{background:color-mix(in srgb,var(--panel-accent) 14%,var(--panel-2))}
.plan.hot .plan-legal.yes .ph-fill{color:var(--panel-accent)}
.plan-legal.no{color:var(--muted)}
.plan-legal.no .ph{color:var(--muted)}

/* ---------- блок заявки: оффер ---------- */
.free-badge{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--f-body);padding:8px 12px;border-radius:999px;background:color-mix(in srgb,var(--panel-accent) 18%,transparent);color:var(--panel-accent);margin-bottom:18px}
.check-list{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.check-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:14px;border-radius:16px;background:var(--panel-2);border:1px solid var(--panel-line)}
.check-list .ph{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:color-mix(in srgb,var(--panel-accent) 14%,transparent);color:var(--panel-accent)}
.check-list b{display:block;color:var(--panel-ink);font-size:15.5px;line-height:1.3}
.check-list small{display:block;color:var(--panel-muted);font-size:13.5px;line-height:1.4;margin-top:3px}
@media (max-width:560px){.check-list{grid-template-columns:minmax(0,1fr)}}
.form-title{margin-bottom:2px}

/* ---------- попап ---------- */
.modal{border:0;padding:0;margin:auto;width:min(960px,calc(100% - 24px));max-height:calc(100dvh - 24px);border-radius:26px;background:var(--surface);color:var(--ink);box-shadow:0 40px 120px -30px rgb(6 20 14 / .55);overflow:hidden}
.modal::backdrop{background:rgb(8 18 14 / .55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);max-height:calc(100dvh - 24px);position:relative}
.modal-info{background:var(--panel);color:var(--panel-ink);padding:clamp(24px,3.5vw,40px);overflow:auto;position:relative;isolation:isolate}
.modal-info::before{content:"";position:absolute;left:-30%;bottom:-40%;width:90%;aspect-ratio:1;background:radial-gradient(closest-side,color-mix(in srgb,var(--panel-accent) 22%,transparent),transparent);z-index:-1}
.modal-form{padding:clamp(20px,3vw,36px);overflow:auto}
.modal-form .form{box-shadow:none;padding:0;background:transparent}
.modal-x{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:20px;display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--ease),background .2s}
.modal-x:hover{transform:rotate(90deg);background:var(--bg)}
.m-kicker{font:600 13px/1 var(--f-body);color:var(--panel-accent);margin-bottom:12px}
.m-title{color:var(--panel-ink);font-size:clamp(26px,3vw,36px)}
.m-for{color:var(--panel-muted);margin-top:12px;font-size:15.5px}
.modal-info .price{margin-top:22px}
.modal-info .price b{color:var(--panel-ink)}
.modal-info .price small{color:var(--panel-muted)}
.m-feats{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:15.5px}
.m-feats li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;line-height:1.45}
.m-feats .ph{color:var(--panel-accent);font-size:19px;margin-top:1px}
.m-legal{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;margin-top:20px;padding:14px;border-radius:14px;font-size:14.5px;line-height:1.45}
.m-legal.yes{background:color-mix(in srgb,var(--panel-accent) 14%,var(--panel-2))}
.m-legal.yes .ph-fill{color:var(--panel-accent);font-size:20px}
.m-legal.no{background:var(--panel-2);color:var(--panel-muted)}
.m-extra{margin-top:16px;font-size:13.5px;color:var(--panel-muted)}
body.modal-open{overflow:hidden}
@media (max-width:820px){
  .modal{width:100%;max-width:100%;max-height:100dvh;height:100dvh;border-radius:0;margin:0}
  .modal-in{grid-template-columns:minmax(0,1fr);max-height:100dvh;height:100dvh;overflow:auto;display:block}
  .modal-info,.modal-form{overflow:visible}
  .modal-info{padding-top:64px}
  .m-feats{gap:8px}
}
@media (prefers-reduced-motion:no-preference){
  .modal[open]{animation:mIn .55s var(--ease)}
  .modal[open]::backdrop{animation:bIn .4s ease}
  .modal.is-closing{animation:mOut .25s ease forwards}
  .modal.is-closing::backdrop{animation:bOut .25s ease forwards}
  .modal[open] .modal-info>*>*{animation:mItem .6s var(--ease) both}
  .modal[open] .modal-info>*>*:nth-child(2){animation-delay:.05s}
  .modal[open] .modal-info>*>*:nth-child(3){animation-delay:.1s}
  .modal[open] .modal-info>*>*:nth-child(4){animation-delay:.15s}
  .modal[open] .modal-info>*>*:nth-child(5){animation-delay:.2s}
  .modal[open] .modal-info>*>*:nth-child(n+6){animation-delay:.25s}
}
@keyframes mIn{from{opacity:0;transform:translateY(24px) scale(.97)}}
@keyframes mOut{to{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes bIn{from{opacity:0}}
@keyframes bOut{to{opacity:0}}
@keyframes mItem{from{opacity:0;transform:translateY(10px)}}

/* ---------- первый экран ---------- */
.v2-hero{position:relative;overflow:hidden}
.hero-glow{position:absolute;inset:-20% -10% auto auto;width:60vw;max-width:820px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%);pointer-events:none;z-index:-1}
.report-wrap{position:relative}

@media (prefers-reduced-motion:no-preference){
  /* загрузка */
  .js .header{animation:hdrIn .9s var(--ease) both}
  @keyframes hdrIn{from{opacity:0;transform:translateY(-100%)}}
  .js .hero-glow{animation:glow 14s ease-in-out infinite alternate}
  @keyframes glow{from{transform:translate(0,0) scale(1)}to{transform:translate(-6%,8%) scale(1.12)}}
  .js .v2-emph[data-fade]{transform:translateY(10px) scale(.96)}
  .js .stagger[data-fade]{opacity:1;filter:none;transform:none}
  .js .stagger li{opacity:0;transform:translateX(-14px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0ms) + var(--i) * 110ms)}
  .js .stagger.is-in li{opacity:1;transform:none}
  .js .report[data-fade]{transform:translateY(30px) scale(.96);filter:blur(8px)}
  .js .report[data-fade].is-in{transform:none;filter:none}
  .report.is-scanning::after{content:"";position:absolute;left:0;right:0;top:0;height:90px;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--panel-accent) 12%,transparent),transparent);animation:scan 1.8s linear infinite;pointer-events:none}
  @keyframes scan{from{transform:translateY(-90px)}to{transform:translateY(560px)}}
  .r-row.is-done{animation:rowIn .45s var(--ease)}
  @keyframes rowIn{from{background:color-mix(in srgb,var(--panel-accent) 10%,transparent)}}
  .r-row.is-done .r-ic i{animation:pop .45s var(--ease)}
  @keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.2)}100%{transform:scale(1)}}

  /* лёгкий параллакс отчёта при прокрутке (где поддерживается) */
  @supports (animation-timeline: scroll()){
    .report-wrap{animation:par linear both;animation-timeline:scroll(root);animation-range:0 700px}
    @keyframes par{to{transform:translateY(-50px)}}
  }

  /* прокрутка */
  .js .risk[data-fade]{transform:translateY(34px) rotate(-1deg)}
  .js .risk[data-fade].is-in{transform:none}
  .js .risk .risk-ic,.js .cov .cov-ic{transform:scale(.5) rotate(-20deg);opacity:0;transition:transform .8s var(--ease),opacity .5s;transition-delay:calc(var(--d,0ms) + 250ms)}
  .js .risk.is-in .risk-ic,.js .cov.is-in .cov-ic{transform:none;opacity:1}
  .js .cov[data-fade]{clip-path:inset(0 0 35% 0 round 22px);transform:translateY(28px);filter:none;transition:clip-path 1s var(--ease),opacity .7s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
  .js .cov[data-fade].is-in{clip-path:inset(0 0 0 0 round 22px);transform:none}
  .js .plan[data-fade]{transform:translateY(40px) scale(.97)}
  .js .plan[data-fade].is-in{transform:none}
  .js .plan.hot[data-fade].is-in{animation:hotGlow 2.4s var(--ease) 1.2s 1}
  @keyframes hotGlow{0%,100%{box-shadow:var(--shadow-lg)}40%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent),var(--shadow-lg)}}
  .js .closing[data-fade] .ph{transform:scale(.4) rotate(-25deg);transition:transform .9s var(--ease) .2s}
  .js .closing[data-fade].is-in .ph{transform:none}
  .js .legal-shared[data-fade]{transform:translateY(20px) scale(.99)}
  .js .cta-band[data-fade]{transform:translateY(40px) scale(.98)}
  .js .faq details[data-fade]{transform:translateY(12px)}
  .js .step .dot{transform:scale(.6);transition:transform .7s var(--ease),border-color .5s,color .5s,background .5s;transition-delay:var(--d,0ms)}
  .js .steps.is-in .step .dot{transform:none}
  .js .step h3,.js .step p,.js .step .when{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0ms) + 200ms)}
  .js .steps.is-in .step h3,.js .steps.is-in .step p,.js .steps.is-in .step .when{opacity:1;transform:none}
}

.legal-shared{margin-bottom:16px}
.v2 .plans{margin-top:0}

/* переход к тарифам: карточки под шапкой */
#plans{scroll-margin-top:8px}