/* Blanki.online: стили главной (перенесено из index.html прежней версии сайта, THEME 2026-11-07).
   Шапка .rh вынесена в site.css. */
:root{
  --ink:#1e2532;--carbon:#0f141e;--pencil:#656e83;--fog:#828ba2;--haze:#9fa6bb;
  --paper:#fff;--mist:#f7f9fc;--lavender:#f4f9fa;--chalk:#d9deeb;--ash:#e7eaf4;
  --blue:#5699d9;--blue-d:#307bb9;--iris:#5699d9;--midnight:#1a1c6a;
  --mint:#e7f4ed;--blush:#ffebe4;--rose:#edd7df;
  --r-card:16px;--r-btn:36px;--r-sm:4px;--r-tag:100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Montserrat,"DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.25;letter-spacing:normal}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{color:var(--carbon);font-weight:500}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.129em;text-transform:uppercase;color:var(--blue)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;font:500 16px/1 inherit;font-family:inherit;padding:18px 24px;border-radius:var(--r-btn);border:0;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--blue-d)}
.btn-sm{padding:12px 20px;font-size:15px}
.ghost{color:var(--blue);font-weight:500;padding:8px 4px;background:none;border:0;cursor:pointer;font-family:inherit;font-size:16px}
.ghost:hover{text-decoration:underline}

/* Nav */
.nav{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--chalk)}
.nav .wrap{height:64px;display:flex;align-items:center;gap:32px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--carbon);white-space:nowrap}
.logo-ic{width:36px;height:36px;flex:none;display:block}
.logo-tx{color:#2d3648;font-weight:500;letter-spacing:-.02em;line-height:1;text-transform:uppercase}
.logo-tx b{font-weight:inherit;color:var(--blue)}
.logo-tx i{font-style:normal;color:var(--fog);font-weight:inherit;font-size:1em;letter-spacing:inherit;margin-left:0;vertical-align:baseline}
.logo-ic{border-radius:0}
.logo-lg{font-size:22px}.logo-lg .logo-ic{width:42px;height:42px}
@media (max-width:560px){.nav .logo-tx i{display:none}.nav .logo{font-size:18px}.nav .logo-ic{width:32px;height:32px}}
.logo-mark{width:30px;height:30px;border-radius:8px;background:var(--blue);display:grid;place-items:center}
.logo b{color:var(--blue);font-weight:600}
.menu{display:flex;gap:24px;margin:0 0 0 8px}
.menu a{color:var(--ink);white-space:nowrap}
.menu a:hover{color:var(--blue)}
.nav-right{margin-left:auto}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-right .sep{width:1px;height:24px;background:var(--haze)}

/* Hero */
.hero{background:var(--mist);padding:80px 0;overflow:hidden}
body{overflow-x:clip}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero-cats{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}
.hero-cats a{border:1px solid var(--chalk);background:#fff;border-radius:var(--r-tag);padding:8px 14px;font-size:14px;font-weight:500;color:var(--ink)}
.hero-cats a:hover{border-color:var(--blue);color:var(--blue)}
.hero-cats .lbl{font-size:14px;color:var(--fog);padding:8px 4px 8px 0}
.hero h1{font-size:52px;line-height:1;letter-spacing:.021em;font-weight:500}
.hero h1 span{color:var(--blue)}
.hero p.lead{font-size:18px;line-height:1.43;color:var(--pencil);margin:24px 0 32px;max-width:560px}
.cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-facts{display:flex;gap:32px;margin-top:40px;flex-wrap:wrap}
.fact{display:flex;align-items:baseline;gap:6px;font-size:22px}
.fact b{color:var(--blue);font-weight:500}
.fact span{font-size:15px;color:var(--pencil)}

.hero-visual{position:relative;height:460px}
.hero-visual .sheet{position:absolute;width:300px;background:#fff;border:1px solid var(--chalk);border-radius:var(--r-card);padding:12px}
.hero-visual .s1{left:10%;top:20px;transform:rotate(-3deg)}
.hero-visual .s2{right:0;top:70px;transform:rotate(3deg)}
.chip{position:absolute;background:rgba(255,255,255,.92);border:1px solid var(--chalk);border-radius:20px;padding:10px 16px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;z-index:3}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.chip.ats{background:var(--mint);border-color:#cfe8da;color:#1f7a4d}
.c1{left:0;bottom:60px}.c2{right:10px;bottom:20px}.c3{right:40%;top:0}

/* Sections */
section{padding:80px 0}
.sec-mist{background:var(--mist)}
.sec-head{max-width:760px;margin-bottom:40px}
.sec-head h2{font-size:40px;line-height:1.07;margin:12px 0 16px}
.sec-head p{font-size:18px;line-height:1.43;color:var(--pencil)}

/* Format cards */
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tcard{border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px;background:#eef6fe;border:1px solid #d6e8fa}
.tcard .ico{width:40px;height:40px;border-radius:var(--r-sm);background:#fff;border:1px solid #d6e8fa;display:grid;place-items:center}
.tcard h3{font-size:22px;font-weight:600;color:var(--ink)}
.tcard p{color:var(--pencil);line-height:1.43}
.tcard a{color:var(--blue);font-weight:500;margin-top:auto}

/* Catalog */
.catalog-bar{position:sticky;top:0;z-index:10;background:var(--paper);padding:16px 0;border-bottom:1px solid var(--chalk);margin-bottom:32px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--mist);border:1px solid var(--ash);border-radius:var(--r-tag);padding:4px}
.seg button{border:0;background:none;font:500 15px Montserrat,sans-serif;color:var(--pencil);padding:10px 18px;border-radius:var(--r-tag);cursor:pointer}
.seg button.on{background:#fff;color:var(--blue);outline:1px solid var(--chalk)}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{border:1px solid var(--chalk);background:#fff;border-radius:var(--r-tag);padding:9px 16px;font:500 15px Montserrat,sans-serif;color:var(--ink);cursor:pointer}
.tag:hover{border-color:var(--blue);color:var(--blue)}
.tag.on{background:var(--blue);border-color:var(--blue);color:#fff}
.tag .n{color:var(--fog);font-weight:400;margin-left:4px}
.tag.on .n{color:#e3f0fb}

.group{margin-bottom:64px}
.group-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px}
.group-head h3{font-size:28px;line-height:1.14}
.group-head p{color:var(--pencil);font-size:16px;line-height:1.43;margin-top:8px;max-width:640px}
.badge{font-size:13px;font-weight:600;letter-spacing:.06em;padding:6px 12px;border-radius:var(--r-tag);background:var(--lavender);color:var(--iris);white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tpl{background:#fff;border:1px solid var(--chalk);border-radius:var(--r-card);padding:12px;transition:border-color .15s}
.tpl:hover{border-color:var(--blue)}
.tpl .thumb{position:relative;background:var(--mist);border-radius:10px;padding:14px;aspect-ratio:210/260;overflow:hidden}
.tpl .over{position:absolute;inset:0;background:rgba(247,249,252,.9);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;opacity:0;transition:opacity .15s}
.tpl:hover .over{opacity:1}
.tpl .meta{display:flex;justify-content:space-between;align-items:center;padding:14px 4px 4px}
.tpl .meta b{font-weight:500;font-size:18px}
.tpl .meta span{font-size:13px;color:var(--fog);font-weight:500}
.tpl .new{position:absolute;top:10px;left:10px;background:var(--mint);color:#1f7a4d;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--r-tag);z-index:2}

/* Resume mini-preview (CSS-drawn) */
.cv{background:#fff;width:100%;height:100%;border-radius:3px;outline:1px solid var(--ash);display:flex;font-size:0;overflow:hidden}
.cv .side{width:34%;padding:8% 6%;display:flex;flex-direction:column;gap:6px}
.cv .main{flex:1;padding:8% 7%;display:flex;flex-direction:column;gap:5px}
.cv .ph{width:56%;aspect-ratio:1;border-radius:50%;background:#cfd5e3;margin-bottom:6px}
.cv .ph.sq{border-radius:3px}
.cv .ln{height:4px;border-radius:2px;background:#e3e7f0}
.cv .ln.d{background:#c3c9d7}
.cv .ttl{height:8px;border-radius:2px;width:70%;margin-bottom:3px}
.cv .h{height:5px;width:40%;border-radius:2px;margin-top:8px}
.cv.col{flex-direction:column}
.cv .band{padding:9% 8%;display:flex;gap:10%;align-items:center}
.cv .band .ph{width:22%;margin:0}
.cv .band .t{flex:1;display:flex;flex-direction:column;gap:5px}
.cv .body{display:flex;flex:1}
.cv .body .main{padding-top:6%}
.w90{width:90%}.w80{width:80%}.w70{width:70%}.w60{width:60%}.w50{width:50%}

/* Steps */
.how{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px}
.steps{background:#fff;border:1px solid var(--ash);border-radius:var(--r-card);overflow:hidden}
.step{display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--ash);border-left:2px solid transparent;cursor:pointer}
.step:last-child{border-bottom:0}
.step .num{color:var(--fog);font-weight:500;font-size:18px;width:24px}
.step .lbl{font-size:18px;font-weight:500;flex:1}
.step .arr{color:var(--haze)}
.step.on{border-left-color:var(--blue)}.step.on .lbl{color:var(--blue)}
.step-panel{background:var(--lavender);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:12px}
.step-panel h3{font-size:24px;line-height:1.17;font-weight:600;color:var(--ink)}
.step-panel p{color:var(--ink);line-height:1.55;font-size:16px}
.step-panel ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:4px}
.step-panel li{position:relative;padding-left:22px;line-height:1.5}
.step-panel li::before{content:"";position:absolute;left:4px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.how-more{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.how-more p{font-size:17px;line-height:1.6;color:var(--ink)}
@media (max-width:1000px){.how-more{grid-template-columns:1fr}}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tile{background:#fff;border:1px solid var(--chalk);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px}
.tile h3,.tile h4{font-size:18px;font-weight:500;color:var(--carbon)}
.tile p{font-size:15px;color:var(--pencil);line-height:1.43}

/* Expert */
.author{max-width:880px;margin:0 auto 72px;display:flex;gap:28px;align-items:flex-start;background:#fff;border:1px solid var(--chalk);border-radius:24px;padding:32px;box-shadow:0 12px 32px -20px rgba(26,28,106,.25)}
.author-ph{flex:none;width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--iris));display:grid;place-items:center;box-shadow:0 0 0 6px #eef6fe}
.author-ph svg{width:44px;height:44px}
.author-b{flex:1;min-width:0}
.author-name{font-size:24px;font-weight:600;color:var(--carbon);margin:6px 0 10px}
.author-txt{color:var(--ink);font-size:16px;line-height:1.6}
.author-facts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.author-facts li{background:var(--mist);border:1px solid var(--ash);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.author-facts b{font-size:20px;font-weight:600;color:var(--blue)}
.author-facts span{font-size:13px;color:var(--pencil);line-height:1.3}
@media (max-width:760px){.author{flex-direction:column;align-items:center;text-align:center;padding:24px 20px}.author-facts{grid-template-columns:1fr 1fr}}

/* FAQ */
.faq-head{max-width:760px;margin:0 auto 32px;text-align:center}
.faq-head h2{font-size:40px;line-height:1.07;margin:12px 0 14px}
.faq-head p{font-size:18px;line-height:1.43;color:var(--pencil)}
.faq{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-i{background:#fff;border:1px solid var(--chalk);border-radius:16px;transition:border-color .2s,box-shadow .2s}
.faq-i:hover{border-color:#bcdcf8}
.faq-i[open]{border-color:var(--blue);box-shadow:0 10px 28px -18px rgba(48,123,185,.45)}
.faq-i summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-size:18px;font-weight:500;color:var(--carbon);cursor:pointer;list-style:none;min-height:44px}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary i{flex:none;position:relative;width:32px;height:32px;border-radius:50%;background:#eef6fe;transition:transform .25s,background .2s}
.faq-i summary i::before,.faq-i summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--blue);border-radius:2px}
.faq-i summary i::after{transform:rotate(90deg)}
.faq-i[open] summary i{transform:rotate(45deg);background:var(--blue)}
.faq-i[open] summary i::before,.faq-i[open] summary i::after{background:#fff}
.faq-a{padding:0 24px 22px}
.faq-a p{color:var(--ink);font-size:16px;line-height:1.6}
.faq-i[open] .faq-a{animation:faqIn .28s ease-out}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Появление блоков при прокрутке (только если работает JS) */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}.faq-i[open] .faq-a{animation:none}}
@media (max-width:560px){.faq-head h2{font-size:28px}.faq-i summary{padding:16px 18px;font-size:16px}.faq-a{padding:0 18px 18px}}

/* Footer */
footer{border-top:1px solid var(--chalk);padding:48px 0}
footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
footer .tagline{font-size:14px;color:var(--pencil);margin-top:8px}
footer nav{display:flex;gap:24px;color:var(--pencil);flex-wrap:wrap}

/* UX pro checklist: доступность и состояния */
a,button,summary,.step,.tag{cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.tpl:focus-within .over{opacity:1}
.tpl .meta span,.tag .n,.hero-cats .lbl,.step .num{color:var(--pencil)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Живой просмотр шаблона */
.modal{position:fixed;inset:0;z-index:50;background:rgba(15,20,30,.55);display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:20px;max-width:880px;width:100%;max-height:92vh;overflow:auto;display:grid;grid-template-columns:1.1fr .9fr}
.modal-prev{background:var(--mist);padding:32px}
.modal-prev .sheet{aspect-ratio:210/297;border-radius:6px;overflow:hidden}
.modal-info{padding:32px;display:flex;flex-direction:column;gap:14px}
.modal-info h3{font-size:31px;line-height:1.14}
.modal-info ul{list-style:none;display:flex;flex-direction:column;gap:10px;color:var(--pencil)}
.modal-info li{display:flex;gap:10px;align-items:center}
.modal-info li svg{flex:none;color:#5699d9}
.modal-box{position:relative}
.modal-close{position:absolute;top:14px;right:14px;z-index:3;background:#fff;border:1px solid var(--chalk);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.modal-close:hover{background:var(--mist);border-color:var(--blue);color:var(--blue)}
.modal-close:active{transform:scale(.94)}
.dl-row{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:8px}
.dl-row .btn{justify-content:center;width:100%;min-height:52px;padding:16px 20px;transition:background .15s,transform .12s}
.dl-row .btn:active{transform:scale(.98)}
.dl-sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dl-f{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 14px;border-radius:14px;background:#fff;border:1px solid var(--chalk);color:var(--ink);text-align:left;transition:border-color .15s,background .15s,transform .12s}
.dl-f:hover{border-color:var(--blue);background:#f4f9fa}
.dl-f:active{transform:scale(.98)}
.dl-f .fi{flex:none;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.04em;color:#fff}
.dl-f .fi.w{background:#2b579a}.dl-f .fi.p{background:#d93a2b}
.dl-f>span:last-child{min-width:0}
.dl-f b{display:block;font-size:15px;font-weight:600;line-height:1.2}
.dl-f small{display:block;font-size:12px;color:var(--pencil);line-height:1.3}
.dl-cap{font-size:13px;font-weight:600;color:var(--pencil);margin:4px 0 -2px}
.dl-note{min-height:18px;font-size:13px;color:#1f7a4d;text-align:center}
.modal.open .modal-box{animation:mIn .22s ease-out}
@keyframes mIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
html.m-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.modal.open .modal-box{animation:none}}
.btn-out{background:#fff;color:var(--blue);outline:1px solid var(--chalk)}
.btn-out:hover{background:var(--mist)}
@media (max-width:700px){.modal-box{grid-template-columns:1fr}.modal-prev{padding:20px 20px 12px}.modal-prev .sheet{max-width:260px;margin:0 auto}.modal-info{padding:20px}.modal-info h3{font-size:24px;padding-right:48px}.dl-row{position:sticky;bottom:0;margin:0 -20px -20px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--ash)}.modal-close{position:fixed;top:24px;right:24px}}

/* Панель каталога: на всю ширину */
.catalog-bar{display:block;padding:0;margin-bottom:40px;background:rgba(255,255,255,.96);border-top:1px solid var(--chalk)}
.cb-in{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:76px}
.cb-left{display:flex;align-items:center;gap:16px;min-width:0;overflow-x:auto;scrollbar-width:none}.cb-left::-webkit-scrollbar{display:none}.tags{flex-wrap:nowrap}.tag{white-space:nowrap;flex:none}
.cb-lbl{font-size:13px;font-weight:600;letter-spacing:.129em;text-transform:uppercase;color:var(--pencil);white-space:nowrap}
.cb-right{display:flex;align-items:center;gap:16px;flex:none}
.cb-total{font-size:15px;color:var(--pencil);white-space:nowrap}
@media (max-width:1000px){.cb-lbl,.cb-total{display:none}}
@media (max-width:700px){.cb-in{gap:12px;min-height:64px;overflow-x:auto;scrollbar-width:none}.cb-left{flex:none;overflow:visible}}

/* Реалистичные резюме */
.tpl .thumb{aspect-ratio:auto;padding:12px}
.modal-prev .sheet{aspect-ratio:580/820}
.tpl-img{display:block;width:100%;height:auto;aspect-ratio:580/820;border-radius:4px;outline:1px solid var(--ash);background:#fff}
.sheet img{display:block;width:100%;height:100%;object-fit:cover}

/* Плавающие иконки по краям hero (по мотивам wordgpt.ru, в нашей теме) */
.hero{position:relative}
.hero .wrap{position:relative;z-index:1}
.leaves{position:absolute;inset:0;pointer-events:none;z-index:0}
.leaf{position:absolute;display:flex;align-items:center;justify-content:center;width:46px;height:46px;color:var(--blue);opacity:.2;animation:leaf-a 8s ease-in-out infinite alternate}
.leaf svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.l1{left:3%;top:13%;animation-duration:7s}
.l2{right:4%;top:9%;animation-name:leaf-b;animation-duration:8.5s;animation-direction:alternate-reverse}
.l3{left:34%;top:6%;animation-name:leaf-c;animation-duration:9.4s}
.l4{left:1.5%;top:44%;animation-name:leaf-d;animation-duration:10.2s}
.l5{left:28%;top:90%;animation-duration:8.1s}
.l6{right:1.5%;top:42%;animation-name:leaf-b;animation-duration:9.8s}
.l7{right:24%;top:4%;animation-name:leaf-c;animation-duration:7.6s;animation-direction:alternate-reverse}
.l8{right:5%;top:76%;animation-name:leaf-d;animation-duration:11s}
.l9{left:56%;top:91%;animation-duration:8.8s}
.l10{left:4%;top:78%;animation-name:leaf-b;animation-duration:10.6s}
@keyframes leaf-a{0%{transform:translateY(-22px) rotate(14deg)}50%{transform:translate(16px,6px) rotate(-8deg)}100%{transform:translate(-6px,30px) rotate(22deg)}}
@keyframes leaf-b{0%{transform:translateY(-12px) rotate(-10deg) scaleX(-1)}50%{transform:translate(-18px,10px) rotate(12deg) scaleX(-1)}100%{transform:translate(8px,26px) rotate(-16deg) scaleX(-1)}}
@keyframes leaf-c{0%{transform:translate(8px,-18px) rotate(6deg)}50%{transform:translate(-10px,14px) rotate(-14deg)}100%{transform:translate(14px,22px) rotate(18deg)}}
@keyframes leaf-d{0%{transform:translateY(8px) rotate(-18deg)}50%{transform:translate(12px,-10px) rotate(8deg)}100%{transform:translate(-14px,20px) rotate(-6deg)}}
@media (max-width:1000px){.leaf{opacity:.16}.l3,.l5,.l7,.l9{display:none}}
@media (max-width:640px){.leaves{display:none}}
@media (prefers-reduced-motion:reduce){.leaf{animation:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Образцы резюме для устройства на работу */
.ex-search{position:relative;max-width:560px;margin:0 0 24px}
.ex-search svg{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--fog);pointer-events:none}
.ex-search input{width:100%;min-height:52px;border:1px solid var(--chalk);border-radius:var(--r-btn);padding:0 20px 0 52px;font:400 16px Montserrat,sans-serif;color:var(--ink);background:#fff}
.ex-search input::placeholder{color:var(--fog)}
.ex-grid{display:grid;grid-template-columns:290px 1fr;gap:24px;align-items:start}
.ex-cats{background:#fff;border:1px solid var(--ash);border-radius:var(--r-card);overflow:hidden;position:sticky;top:20px}
.ex-cats-h{display:flex;align-items:center;gap:12px;padding:20px 24px;font-size:22px;font-weight:600;color:var(--carbon);border-bottom:1px solid var(--ash)}
.ex-cats-h svg{color:var(--blue)}
.ex-cat{display:block;width:100%;min-height:44px;text-align:left;background:none;border:0;border-left:2px solid transparent;padding:11px 24px;font:500 16px/1.25 Montserrat,sans-serif;color:var(--ink);cursor:pointer}
.ex-cat:hover{background:var(--mist)}
.ex-cat[aria-current="true"]{border-left-color:var(--blue);color:var(--blue);background:#f2f8fe}
.ex-panel{background:#fff;border:1px solid var(--ash);border-radius:var(--r-card);padding:32px;min-height:420px}
.ex-title{display:flex;align-items:center;gap:14px;font-size:31px;line-height:1.14;font-weight:500;color:var(--carbon);margin:0 0 16px}
.ex-ico{flex:none;width:48px;height:48px;border-radius:12px;background:#eef6fe;color:var(--blue);display:grid;place-items:center}
.ex-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ex-desc{color:var(--pencil);font-size:18px;line-height:1.43;margin:0 0 24px;max-width:760px}
.ex-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;padding:0;margin:0}
.ex-list li{position:relative;padding-left:20px;font-size:17px;line-height:1.35;color:var(--ink)}
.ex-list li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.ex-grp{font-size:19px;font-weight:600;color:var(--carbon);margin:28px 0 14px}
.ex-grp:first-of-type{margin-top:0}
.ex-none{color:var(--pencil);font-size:18px;line-height:1.43}
@media (max-width:900px){
  .ex-grid{grid-template-columns:1fr}
  .ex-cats{position:static;border:0;background:none;overflow:visible}
  .ex-cats-h{display:none}
  #exNav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  #exNav::-webkit-scrollbar{display:none}
  .ex-cat{flex:none;width:auto;white-space:nowrap;border:1px solid var(--chalk);border-radius:var(--r-tag);background:#fff;padding:10px 18px}
  .ex-cat[aria-current="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
  .ex-panel{padding:24px 20px;min-height:0}
  .ex-title{font-size:24px}
}
@media (max-width:640px){.ex-list{grid-template-columns:1fr}}
/* Шапка и hero по образцу образца: сетка, размеры и шрифт те же, текст и бренд наши */
/* Логотип-картинка и начертания Montserrat как на образца */
.logo-img{display:block;width:40px;height:40px;flex:none;object-fit:contain}
.logo-lg .logo-img{width:48px;height:48px}
.rh-logo .logo-img{width:72px;height:77px}
body{font-family:Montserrat,system-ui,sans-serif;font-weight:400}
h1{font-weight:300!important}
h2{font-weight:400!important}
h3{font-weight:300!important}
h4{font-weight:400!important}
b,strong{font-weight:700}
button,.btn,.btn-sm,.rh-btn,.tag,.seg button,.ghost{font-family:Montserrat,system-ui,sans-serif;font-weight:400}
/* Видео в рамке (по мотивам slidepoint, в нашем плоском стиле) */
.vframe{position:relative;background:#fff;border:1px solid var(--chalk);border-radius:32px;padding:16px}
.vframe-inner{border:8px solid var(--blue);border-radius:22px;overflow:hidden;background:var(--mist);aspect-ratio:9/10}
.vframe video{display:block;width:100%;height:100%;object-fit:cover}
.vplay{position:absolute;top:-26px;right:-22px;width:72px;height:72px;border-radius:50%;background:var(--blue);border:6px solid #fff;display:grid;place-items:center;padding-left:4px}
.hero .wrap>div:first-child{position:relative;z-index:1}
@media (max-width:560px){.vframe{padding:10px;border-radius:24px}.vframe-inner{border-width:5px;border-radius:16px}.vplay{width:52px;height:52px;top:-18px;right:-8px;border-width:4px}}

/* Отзывы + финальный CTA */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{background:#fff;border:1px solid var(--chalk);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:12px}
.rev .stars{color:#00b67a;letter-spacing:2px}
.rev p{line-height:1.43}
.rev .who{display:flex;gap:12px;align-items:center;margin-top:auto;font-size:15px;color:var(--pencil)}
.rev .who b{color:var(--ink);font-weight:500;display:block}
.rev .av{width:40px;height:40px;border-radius:50%;background:var(--lavender);color:var(--iris);display:grid;place-items:center;font-weight:600;flex:none}
.final{background:var(--lavender);border-radius:20px;padding:56px 32px;text-align:center}
.final h2{font-size:40px;line-height:1.07;margin-bottom:16px}
.final p{color:var(--pencil);font-size:18px;line-height:1.43;margin-bottom:28px}
@media (max-width:1000px){.reviews{grid-template-columns:1fr}}
.final .eyebrow{color:var(--iris);margin-bottom:12px}
.final h2{max-width:760px;margin-left:auto;margin-right:auto}
.final p{max-width:680px;margin-left:auto;margin-right:auto}
.final-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:900px;margin:0 auto 32px;padding:0;text-align:left}
.final-steps li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--chalk);border-radius:16px;padding:18px;transition:border-color .15s,transform .15s}
.final-steps li:hover{border-color:var(--blue);transform:translateY(-2px)}
.final-steps .fs-n{flex:none;width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:600;font-size:16px}
.final-steps b{display:block;font-size:17px;font-weight:600;color:var(--carbon);margin-bottom:4px}
.final-steps li>span:last-child{font-size:15px;line-height:1.4;color:var(--pencil)}
.final .btn{transition:background .15s,transform .12s,box-shadow .15s}
.final .btn:active{transform:scale(.97)}
.final .btn-out{outline:1px solid var(--chalk)}
.final-facts{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0}
.final-facts li{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--chalk);border-radius:var(--r-tag);padding:8px 14px;font-size:14px;font-weight:500;color:var(--ink)}
.final-facts li::before{content:"";width:8px;height:8px;border-radius:50%;background:#2f8f66}
@media (max-width:860px){.final-steps{grid-template-columns:1fr;max-width:460px}}
@media (max-width:560px){.final h2{font-size:28px}.final{padding:40px 20px}.final .cta-row{flex-direction:column;align-items:stretch}.final .cta-row .btn{justify-content:center}}

/* SEO-статья на главной */
.art{max-width:none}
.art p,.art li,.art td,.faq-a p,.faq-i summary span{overflow-wrap:anywhere}
.art ul{list-style:none;padding-left:0}
.art ul>li{position:relative;padding-left:24px}
.art ul>li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.art ol{list-style:none;padding-left:0;counter-reset:st}
.art ol>li{position:relative;counter-increment:st;padding:4px 0 4px 44px;min-height:32px}
.art ol>li::before{content:counter(st);position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:50%;background:#eef6fe;border:1px solid #d6e8fa;color:var(--blue);font-weight:600;font-size:15px;display:grid;place-items:center}
/* Блок профессий внутри статьи */
.art .ex-wrap{margin:8px 0 24px}
.art .ex-list{padding-left:0;margin:0}
.art .ex-list>li{padding-left:20px;margin:0;font-size:17px;line-height:1.35}
.art .ex-list>li::before{left:0;top:.52em;width:7px;height:7px}
.art .ex-title{font-size:31px;line-height:1.14;font-weight:500;color:var(--carbon);margin:0 0 16px}
.art .ex-grp{font-size:19px;font-weight:600;color:var(--carbon);margin:28px 0 14px}
.art .ex-grp:first-child{margin-top:0}
.art .ex-desc{font-size:18px;line-height:1.43;color:var(--pencil);margin:0 0 24px}
@media (max-width:900px){.art .ex-title{font-size:24px}}

/* Иллюстрация «было / стало» */.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--mist);border:1px solid var(--ash);border-radius:20px;padding:20px}
.ba-card{background:#fff;border:1px solid var(--chalk);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px}
.ba-lbl{align-self:flex-start;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-tag)}
.ba-bad .ba-lbl{background:var(--blush);color:#b4432a}
.ba-good{border-color:#cfe8da}
.ba-good .ba-lbl{background:var(--mint);color:#1f7a4d}
.ba-head{font-size:15px;color:var(--pencil);line-height:1.4}
.ba-head b{display:block;color:var(--carbon);font-size:17px;font-weight:600}
.ba-line{height:1px;background:var(--ash)}
.ba-card p{font-size:16px;line-height:1.5;margin:0}
.ba-bad p{color:var(--pencil);font-style:italic}
.ba-card ul{margin:0;font-size:16px;line-height:1.5}
.ba-good li::before{background:#2f8f66}
.ba-ctx{grid-column:1/-1;font-size:15px;color:var(--ink);line-height:1.45}
.ba-ctx span{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--iris);margin-right:8px}
.art figure.ba-fig{display:block}
.art figure.ba-fig figcaption{margin-top:12px}
@media (max-width:700px){.ba{grid-template-columns:1fr;padding:12px}}
.art h2{font-size:34px;line-height:1.12;margin:56px 0 16px}
.art h2:first-child{margin-top:0}
.art h3{font-size:23px;line-height:1.2;font-weight:600;color:var(--ink);margin:36px 0 12px}
.art p{font-size:17px;line-height:1.6;color:var(--ink);margin:0 0 16px}
.art ul,.art ol{margin:0 0 20px;padding-left:24px;font-size:17px;line-height:1.6}
.art li{margin-bottom:8px}
.art a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.art-tbl{width:100%;overflow-x:auto;margin:8px 0 24px;border:1px solid var(--chalk);border-radius:12px}
.art table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;min-width:560px}
.art caption{caption-side:bottom;text-align:left;padding:12px 16px 14px;font-size:14px;line-height:1.45;color:var(--pencil);border-top:1px solid var(--ash);background:var(--mist)}
.art th,.art td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid var(--ash)}
.art th{background:var(--mist);font-weight:600;color:var(--carbon)}
.art tr:last-child td{border-bottom:0}
.art figure{margin:8px 0 28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.art figure.one{grid-template-columns:minmax(0,320px)}
.art figure img{display:block;width:100%;height:auto;border-radius:8px;outline:1px solid var(--ash);background:#fff}
.art figcaption{grid-column:1/-1;font-size:15px;line-height:1.45;color:var(--pencil)}
.note{background:var(--lavender);border-radius:var(--r-card);padding:20px 24px;margin:8px 0 24px}
.note-t{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--iris);margin-bottom:10px}
.note p:last-child,.note ul:last-child{margin-bottom:0}
.note.sample{background:#fff;border:1px dashed var(--haze)}
.note.sample .cvtext{font-size:16px;line-height:1.55;white-space:pre-line;margin:0}
@media (max-width:560px){.art h2{font-size:27px;margin-top:44px}.art h3{font-size:20px}.art figure{grid-template-columns:1fr 1fr;gap:10px}.note{padding:16px}}

/* Редизайн по ui-ux-pro-max: portfolio-grid, тач-цели, видимые действия */
.tag,.seg button{min-height:44px}
.tpl{display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.tpl:hover{transform:translateY(-2px)}
.tpl .thumb{cursor:zoom-in;border:0;width:100%;text-align:left;font:inherit;display:block}
.tpl .over{display:none}
.tpl .meta{padding:14px 4px 10px}
.tpl .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tpl .acts a,.tpl .acts button{min-height:44px;border-radius:var(--r-btn);font:500 15px Montserrat,sans-serif;display:grid;place-items:center;border:0}
.tpl .acts .dl{background:var(--blue);color:#fff}
.tpl .acts .dl:hover{background:var(--blue-d)}
.tpl .acts .pv{background:var(--mist);color:var(--blue);outline:1px solid var(--ash)}
.tpl .acts .pv:hover{background:var(--lavender)}
.tpl .acts .ed{background:var(--mist);color:var(--blue);outline:1px solid var(--ash)}
.tpl .acts .ed:hover{background:var(--lavender)}
.more{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:28px;flex-wrap:wrap}
.more span{color:var(--pencil);font-size:15px}
.more .btn-out{outline:1px solid var(--chalk)}
.tpl .zoom{position:absolute;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--chalk);display:grid;place-items:center;color:var(--ink);opacity:0;transition:opacity .2s}
.tpl:hover .zoom,.thumb:focus-visible .zoom{opacity:1}
.hero-visual .s3{left:30%;top:120px;transform:rotate(0);z-index:2;width:290px}
.hero-visual .s1{z-index:1}
/* крупные области нажатия на телефоне (≥44px) */
@media (max-width:1000px){.logo{min-height:44px}.hero-cats a{min-height:44px;display:inline-flex;align-items:center}.ghost{min-height:44px;display:inline-flex;align-items:center}.tcard a{min-height:44px;display:inline-flex;align-items:center}footer nav a{min-height:44px;display:inline-flex;align-items:center}.btn-sm{min-height:44px}summary{min-height:44px;align-items:center}}
@media (max-width:1120px){.menu a:nth-child(4){display:none}}
@media (max-width:1000px){
  .hero .wrap,.how{grid-template-columns:1fr}
  .hero-visual{height:380px}
  .grid,.tiles{grid-template-columns:repeat(2,1fr)}
  .formats{grid-template-columns:1fr}
  .menu{display:none}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .hero{padding:48px 0}
  .hero h1{font-size:36px}
  .sec-head h2{font-size:31px}
  .grid,.tiles{grid-template-columns:1fr 1fr;gap:12px}
  .hero-visual .sheet{width:200px}
  .nav-right .sep,.nav-right .ghost{display:none}
  .tpl .meta b{font-size:15px}
  .tpl .acts{grid-template-columns:1fr}
  .tpl .acts .pv{display:none}
  .catalog-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tags{flex-wrap:nowrap}
  .tag{white-space:nowrap}
  .hero-visual .s3{left:20%;top:90px;width:190px}
}
/* ===== UX/UI-аудит главной ===== */
/* Контраст WCAG AA: текст и кнопки в тёмном синем, как в конструкторе (#307bb9 на белом 4,97:1) */
.btn,.tag.on,.tpl .acts .dl,.final-steps .fs-n{background:var(--blue-d)}
.btn:hover,.tpl .acts .dl:hover{background:#2a6aa3}
.tag.on{border-color:var(--blue-d)}
.eyebrow,.ghost,.tcard a,.fact b,.seg button.on,.tpl .acts .pv,.tpl .acts .ed,.ex-cat[aria-current="true"],.art a,.hero-cats a:hover,.menu a:hover,.tag:hover{color:var(--blue-d)}
.tag.on,.tag.on:hover{color:#fff}
@media (max-width:900px){.ex-cat[aria-current="true"]{background:var(--blue-d);border-color:var(--blue-d);color:#fff}}
/* Области нажатия не меньше 44px */
.tcard a,.ghost{display:inline-flex;align-items:center;min-height:44px}
.hero-cats a{display:inline-flex;align-items:center;min-height:40px}
/* Якоря не прячутся под липкой шапкой */
[id]{scroll-margin-top:84px}
#catalog{scroll-margin-top:64px}
/* Телефон: блок профессий не растягивает страницу */
@media (max-width:900px){.ex-grid{grid-template-columns:minmax(0,1fr)}.ex-cats,.ex-panel{min-width:0}}
/* Телефон: переключатель DOCX/PDF в панели каталога всегда на виду */
@media (max-width:700px){.catalog-bar .cb-in{flex-direction:column;align-items:stretch;gap:10px;padding-top:10px;padding-bottom:10px;overflow:visible;min-height:0}.cb-left{overflow-x:auto;min-width:0}.cb-right{justify-content:flex-start}.seg{align-self:flex-start}}.btn.btn-out{background:#fff;color:var(--blue-d)}
.btn.btn-out:hover{background:var(--mist);box-shadow:none}
.step.on .lbl{color:var(--blue-d)}
.badge,.rev .av,.final .eyebrow{color:#4148c8}
.rev .stars{color:#0a7f55}
/* Контейнер шириной как hero (1300px) и кнопки в стиле кнопки hero */
.wrap{max-width:1348px;padding:0 24px}
@media (max-width:900px){.wrap{padding:0 20px}}
:root{--r-btn:10px;--r-tag:10px}
.btn{background:#5699d9;color:#fff;font:400 17px/1.2 Montserrat,system-ui,sans-serif;padding:13px 22px;border-radius:10px;transition:.3s}
.btn:hover,.final .btn:hover{background:#307bb9}
.btn-sm{padding:11px 18px;font-size:15px}
.dl-row .btn{border-radius:10px;transition:.3s}
.btn.btn-out,.final .btn-out,.more .btn-out{background:#f9fcfc;color:#307bb9;outline:0;border:1px solid #cbe1ef;box-shadow:0 0 21px rgba(200,222,231,.43)}
.btn.btn-out:hover{background:#5699d9;color:#fff;border-color:#5699d9;box-shadow:none}
.tpl .acts a,.tpl .acts button{border-radius:10px;font:400 15px Montserrat,system-ui,sans-serif;transition:.3s}
.tpl .acts .dl{background:#5699d9;color:#fff}
.tpl .acts .dl:hover{background:#307bb9}
.tpl .acts .ed{background:#f4f9fa;color:#307bb9;outline:0;border:1px solid #cbe1ef}
.tpl .acts .ed:hover{background:#fff;border-color:#9ec1da}
.tag{border:1px solid #cbe1ef;background:#f4f9fa;border-radius:10px;font:400 15px Montserrat,system-ui,sans-serif;color:#0c1019;transition:.3s}
.tag:hover{border-color:#9ec1da;background:#fff;color:#0c1019}
.tag.on,.tag.on:hover{background:#5699d9;border-color:#5699d9;color:#fff}
.seg{border-radius:10px;background:#f4f9fa;border-color:#cbe1ef}
.seg button{border-radius:8px;font-weight:400;transition:.3s}
.seg button.on{background:#5699d9;color:#fff;outline:0}
.ex-search input{border-radius:10px}
.dl-f{border-radius:10px;transition:.3s}
.final-facts li{border-radius:10px}

.tcard .ico{width:64px;height:64px;border-radius:10px;background:#f9fcfc;border:1px solid #cbe1ef;box-shadow:0 0 21px rgba(200,222,231,.43)}
.tcard{border-radius:10px;transition:.3s}
.tcard:hover{border-color:#9ec1da;background:#f4f9fa}
.tcard a{color:#307bb9}

/* ===== Адаптивный аудит 07.11.2026 (layout-audit.mjs): ничего не вылезает за экран 320–1920 ===== */
/* колонки сетки сжимаются (1fr = minmax(auto,1fr) раздвигал страницу длинными словами в плитках) */
.grid,.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile,.tpl{min-width:0}
.tpl .meta{gap:2px 8px;align-items:flex-start;flex-wrap:wrap}
.tpl .meta b{min-width:0;line-height:1.25}
.tpl .meta span{flex:none;padding-top:2px}
@media (max-width:1000px){.grid,.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .grid,.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{padding:18px 16px}
  .tile h3,.tile h4{font-size:16px;line-height:1.3;hyphens:auto}
  .tile p{font-size:14px}
  /* заголовок группы каталога на всю ширину, плашка формата под ним */
  .group-head{flex-direction:column;align-items:flex-start;gap:10px}
  .group-head h3{font-size:24px}
}
@media (max-width:420px){.tiles{grid-template-columns:minmax(0,1fr)}}
/* факты под финальным CTA: на телефоне одинаковые плашки в колонку */
@media (max-width:560px){.final-facts{flex-direction:column;align-items:stretch}.final-facts li{justify-content:center;text-align:center}}
/* таблицы статьи на телефоне: без горизонтальной прокрутки, третья колонка под второй, подпись видна целиком */
@media (max-width:560px){
  .art-tbl{overflow:visible}
  .art table{min-width:0;display:flex;flex-direction:column;font-size:15px}
  .art caption{order:2;display:block}
  .art thead,.art tbody{display:block}
  .art tr:has(> :nth-child(3):last-child){display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);border-bottom:1px solid var(--ash)}
  .art tbody tr:last-child{border-bottom:0}
  .art tr:has(> :nth-child(3):last-child) > *{display:block;padding:10px 12px;border-bottom:0;overflow-wrap:break-word;hyphens:auto}
  .art tr:has(> :nth-child(3):last-child) > :first-child{grid-row:span 2}
  .art tr:has(> :nth-child(3):last-child) > :nth-child(3){padding-top:0}
  .art tbody tr:has(> :nth-child(3):last-child) > :nth-child(3){color:var(--pencil);font-size:14px}
  .art thead tr:has(> :nth-child(3):last-child) > :nth-child(3){font-weight:400;color:var(--pencil);font-size:14px}
}
/* текст #307bb9 на светлых подложках: темнее на тон, контраст ≥4,5:1 (кнопки #5699d9 не меняются) */
.tcard a,.tpl .acts .ed,.more .btn-out,.btn.btn-out,.final .btn-out,.eyebrow{color:#26679d}
@media (min-width:901px){.ex-cat[aria-current="true"]{color:#26679d}}
.btn.btn-out:hover{color:#fff}
.ba-ctx span{color:#26679d}
/* окно быстрой регистрации (.screen .modal из quickreg.css) не должно наследовать .modal{display:none} окна каталога: иначе на главной видна только затемнённая подложка */
.screen .modal{display:block;inset:auto;z-index:auto}