:root{
  --ink:#0b0b0f;--paper:#fff;--soft:#efeff3;--acc:#5b3df5;--acc-hover:#4a2be8;--coral:#ff4f73;
  --muted:#62626f;--muted-dark:#9d9dab;--line:rgba(11,11,15,.12);--line-dark:rgba(255,255,255,.16);--max:1320px;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
h1,h2,h3{font-family:Onest,sans-serif;margin:0}
h1{font-size:clamp(40px,5.6vw,84px);line-height:1;font-weight:700;text-transform:uppercase;letter-spacing:-.015em}
h2{font-size:clamp(34px,4.4vw,60px);line-height:1.02;font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
.section{position:relative;padding:clamp(72px,9vw,124px) 0;scroll-margin-top:72px}
.section-tight{padding-top:0}
.section-soft{background:var(--soft)}
.dark{background:var(--ink);color:#fff}
.label{margin:72px 0 26px;color:var(--muted-dark);font:600 13px Onest;letter-spacing:.14em;text-transform:uppercase}
.center{display:flex;justify-content:center;margin-top:56px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Кнопки-пилюли со стрелкой ↗ */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px;border:1px solid transparent;border-radius:999px;background:var(--acc);color:#fff;font:600 14px Onest;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.button:hover{background:var(--acc-hover)}
.button-small{min-height:44px;padding:0 22px;font-size:13px}
.button-ghost{background:transparent;color:inherit;border-color:currentColor}
.button-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.dark .button-ghost:hover,.hero .button-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.button-light{background:#fff;color:var(--ink)}
.button-light:hover{background:var(--soft)}
.button-wide{display:flex;width:100%;margin-top:28px}
.arrow:after{content:'';width:18px;height:18px;flex:0 0 18px;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span,.pill,.tags span{display:inline-flex;align-items:center;padding:6px 14px;border:1px solid currentColor;border-radius:999px;font-size:13px;line-height:1.2;opacity:.85}

/* Шапка */
.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-wrap{min-height:72px;display:flex;align-items:center;gap:32px}
.logo{display:flex;align-items:center;font:600 19px Onest;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.logo img{width:34px;height:34px;margin-right:12px;border-radius:10px}
.logo em{font-style:normal}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto;font-size:15px;font-weight:500}
.nav>a:not(.button):hover,.nav .active{color:var(--acc)}
.nav .button{margin-left:10px}
.menu-btn{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.menu-btn>span:not(.sr-only){display:block;width:24px;height:2px;margin:5px 0;background:var(--ink)}

/* 3D-осьминог: холст поверх контента, но под шапкой; клики проходят насквозь */
.octo-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:15;pointer-events:none}

/* Hero */
.hero{position:relative;display:flex;align-items:flex-end;min-height:calc(100svh - 72px);padding:48px 0 64px;overflow:hidden;color:#fff;background:radial-gradient(55% 65% at 74% 42%,rgba(91,61,245,.42),transparent 70%),radial-gradient(35% 45% at 88% 80%,rgba(255,79,115,.2),transparent 70%),var(--ink)}
.hero:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(70% 80% at 70% 40%,#000,transparent 80%)}
.hero-stage{position:absolute;right:4%;top:5%;width:min(44vw,640px);height:76%;background:url(/favicon.svg) center/min(60%,300px) no-repeat}
.octo-ready .hero-stage{background:none}
.hero-inner{position:relative}
.hero-kicker{margin:0 0 22px;color:var(--muted-dark);font:500 15px Onest;letter-spacing:.08em;text-transform:uppercase}
.hero h1{max-width:min(860px,60%)}
.hero-line{display:block}
.typed{display:inline-block;min-height:1.2em;font:400 .34em/1.2 Manrope,sans-serif;letter-spacing:0;text-transform:none;vertical-align:.25em;color:#d9d6ff}
.typed:after{content:'';display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-.15em;background:currentColor;animation:caret .9s step-end infinite}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.scroll-down{position:absolute;right:max(24px,calc((100% - var(--max))/2));bottom:64px;width:56px;height:56px;border:1px solid var(--line-dark);border-radius:50%}
.scroll-down:after{content:'';position:absolute;inset:16px;background:#fff;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;rotate:135deg}

/* Кто мы */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.split-text p{margin:0 0 18px;color:#d6d6de;font-size:18px;line-height:1.65}
.facts,.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:0;padding:0;list-style:none}
.fact{padding-top:22px;border-top:1px solid var(--line-dark)}
.fact strong{display:block;font:700 64px/1 Onest;background:linear-gradient(120deg,#8f7bff,var(--coral));background-clip:text;color:transparent}
.fact b{display:block;margin:10px 0 8px;font:600 19px Onest}
.fact p,.steps p{margin:0;color:var(--muted-dark);font-size:14px;line-height:1.6}
.steps{border-top:1px solid var(--line-dark)}
.steps li{position:relative;padding-top:30px}
.steps li:before{content:'';position:absolute;top:-6px;left:0;width:11px;height:11px;background:var(--acc);rotate:45deg}
.steps span{color:var(--muted-dark);font:500 13px Onest}
.steps h3{margin:12px 0 10px;font-size:20px}

/* Примеры решений */
.head-row{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:44px}
.head-row p{max-width:360px;margin:0;color:var(--muted);text-align:right}
.works{display:grid;grid-template-columns:1fr 1fr;gap:48px 24px}
.work h3{margin:20px 0 6px;font-size:clamp(22px,2.2vw,28px)}
.work>p{margin:0 0 16px;color:var(--muted)}
.work-visual{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden}
.wv-booking{background:linear-gradient(135deg,#5b3df5,#ff4f73)}
.wv-ai{background:radial-gradient(60% 70% at 30% 20%,rgba(91,61,245,.55),transparent 70%),#121219}
.wv-saas{background:#e4e1ff}
.wv-site{background:linear-gradient(160deg,#ffd9cf,#ff9a8a)}
.mock-phone{display:flex;flex-direction:column;gap:12px;width:min(48%,240px);height:86%;padding:18px 14px;border-radius:28px;background:#fff;color:var(--ink);font-size:12px;box-shadow:0 30px 60px rgba(0,0,0,.25);rotate:-4deg}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.slots span,.opts span{padding:7px 0;border:1px solid var(--line);border-radius:10px;text-align:center}
.slots .on,.opts .on{background:var(--acc);border-color:var(--acc);color:#fff}
.mock-card{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:12px;background:var(--soft);font-weight:700}
.mock-card small{color:#1a9a55;font-weight:500}
.mock-btn{margin-top:auto;padding:10px;border-radius:12px;background:var(--ink);color:#fff;font-style:normal;text-align:center;font-weight:700}
.mock-chat{display:flex;flex-direction:column;gap:12px;width:min(78%,440px);font-size:14px;line-height:1.5}
.mock-chat p{max-width:80%;margin:0;padding:11px 15px;border-radius:16px}
.mock-chat .u{align-self:flex-end;background:var(--acc);color:#fff}
.mock-chat .b{background:#24242e;color:#e8e8f0}
.mock-chip{align-self:flex-start;padding:6px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#b9b2ff;font-size:12px}
.mock-dash{display:grid;grid-template-columns:44px minmax(0,1fr);width:82%;height:76%;border-radius:14px;background:#fff;box-shadow:0 30px 60px rgba(40,20,120,.18);overflow:hidden}
.mock-dash aside{display:flex;flex-direction:column;gap:12px;padding:14px 12px;background:var(--ink)}
.mock-dash aside i{height:20px;border-radius:6px;background:rgba(255,255,255,.18)}
.mock-dash aside i:first-child{background:var(--acc)}
.mock-dash>div{display:flex;flex-direction:column;gap:14px;padding:16px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpis span{display:flex;flex-direction:column;min-width:0;padding:8px 10px;border-radius:10px;background:var(--soft);font:700 16px Onest}
.kpis small{color:var(--muted);font:500 10px Manrope}
.bars{flex:1;display:flex;align-items:flex-end;gap:8px}
.bars i{flex:1;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(180deg,#8f7bff,var(--acc))}
.mock-browser{width:80%;border-radius:12px;background:#fff;box-shadow:0 30px 60px rgba(120,30,20,.2);overflow:hidden}
.mock-bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:#ddd}
.mock-page{display:flex;flex-direction:column;gap:10px;padding:20px 22px 24px;font-size:13px}
.mock-page b{font:700 22px Onest;text-transform:uppercase}
.mock-page p{margin:0;color:var(--muted)}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mock-page strong{font:700 18px Onest;color:var(--acc)}

/* Услуги: осьминог переплывает в .service-art ближайшей карточки */
.services{display:grid;gap:14px;margin-top:40px}
.service{display:grid;grid-template-columns:1fr minmax(220px,340px);gap:24px;padding:clamp(24px,3vw,40px);background:var(--soft)}
.service-accent{background:var(--acc);color:#fff}
.service h3{font-size:clamp(30px,3.6vw,48px);font-weight:500;line-height:1.05}
.service-body{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.service-body p{max-width:440px;margin:0;font-size:16px}
.service-body strong{font:700 18px Onest}
.service-art{position:relative;display:grid;place-items:center;min-height:240px}
.service-art svg{width:42%;max-width:130px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:.3;transition:opacity .5s,scale .5s}
.service-art.octo-here svg{opacity:.06;scale:.8}
.service-art:after,.contact-art:after{content:'';position:absolute;left:50%;bottom:4%;width:50%;height:18px;translate:-50% 0;border-radius:50%;background:radial-gradient(rgba(0,0,0,.3),transparent 70%);opacity:0;transition:opacity .5s}
.octo-here:after{opacity:1}

/* Статьи */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px;background:#fff;transition:translate .25s}
.post:hover{translate:0 -4px}
.post .pill{color:var(--acc)}
.post h3{font-size:21px;line-height:1.25}
.post p{flex:1;margin:0;color:var(--muted);font-size:15px}
.post small{color:var(--muted)}

/* Заявка */
.contact-head{display:grid;grid-template-columns:1fr 280px;align-items:center;gap:32px;margin-bottom:48px}
.contact-head p{margin:16px 0 0;color:var(--muted-dark);font-size:17px}
.contact-art{position:relative;height:220px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,6vw,96px)}
.contact-side{padding-left:clamp(24px,4vw,56px);border-left:1px solid var(--line-dark)}
.contact-side nav{display:grid;gap:12px;font:500 20px Onest}
.contact-side nav a:hover,.contact-link:hover{color:#b9b2ff}
.contact-side .label{margin:40px 0 12px;color:#9f8fff}
.contact-link{font:500 18px Onest}
.madlib{position:relative;font:500 clamp(20px,2.4vw,34px)/1.7 Onest;letter-spacing:-.01em}
.madlib p{margin:0 0 6px}
.madlib input,.madlib select{max-width:100%;margin:0 2px;padding:0 4px;border:0;border-bottom:2px dashed rgba(255,255,255,.35);border-radius:0;background:transparent;color:#c4bbff;font:inherit;letter-spacing:inherit;outline:none;vertical-align:baseline;transition:border-color .2s,color .2s}
.madlib input::placeholder{color:rgba(255,255,255,.3)}
.madlib input:focus,.madlib select:focus{border-bottom-style:solid;border-color:#9f8fff;color:#fff}
.madlib select{appearance:none;padding-right:26px;cursor:pointer;color-scheme:dark;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239f8fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 2px center/18px no-repeat}
.madlib select option{background:var(--ink);color:#fff;font:500 16px Manrope,sans-serif}
.madlib-measure{position:absolute;visibility:hidden;white-space:pre;pointer-events:none}
.madlib-done{display:none}
.contact-form.is-sent>:not(.madlib-done){display:none}
.contact-form.is-sent .madlib-done{display:block;animation:madlib-in .6s cubic-bezier(.16,.84,.3,1)}
.madlib-done strong{display:block;font:700 clamp(32px,4vw,56px)/1.05 Onest;text-transform:uppercase;background:linear-gradient(120deg,#c4bbff,var(--coral));background-clip:text;color:transparent}
.madlib-done p{max-width:560px;margin:18px 0 30px;color:#d6d6de;font-size:18px}
@keyframes madlib-in{from{opacity:0;translate:0 20px}}
.form-actions,.lead-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.lead-note{margin:18px 0 0;color:var(--muted-dark);font-size:14px}
.lead-note:empty{display:none}
.lead-note[data-state="success"]{color:#5fd68e}
.lead-note[data-state="error"]{color:#ff8e80}
[data-lead-form] button:disabled{opacity:.6;cursor:wait}

/* Подвал */
footer{background:var(--ink);color:var(--muted-dark);border-top:1px solid var(--line-dark)}
.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:110px;font-size:13px}
.footer .logo{color:#fff;opacity:.5}
.footer>div{display:flex;align-items:center;gap:22px}
.footer>div a:hover{color:#fff}
.webmaster-badge{display:inline-flex;line-height:0}

/* FAQ и статьи */
.eyebrow{margin:0 0 20px;color:var(--acc);font:600 13px Onest;letter-spacing:.14em;text-transform:uppercase}
.gradient{color:var(--acc)}
.hero-copy{max-width:680px;margin:22px 0 0;color:var(--muted);font-size:clamp(16px,1.5vw,19px);line-height:1.7}
.num{color:var(--acc);font:600 12px Onest;letter-spacing:.08em;text-transform:uppercase}
.faq-hero{padding-bottom:56px}
.faq-section{padding:0 0 110px}
.faq-layout{display:grid;grid-template-columns:320px 1fr;gap:64px;align-items:start}
.faq-layout aside{position:sticky;top:104px;padding:28px;background:var(--ink);color:#fff}
.faq-layout aside p{margin:0;color:#9f8fff;font:600 12px Onest;letter-spacing:.12em;text-transform:uppercase}
.faq-layout aside h2{margin:14px 0 24px;font-size:26px}
.faq-content{display:grid;gap:56px;min-width:0}
.faq-group h2{margin:0 0 20px;font-size:clamp(24px,2.6vw,32px)}
.accordion{display:grid;gap:10px}
.accordion details{background:var(--soft);transition:background-color .25s}
.accordion details[open]{background:#e6e3ff}
.accordion summary{position:relative;padding:22px 60px 22px 24px;font:600 17px Onest;list-style:none;cursor:pointer}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary:after{content:'+';position:absolute;right:24px;top:15px;color:var(--acc);font-size:28px;font-weight:400;transition:rotate .3s}
.accordion details[open] summary:after{rotate:45deg}
.accordion details p{margin:0;padding:0 60px 24px 24px;color:#33333d;font-size:15px;line-height:1.75}
.article-hero{padding-bottom:clamp(40px,6vw,72px)}
.article-list-section,.article-content-section{padding:0 0 clamp(80px,9vw,124px)}
.article-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.article-grid-3{grid-template-columns:repeat(3,1fr)}
.article-card{display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--soft);transition:translate .25s}
.related-posts .article-card{background:#fff}
.article-card h3{font-size:clamp(20px,2vw,24px);line-height:1.22}
.article-card small{margin-top:auto;color:var(--muted)}
.article-card:hover{translate:0 -4px}
.article-card p{margin:0;color:var(--muted);line-height:1.65}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.article-more{display:inline-block;margin-top:20px;color:var(--acc);font-weight:700}
.article-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,6vw,76px);align-items:start}
.article-toc{position:sticky;top:96px;display:grid;gap:10px;padding:24px;background:var(--soft)}
.article-toc p{margin:0 0 6px;color:var(--acc);font:600 12px Onest;letter-spacing:.12em;text-transform:uppercase}
.article-toc a{color:var(--muted);font-size:14px}
.article-toc a:hover{color:var(--ink)}
.article-hero h1{max-width:1000px;font-size:clamp(32px,4.2vw,56px);text-transform:none;letter-spacing:-.02em}
.article-content{max-width:860px}
.article-content .lead{margin-top:0;color:#22222b;font-size:19px;line-height:1.75}
.article-content h2{margin:56px 0 18px;font-size:clamp(26px,3vw,38px);text-transform:none;scroll-margin-top:90px}
.article-content p{margin:0 0 18px;color:#33333d;line-height:1.84}
.article-content a{color:var(--acc);font-weight:700}
.article-note{margin:38px 0;padding:24px;background:#e6e3ff;line-height:1.7}
.article-cta{margin:56px 0 42px;padding:clamp(28px,5vw,52px);background:var(--ink);color:#fff}
.article-cta h2{margin:0 0 16px;font-size:clamp(26px,3vw,38px)}
.article-cta>p:not(.eyebrow){max-width:640px;margin:0 0 26px;color:var(--muted-dark);line-height:1.7}
.article-cta .eyebrow{color:#9f8fff}
.article-cta .button-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.article-sources{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.article-sources h2{margin-top:0}
.article-sources ul{display:grid;gap:10px;margin:0;padding-left:20px;line-height:1.7}
.article-cats{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.article-cats a{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid var(--line);border-radius:999px;font-weight:600;transition:border-color .2s,color .2s}
.article-cats a:hover{border-color:var(--acc);color:var(--acc)}
.article-cats span{color:var(--muted);font-size:13px;font-weight:500}
.article-group-title{margin-bottom:24px;font-size:clamp(26px,3vw,38px);scroll-margin-top:90px}
.article-list-section{scroll-margin-top:72px}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;color:var(--muted);font-size:14px}
.breadcrumbs a:hover{color:var(--acc)}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin:22px 0 0;color:var(--muted);font-size:15px}
.article-meta span:first-child{color:var(--acc);font-weight:600}
.article-content ul,.article-content ol{margin:0 0 22px;padding-left:22px;color:#33333d;line-height:1.75}
.article-content li{margin-bottom:8px}
.article-content h3{margin:32px 0 12px;font-size:21px}
.article-table{margin:0 0 24px;overflow-x:auto}
.article-table table{width:100%;border-collapse:collapse;font-size:15px}
.article-table th,.article-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.article-table th{background:var(--soft);font:600 14px Onest}
.article-content .accordion{margin-bottom:12px}
.article-dates{margin-top:32px!important;color:var(--muted)!important;font-size:14px}
.related-posts h2{margin-bottom:32px;font-size:clamp(28px,3.4vw,44px)}
.lead-form{max-width:760px}
.lead-grid{display:grid;grid-template-columns:1fr 220px;gap:14px}
.lead-form label{display:grid;gap:8px;margin-bottom:14px}
.lead-form label span{font:600 13px Onest}
.lead-form input,.lead-form select{width:100%;height:54px;padding:0 16px;border:1px solid var(--line-dark);border-radius:0;background:rgba(255,255,255,.06);color:#fff;color-scheme:dark;outline:none}
.lead-form input:focus,.lead-form select:focus{border-color:#fff}

/* Появление при скролле */
.reveal{opacity:0;translate:0 28px;transition:opacity .7s cubic-bezier(.16,.84,.3,1),translate .7s cubic-bezier(.16,.84,.3,1)}
.reveal.visible{opacity:1;translate:none}
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}
@keyframes caret{50%{opacity:0}}

@media(max-width:1100px){
  .nav{gap:22px}
  .facts,.steps{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .contact-side{padding:32px 0 0;border:0;border-top:1px solid var(--line-dark)}
}
@media(max-width:950px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:72px;flex-direction:column;align-items:stretch;gap:18px;padding:24px;background:#fff;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav .button{margin:6px 0 0}
  .hero{display:block;min-height:0;padding:0 0 56px}
  .hero-stage{position:relative;right:auto;top:auto;width:100%;height:clamp(260px,42svh,380px)}
  .hero h1{max-width:none}
  .scroll-down{display:none}
  .split,.works,.posts,.article-grid,.article-grid-3,.faq-layout,.article-layout{grid-template-columns:1fr}
  .service{grid-template-columns:1fr}
  .service-art{order:-1;min-height:180px}
  .contact-head{grid-template-columns:1fr}
  .contact-art{display:none}
  .head-row{flex-direction:column;align-items:flex-start}
  .head-row p{text-align:left}
  .faq-layout aside,.article-toc{position:static}
}
@media(max-width:620px){
  .container{width:calc(100% - 32px)}
  .logo{font-size:16px;letter-spacing:.12em}
  .hero h1{font-size:38px}
  .hero-kicker{font-size:12px}
  .typed{font-size:.46em}
  .facts,.steps,.lead-grid{grid-template-columns:1fr}
  .hero-actions .button,.form-actions .button,.lead-actions .button{width:100%}
  .mock-chat{font-size:12px}
  .kpis span{padding:6px;font-size:12px}
  .mock-page{padding:14px;font-size:11px}
  .mock-page b{font-size:16px}
  .footer{flex-direction:column;justify-content:center;padding:28px 0;text-align:center}
  .article-toc{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;translate:none;transition:none}
  .typed:after{animation:none}
}

/* Плашка cookie: «осьминог в пустыне». По кнопке её заливает волна и она уплывает вниз. */
.cookie{position:fixed;left:24px;bottom:24px;z-index:30;display:flex;align-items:flex-start;gap:16px;width:min(440px,calc(100% - 32px));padding:20px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:var(--ink);color:#fff;box-shadow:0 24px 60px rgba(11,11,15,.35);translate:0 calc(100% + 48px);transition:translate .6s cubic-bezier(.16,.84,.3,1)}
.cookie.show{translate:none}
.cookie:before{content:'';position:absolute;left:-30%;right:-30%;top:0;bottom:-30%;border-radius:45% 45% 0 0;background:linear-gradient(180deg,#8f7bff,var(--acc));translate:0 105%;transition:translate .7s cubic-bezier(.5,0,.3,1)}
.cookie>*{position:relative}
.cookie svg{flex:0 0 56px;width:56px;height:56px}
.cookie-octo{transition:translate .5s cubic-bezier(.3,1.6,.5,1)}
.cookie p{margin:0;color:#d6d6de;font-size:14px;line-height:1.5}
.cookie b{color:#fff}
.cookie details{margin:8px 0 14px;color:var(--muted-dark);font-size:13px}
.cookie summary{width:max-content;cursor:pointer}
.cookie details p{margin-top:6px;color:var(--muted-dark);font-size:13px}
.cookie .button{min-height:46px;padding:0 20px;font-size:12px}
.cookie.accepted:before{translate:0 0}
.cookie.accepted .cookie-octo{translate:0 -10px}
.cookie.show.accepted{translate:0 calc(100% + 48px);transition-delay:.65s}
@media(max-width:620px){.cookie{left:16px;bottom:16px;padding:16px}.cookie svg{flex-basis:44px;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.cookie,.cookie:before,.cookie-octo{transition:none}}

/* Ссылки на ключевые услуги в подвале */
.footer-links{display:flex;flex-wrap:wrap;gap:10px 26px;padding:28px 0;border-bottom:1px solid var(--line-dark);font-size:14px}
.footer-links a:hover{color:#fff}

/* 404: вместо нуля — 3D-осьминог (без WebGL — логотип) */
.notfound{padding-top:clamp(48px,6vw,88px)}
.notfound-code{display:flex;align-items:center;gap:clamp(4px,1.5vw,20px);margin:0 0 24px;font:800 clamp(120px,24vw,300px)/.85 Onest;letter-spacing:-.04em}
.notfound-octo{display:inline-block;width:.95em;height:1.15em;background:url(/favicon.svg) center/78% no-repeat}
.octo-ready .notfound-octo{background:none}
.notfound h1{max-width:920px;font-size:clamp(30px,4vw,54px);text-transform:none;letter-spacing:-.02em}
@media(max-width:620px){.footer-links{justify-content:center}}

/* SEO-правки главной: ссылки из услуг и примеров на статьи, блок частых вопросов */
.nowrap{white-space:nowrap}
.hero h1{font-size:clamp(38px,4.8vw,74px)}
@media(max-width:620px){.hero h1{font-size:clamp(26px,9.4vw,38px)}}
.service-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.service-more{font-weight:600;font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.service-more:hover{text-decoration-thickness:2px}
.work h3 a:hover{color:var(--acc)}
.faq-home{max-width:980px}