@font-face{font-family:Manrope;src:url('assets/manrope-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-extrabold.ttf') format('truetype');font-weight:800;font-display:swap}

/* Тёплая бумага, чёрный текст и красный как единственный акцент. Знак-мишень из логотипа отмечает текущий раздел. */
:root{--ink:#1b1917;--soft:#57524c;--muted:#8d877f;--line:#e4dfd7;--red:#e0261b;--red-deep:#c21d13;--paper:#faf7f2;--side:250px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;color:var(--ink);font-family:Manrope,Arial,sans-serif;font-synthesis:none;font-size:17px;line-height:1.7}
h1,h2,h3,h4,p,ul,ol{margin:0}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red-deep)}
a:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:2px}
::selection{background:var(--red);color:#fff}
.skip{position:absolute;top:-100px;left:16px;padding:12px;background:var(--paper);z-index:5}
.skip:focus{top:12px}

/* Колонка слева закреплена, справа листается содержимое */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);max-width:1240px;margin:0 auto;padding:0 32px}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:44px 28px 36px 0;border-right:1px solid var(--line)}
.who{display:flex;flex-direction:column;gap:16px}
.who img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.who strong{font-size:22px;font-weight:800;letter-spacing:-.04em;line-height:1.15}
.who:hover{color:inherit}
.handle{margin-top:6px;font-size:15px;font-weight:600;color:var(--red-deep)}
.side nav{display:flex;flex-direction:column;gap:4px;margin-top:34px}
.side nav a{position:relative;padding:5px 0 5px 30px;font-size:17px;font-weight:600;color:var(--muted)}
.side nav a::before{content:"";position:absolute;left:6px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--line)}
.side nav a:hover{color:var(--ink)}
.side nav a:hover::before{background:var(--red)}
.side nav a[aria-current]{color:var(--ink)}
.side nav a[aria-current]::before{left:0;width:18px;height:18px;margin-top:-9px;border-radius:0;background:url('assets/mark.svg') center/contain no-repeat}
.side-foot{margin-top:auto}
.cta{display:inline-block;padding:11px 20px;border-radius:10px;background:var(--red);color:#fff;font-size:15px;font-weight:600}
.cta:hover{background:var(--ink);color:#fff}

.panel{min-height:100vh;display:flex;flex-direction:column;padding-left:clamp(28px,6vw,84px)}
main{flex:1;width:100%;max-width:740px}

.intro{padding:72px 0 60px}
h1{font-size:clamp(34px,4.8vw,56px);line-height:1.08;font-weight:800;letter-spacing:-.045em}
.dot{color:var(--red)}
.intro p{margin-top:26px;color:var(--soft);max-width:620px}

section{padding-bottom:56px}
h2{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:14px;border-bottom:2px solid var(--ink)}
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.row>div{flex:1;min-width:0}
.num{flex:none;width:26px;font-size:13px;font-weight:600;color:var(--red);font-variant-numeric:tabular-nums}
.row h3{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.35}
.row p{font-size:15px;line-height:1.6;color:var(--soft);margin-top:4px}
a.row{transition:padding .2s}
a.row:hover{color:inherit;padding-left:8px}
a.row:hover h3{color:var(--red-deep)}
.row-plain h3{color:var(--soft)}
.row-plain .num{color:var(--muted)}
.tag{flex:none;font-size:12px;color:var(--muted);white-space:nowrap}
.tag.links{display:flex;gap:16px;font-size:14px;color:var(--red-deep)}

.reading{padding:60px 0 64px}
.kicker{font-size:13px;font-weight:600;color:var(--red-deep);margin-bottom:14px}
.standfirst{font-size:20px;line-height:1.55;color:var(--soft);margin-top:18px}
.buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.button{font-size:14px;font-weight:600;padding:10px 16px;border:1px solid var(--ink);border-radius:10px}
.button:first-child{background:var(--ink);color:#fff}
.button:hover,.button:first-child:hover{background:var(--red);border-color:var(--red);color:#fff}
.cover{display:block;width:100%;height:auto;margin-top:36px;border-radius:10px;background:#f0ece5}
.prose{margin-top:36px}
.prose p,.prose ul,.prose blockquote{margin:20px 0}
.prose h2{font-size:25px;font-weight:800;letter-spacing:-.03em;text-transform:none;color:var(--ink);border:0;padding:0;margin:44px 0 0;line-height:1.3}
.prose h3{font-size:19px;margin:32px 0 0}
.prose ul{padding-left:22px}
.prose li{margin:8px 0}
.prose li::marker{color:var(--red)}
.prose a,.roadmap p a{color:var(--red-deep);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{margin-left:0;padding-left:20px;border-left:2px solid var(--red);color:var(--soft)}
.reading>h2{margin-top:48px}
.end{margin-top:44px;font-size:14px;color:var(--muted)}

/* Крупные карточки проектов на главной */
.cards{display:flex;flex-direction:column;gap:14px;padding-top:22px}
.card{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:330px;padding:28px 30px 30px;border-radius:22px;transition:transform .25s}
.card:hover{transform:translateY(-3px)}
.card-top{position:relative;display:flex;gap:14px;font-size:13px;font-weight:600}
.card-text{position:relative;display:block;max-width:520px;padding-right:56px}
.card h3{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1.08}
.card p{margin-top:12px;font-size:16px;line-height:1.5}
.card-go{position:absolute;right:26px;bottom:26px;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:20px;transition:transform .25s}
.card:hover .card-go{transform:rotate(45deg)}
.tone-ink{background:var(--ink);color:#fff}
.tone-ink:hover{color:#fff}
.tone-ink p,.tone-ink .card-top{color:#b9b3aa}
.tone-ink .card-go{background:var(--red);color:#fff}
.tone-red{background:var(--red);color:#fff}
.tone-red:hover{color:#fff}
.tone-red p,.tone-red .card-top,.tone-red .num{color:#ffd9d5}
.tone-red .card-go{background:#fff;color:var(--red)}
.tone-sand{background:#efe9df;color:var(--ink)}
.tone-sand:hover,.tone-line:hover{color:var(--ink)}
.tone-sand p,.tone-line p,.tone-sand .card-top,.tone-line .card-top{color:var(--soft)}
.tone-sand .card-go,.tone-line .card-go{background:var(--ink);color:#fff}
.tone-line{border:2px solid var(--ink);min-height:240px}
.tone-lime{background:#c8f06a;color:var(--ink)}
.tone-lime:hover{color:var(--ink)}
.tone-lime p,.tone-lime .card-top{color:#3d4a1c}
.tone-lime .num{color:var(--ink)}
.tone-lime .card-go{background:var(--ink);color:#fff}
.tone-lilac{background:#beacd4;color:var(--ink)}
.tone-lilac:hover{color:var(--ink)}
.tone-lilac p,.tone-lilac .card-top{color:#3c3160}
.tone-lilac .num{color:var(--ink)}
.tone-lilac .card-go{background:var(--ink);color:#fff}
.card-art-kurs-saity-s-neirosetyami{right:60px;top:0;height:118%;width:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.card:has(.card-art-kurs-saity-s-neirosetyami) .card-text{max-width:56%}
.card-glyph{position:absolute;right:34px;top:6px;font-size:150px;line-height:1;color:#c8f06a}
.card-art-inova-media{right:30px;top:26px;width:min(30%,190px)}
.card-art-vey{right:28px;top:24px;width:min(38%,250px);border-radius:50%}
.card-art{position:absolute;pointer-events:none}
.card:has(.card-art-shkola-targeta) .card-text{max-width:50%}
.card-art-one-way-site{right:-30px;top:8px;width:min(62%,460px)}
.card-art-shkola-targeta{right:28px;top:28px;width:min(44%,300px);border-radius:12px;box-shadow:0 18px 40px rgba(27,25,23,.18);transform:rotate(3deg)}
.card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card:has(.card-bg)::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,25,23,.82) 0%,rgba(27,25,23,.35) 40%,rgba(27,25,23,.92) 100%)}
.card:has(.card-bg) .card-top,.card:has(.card-bg) .card-text,.card:has(.card-bg) .card-go{z-index:1}
.card:has(.card-bg) p,.card:has(.card-bg) .card-top{color:#e9e4dc}
.card-avatars{position:absolute;right:28px;top:26px;display:flex}
.card-avatars img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid currentColor;margin-left:-22px}
.tone-red .card-avatars img{border-color:var(--red)}
.tone-line .card-avatars img{border-color:var(--paper)}
.card-flow{position:absolute;right:30px;top:30px;display:flex;align-items:center;gap:18px}
.card-flow img{width:96px;height:96px;border-radius:50%}
.card-flow i{font-style:normal;font-size:34px;color:var(--red)}
.cards .row{padding:22px 6px 4px;border:0}
.materials{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:22px}
.material{display:flex;gap:18px;padding:18px;border-radius:18px;background:#efe9df}
.material:hover{color:inherit}
.material img{flex:none;width:92px;height:130px;object-fit:cover;object-position:top;border-radius:8px}
.material h3{font-size:16px;font-weight:600;line-height:1.35}
.material p{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--soft)}
.material em{display:block;margin-top:8px;font-style:normal;font-size:13px;font-weight:600;color:var(--red-deep)}
.gallery{columns:2;column-gap:14px;padding-top:22px}
.gallery img{display:block;width:100%;margin-bottom:14px;border-radius:12px;border:1px solid var(--line)}
.roadmap.cases{margin-top:0;border-top:0}
.cases h3 b{color:var(--red-deep);font-weight:800}
.reading>h2+.cases{margin-bottom:8px}
.more{margin-top:4px}
.more summary{display:inline-block;cursor:pointer;list-style:none;padding:11px 20px;border:1px solid var(--ink);border-radius:10px;font-size:15px;font-weight:600}
.more summary::-webkit-details-marker{display:none}
.more summary:hover{background:var(--red);border-color:var(--red);color:#fff}
.more[open] summary{display:none}
.prose figure{margin:28px 0}
.prose figure img{display:block;width:100%;height:auto;border-radius:14px;background:#f0ece5}
.meta-note{flex-basis:100%;font-size:11.5px;line-height:1.5}
.row-channel{align-items:center}
.row-channel img{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover}

/* Путь: слева дата, справа событие */
.roadmap{list-style:none;padding:0;margin-top:40px;border-top:2px solid var(--ink)}
.roadmap>li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
.when{font-size:13px;line-height:1.5;color:var(--muted);padding-top:5px}
.roadmap h3{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.3;margin-bottom:8px}
.role{font-size:14px;color:var(--red-deep);margin:-6px 0 10px}
.roadmap p{font-size:15.5px;line-height:1.65;color:var(--soft)}
.roadmap .life p{color:var(--ink)}
.stats{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px}
.stats strong{color:var(--ink);font-weight:800}
.roadmap details{margin-top:12px;font-size:15px}
.roadmap summary{cursor:pointer;color:var(--red-deep);font-size:14px;font-weight:600}
.roadmap h4{font-size:14px;font-weight:600;margin-top:16px}
.roadmap details ul{padding-left:20px;margin-top:8px;color:var(--soft);line-height:1.6}
.roadmap details li{margin:6px 0}
.roadmap img{display:block;max-width:100%;max-height:340px;margin-top:16px;border-radius:10px}

.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;max-width:740px;padding:22px 0 30px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.footer div{display:flex;gap:22px}

@media(max-width:860px){
  body{font-size:16px}
  .shell{grid-template-columns:1fr;padding:0 20px}
  .side{position:static;height:auto;padding:22px 0 18px;border-right:0;border-bottom:1px solid var(--line)}
  .who{flex-direction:row;align-items:center;gap:14px}
  .who img{width:48px;height:48px}
  .who strong{font-size:19px}
  .side nav{flex-direction:row;flex-wrap:wrap;gap:4px 20px;margin-top:16px}
  .side nav a{font-size:15px;padding-left:0}
  .side nav a::before{display:none}
  .side nav a[aria-current]{color:var(--red-deep)}
  .side-foot{margin-top:14px}
  .cta{padding:8px 14px;font-size:14px}
  .panel{min-height:0;padding-left:0}
  .intro{padding:36px 0 40px}
  .reading{padding:36px 0 48px}
  .card{min-height:300px;padding:22px}
  .card-go{right:20px;bottom:20px;width:44px;height:44px}
  .card-art-one-way-site{width:78%;right:-40px;top:30px;opacity:.9}
  .card-art-shkola-targeta{width:46%;right:16px;top:50px}
  .card:has(.card-art-shkola-targeta) .card-text{max-width:none}
  .card-art-shkola-targeta{opacity:.35}
  .card-art-inova-media{right:30px;top:26px;width:min(30%,190px)}
.card-art-vey{width:40%;right:16px;top:52px}
  .card-flow{right:20px;top:54px;gap:10px}
  .card-flow img{width:60px;height:60px}
  .materials{grid-template-columns:1fr}
  .handle{position:absolute;top:50px;left:82px;margin:0;font-size:13px}
  .side{position:relative}
  .who strong{margin-top:-14px}
  .card-avatars{right:18px;top:54px}
  .card-avatars img{width:58px;height:58px;margin-left:-16px}
  .row-channel{flex-wrap:nowrap}
  .row{flex-wrap:wrap;gap:4px 14px}
  .row>div{flex-basis:calc(100% - 40px)}
  .tag{margin-left:40px}
  .roadmap>li{grid-template-columns:1fr;gap:6px}
  .standfirst{font-size:18px}
}

/* Страница заказа */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.offer>div{padding:26px 26px 24px;border-radius:18px;background:#efe9df}
.offer>div:first-child{background:var(--ink);color:#fff}
.offer>div:first-child p{color:#d9d3ca}
.offer h3{font-size:22px;font-weight:800;letter-spacing:-.02em}
.offer sup,.note sup{color:var(--red);font-weight:800}
.offer p{font-size:15px;line-height:1.6;color:var(--soft);margin-top:10px}
.offer .when-big{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-top:4px;color:var(--red)}
.offer>div:first-child .when-big{color:var(--red)}
.note{font-size:14px;line-height:1.6;color:var(--muted);margin-top:16px;max-width:640px}
.lead-in{color:var(--soft);margin-top:18px;max-width:660px}
.lead-in a{color:var(--red-deep);text-decoration:underline;text-underline-offset:3px}
.demos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:26px}
.demo{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff}
.demo img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .3s}
.demo:hover img{transform:scale(1.02)}
.demo span{display:block;padding:14px 18px 16px}
.demo h3{font-size:17px;font-weight:700}
.demo p{font-size:14px;color:var(--muted);margin-top:2px}
.demo:hover h3{color:var(--red-deep)}
.steps{counter-reset:s;list-style:none;padding:0;margin:22px 0 0;max-width:660px}
.steps li{counter-increment:s;position:relative;padding:14px 0 14px 46px;border-bottom:1px solid var(--line);color:var(--soft)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:15px;font-size:13px;font-weight:600;color:var(--red)}
@media (max-width:700px){.offer,.demos{grid-template-columns:1fr}}
.checks{list-style:none;padding:0;margin:20px 0 0;max-width:660px}
.checks li{position:relative;padding:10px 0 10px 34px;color:var(--soft)}
.checks li::before{content:"";position:absolute;left:4px;top:19px;width:14px;height:8px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.note a{color:var(--red-deep);text-decoration:underline;text-underline-offset:3px}

/* Проверка готовности к рекламе */
.checklist .prose>p.note{font-size:15px}
.chk-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:16px;margin-top:40px;padding:12px 0;background:var(--paper);border-bottom:1px solid var(--line);font-size:14px;color:var(--soft)}
.chk-bar i{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.chk-bar s{display:block;height:100%;width:0;background:var(--red);transition:width .25s}
.chks{margin-top:8px}
.chk{border:0;border-bottom:1px solid var(--line);margin:0;padding:26px 0 18px}
.chk legend{display:flex;align-items:baseline;gap:12px;width:100%;padding:0;font-size:21px;font-weight:800;letter-spacing:-.02em}
.chk legend .num{width:auto}
.chk-count{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0}
.chk.full .chk-count{color:var(--red-deep)}
.chk label{display:flex;gap:12px;align-items:flex-start;padding:7px 0;cursor:pointer;color:var(--soft);line-height:1.55}
.chk label:hover{color:var(--ink)}
.chk input{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:var(--red);cursor:pointer}
.chk input:checked+span{color:var(--ink)}
.chk details,.niche{margin-top:8px}
.chk summary,.niche summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--red-deep)}
.chk details ul{margin:10px 0 0;padding-left:20px;font-size:15px;color:var(--soft)}
.chk details p{margin-top:10px;font-size:15px;color:var(--soft)}
.chk-result{margin-top:44px;padding:26px;border-radius:18px;background:#efe9df}
.chk-result h2{border:0;padding:0}
.chk-result p{margin-top:12px;color:var(--soft)}
.chk-result a{color:var(--red-deep);text-decoration:underline;text-underline-offset:3px}
.chk-result .button{text-decoration:none;font-family:inherit;cursor:pointer;background:transparent}
.chk-result .button:first-child{background:var(--ink);color:#fff}
.niches{margin-top:14px}
.niche{border-bottom:1px solid var(--line);padding:14px 0;margin:0}
.niche summary{font-size:17px;color:var(--ink)}
.niche dl{display:grid;grid-template-columns:110px 1fr;gap:6px 16px;margin:14px 0 0;font-size:15px}
.niche dt{color:var(--muted)}
.niche dd{margin:0;color:var(--soft)}
.niche p{margin-top:12px;font-size:15px;color:var(--soft)}
@media (max-width:700px){.niche dl{grid-template-columns:1fr}.niche dt{margin-top:6px}}