/* Раскладка страницы. Компоненты — в design/components.css, токены — в design/tokens.css */
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
html,body{margin:0;background:var(--bg-000)}
body{overflow-x:hidden}
img,svg{max-width:100%}
h1,h2,h3{margin:0;font-weight:600}

.wrap{max-width:calc(var(--container) + 2 * 120px);margin:0 auto;padding:0 120px}
.sec{padding:var(--space-24) 0;background:var(--bg-000)}
.sec--alt{background:var(--bg-100)}
.sec__head{margin-bottom:var(--space-12)}
.sec__head h2{font-size:36px;line-height:42px;letter-spacing:-.01em;margin-top:12px}
.sec__lead{font-size:19px;line-height:28px;margin:12px 0 0;max-width:640px}
.sec__lead b{color:var(--ink)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--accent);color:var(--on-accent)!important;padding:8px 12px}
.skip:focus{left:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Шапка */
.top-bar{position:sticky;top:0;z-index:50;background:var(--bg-000);border-bottom:1px solid var(--line)}
.dp-header .dp-btn{flex:none}
.burger{display:none;margin-left:auto;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;color:var(--ink)}
.burger span,.burger span::before,.burger span::after{display:block;width:24px;height:2px;margin:0 auto;background:currentColor;position:relative;content:""}
.burger span::before{position:absolute;top:-6px}
.burger span::after{position:absolute;top:6px}

/* Первый экран */
.hero{display:grid;grid-template-columns:560px 1fr;gap:64px;align-items:center;padding-top:88px;padding-bottom:72px}
.hero h1{font-size:56px;line-height:60px;letter-spacing:-.02em;margin:20px 0}
.hero__sub{font-size:19px;line-height:28px;margin:0 0 32px}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap}
.hero__formats{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13px}
.hero__media{position:relative;height:440px}
.hero__main{position:absolute;inset:0 60px 60px 0}
.hero__panel{position:absolute;right:0;bottom:0;width:300px;box-shadow:var(--shadow-shot)}

/* Сетки карточек */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.grid-3--tight{gap:24px}
.thesis{border-top:2px solid var(--steel);padding-top:20px}
.thesis h3{font-size:20px;line-height:26px;margin:0 0 8px}
.thesis p{margin:0}
.mode__file{margin-top:16px}

/* Шаги */
.step__head{display:flex;align-items:center;gap:12px}
.step__line{flex:1;height:1px;background:var(--line)}
.step--active .step__line{background:var(--accent)}
.step h3{font-size:22px;line-height:28px;margin:16px 0 8px}
.step p{margin:0 0 20px}

