*{box-sizing:border-box} body{margin:0} html{scroll-behavior:smooth;scroll-padding-top:62px} @keyframes dp-float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}} @keyframes dp-float2{0%,100%{transform:translateY(0)}50%{transform:translateY(15px)}} @keyframes dp-caret{0%,100%{opacity:1}50%{opacity:0}} /* panel windows (15s loop) */ @keyframes x-pan1{0%{opacity:0;transform:translateX(22px)}3%{opacity:1;transform:none}22%{opacity:1;transform:none}27%,100%{opacity:0;transform:translateX(-22px)}} @keyframes x-pan2{0%,24%{opacity:0;transform:translateX(22px)}28%{opacity:1;transform:none}48%{opacity:1;transform:none}53%,100%{opacity:0;transform:translateX(-22px)}} @keyframes x-pan3{0%,50%{opacity:0;transform:translateX(22px)}56%{opacity:1;transform:none}74%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateX(-22px)}} @keyframes x-pan4{0%,76%{opacity:0;transform:translateX(22px)}81%{opacity:1;transform:none}97%{opacity:1;transform:none}100%{opacity:0}} @keyframes x-prog{0%{left:0.5%}22%{left:0.5%}27%{left:25.5%}48%{left:25.5%}53%{left:50.5%}74%{left:50.5%}78%{left:75.5%}100%{left:75.5%}} @keyframes x-thumb{0%,15%{opacity:0;transform:scale(.5)}19%,96%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5)}} @keyframes x-load{0%,4%{width:6%}19%,22%{width:100%}100%{width:100%}} @keyframes x-chk{0%,16%{opacity:0;transform:scale(.4)}20%,100%{opacity:1;transform:scale(1)}} @keyframes x-sel{0%,36%{background:#fff;color:#5A6072;border-color:#E3E8F2}40%,100%{background:#2563EB;color:#fff;border-color:#2563EB}} @keyframes x-type{0%,32%{max-width:0}45%,100%{max-width:250px}} @keyframes x-pop{from{opacity:0;transform:translateY(10px) scale(.93)}to{opacity:1;transform:none}} /* поп-ины контента как 15s-бесконечные (были one-shot → не повторялись на 2-м цикле). сброс в 0% — при скрытой панели */ @keyframes x-pu0{0%,56.7%{opacity:0;transform:translateY(10px) scale(.93)}60.3%,100%{opacity:1;transform:none}} @keyframes x-pu1{0%,58%{opacity:0;transform:translateY(10px) scale(.93)}61.7%,100%{opacity:1;transform:none}} @keyframes x-pu2{0%,59.3%{opacity:0;transform:translateY(10px) scale(.93)}63%,100%{opacity:1;transform:none}} @keyframes x-pu3{0%,60.7%{opacity:0;transform:translateY(10px) scale(.93)}64.3%,100%{opacity:1;transform:none}} @keyframes x-pug{0%,81.3%{opacity:0;transform:translateY(10px) scale(.93)}84.7%,100%{opacity:1;transform:none}} @keyframes x-belt{from{transform:translateX(0)}to{transform:translateX(-1302px)}} @keyframes x-pulse{0%,100%{box-shadow:0 12px 26px -10px rgba(37,99,235,.6)}50%{box-shadow:0 12px 26px -4px rgba(37,99,235,.85)}} @keyframes vd-spark{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.28);opacity:1}}@keyframes vd-ring{0%,100%{box-shadow:0 0 0 0 rgba(124,92,252,.45)}60%{box-shadow:0 0 0 16px rgba(124,92,252,0)}}@keyframes vd-shine{0%{transform:translateX(-170%) skewX(-12deg)}55%,100%{transform:translateX(180%) skewX(-12deg)}}@keyframes vd-dot{0%{transform:translateX(-14px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(14px);opacity:0}}@keyframes vd-gen{0%,100%{opacity:.5}50%{opacity:1}} @keyframes uf-c0{0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}21%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}39%{opacity:1;transform:translate(-288px,-18px) rotate(-27deg) scale(0.98)}84%{opacity:1;transform:translate(-288px,-18px) rotate(-27deg) scale(0.98)}94%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}100%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}}@keyframes uf-c1{0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}18%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}36%{opacity:1;transform:translate(-192px,-12px) rotate(-18deg) scale(0.98)}84%{opacity:1;transform:translate(-192px,-12px) rotate(-18deg) scale(0.98)}94%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}100%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}}@keyframes uf-c2{0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}15%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}33%{opacity:1;transform:translate(-96px,-6px) rotate(-9deg) scale(0.98)}84%{opacity:1;transform:translate(-96px,-6px) rotate(-9deg) scale(0.98)}94%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}100%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}}@keyframes uf-c3{0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}12%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}30%{opacity:1;transform:translate(0px,0px) rotate(0deg) scale(1.12)}84%{opacity:1;transform:translate(0px,0px) rotate(0deg) scale(1.12)}94%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}100%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}}@keyframes uf-c4{0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}15%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}33%{opacity:1;transform:translate(96px,-6px) rotate(9deg) scale(0.98)}84%{opacity:1;transform:translate(96px,-6px) rotate(9deg) scale(0.98)}94%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}100%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}}@keyframes uf-c5{0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}18%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}36%{opacity:1;transform:translate(192px,-12px) rotate(18deg) scale(0.98)}84%{opacity:1;transform:translate(192px,-12px) rotate(18deg) scale(0.98)}94%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}100%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}}@keyframes uf-c6{0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}21%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}39%{opacity:1;transform:translate(288px,-18px) rotate(27deg) scale(0.98)}84%{opacity:1;transform:translate(288px,-18px) rotate(27deg) scale(0.98)}94%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}100%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.35)}}@keyframes uf-src{0%{opacity:0;transform:scale(.9)}4%{opacity:1;transform:scale(1)}14%{opacity:1;transform:scale(.9)}20%{opacity:0;transform:scale(.5)}84%{opacity:0;transform:scale(.5)}100%{opacity:0;transform:scale(.9)}}@keyframes uf-lbl{0%{opacity:0}5%{opacity:1}16%{opacity:1}22%{opacity:0}100%{opacity:0}}@keyframes uf-burst{0%,13%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:.9;transform:translate(-50%,-50%) scale(1.4)}30%{opacity:0;transform:translate(-50%,-50%) scale(2)}100%{opacity:0}}@keyframes uf-cap{0%,33%{opacity:0;transform:translateY(10px)}40%{opacity:1;transform:translateY(0)}84%{opacity:1;transform:translateY(0)}92%,100%{opacity:0;transform:translateY(0)}} @keyframes x-dot1{0%,26%{background:#2563EB}27%,100%{background:#c6cede}} @keyframes x-dot2{0%,26%{background:#c6cede}27%,52%{background:#2563EB}53%,100%{background:#c6cede}} @keyframes x-dot3{0%,52%{background:#c6cede}53%,77%{background:#2563EB}78%,100%{background:#c6cede}} @keyframes x-dot4{0%,77%{background:#c6cede}78%,100%{background:#2563EB}} /* fan animation paused until scrolled into view */ #fan-wrap:not(.animate) #fan-stage, #fan-wrap:not(.animate) #fan-stage *{animation-play-state:paused !important;} /* burger hidden on desktop */ #burger{display:none;} #mobile-menu{display:none;} @media (min-width: 861px){ /* кроп-модель как на планшете: стейдж прибит к верху, низ обрезается overflow. ручки настройки: height (сколько показываем / где режем низ) и #fan-stage top (вертикальный сдвиг). */ #fan-wrap{position:relative;height:600px;overflow:hidden;margin-top:8px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent);} #fan-stage{position:absolute !important;left:50% !important;top:0 !important;transform:translateX(-50%) scale(1.32);transform-origin:top center;margin:0 !important;width:760px !important;} #src-photo{width:248px !important;height:316px !important;margin:-158px 0 0 -124px !important;} /* «до-после»: сузить колонку картинки, текст забирает остальное */ #skills-body{grid-template-columns:minmax(0,360px) 1fr !important;} } @media (max-width: 860px){ #site-nav{display:none !important;} #mobile-actions{display:flex !important;} .rs-row{grid-template-columns:1fr !important;gap:14px !important;} #restyle-feats{grid-template-columns:1fr !important;gap:22px !important;} #burger{display:flex !important;} #skills-head{grid-template-columns:1fr !important;gap:16px !important;} #skills-body{grid-template-columns:1fr !important;gap:28px !important;} #skills-body [data-compare]{max-width:300px;margin-left:auto;margin-right:auto;} #skills-tabs{overflow-x:auto;flex-wrap:nowrap !important;justify-content:flex-start !important;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;} #skills-tabs::-webkit-scrollbar{display:none;height:0;width:0;} #skills-tabs > button{flex:0 0 auto;} #hero-grid{grid-template-columns:1fr !important;padding-top:6px !important;gap:34px !important;} #app-window{justify-self:center !important;margin:0 auto !important;} #footer-grid{grid-template-columns:1fr 1fr !important;gap:34px 24px !important;} #fan-wrap{position:relative;height:420px !important;overflow:hidden;margin:16px auto 0 !important;} #fan-stage{position:absolute !important;left:50% !important;top:0 !important;width:760px !important;height:500px !important;margin:0 !important;transform:translateX(-50%) scale(.86);transform-origin:top center;} #src-photo{width:300px !important;height:384px !important;margin:-192px 0 0 -150px !important;} #src-photo [style*="uf-lbl"]{font-size:15px !important;padding:7px 15px !important;} #fan-cap{bottom:56px !important;} #fan-cap > span{font-size:18px !important;padding:11px 20px !important;gap:10px !important;} #fan-cap > span > span:first-child{width:24px !important;height:24px !important;font-size:13px !important;} #video-row{flex-direction:column !important;} #video-arrow > div{transform:rotate(90deg);} } .br-mobile{display:none;} @media (max-width: 520px){ .br-mobile{display:inline !important;} #skills-title{font-size:34px !important;} #stats-div{display:none !important;} #stats-row{gap:22px !important;} #footer-grid{grid-template-columns:1fr !important;gap:30px !important;} #fan-wrap{height:380px !important;} #fan-stage{transform:translateX(-50%) scale(.74);} #hero{padding-left:16px !important;padding-right:16px !important;} #app-progress{padding:10px 8px !important;} #app-progress [style*="flex:1"]{font-size:11px !important;gap:5px !important;} #app-progress [style*="width:7px"]{width:6px !important;height:6px !important;} #gen-btn{padding:11px 16px !important;font-size:13px !important;} #panel-scenarios{padding:12px 12px 8px !important;gap:8px !important;} #panel-scenarios > div:nth-child(2){gap:8px !important;} #panel-scenarios [style*="grid-template-columns"]{gap:8px !important;} #panel-scenarios [style*="grid-template-columns"] > div{padding:9px 10px !important;} #panel-scenarios [style*="grid-template-columns"] > div > div:first-child{font-size:11px !important;gap:5px !important;} #panel-scenarios [style*="grid-template-columns"] > div > div:last-child{font-size:11.5px !important;line-height:1.2 !important;} } /* FAQ accordion (native
) */ .faq-d{background:#faf9ff;border:1px solid #ece6fb;border-radius:18px;} .faq-d > summary{list-style:none;cursor:pointer;user-select:none;} .faq-d > summary::-webkit-details-marker{display:none;} .faq-d[open]{background:#fff;box-shadow:0 24px 50px -34px rgba(60,40,120,.4);} .faq-d[open] .faq-chev{transform:rotate(180deg);} /* restyle lightbox affordance */ #restyle .rs-strip img{cursor:zoom-in;transition:transform .18s ease;} #restyle .rs-strip img:hover{transform:scale(1.04);} /* app-window — декоративный мок, не интерактив: единый курсор, без выделения текста */ #app-window, #app-window *{cursor:default;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}