/* Demian visual refresh: светлая редакционная подача + предметный интерфейс лицензии. */
:root{
  color-scheme:light;
  --paper:#F4F0E6;
  --paper-2:#E8E1D2;
  --card:#FFFEFC;
  --ink:#16181D;
  --ink-2:#34332F;
  --muted:#6A665C;
  --line:#D5CDBC;
  --stamp:#7153C6;
  --stamp-2:#8B73D2;
  --ok:#1D7356;
  --night:#E8E1D2;
  --night-2:#F4F0E6;
  --on-night:#16181D;
  --on-night-muted:#4B4841;
  --r:4px;
}

html{background:var(--paper);scroll-padding-top:84px}
body{background:var(--paper);background-image:none;color:var(--ink);font-size:17px}
::selection{background:var(--stamp);color:#fff}
h1,h2,h3{text-wrap:balance}
.eyebrow{font:600 12px/1.35 var(--body);letter-spacing:.09em;color:var(--muted)}
.lead{color:var(--ink-2);line-height:1.55;text-wrap:pretty}
section{padding:clamp(72px,9vw,128px) 0}
.process,#order{padding-top:clamp(56px,7vw,96px)}

/* Навигация остаётся лёгкой и не забирает первый план у предложения. */
.top{background:rgba(244,240,230,.94);backdrop-filter:blur(12px);border-color:var(--line)}
.top .wrap{height:72px}
.brand{display:flex;align-items:center;gap:18px;min-width:0}
.brand-logo{display:inline-flex;align-items:center;flex:none}
.brand-partner{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font:500 10px/1.25 var(--body);letter-spacing:.025em;text-decoration:none;border-left:1px solid var(--line);padding-left:14px;transition:color .18s ease}
.brand-partner:hover{color:var(--stamp)}
.nav{gap:clamp(16px,2.4vw,34px)}
.nav a:not(.btn){transition:color .18s ease}
.nav a:not(.btn):hover{color:var(--stamp)}
.nav .btn{padding:13px 19px}
.nav .btn{--bg:var(--stamp);--fg:#fff;border-color:var(--stamp)}

/* Первый экран: заголовок как у INSITE, предметный лист как у MarketBoost. */
.hero{padding:clamp(42px,6vw,82px) 0 clamp(64px,8vw,108px)}
.hero .wrap{grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr);gap:clamp(28px,5vw,76px)}
.hero h1{max-width:14ch;font-size:clamp(36px,4.4vw,58px);line-height:1.01;letter-spacing:-.045em;margin:24px 0 20px}
.hero-brand{display:inline-flex;align-items:center;gap:.12em;vertical-align:-.08em;white-space:nowrap}
.hero-bitrix-mark{width:.66em;height:.66em;object-fit:contain;flex:none}
.hero h1 em{color:var(--stamp)}
.hero h1 em::after{height:.09em;opacity:.22;border-radius:0}
.hero .lead{max-width:54ch;font-size:clamp(17px,1.55vw,20px);margin-bottom:28px}
.partner{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:0 0 11px}
.partner i{background:var(--ok);box-shadow:none}
.partner u{color:var(--muted)}
.cta{gap:10px}
.btn{border-radius:4px;box-shadow:none;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:none}
.btn--stamp{--bg:var(--stamp);--fg:#fff}
.btn--stamp:hover{--bg:#5C42A6}
.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line)}
.btn--ghost:hover{--bg:var(--paper-2);--fg:var(--ink);border-color:var(--ink)}
.btn--light{--bg:var(--ink);--fg:#fff}
.hero-note{font-size:14px;color:var(--muted)}
.lic{z-index:1;border-radius:3px;background:var(--card);box-shadow:0 1px 0 var(--line),0 26px 56px -36px rgba(22,24,29,.36),0 0 0 1px var(--line);transform:rotate(-1.2deg)}
.lic::before,.lic::after{background:radial-gradient(circle at 5px 5px,var(--paper) 3.2px,transparent 3.6px) 0 0/16px 10px repeat-x}
.lic-h{border-bottom-color:var(--line)}
.lic-h .eyebrow{color:var(--muted)}
.lic dt{font-family:var(--body);font-size:12px;letter-spacing:.04em}
.lic-f .price{font-size:clamp(25px,2.4vw,32px)}
.stamp{position:relative;display:block;right:auto;bottom:auto;margin:14px 0 -12px auto;width:84px;height:84px;mix-blend-mode:normal;opacity:1}

/* Условия считываются одной строкой, как метрики на главном экране MarketBoost. */
.facts{background:#fff;border:0;border-block:1px solid var(--line)}
.facts .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}
.fact{padding:28px 22px 27px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0}
.fact b{font-size:clamp(23px,2.3vw,31px);letter-spacing:-.035em}
.fact span{font-size:14px;color:var(--muted)}

/* Цены остаются сравнительной таблицей; акцент помогает найти частый сценарий. */
#prices{background:var(--paper)}
.sec-head{max-width:820px;gap:16px}
.sec-head h2{font-size:clamp(30px,4.2vw,52px);letter-spacing:-.04em;line-height:1.04}
.ledger{border-top:2px solid var(--ink)}
.row{gap:clamp(10px,1.5vw,20px);padding:22px 12px;border-bottom-color:var(--line);transition:background .2s ease}
.row:hover{background:#fff;transform:none}
.row.head{padding:14px 12px;border-color:var(--ink)}
.row.head>*{font:600 11px/1.3 var(--body);letter-spacing:.07em;color:var(--muted)}
.ed b{font-size:20px}
.tag{font:600 11px/1.1 var(--body);letter-spacing:.02em;text-transform:none;color:var(--stamp);border:1px solid color-mix(in srgb,var(--stamp) 38%,transparent);border-radius:3px;padding:5px 7px}
.num{font:600 17px/1.3 var(--body);letter-spacing:-.02em}
.bonus{padding-left:0;border-left:0;color:var(--ink-2)}
.bonus.plus{color:var(--stamp)}
.row .btn{border-radius:4px}
.row .btn{--bg:transparent;--fg:var(--ink);border-color:var(--line)}
.row:nth-of-type(4) .btn{--bg:var(--stamp);--fg:#fff;border-color:var(--stamp)}
.row:nth-of-type(4){background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.row:nth-of-type(4) .ed b{color:var(--stamp)}
.under{font-size:14px}

/* Продление — светлая сцена с большим, но содержательным числом. */
.renew{background:var(--paper-2);color:var(--ink)}
.renew::before{inset:0;background:none;pointer-events:none}
.renew .eyebrow,.renew .lead,.big-cap,.rlist li span,.points p small{color:var(--on-night-muted)}
.renew h2{letter-spacing:-.04em}
.big{font-size:clamp(92px,13vw,164px);letter-spacing:-.07em;color:var(--ink)}
.big sup{color:var(--stamp)}
.big-cap{max-width:34ch}
.rlist{border-top-color:var(--line)}
.rlist li{border-bottom-color:var(--line)}
.rlist li b{font:600 19px/1 var(--body);color:var(--ink)}
.points{gap:16px}
.points p{color:var(--ink)}
.points p i{color:var(--stamp);font:600 13px/1.6 var(--body)}
.renew .btn--light{--bg:var(--stamp);--fg:#fff;border-color:var(--stamp)}

/* Доказательства: неровный ритм и чистые поверхности вместо тёмной плитки. */
#why{background:#fff}
.why-grid{gap:0 34px}
.why{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:24px 0 30px;gap:10px}
.why:nth-child(1),.why:nth-child(2),.why:nth-child(3),.why:nth-child(4){grid-column:span 6}
.why:nth-child(2),.why:nth-child(3){margin-top:18px}
.why .n{font:600 12px/1.2 var(--body);color:var(--stamp);letter-spacing:.04em}
.why.dark{background:transparent;color:var(--ink);border-color:var(--line)}
.why.dark p{color:var(--ink-2)}
.why.dark .n{color:var(--stamp)}
.why h3{font-size:clamp(19px,2vw,24px);letter-spacing:-.025em}
.why p{font-size:15.5px;color:var(--ink-2)}

/* Процесс — одна непрерывная линия, а не четыре одинаковые карточки. */
.steps{gap:0 20px}
.steps::before{border-color:var(--line);border-top-style:solid}
.step{padding:0 18px 0 0}
.step::before{width:42px;height:42px;border-radius:50%;background:var(--paper);border:1px solid var(--line);font-size:15px;margin-bottom:20px}
.step:last-child::before{background:var(--stamp);border-color:var(--stamp);color:#fff}
.step h3{font-size:18px}
.step p{font-size:14.5px;color:var(--muted)}

/* FAQ и форма: светлая поверхность, деления вместо вложенных карточек. */
#faq{background:var(--paper)}
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom-color:var(--line)}
.faq summary{font-size:17px}
.faq summary i{border-color:var(--line);border-radius:50%}
.faq details[open] summary i{background:var(--ink);color:#fff}
.faq .a{color:var(--ink-2);font-size:15.5px}
.order{background:#fff}
.order .wrap{grid-template-columns:minmax(250px,.78fr) minmax(0,1.22fr);gap:clamp(32px,6vw,88px)}
.contacts{gap:0;margin-top:26px;border-top:1px solid var(--line)}
.contacts a{padding:15px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.contacts a:hover{border-color:var(--line);transform:translateX(4px)}
.contacts a small,.field>span{font:600 11px/1.3 var(--body);letter-spacing:.06em;color:var(--muted)}
.form{border:1px solid var(--line);border-radius:4px;padding:clamp(22px,3.2vw,38px);box-shadow:0 22px 48px -40px rgba(22,24,29,.28);gap:18px}
.seg{gap:6px}
.seg label{border:1px solid var(--line);border-radius:3px}
.seg input:checked+label{border-color:var(--ink);background:var(--paper-2)}
.seg input:checked+label b::before{color:var(--stamp)}
input[type=text],input[type=email],input[type=tel],select,textarea{background:#fff;border:1px solid var(--line);border-radius:3px}
input:hover,select:hover,textarea:hover{border-color:#aaa18f}
input:focus,select:focus,textarea:focus{border-color:var(--stamp);background:#fff}
.check input{accent-color:var(--stamp)}
.form .btn{border-radius:4px}
footer{background:var(--paper);border-color:var(--line);color:var(--muted)}
footer .tm{border-color:var(--line)}
.cookie{border-radius:4px;background:var(--ink);color:var(--paper);box-shadow:0 18px 48px -24px rgba(0,0,0,.32)}
.cookie a{color:var(--paper)}
.cookie button{border-radius:3px;background:var(--paper);color:var(--ink)}

/* Три кинематографичных акцента: документ, кульминация и линия процесса. */
.rv{opacity:1;filter:none;transform:none;transition:none}
@keyframes cinema-card{0%{opacity:0;transform:perspective(1100px) translate3d(0,34px,0) rotateX(5deg) rotateZ(-3deg)}70%{opacity:1;transform:perspective(1100px) translate3d(0,-4px,0) rotateX(-.5deg) rotateZ(.2deg)}100%{opacity:1;transform:rotate(-1.2deg)}}
@keyframes cinema-stamp{0%{opacity:0;transform:scale(1.35) rotate(-25deg)}65%{opacity:1;transform:scale(.94) rotate(-12deg)}100%{opacity:1;transform:scale(1) rotate(-14deg)}}
@keyframes cinema-glint{0%{opacity:0;transform:translateX(-140%)}15%{opacity:.22}70%{opacity:.12}100%{opacity:0;transform:translateX(140%)}}
@keyframes cinema-number{0%{opacity:0;transform:translateY(28px) scale(.94)}72%{opacity:1;transform:translateY(-3px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes cinema-row{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes cinema-step{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.motion-ready .hero .lic{animation:cinema-card 1.05s .16s cubic-bezier(.2,.75,.22,1) both}
html.motion-ready .lic-glint{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
html.motion-ready .lic-glint::before{content:"";position:absolute;inset:-20% auto -20% 0;width:42%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.75),transparent);opacity:0;transform:translateX(-140%);animation:cinema-glint 1.45s 1.05s ease-out both}
html.motion-ready .hero .stamp{animation:cinema-stamp .48s 1.05s cubic-bezier(.2,.85,.25,1) both}
html.motion-ready #renew.scene-active .big{transform-origin:left center;animation:cinema-number .8s cubic-bezier(.2,.8,.25,1) both}
html.motion-ready #renew.scene-active .rlist li{animation:cinema-row .55s cubic-bezier(.2,.75,.25,1) both}
html.motion-ready #renew.scene-active .rlist li:nth-child(2){animation-delay:.1s}
html.motion-ready #renew.scene-active .rlist li:nth-child(3){animation-delay:.2s}
html.motion-ready #renew.scene-active .rlist li:nth-child(4){animation-delay:.3s}
html.motion-ready #renew.scene-active .points{animation:cinema-row .6s .34s both}
html.motion-ready #renew.scene-active .btn{animation:cinema-row .55s .42s both}
.steps::before{transform:scaleX(1);transform-origin:left center}
html.motion-ready .process:not(.scene-active) .steps::before{transform:scaleX(0)}
html.motion-ready .process.scene-active .steps::before{transition:transform 1.1s cubic-bezier(.2,.75,.25,1)}
html.motion-ready .process.scene-active .step{animation:cinema-step .48s cubic-bezier(.2,.75,.25,1) both}
html.motion-ready .process.scene-active .step:nth-child(2){animation-delay:.08s}
html.motion-ready .process.scene-active .step:nth-child(3){animation-delay:.16s}
html.motion-ready .process.scene-active .step:nth-child(4){animation-delay:.24s}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.seg label:focus-within{outline-color:var(--stamp);outline-offset:3px}

@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .hero .in{max-width:760px}
  .lic{max-width:520px;margin:10px auto 0}
  .renew .wrap,.order .wrap{grid-template-columns:1fr}
  .why-grid{gap:0 24px}
  .why,.why:nth-child(1),.why:nth-child(2),.why:nth-child(3),.why:nth-child(4){grid-column:span 6}
}
@media(max-width:760px){
  .top .wrap{height:64px}
  .facts .wrap{grid-template-columns:1fr 1fr}
  .fact:nth-child(3){border-left:0;padding-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
  .why,.why:nth-child(1),.why:nth-child(2),.why:nth-child(3),.why:nth-child(4){grid-column:1/-1}
  .why:nth-child(2),.why:nth-child(3){margin-top:0}
  .steps{grid-template-columns:1fr 1fr;gap:28px 12px}
  .steps::before{display:none}
  .step{padding:0}
}
@media(max-width:560px){
  body{font-size:16px}
  .top .wrap{height:auto;min-height:58px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap;row-gap:5px}
  .brand{align-items:center;flex-direction:row;gap:8px}
  .brand-logo{height:22px}
  .logo{height:22px;width:auto}
  .brand-partner{font-size:9px;line-height:1.1;border-left:1px solid var(--line);padding-left:8px}
  .hero{padding-top:38px}
  .stamp{width:72px;height:72px;margin-top:12px;margin-bottom:-10px}
  .hero h1{font-size:clamp(32px,9.2vw,38px);max-width:13ch}
  .partner{font-size:12px}
  .cta .btn{width:100%;justify-content:center}
  .facts .wrap{grid-template-columns:1fr 1fr}
  .fact{padding:19px 12px 17px}
  .fact:nth-child(odd){padding-left:0}
  .fact b{font-size:24px}
  .row:hover{transform:none}
  .row:nth-of-type(4){margin-inline:-8px;padding-inline:8px}
  .num{font-size:16px}
  .num::before{font:600 11px/1.3 var(--body);letter-spacing:.04em}
  .bonus{font-size:14px}
  .renew .wrap{gap:38px}
  .big{font-size:clamp(92px,27vw,132px);margin:28px 0 12px}
  .steps{grid-template-columns:1fr;gap:22px}
  .step{display:grid;grid-template-columns:42px 1fr;column-gap:14px;align-items:start}
  .step::before{grid-row:span 2;margin:0}
  .step h3{align-self:end;margin:0 0 4px}
  .step p{grid-column:2}
  .faq summary{font-size:16px;padding:19px 0}
  .form{padding:22px 18px}
  footer .wrap{gap:22px}
}
@media(max-width:420px){
  .brand{width:100%}
  .nav{width:100%;justify-content:flex-end}
}
@media(prefers-reduced-motion:reduce){
  .rv,.fact.rv,.row.rv,.why.rv,.step.rv{opacity:1;filter:none;transform:none;transition:none;animation:none}
  .lic{animation:none!important;transform:rotate(-1.2deg)}
  .lic-glint{display:none}
}