/* До/после */
.result{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.hero>*,.result>*,.contact>*,.grid-2>*,.grid-3>*{min-width:0}
.result .dp-label{margin-bottom:12px}
.stamp-scroll{overflow-x:auto}
.stamp-scroll .dp-stamp{min-width:460px}
.files{padding:20px;display:grid;gap:10px;align-content:start}
.files .dp-label{margin:0}

/* Тарифы */
.dp-price ul{margin:0}
.dp-price .dp-btn{margin-top:auto}

/* Форма */
.contact{display:grid;grid-template-columns:7fr 4fr;gap:48px;align-items:start}
.contact__aside{padding-top:138px;display:grid;gap:16px}
.contact__aside p{font-size:14px;margin:12px 0 0}
.lead{padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.lead .span-2{grid-column:span 2}
.lead fieldset{border:0;margin:0;padding:0;min-width:0}
.lead .dp-seg{width:100%}
.dp-seg__opt{position:relative}
.dp-seg__opt input{position:absolute;opacity:0;pointer-events:none}
.dp-seg__opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.plan-row{display:grid;grid-template-columns:1fr 96px;gap:12px}
.lead [hidden]{display:none!important}
.dp-check{cursor:pointer;flex-wrap:wrap}
.dp-check input{position:absolute;opacity:0;width:20px;height:20px;margin:0}
.dp-check__wrap{position:relative;flex:none}
.dp-check:has(input:focus-visible) .dp-check__box{outline:2px solid var(--focus);outline-offset:2px}
.dp-check:has(input:checked) .dp-check__box{background:var(--accent);border-color:var(--accent)}
.dp-check:has(input:checked) .dp-check__box::after{content:"";width:10px;height:5px;border-left:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:rotate(-45deg) translate(1px,-1px)}
.dp-check .dp-field__error{flex-basis:100%;padding-left:32px}
.lead__submit{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.trap{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.dp-btn.is-loading::after{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dp-alert:focus{outline:none}
.dp-alert p{margin:0}

/* Официальные логотипы Фонда — белые версии, ставятся прямо на тёмный фон без плашки */
.dp-support__logos{align-items:center;gap:32px}
.dp-support__logo--img{display:block;width:auto;height:64px;min-width:0;padding:0;background:none;border-radius:0}
.dp-support__logo--img[src*=platforma]{height:84px}

/* Подвал */
.footer{background:var(--bg-100);padding:48px 0 32px;border-top:1px solid var(--line)}
.footer__cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;font-size:14px;line-height:22px}
.footer__cols p{margin:16px 0 0}
.footer__cols .dp-label{margin-bottom:12px}
.footer .dp-support{margin-top:32px}
.footer__copy{font-size:13px;margin-top:20px}


/* Служебные страницы */
.doc{padding:64px 0 96px;max-width:760px}
.doc h1{font-size:36px;line-height:42px;letter-spacing:-.01em;margin:0 0 24px}
.doc .note{padding:16px;border:1px dashed var(--line-strong);border-radius:var(--radius-md);margin-bottom:24px}

/* ≤1279 */
@media (max-width:1279px){
  .wrap{padding:0 32px}
  .hero{grid-template-columns:1fr;gap:48px}
  .hero__media{max-width:720px;width:100%}
  .contact{grid-template-columns:1fr}
  .contact__aside{padding-top:0}
  .grid-3.pricing{grid-template-columns:1fr 1fr}
}
@media (max-width:1023px){
  .grid-3{grid-template-columns:1fr 1fr}
  .result{grid-template-columns:1fr;gap:32px}
  .footer__cols{grid-template-columns:1fr 1fr}
  .footer__cols>:first-child{grid-column:span 2}
}
/* <768 */
@media (max-width:767px){
  .wrap{padding:0 16px}
  .sec{padding:var(--space-16) 0}
  .sec__head{margin-bottom:32px}
  .sec__head h2{font-size:26px;line-height:32px}
  .dp-header{height:56px;gap:16px}
  .burger{display:block}
  .dp-header>.dp-btn{display:none}
  .dp-nav{display:none;position:absolute;left:0;right:0;top:56px;flex-direction:column;gap:0;margin:0;background:var(--bg-000);border-bottom:1px solid var(--line);padding:8px 16px 16px}
  .dp-nav.is-open{display:flex}
  .dp-nav a{padding:12px 0;font-size:16px}
  html{scroll-padding-top:72px}
  .hero{padding-top:40px;padding-bottom:32px;gap:24px}
  .hero h1{font-size:32px;line-height:36px;letter-spacing:-.015em;margin:16px 0}
  .hero__sub{font-size:16px;line-height:24px;margin-bottom:24px}
  .hero__cta .dp-btn{width:100%}
  .hero__media{height:auto}
  .hero__main{position:static}
  .hero__panel{display:none}
  .hero__main .dp-shot{box-shadow:var(--shadow-shot)}
  .hero__main .dp-shot__ph{height:180px!important}
  .grid-2,.grid-3,.grid-3.pricing{grid-template-columns:1fr;gap:24px}
  .pricing .is-featured{order:-1}
  .dp-support{flex-direction:column;align-items:flex-start;gap:16px}
  .dp-support__logos{flex-wrap:wrap}
  .lead{grid-template-columns:1fr;padding:20px}
  .lead .span-2{grid-column:auto}
  .lead__submit .dp-btn{width:100%}
  .dp-table th,.dp-table td{display:block;width:auto;padding:4px 0}
  .dp-table th{padding-top:14px;border-bottom:0}
  .dp-table td{padding-bottom:14px}
  .footer__cols{grid-template-columns:1fr;gap:32px}
  .footer__cols>:first-child{grid-column:auto}
  .doc h1{font-size:26px;line-height:32px}
}