/*
Theme Name: WebIvan ACF Theme
Theme URI: https://webivan.ru/
Author: Arena.ai
Author URI: https://arena.ai/
Description: Кастомная тема для личного сайта digital-специалиста: услуги, кейсы, блог, готовые решения, контакты. Построена под ACF Pro, SEO и гибкое содержимое.
Version: 1.4.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
Text Domain: webivan
*/

:root{
  --paper:#f1ece2;
  --paper-2:#e8e1d4;
  --paper-3:#dfd6c6;
  --ink:#121212;
  --ink-2:#272727;
  --muted:#5d5a56;
  --dark:#0d0d0d;
  --dark-2:#171717;
  --light:#faf7f0;
  --light-soft:#d6cfc1;
  --acid:#c9ff57;
  --cobalt:#4855ff;
  --line:rgba(18,18,18,.12);
  --line-soft:rgba(18,18,18,.08);
  --line-dark:rgba(255,255,255,.12);
  --shadow:0 22px 70px rgba(0,0,0,.12);
  --shadow-dark:0 22px 80px rgba(0,0,0,.45);
  --radius:28px;
  --radius-sm:22px;
  --container:min(1360px, calc(100% - 44px));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}
.container{width:var(--container);margin:0 auto}
.section-light{background:var(--paper);position:relative}
.section-dark{background:var(--dark);color:var(--light);position:relative}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:100;
  background-image:
    radial-gradient(rgba(0,0,0,.08) .7px, transparent .7px),
    radial-gradient(rgba(255,255,255,.05) .8px, transparent .8px);
  background-size:18px 18px, 27px 27px;
  background-position:0 0, 9px 9px;
  mix-blend-mode:multiply;
  opacity:.08;
}

/*
 * Стекло шапки вынесено в псевдоэлемент.
 *
 * backdrop-filter на самом .site-header делал его containing block для
 * position:fixed потомков. Панель мобильного меню лежит внутри <header>,
 * поэтому позиционировалась от полоски шапки: схлопывалась в невидимую щель
 * и расширяла страницу вправо. На псевдоэлементе фильтр даёт тот же эффект,
 * но containing block не создаёт — панель снова считается от вьюпорта.
 */
.site-header{
  position:sticky; top:0; z-index:120;
  border-bottom:1px solid rgba(18,18,18,.08);
  isolation:isolate;
}
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  backdrop-filter:blur(18px);
  background:rgba(241,236,226,.78);
}
.header-row{
  min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; gap:14px}
.brand-index{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:#111; color:var(--acid); font-weight:900; letter-spacing:.08em;
}
.brand strong{display:block; font-size:14px; text-transform:uppercase; letter-spacing:.14em}
.brand small{display:block; font-size:12px; color:var(--muted)}
.main-nav{display:flex; gap:22px; flex-wrap:wrap}
.main-nav a{font-size:14px; color:var(--ink-2); opacity:.82; transition:.2s ease}
.main-nav a:hover{opacity:1}
.header-link{
  padding:13px 18px; border-radius:999px; font-size:14px; font-weight:700;
  border:1px solid var(--line); background:rgba(255,255,255,.4);
}

.hero{padding:44px 0 0; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 70% 18%, rgba(201,255,87,.12), transparent 16%),
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:auto, 72px 72px, 72px 72px;
}
.hero-layout{
  padding:32px 0 24px;
  display:grid; grid-template-columns:1.04fr .96fr; gap:28px; align-items:center;
}
.hero-copy{position:relative; z-index:2}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px;
  border-radius:999px; border:1px solid var(--line-dark); color:#dad6cf; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
}
.eyebrow span{width:8px;height:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 8px rgba(201,255,87,.1)}
.hero-title{margin:24px 0 0}
.title-row{overflow:hidden}
.title-row span{
  display:block; font-size:clamp(58px, 10vw, 124px); line-height:.9; font-weight:900; letter-spacing:-.07em;
}
.title-row-offset{padding-left:14%}
.title-row-outline span{-webkit-text-stroke:1.2px rgba(255,255,255,.8);color:transparent}
.hero-subtitle{
  margin:18px 0 0; max-width:720px; font-size:clamp(20px, 2.2vw, 28px); line-height:1.28; color:#f1ebdf; letter-spacing:-.02em;
}
.hero-note{
  margin-top:24px; max-width:640px; display:grid; grid-template-columns:1.12fr .88fr; gap:18px;
}
.hero-note p{margin:0; font-size:19px; color:#e8e1d5}
.hero-note ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.hero-note li{
  padding:14px 14px 14px 18px; border-left:2px solid var(--acid); background:rgba(255,255,255,.04);
  color:#dad4c8; font-weight:700;
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.btn{
  min-height:58px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; font-weight:900; letter-spacing:.04em; transition:.2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-acid{background:var(--acid); color:#111}
.btn-ghost{border:1px solid var(--line-dark); color:var(--light); background:rgba(255,255,255,.03)}
.hero-metrics{
  margin-top:22px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.hero-metrics article{
  padding:16px 16px 18px; border-radius:20px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.hero-metrics strong{display:block; font-size:22px; line-height:1.05; margin-bottom:8px}
.hero-metrics span{display:block; font-size:12px; color:#cfc8bd}

/*
 * Сцена hero.
 *
 * Было: .hero-scene с жёстким min-height:760px и .portrait-stage в
 * position:absolute. Фото шириной до 650px при пропорции 5/6.3 давало ~820px
 * высоты — больше заданного минимума. Абсолютный блок не влияет на высоту
 * родителя, поэтому картинка вылезала за секцию, а поворот на -4deg добавлял
 * перекос и распирал страницу по горизонтали.
 *
 * Стало: обычный поток, высоту задаёт само изображение через aspect-ratio.
 */
.hero-scene{
  position:relative; display:grid; place-items:center;
  padding:20px 0;
}
.hero-stage{
  position:relative; width:min(100%, 560px);
  display:grid; place-items:center;
}
.portrait-frame{
  position:relative; z-index:2; width:100%;
  overflow:hidden; border-radius:36px; background:#151515;
  box-shadow:var(--shadow-dark);
  border:1px solid rgba(255,255,255,.08);
}
.portrait-frame::before{
  content:""; position:absolute; inset:18px; border:1px solid rgba(255,255,255,.11); border-radius:24px; z-index:2;
}
.portrait-frame img{
  display:block; width:100%; height:auto;
  aspect-ratio:5 / 6; object-fit:cover;
  filter:grayscale(.2) contrast(1.04);
}

/* Бегущая световая кайма по контуру фото. */
.portrait-frame::after{
  content:""; position:absolute; inset:-1px; z-index:3; pointer-events:none;
  border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--sweep, 0deg),
    transparent 0deg, transparent 250deg,
    rgba(201,255,87,.9) 300deg, rgba(72,85,255,.8) 330deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:webivan-sweep 6s linear infinite;
}
@property --sweep{syntax:'<angle>'; inherits:false; initial-value:0deg}
@keyframes webivan-sweep{to{--sweep:360deg}}
.orbit{
  position:absolute; left:2%; top:12%; width:420px; height:420px; border-radius:50%;
  border:1px dashed rgba(255,255,255,.18); animation:spin 22s linear infinite; z-index:1;
}
.orbit span{
  position:absolute; padding:10px 14px; border-radius:999px; background:#fff; color:#111;
  font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.1em;
}
.orbit span:nth-child(1){top:-8px; left:50%; transform:translateX(-50%)}
.orbit span:nth-child(2){right:-18px; top:50%; transform:translateY(-50%)}
.orbit span:nth-child(3){left:50%; bottom:-8px; transform:translateX(-50%)}
.orbit span:nth-child(4){left:-18px; top:50%; transform:translateY(-50%)}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.float-card{
  position:absolute; display:flex; gap:14px; align-items:flex-start; padding:18px 20px; max-width:320px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:24px; box-shadow:var(--shadow-dark);
  backdrop-filter:blur(12px); z-index:3;
}
.float-card svg{width:22px;height:22px;color:var(--acid);flex:none}
.float-card strong{display:block; margin-bottom:6px; font-size:15px}
.float-card span{display:block; color:#d4cec2; font-size:13px}
.float-card-a{left:0; bottom:18%}
.float-card-b{right:0; bottom:6%}

.ticker-band{
  margin-top:26px; transform:rotate(-2deg) translateY(16px);
  border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1);
  background:var(--acid); color:#111; overflow:hidden;
}
.ticker-track{
  display:flex; gap:28px; width:max-content; padding:16px 0; animation:ticker 22s linear infinite;
}
.ticker-track span{font-size:15px; font-weight:900; text-transform:uppercase; letter-spacing:.16em}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.section-label{
  display:inline-block; padding:9px 14px; border-radius:999px; background:rgba(18,18,18,.06);
  font-size:12px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.section-label.inverse{background:rgba(255,255,255,.08); color:#d8d2c7}
.section-label.light-label{background:rgba(255,255,255,.08); color:#cfc7ba}

.manifesto{padding:116px 0 70px}
.manifesto-grid{display:grid; grid-template-columns:.32fr .68fr; gap:28px; align-items:start}
.manifesto-aside{position:sticky; top:110px}
.manifesto-aside p{margin:18px 0 0; color:var(--muted); max-width:300px; font-size:17px}
.manifesto-main h2{
  margin:0; font-size:clamp(34px, 5vw, 60px); line-height:1.02; letter-spacing:-.055em; max-width:980px;
}
.manifesto-main em{font-style:normal; color:var(--cobalt)}
.manifesto-rules{margin-top:30px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.rule-card,
.board-note,
.board-quote,
.service-panel,
.builder-card,
.system-card,
.blog-card,
.price-box,
.faq-item,
.contact-row,
.contact-legal,
.code-strip{
  border-radius:26px; border:1px solid var(--line); box-shadow:var(--shadow);
}
.rule-card{
  padding:26px; background:rgba(255,255,255,.44);
}
.rule-card svg{width:28px;height:28px;color:var(--cobalt);margin-bottom:18px}
.rule-card h3{margin:0 0 10px;font-size:24px;line-height:1.02}
.rule-card p{margin:0;color:var(--muted);font-size:16px}
.code-strip{margin-top:18px; padding:18px 22px; background:#111; color:#d3eb9e; border-color:#111; box-shadow:var(--shadow-dark)}
.code-strip code{font-size:14px; line-height:1.6; display:block}

.about{padding:60px 0 110px}
.about-board{
  display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:auto auto auto; gap:18px;
}
.board-photo,
.board-stats{
  border-radius:30px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow);
}
.board-photo{display:block; background:#fff}
.board-photo img{width:100%; height:100%; object-fit:cover}
.board-photo-a{grid-row:span 2; min-height:760px}
.board-photo-b{min-height:340px; transform:translateX(54px)}
.board-note{padding:30px; background:#111; color:var(--light); border-color:#111; box-shadow:var(--shadow-dark)}
.board-note h2{margin:18px 0 14px; font-size:clamp(30px, 4.3vw, 52px); line-height:1; letter-spacing:-.05em}
.board-note p{margin:0 0 12px; color:#d3cdc0; font-size:17px}
.board-quote{padding:28px; display:flex; gap:16px; align-items:flex-start; background:var(--paper-2)}
.board-quote svg{width:30px;height:30px;color:var(--cobalt); flex:none}
.board-quote p{margin:0; font-size:22px; line-height:1.28; letter-spacing:-.02em}
.board-stats{display:grid; grid-template-columns:repeat(3,1fr); background:#fff}
.board-stats div{padding:26px; border-right:1px solid var(--line)}
.board-stats div:last-child{border-right:none}
.board-stats strong{display:block; font-size:26px; line-height:1.05; margin-bottom:8px}
.board-stats span{display:block; color:var(--muted); font-weight:600; font-size:14px}

.services{padding:0 0 110px}
.services-layout{display:grid; grid-template-columns:.34fr .66fr; gap:28px; align-items:start}
.sticky-col{position:sticky; top:110px}
.services-lead h2,
.builder-head h2,
.portfolio-head h2,
.system-intro h2,
.process-intro h2,
.pricing-intro h2,
.faq-intro h2,
.contact-info h2,
.blog-head h2{
  margin:16px 0 0; font-size:clamp(30px, 4.2vw, 54px); line-height:1.02; letter-spacing:-.05em;
}
.services-lead p,
.builder-head p,
.portfolio-head p,
.system-intro p,
.pricing-intro p,
.contact-info p,
.blog-head p{margin:18px 0 0; color:var(--muted); font-size:18px}
.services-stack{display:grid; gap:18px}
.services-stack-extended .service-panel:nth-child(odd){transform:translateX(22px)}
.services-stack-extended .service-panel:nth-child(even){transform:translateX(-22px)}
.service-panel{
  display:grid; grid-template-columns:100px 1fr; gap:18px; padding:22px; background:#fff;
}
.panel-no{
  border-radius:22px; background:var(--ink); color:var(--acid); display:flex; align-items:flex-end; justify-content:flex-start;
  padding:16px; font-size:38px; font-weight:900; line-height:1;
}
.panel-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.panel-head h3{margin:0; font-size:28px; line-height:1.02; letter-spacing:-.03em}
.panel-head svg{width:26px;height:26px;color:var(--cobalt); flex:none}
.panel-main p{margin:14px 0; color:var(--muted); font-size:17px}
.panel-main ul,
.case-copy ul,
.system-card ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.panel-main li,
.case-copy li,
.system-card li{position:relative; padding-left:18px; color:var(--ink-2); font-weight:600}
.panel-main li::before,
.case-copy li::before,
.system-card li::before{content:""; position:absolute; left:0; top:.7em; width:7px; height:7px; border-radius:50%; background:var(--acid)}
.service-meta{margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.service-meta span{font-size:13px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.08em}
.service-meta strong{font-size:18px}

.builder{padding:116px 0}
.builder-wrap{position:relative}
.builder-head{display:grid; grid-template-columns:.68fr .32fr; gap:24px; align-items:end; margin-bottom:24px}
.builder-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.builder-card{padding:24px; background:#171717; border-color:rgba(255,255,255,.08); box-shadow:var(--shadow-dark)}
.builder-card span{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
  background:var(--acid); color:#111; font-weight:900; margin-bottom:18px;
}
.builder-card h3{margin:0 0 14px; font-size:24px; color:var(--light)}
.chip-list{display:flex; flex-wrap:wrap; gap:10px}
.chip-list span{
  width:auto; height:auto; border-radius:999px; margin:0; padding:10px 14px;
  background:rgba(255,255,255,.06); color:#ebe4d9; font-size:13px; font-weight:700;
}
.builder-cta{margin-top:22px}

.portfolio{padding:120px 0 90px; overflow:hidden}
.portfolio-head{
  display:grid; grid-template-columns:.68fr .32fr; gap:24px; align-items:end; margin-bottom:30px;
}
.portfolio-head p{color:#c5beaf}
.cases-shell{position:relative}
.cases-toolbar{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px}
.portfolio-nav{display:flex; gap:10px}
.slider-btn{
  width:54px; height:54px; border:none; border-radius:18px; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.1); transition:.2s ease;
}
.slider-btn:hover{transform:translateY(-2px); background:rgba(255,255,255,.1)}
.slider-btn svg{width:22px;height:22px}
.cases-pagination{display:flex; align-items:center; gap:8px}
.cases-pagination .swiper-pagination-bullet{width:10px; height:10px; background:rgba(255,255,255,.25); opacity:1; margin:0 !important}
.cases-pagination .swiper-pagination-bullet-active{background:var(--acid)}
.cases-swiper{overflow:hidden}
.case-slide{height:auto}
.case-panel{
  width:auto; min-height:0; padding:22px; border-radius:34px;
  background:#181818; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-dark);
  display:grid; grid-template-columns:.44fr .56fr; gap:20px; align-items:stretch;
}
.case-copy{display:flex; flex-direction:column; justify-content:center; padding:18px 8px 18px 10px}
.case-tag{
  display:inline-flex; width:max-content; padding:10px 14px; border-radius:999px;
  background:rgba(255,255,255,.06); color:#dcd5c8; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
}
.case-copy h3{margin:18px 0 14px; font-size:clamp(28px, 3.2vw, 46px); line-height:1.02; letter-spacing:-.05em}
.case-copy p{margin:0; color:#c8c1b5; font-size:18px}
.case-copy li{color:#f1ece2}
.case-visual{display:block; min-height:540px; border-radius:24px; overflow:hidden; background:#111; border:1px solid rgba(255,255,255,.08)}
.case-visual img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .3s ease}
.case-visual:hover img{transform:scale(1.04); filter:saturate(1.05)}
.hidden-link{display:none}

.system{padding:110px 0}
.system-layout{display:grid; gap:26px}
.system-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.system-card{padding:28px; background:#fff}
.system-card h3{margin:0 0 12px; font-size:30px; line-height:1.02}
.system-card p{margin:0 0 18px; color:var(--muted); font-size:17px}
.tech-card{background:#111; border-color:#111; color:var(--light); box-shadow:var(--shadow-dark)}
.tech-card p{color:#d3cdc0}
.tech-card li{color:#f3ede1}
.tech-tags{display:flex; flex-wrap:wrap; gap:10px}
.tech-tags span{
  padding:11px 14px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08);
  color:#eee8dc; font-size:13px; font-weight:700;
}

.process{padding:110px 0}
.process-layout{display:grid; grid-template-columns:.34fr .66fr; gap:28px}
.process-intro{position:sticky; top:110px}
.timeline{position:relative; display:grid; gap:14px}
.timeline::before{
  content:""; position:absolute; left:34px; top:0; bottom:0; width:2px; background:linear-gradient(var(--ink), rgba(18,18,18,.08));
}
.timeline-item{display:grid; grid-template-columns:70px 1fr; gap:16px; align-items:start; padding:8px 0}
.timeline-item span{
  position:relative; z-index:2; width:70px; height:70px; display:grid; place-items:center; border-radius:50%;
  background:#111; color:var(--acid); font-size:14px; font-weight:900; letter-spacing:.14em;
}
.timeline-item h3{margin:8px 0 8px; font-size:24px; line-height:1.05; letter-spacing:-.03em}
.timeline-item p{margin:0; color:var(--muted); font-size:17px}

section.blog{padding:120px 0}
.blog-head{display:grid; grid-template-columns:.66fr .34fr; gap:24px; align-items:end; margin-bottom:24px}
.blog-head p{color:#c8c1b5}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.blog-card{padding:26px; background:#171717; border-color:rgba(255,255,255,.08); box-shadow:var(--shadow-dark)}
.blog-thumb{
  display:block; margin:-26px -26px 18px; height:220px; overflow:hidden;
  border-radius:26px 26px 0 0; border-bottom:1px solid rgba(255,255,255,.08);
}
.blog-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .45s ease}
.blog-card:hover .blog-thumb img{transform:scale(1.04)}
.blog-date{display:inline-block; margin-bottom:14px; color:var(--acid); font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase}
.blog-card h3{margin:0 0 12px; color:var(--light); font-size:28px; line-height:1.06; letter-spacing:-.03em}
.blog-card p{margin:0 0 18px; color:#cbc3b7; font-size:16px}
.blog-card a{color:var(--acid); font-weight:800}

.pricing{padding:40px 0 120px}
.pricing-layout{display:grid; grid-template-columns:.35fr .65fr; gap:28px; align-items:start}
.pricing-intro{position:sticky; top:110px}
.pricing-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.pricing-cards-wide{grid-template-columns:repeat(2,1fr)}
.price-box{min-height:250px; padding:26px; background:#fff}
.price-box.featured{background:#111; color:var(--light); border-color:#111; box-shadow:var(--shadow-dark)}
.price-kind{
  display:inline-block; padding:10px 14px; border-radius:999px; font-size:12px; font-weight:900; letter-spacing:.14em;
  text-transform:uppercase; background:var(--paper-2); color:#111;
}
.price-box.featured .price-kind{background:var(--acid)}
.price-box h3{margin:18px 0 10px; font-size:30px; line-height:1; letter-spacing:-.03em}
.price-value{font-size:40px; line-height:1; font-weight:900; letter-spacing:-.04em}
.price-box p{margin:16px 0 0; color:var(--muted); font-size:17px}
.price-box.featured p{color:#d3cdc0}

.faq{padding:120px 0}
.faq-layout{display:grid; grid-template-columns:.4fr .6fr; gap:28px; align-items:start}
.faq-list{display:grid; gap:14px}
.faq-item{padding:0 24px; background:#181818; border-color:rgba(255,255,255,.08); box-shadow:var(--shadow-dark)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:24px 0; position:relative;
  font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--light);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; position:absolute; right:0; top:18px; font-size:34px; color:var(--acid)}
.faq-item[open] summary::after{content:"−"}
.faq-item p{margin:0 0 24px; color:#c8c1b5; font-size:16px}

.contact{padding:120px 0}
.contact-shell{display:grid; grid-template-columns:.54fr .46fr; gap:28px; align-items:start}
.contact-note{
  margin-top:18px; display:inline-block; padding:12px 16px; border-radius:999px; background:#111; color:var(--acid);
  font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
}
.contact-card-grid{margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.contact-links{display:grid; gap:12px}
.contact-row,
.contact-legal,
.contact-form-card{
  padding:18px 22px; background:#fff;
}
.contact-row{min-height:82px; display:flex; align-items:center; gap:14px}
.contact-row svg{width:22px;height:22px;color:var(--cobalt); flex:none}
.contact-row span{font-size:18px; font-weight:700}
.messenger-strip{margin-top:12px; display:flex; flex-wrap:wrap; gap:10px}
.messenger-strip a{
  display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 16px;
  border-radius:999px; background:#111; color:#f5f1e8; font-size:14px; font-weight:800; letter-spacing:.03em;
}
.contact-legal{margin-top:12px; min-height:auto; color:var(--muted); font-size:14px; line-height:1.55}
.contact-form-card{border-radius:30px; border:1px solid var(--line); box-shadow:var(--shadow)}
.form-head h3{margin:14px 0 12px; font-size:34px; line-height:1.02; letter-spacing:-.04em}
.form-head p{margin:0; color:var(--muted); font-size:16px}
.contact-form{margin-top:24px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:grid; gap:8px}
.field span{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.field input,
.field select,
.field textarea{
  width:100%; border:none; outline:none; border-radius:18px; background:var(--paper); color:var(--ink);
  padding:17px 18px; font-size:16px; box-shadow:inset 0 0 0 1px rgba(18,18,18,.08);
}
.field textarea{resize:vertical; min-height:160px}
.field input:focus,
.field select:focus,
.field textarea:focus{box-shadow:inset 0 0 0 2px rgba(72,85,255,.22)}
.field-full{grid-column:1 / -1}
.form-actions{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; flex-wrap:wrap}
.form-actions p{margin:0; color:var(--muted); font-size:14px; max-width:320px}

.site-footer{padding:0 0 34px; background:var(--paper)}
.footer-row{
  border-top:1px solid var(--line); padding-top:20px; color:var(--muted); font-size:14px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

/* -------------------------------------------------------------------------
   Подсветка карточек

   Раньше .magnetic сдвигал карточку через transform: translate() с дробными
   пикселями — браузер переставал попадать в пиксельную сетку и текст внутри
   выглядел размытым. Теперь карточка стоит на месте: за курсором едут только
   световое пятно и подсветка рамки, а сама карточка лишь чуть приподнимается
   тенью. Координаты --mx/--my приходят из theme.js.
   ---------------------------------------------------------------------- */
.magnetic{
  position:relative;
  --mx:50%; --my:50%;
  transition:box-shadow .35s ease, border-color .35s ease;
  isolation:isolate;
}
.magnetic::after{
  content:''; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
  background:radial-gradient(320px circle at var(--mx) var(--my), rgba(72,85,255,.10), transparent 62%);
}
.magnetic::before{
  content:''; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
  padding:1px;
  background:radial-gradient(220px circle at var(--mx) var(--my), var(--acid), rgba(72,85,255,.55) 45%, transparent 70%);
  /* Заливаем только рамку: маска вырезает внутреннюю часть. */
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.magnetic.is-lit::before,
.magnetic.is-lit::after{opacity:1}
.magnetic:hover{box-shadow:0 26px 70px rgba(0,0,0,.16)}

/* На тёмных секциях пятно должно быть светлым, иначе его не видно. */
.section-dark .magnetic::after{
  background:radial-gradient(320px circle at var(--mx) var(--my), rgba(201,255,87,.10), transparent 62%);
}

/* Тач-устройства не наводят курсор — подсветку там не показываем. */
@media (hover: none){
  .magnetic::before,
  .magnetic::after{display:none}
}
.reveal{opacity:0; transform:translateY(34px)}

@media (max-width: 1240px){
  .hero-layout,
  .manifesto-grid,
  .services-layout,
  .process-layout,
  .pricing-layout,
  .faq-layout,
  .contact-shell,
  .portfolio-head,
  .builder-head,
  .blog-head{grid-template-columns:1fr}
  .sticky-col,
  .manifesto-aside,
  .process-intro,
  .pricing-intro{position:relative; top:auto}
  .manifesto-rules,
  .system-grid,
  .blog-grid,
  .builder-grid{grid-template-columns:1fr 1fr}
  .board-photo-b{transform:none}
}

@media (max-width: 980px){
  /* .main-nav{display:none} убрано: панель меню описана ниже, в блоке навигации. */
  .hero-layout,
  .hero-note,
  .about-board,
  .service-panel,
  .case-panel,
  .board-stats,
  .manifesto-rules,
  .pricing-cards,
  .builder-grid,
  .system-grid,
  .blog-grid,
  .contact-card-grid,
  .form-grid{grid-template-columns:1fr}
  .hero-metrics{grid-template-columns:repeat(2,1fr)}
  /* Высота теперь от самой картинки — min-height и абсолютное позиционирование убраны. */
  .hero-stage{width:min(100%, 480px)}
  .orbit{width:320px; height:320px; left:0; top:0}
  .services-stack-extended .service-panel:nth-child(odd),
  .services-stack-extended .service-panel:nth-child(even),
  .price-box.featured{transform:none}
  .panel-no{min-height:96px}
  .board-photo-a{min-height:520px; grid-row:auto}
  .board-photo-b{min-height:320px}
  .cases-toolbar{margin-bottom:14px}
  .case-panel{min-height:auto}
  .case-visual{min-height:360px}
}

@media (max-width: 720px){
  :root{--container:min(1360px, calc(100% - 20px))}
  .header-link{display:none}
  /* Фон живёт на псевдоэлементе — см. комментарий у .site-header. */
  .site-header::before{background:rgba(241,236,226,.94)}
  .hero{padding-top:18px}
  .hero-layout{padding-top:18px}
  .title-row span{font-size:56px}
  .title-row-offset{padding-left:7%}
  .hero-subtitle{font-size:18px; line-height:1.35}
  .hero-note p,
  .services-lead p,
  .builder-head p,
  .portfolio-head p,
  .system-intro p,
  .pricing-intro p,
  .contact-info p,
  .blog-head p,
  .form-head p{font-size:16px}
  .hero-actions{flex-direction:column}
  .btn{width:100%}
  .hero-stage{width:100%}
  .portrait-frame{transform:none}
  .orbit{display:none}
  .float-card{position:relative; left:auto; right:auto; bottom:auto; margin-top:12px; max-width:none}
  .ticker-band{transform:none; margin-top:20px}
  .manifesto{padding-top:84px}
  .services-lead h2,
  .builder-head h2,
  .portfolio-head h2,
  .system-intro h2,
  .process-intro h2,
  .pricing-intro h2,
  .faq-intro h2,
  .contact-info h2,
  .blog-head h2,
  .board-note h2,
  .manifesto-main h2,
  .form-head h3{font-size:34px}
  .rule-card,
  .service-panel,
  .board-note,
  .board-quote,
  .price-box,
  .contact-row,
  .builder-card,
  .blog-card,
  .system-card,
  .contact-legal,
  .contact-form-card,
  .code-strip{padding:22px}
  .hero-metrics{grid-template-columns:1fr 1fr}
  .case-copy h3{font-size:28px}
  .case-visual{order:-1; min-height:240px}
  .blog-thumb{height:180px}
  .portfolio-extra-head{flex-direction:column; align-items:flex-start}
  .slider-btn{width:48px; height:48px}
  .timeline::before{left:24px}
  .timeline-item{grid-template-columns:50px 1fr}
  .timeline-item span{width:50px; height:50px; font-size:12px}
  .timeline-item h3{font-size:22px}
  .panel-head h3,
  .blog-card h3,
  .system-card h3,
  .price-box h3{font-size:26px}
  .price-value{font-size:34px}
  .contact-row span{font-size:16px}
  .messenger-strip a{width:100%}
  .form-actions{flex-direction:column; align-items:flex-start}
}


.btn-ghost-dark{border:1px solid rgba(18,18,18,.12); color:var(--ink); background:rgba(18,18,18,.03)}
.service-link{
  display:inline-flex; align-items:center; margin-top:16px; font-size:14px; font-weight:800; color:var(--cobalt);
}
.ready-teaser{padding:30px 0 110px}
.ready-teaser-shell{display:grid; gap:24px}
.ready-teaser-head{display:grid; grid-template-columns:.58fr .42fr; gap:24px; align-items:end}
.ready-teaser-head h2{margin:16px 0 0; font-size:clamp(30px, 4vw, 52px); line-height:1.02; letter-spacing:-.05em}
.ready-teaser-head p{margin:0; color:var(--muted); font-size:18px}
.ready-teaser-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.ready-card{padding:28px; border-radius:28px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow)}
.ready-card-acid{background:linear-gradient(135deg, rgba(201,255,87,.18), rgba(255,255,255,.9))}
.ready-card-top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px}
.ready-card-top h3{margin:0; font-size:28px; line-height:1.02}
.ready-card-top span{padding:9px 12px; border-radius:999px; background:#111; color:var(--acid); font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase}
.ready-card ul{margin:0; padding:0; list-style:none; display:grid; gap:12px}
.ready-card li{position:relative; padding-left:18px; color:var(--ink-2); font-weight:600}
.ready-card li::before{content:""; position:absolute; left:0; top:.7em; width:7px; height:7px; border-radius:50%; background:var(--acid)}
.ready-teaser-actions{display:flex; gap:12px; flex-wrap:wrap}

.service-hero{padding:88px 0 72px}
.service-hero-layout{display:grid; grid-template-columns:.58fr .42fr; gap:28px; align-items:center}
.service-hero-copy h1{margin:18px 0 16px; font-size:clamp(42px, 6vw, 78px); line-height:.96; letter-spacing:-.06em}
.service-hero-copy p{margin:0; color:#d8d0c3; font-size:20px; max-width:760px}
.service-hero-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.service-hero-meta span{padding:11px 14px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:#eee7dc; font-size:13px; font-weight:800}
.service-hero-side{position:relative; padding:18px; border-radius:32px; border:1px solid rgba(255,255,255,.08); background:#171717; box-shadow:var(--shadow-dark)}
.service-hero-side img{width:100%; border-radius:22px}
.service-hero-icon{position:absolute; top:18px; left:18px; width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08)}
.service-hero-icon svg{width:28px; height:28px; color:var(--acid)}
.price-badge-large{position:absolute; top:18px; left:18px; padding:16px 18px; border-radius:20px; background:rgba(255,255,255,.08); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.08); z-index:2}
.price-badge-large strong{display:block; font-size:24px; line-height:1.05}
.price-badge-large span{display:block; margin-top:6px; color:#d6cfc2; font-size:13px; font-weight:700}
.ready-page-hero .service-hero-side{padding:0; overflow:hidden}
.ready-page-hero .service-hero-side img{display:block; border-radius:30px}

.service-content{padding:100px 0}
.service-content-alt{background:linear-gradient(180deg, rgba(223,214,198,.44), rgba(241,236,226,1))}
.service-process{padding:100px 0}
.service-section-grid{display:grid; grid-template-columns:.34fr .66fr; gap:28px; align-items:start}
.service-section-grid h2{margin:16px 0 0; font-size:clamp(30px, 4vw, 52px); line-height:1.02; letter-spacing:-.05em}
.service-grid-two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.service-grid-three{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.mini-card{padding:24px; border-radius:24px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow)}
.mini-card h3{margin:0 0 10px; font-size:22px; line-height:1.05}
.mini-card p{margin:0; color:var(--muted); font-size:16px}
.service-steps-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.service-step-card{padding:24px; border-radius:24px; border:1px solid rgba(255,255,255,.08); background:#171717; box-shadow:var(--shadow-dark)}
.service-step-card span{display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:16px; background:var(--acid); color:#111; font-weight:900; margin-bottom:16px}
.service-step-card h3{margin:0 0 10px; color:var(--light); font-size:22px; line-height:1.05}
.service-step-card p{margin:0; color:#cfc6b9; font-size:16px}
.service-faq{padding:100px 0}
.service-cta{padding:100px 0}
.service-cta-shell{display:grid; grid-template-columns:.46fr .54fr; gap:28px; align-items:start}
.service-cta-shell h2{margin:16px 0 0; font-size:clamp(30px, 4vw, 52px); line-height:1.02; letter-spacing:-.05em; color:var(--light)}
.service-order-form{padding:28px; border-radius:30px; background:#171717; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-dark)}
.service-order-form .field input,
.service-order-form .field select,
.service-order-form .field textarea{background:#f3eee4}
.service-order-form .form-actions p{color:#cbc3b7}

.compare{padding:90px 0 110px}
.compare-shell{display:grid; gap:24px}
.compare-tabs{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:end; border-bottom:1px solid rgba(18,18,18,.12)}
.compare-tab{appearance:none; border:none; background:none; padding:0 0 16px; font-size:clamp(24px,2vw,34px); font-weight:800; color:#2d2c39; cursor:pointer; border-bottom:3px solid transparent; text-align:left}
.compare-tab.is-active{color:#d10af5; border-color:#d10af5}
.compare-panel{display:none}
.compare-panel.is-active{display:block}
.compare-card{padding:42px; border-radius:34px; background:#fff; border:1px solid rgba(18,18,18,.08); box-shadow:0 18px 60px rgba(79,101,171,.14)}
.compare-card-head h2{margin:0 0 14px; font-size:clamp(34px, 4vw, 56px); line-height:1; letter-spacing:-.04em; color:#6c5491}
.compare-card-head p{margin:0 0 26px; color:#6b6774; font-size:18px; max-width:820px}
.compare-steps{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid rgba(18,18,18,.08); border-left:1px solid rgba(18,18,18,.08)}
.compare-steps article{padding:54px 34px 32px; border-right:1px solid rgba(18,18,18,.08); border-bottom:1px solid rgba(18,18,18,.08); position:relative; min-height:230px}
.compare-steps span{position:absolute; top:-18px; left:34px; width:74px; height:74px; border-radius:18px; display:grid; place-items:center; background:#ecebfd; color:#6d58a6; font-size:28px; font-weight:900; box-shadow:0 10px 30px rgba(109,88,166,.12)}
.compare-steps h3{margin:0 0 12px; font-size:22px; line-height:1.06; color:#242332}
.compare-steps p{margin:0; color:#686674; font-size:17px; line-height:1.55}

@media (max-width: 1240px){
  .ready-teaser-head,
  .service-hero-layout,
  .service-section-grid,
  .service-cta-shell{grid-template-columns:1fr}
}
@media (max-width: 980px){
  .ready-teaser-grid,
  .service-grid-two,
  .service-grid-three,
  .service-steps-grid,
  .compare-steps{grid-template-columns:1fr}
  .compare-steps{border-left:none}
  .compare-steps article{border-left:1px solid rgba(18,18,18,.08)}
}
@media (max-width: 720px){
  .ready-teaser{padding:20px 0 84px}
  .ready-teaser-head h2,
  .service-section-grid h2,
  .service-cta-shell h2,
  .compare-card-head h2,
  .service-hero-copy h1{font-size:34px}
  .ready-teaser-head p,
  .service-hero-copy p,
  .compare-card-head p{font-size:16px}
  .ready-teaser-actions{flex-direction:column}
  .service-hero{padding:72px 0 54px}
  .service-hero-meta{gap:8px}
  .service-hero-meta span{width:100%; justify-content:center; text-align:center}
  .service-hero-side{padding:14px}
  .price-badge-large{position:relative; top:auto; left:auto; width:max-content; margin:18px}
  .service-content,
  .service-process,
  .service-faq,
  .service-cta,
  .compare{padding:84px 0}
  .mini-card,
  .service-step-card,
  .ready-card,
  .compare-card{padding:22px}
  .compare-tabs{grid-template-columns:1fr; gap:0}
  .compare-tab{font-size:22px}
  .compare-steps article{padding:52px 22px 22px; min-height:0}
  .compare-steps span{left:22px; width:60px; height:60px; font-size:24px}
}


.section-actions{margin-top:26px}
.section-actions-dark{margin-top:26px}
.case-more-link{display:inline-flex; align-items:center; margin-top:14px; color:var(--acid); font-size:14px; font-weight:800}
.case-tag-dark{background:rgba(18,18,18,.06); color:var(--muted)}

.audience-grid .mini-card,
.include-grid .mini-card{position:relative; overflow:hidden}
.audience-card{display:flex; gap:16px; align-items:flex-start}
.card-mark{width:52px; height:52px; border-radius:18px; display:grid; place-items:center; background:rgba(72,85,255,.08); flex:none}
.card-mark svg{width:22px; height:22px; color:var(--cobalt)}
.audience-card p{font-size:17px; line-height:1.55}
.include-card{padding-top:54px}
.card-num{position:absolute; top:18px; left:18px; display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 12px; border-radius:14px; background:#111; color:var(--acid); font-weight:900; font-size:13px; letter-spacing:.12em}
.include-card p{font-size:17px; line-height:1.55}
.results-grid{grid-template-columns:1fr 1fr}
.result-card{padding:24px; border-radius:24px; border:1px solid rgba(255,255,255,.08); background:#171717; box-shadow:var(--shadow-dark)}
.result-icon{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:rgba(201,255,87,.12); margin-bottom:16px}
.result-icon svg{width:22px; height:22px; color:var(--acid)}
.result-card p{margin:0; color:#ede7db; font-size:17px; line-height:1.55}

.contact-page{padding:100px 0}
.contact-page-grid{display:grid; grid-template-columns:.52fr .48fr; gap:28px; align-items:start}
.contact-page-info{display:grid; gap:18px}
.info-duo-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}

.featured-post{display:grid; grid-template-columns:.52fr .48fr; gap:22px; align-items:stretch; padding:24px; border-radius:30px; background:#111; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-dark); margin-bottom:24px}
.featured-post-copy{display:flex; flex-direction:column; justify-content:center}
.featured-post-copy h2{margin:18px 0 14px; color:var(--light); font-size:clamp(30px, 4vw, 50px); line-height:1.02; letter-spacing:-.05em}
.featured-post-copy p{margin:0 0 24px; color:#d3cdc0; font-size:18px}
.featured-post-image{display:block; overflow:hidden; border-radius:24px}
.featured-post-image img{width:100%; height:100%; object-fit:cover}
.archive-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.archive-post-card{padding:26px; border-radius:28px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}
.archive-post-card h3{margin:0 0 12px; font-size:26px; line-height:1.08; letter-spacing:-.03em}
.archive-post-card h3 a{color:var(--ink)}
.archive-post-card p{margin:0; color:var(--muted); font-size:16px}

.article-hero{padding:88px 0 60px}
.article-hero-inner{max-width:980px}
.article-hero-inner h1{margin:18px 0 14px; font-size:clamp(40px, 5.6vw, 72px); line-height:.98; letter-spacing:-.06em}
.article-topline{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px}
.article-topline span{padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.06); color:#e8e2d6; font-size:13px; font-weight:800}
.article-hero-inner p{margin:0; color:#d6d0c4; font-size:20px; line-height:1.5}
.article-layout-wrap{padding:90px 0}
.article-layout{display:grid; grid-template-columns:.7fr .3fr; gap:28px; align-items:start}
.article-content{display:grid; gap:18px}
.article-cover{overflow:hidden; border-radius:28px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow)}
.article-cover img{width:100%; height:auto; object-fit:cover}
.article-block{padding:30px; border-radius:28px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}

/* Типографика лонгрида.
   Правила ниже рассчитаны на полноценную статью: у абзацев есть воздух,
   заголовок отделён от предыдущего текста сильнее, чем от своего.
   Раньше здесь стояло margin:0 — годилось для короткого анонса, но статья
   на 10 000 знаков превращалась в сплошную стену. */
.article-block > *:first-child{margin-top:0}
.article-block > *:last-child{margin-bottom:0}

.article-block h2{margin:52px 0 16px; font-size:30px; line-height:1.1; letter-spacing:-.04em; color:var(--ink)}
.article-block h3{margin:34px 0 12px; font-size:22px; line-height:1.25; letter-spacing:-.02em; color:var(--ink)}
.article-block p{margin:0 0 20px; color:var(--muted); font-size:18px; line-height:1.7}
.article-block strong{color:var(--ink); font-weight:700}

/* Списки той же кеглью, что и текст: раньше они были на 2px мельче
   и читались как сноска, хотя несут основную конкретику. */
.article-block ul,
.article-block ol{margin:0 0 22px; padding-left:24px; color:var(--muted); font-size:18px; line-height:1.7}
.article-block li{margin:0 0 8px}
.article-block li::marker{color:var(--ink); font-weight:700}
.article-block li > ul,
.article-block li > ol{margin:8px 0 0}

/* Код. Без этих правил примеры выглядели как обычный абзац, а кавычки
   в них подменялись на «ёлочки» — скопировать такой код нельзя. */
.article-block code{padding:2px 6px; border-radius:6px; background:rgba(18,18,18,.06); border:1px solid var(--line-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em; color:var(--ink); word-break:break-word}
.article-block pre{margin:0 0 22px; padding:20px 22px; border-radius:18px; background:#141414; border:1px solid rgba(255,255,255,.08);
  overflow-x:auto; -webkit-overflow-scrolling:touch}
.article-block pre code{padding:0; border:0; background:none; color:#eae7e1; font-size:15px; line-height:1.6; white-space:pre}

.article-block blockquote{margin:0 0 22px; padding:18px 24px; border-left:3px solid var(--acid); border-radius:0 18px 18px 0;
  background:rgba(201,255,87,.14); color:var(--ink-2); font-size:18px; line-height:1.6}
.article-block blockquote p:last-child{margin-bottom:0}

.article-block table{width:100%; margin:0 0 22px; border-collapse:collapse; font-size:16px; color:var(--muted)}
.article-block th,
.article-block td{padding:12px 14px; border:1px solid var(--line-soft); text-align:left; vertical-align:top}
.article-block th{background:rgba(18,18,18,.04); color:var(--ink); font-weight:700}

.article-block a{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:var(--acid); transition:text-decoration-color .2s ease}
.article-block a:hover{text-decoration-color:var(--ink)}

/* Обложка-квадрат занимала почти весь экран и отодвигала текст ниже сгиба. */
.article-cover img{aspect-ratio:16/9; object-fit:cover}
.sidebar-card{position:sticky; top:110px; padding:24px; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); display:grid; gap:12px}
.sidebar-card a{font-weight:700; color:var(--ink-2)}
.article-cta-box{padding:32px; border-radius:30px; background:#111; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-dark)}
.article-cta-box h2{margin:0 0 12px; color:var(--light); font-size:34px; line-height:1.04; letter-spacing:-.04em}
.article-cta-box p{margin:0 0 22px; color:#d3cdc0; font-size:17px}

.portfolio-archive{padding:100px 0}
.portfolio-archive-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.portfolio-card{display:grid; grid-template-columns:1fr; gap:0; overflow:hidden; border-radius:30px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow)}
.portfolio-card-image{display:block; overflow:hidden; height:290px}
.portfolio-card-image img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.portfolio-card:hover .portfolio-card-image img{transform:scale(1.04)}
.portfolio-card-copy{padding:26px}
.portfolio-card-copy h3{margin:14px 0 12px; font-size:30px; line-height:1.04; letter-spacing:-.04em}
.portfolio-card-copy h3 a{color:var(--ink)}
.portfolio-card-copy p{margin:0; color:var(--muted); font-size:17px}
.case-detail{padding:90px 0}
.case-detail-grid{display:grid; grid-template-columns:.7fr .3fr; gap:28px; align-items:start}
.case-main{display:grid; gap:18px}

@media (max-width: 1240px){
  .contact-page-grid,
  .featured-post,
  .article-layout,
  .case-detail-grid{grid-template-columns:1fr}
}
@media (max-width: 980px){
  .results-grid,
  .archive-grid,
  .portfolio-archive-grid,
  .info-duo-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .audience-card{gap:12px}
  .card-mark{width:46px; height:46px; border-radius:14px}
  .card-num{top:14px; left:14px}
  .result-card,
  .archive-post-card,
  .portfolio-card-copy,
  .article-block,
  .article-cta-box,
  .sidebar-card{padding:22px}
  .featured-post{padding:18px}
  .featured-post-copy h2,
  .article-hero-inner h1,
  .portfolio-card-copy h3{font-size:32px}
  .article-hero-inner p,
  .article-block p,
  .article-block ul,
  .article-block ol{font-size:16px}
  .article-block h2{margin-top:38px; font-size:26px}
  .article-block h3{margin-top:26px; font-size:20px}
  .article-block pre{padding:16px; border-radius:14px}
  .article-block pre code{font-size:13px}
  .portfolio-card-image{height:220px}
}

.main-nav .menu-list{display:flex; gap:22px; flex-wrap:wrap; margin:0; padding:0; list-style:none}
.main-nav .menu-list li{list-style:none; margin:0}
.main-nav .menu-list a{font-size:14px; color:var(--ink-2); opacity:.82; transition:.2s ease}
.main-nav .menu-list a:hover{opacity:1}
.webivan-form-honeypot{position:absolute !important; left:-9999px !important; opacity:0 !important; pointer-events:none !important}
/* -------------------------------------------------------------------------
   Согласия и чекбоксы

   Раньше галочка была системной, а подпись наследовала от .field span
   верхний регистр и разрядку — блок выглядел как случайно попавший сюда
   заголовок и разъезжался по высоте.
   ---------------------------------------------------------------------- */
.consent-field{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  padding:14px 16px; border-radius:16px; cursor:pointer;
  background:rgba(18,18,18,.03);
  border:1px solid var(--line-soft);
  transition:border-color .2s ease, background .2s ease;
}
.consent-field:hover{border-color:rgba(72,85,255,.35); background:rgba(72,85,255,.04)}
.consent-field:has(input:checked){border-color:rgba(72,85,255,.45); background:rgba(72,85,255,.06)}

/* Своя галочка вместо системной. */
.consent-field input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:22px; height:22px; margin:1px 0 0; flex:none;
  border:2px solid rgba(18,18,18,.28); border-radius:7px;
  background:#fff; cursor:pointer;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
  display:grid; place-content:center;
}
.consent-field input[type="checkbox"]::after{
  content:''; width:11px; height:6px;
  border:2px solid #fff; border-top:0; border-right:0;
  transform:rotate(-45deg) scale(.4); opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}
.consent-field input[type="checkbox"]:checked{background:var(--cobalt); border-color:var(--cobalt)}
.consent-field input[type="checkbox"]:checked::after{transform:rotate(-45deg) scale(1); opacity:1}
.consent-field input[type="checkbox"]:focus-visible{outline:none; box-shadow:0 0 0 4px rgba(72,85,255,.22)}

/* Подпись согласия — обычный текст, а не метка поля. */
.consent-field .consent-copy,
.consent-field span{
  font-size:14px; font-weight:500; line-height:1.5;
  letter-spacing:0; text-transform:none; color:var(--muted);
}
.consent-field .consent-copy a{color:var(--cobalt); font-weight:700; text-decoration:underline; text-underline-offset:2px}
.consent-field .consent-copy a:hover{color:var(--ink)}

/* Тёмные формы: тот же блок на тёмном фоне. */
.section-dark .consent-field,
.compare-order-form .consent-field,
.service-order-form .consent-field{
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12);
}
.section-dark .consent-field:hover,
.compare-order-form .consent-field:hover,
.service-order-form .consent-field:hover{background:rgba(255,255,255,.07); border-color:rgba(201,255,87,.4)}
.section-dark .consent-field:has(input:checked),
.compare-order-form .consent-field:has(input:checked),
.service-order-form .consent-field:has(input:checked){border-color:rgba(201,255,87,.5); background:rgba(201,255,87,.08)}
.section-dark .consent-field input[type="checkbox"],
.compare-order-form .consent-field input[type="checkbox"],
.service-order-form .consent-field input[type="checkbox"]{background:transparent; border-color:rgba(255,255,255,.35)}
.section-dark .consent-field input[type="checkbox"]:checked,
.compare-order-form .consent-field input[type="checkbox"]:checked,
.service-order-form .consent-field input[type="checkbox"]:checked{background:var(--acid); border-color:var(--acid)}
.section-dark .consent-field input[type="checkbox"]::after,
.compare-order-form .consent-field input[type="checkbox"]::after,
.service-order-form .consent-field input[type="checkbox"]::after{border-color:#111}

/* Незаполненное обязательное согласие после попытки отправки. */
.webivan-form.was-validated .consent-field input:invalid{border-color:#c0392b; box-shadow:0 0 0 4px rgba(192,57,43,.16)}
.cookie-bar{position:fixed; left:20px; right:20px; bottom:20px; z-index:200}
.cookie-bar__inner{display:flex; gap:16px; align-items:center; justify-content:space-between; padding:18px 20px; border-radius:22px; background:rgba(13,13,13,.96); color:var(--light); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-dark)}
.cookie-bar__text{font-size:14px; line-height:1.5; color:#e6dfd3}
.cookie-bar__text a{color:var(--acid); font-weight:700}
.cookie-bar__button{min-height:48px; white-space:nowrap}
.form-lead p{margin:0}
.service-order-form .webivan-form{padding:0;background:transparent;border:none;box-shadow:none}
.case-tag + .case-more-link{margin-top:12px}
.card-text p{margin:0}
.featured-post-copy .section-label{margin-bottom:10px}
.wp-block-image img{height:auto}
.wp-block-gallery{display:grid; gap:12px}
@media (max-width: 980px){
  .cookie-bar__inner{flex-direction:column; align-items:flex-start}
}
@media (max-width: 720px){
  /* .menu-list{display:none} убрано — иначе пункты пропадали внутри панели. */
  .cookie-bar{left:10px; right:10px; bottom:10px}
  .cookie-bar__button{width:100%}
}

.breadcrumbs{margin-bottom:18px}
.breadcrumbs__list{display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none}
.breadcrumbs__item{display:flex; align-items:center; gap:10px; color:#d8d1c5; font-size:13px; font-weight:700}
.breadcrumbs__item:not(:last-child)::after{content:'/'; color:rgba(255,255,255,.35)}
.breadcrumbs__item a{color:#f1eadf; opacity:.85}
.breadcrumbs__item span{color:#c8c0b4}
.section-light .breadcrumbs__item{color:var(--muted)}
.section-light .breadcrumbs__item:not(:last-child)::after{color:rgba(18,18,18,.25)}
.section-light .breadcrumbs__item a{color:var(--ink)}
.section-light .breadcrumbs__item span{color:var(--muted)}
.breadcrumbs-section{padding:20px 0 0}
.related-section{padding-top:0}
.related-head{margin-bottom:20px}
.related-head h2{margin:14px 0 0; font-size:clamp(28px, 4vw, 46px); line-height:1.04; letter-spacing:-.05em}
.form-notice{margin-bottom:18px; padding:14px 16px; border-radius:18px; font-size:14px; line-height:1.5; font-weight:700}
.form-notice-success{background:rgba(201,255,87,.16); color:#314500; box-shadow:inset 0 0 0 1px rgba(201,255,87,.35)}
.form-notice-error{background:rgba(255,120,120,.12); color:#7a1e1e; box-shadow:inset 0 0 0 1px rgba(255,120,120,.26)}
.article-content .related-posts{display:grid; gap:18px}
.service-order-form .form-notice-success{background:rgba(201,255,87,.12); color:#eaffb7}
.service-order-form .form-notice-error{background:rgba(255,120,120,.12); color:#ffd3d3}
@media (max-width: 720px){
  .breadcrumbs__list{gap:8px}
  .breadcrumbs__item{font-size:12px}
  .related-head h2{font-size:30px}
}
.brand-logo .custom-logo-link{display:flex; align-items:center}
.brand-logo .custom-logo{max-height:48px; width:auto; display:block}

.consent-copy p{margin:0}

.hero-note-single{grid-template-columns:1fr;max-width:760px}
.hero-note-single div p{margin:0;font-size:19px;color:#e8e1d5}


.header-actions{display:flex; align-items:center; gap:12px}
.header-phone{display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 16px; border-radius:999px; background:#111; color:#f4efe4; font-size:14px; font-weight:800; letter-spacing:.02em; box-shadow:var(--shadow)}
.header-phone svg{width:18px;height:18px;color:var(--acid)}
.header-link{background:linear-gradient(135deg, var(--acid), #efffb7); color:#111; border-color:transparent; box-shadow:0 10px 28px rgba(201,255,87,.16)}
.site-header{box-shadow:0 8px 30px rgba(0,0,0,.04)}
.main-nav .menu-list a{position:relative; padding-bottom:4px}
.main-nav .menu-list a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--acid); transition:.25s ease}
.main-nav .menu-list a:hover::after,
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after{width:100%}
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a{opacity:1; font-weight:800}

.service-title-link{color:var(--ink); transition:.2s ease}
.service-title-link:hover{color:var(--cobalt)}
.service-link-strong{display:inline-flex; align-items:center; gap:10px; margin-top:16px; min-height:46px; padding:0 16px; border-radius:999px; background:#111; color:#f7f2e8; font-size:14px; font-weight:800; letter-spacing:.03em; width:max-content}
.service-link-strong svg{width:16px;height:16px;color:var(--acid)}
.services-bottom-link{margin-top:26px; display:flex; justify-content:flex-start}

.contact-shell{align-items:start}
.contact-info{display:grid; gap:18px}
.contact-info h2{margin:16px 0 0; font-size:clamp(30px, 4.2vw, 54px); line-height:1.02; letter-spacing:-.05em}
.contact-info > div:not(.contact-note):not(.contact-card-grid):not(.messenger-strip):not(.info-duo-grid){color:var(--muted); font-size:18px}
.messenger-strip-top{margin-top:6px}
.info-duo-grid-contact .mini-card{min-height:100%}
.contact-form-card{position:relative; overflow:hidden}
.contact-form-card::before{content:''; position:absolute; inset:auto -80px -80px auto; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(72,85,255,.18), transparent 62%); pointer-events:none}
.contact-row{border-radius:22px; border:1px solid var(--line); box-shadow:var(--shadow)}
.contact-row:hover{transform:translateY(-2px); box-shadow:0 20px 60px rgba(0,0,0,.12)}

.compare-actions{margin-top:22px; display:flex; justify-content:flex-start}
/*
 * Модальное окно заказа.
 *
 * Ключевой момент — правило .compare-modal[hidden]{display:none} ниже.
 * Без него display:grid перебивал атрибут hidden, и окно с формой
 * висело поверх страницы постоянно.
 */
.compare-modal{
  position:fixed; inset:0; z-index:400;
  display:grid; place-items:center; padding:20px;
  opacity:0; transition:opacity .22s ease;
}
.compare-modal.is-open{opacity:1}
/* Запасной путь без JavaScript: переход по ссылке #id открывает окно. */
.compare-modal:target{opacity:1}
/* Класс с display перебивал браузерное [hidden]{display:none} — модалки висели поверх страницы всегда. */
.compare-modal[hidden]{display:none}
/* Идёт после [hidden], иначе запасной путь без JS не сработает. */
.compare-modal[hidden]:target{display:grid; opacity:1}

.compare-modal__backdrop{position:absolute; inset:0; background:rgba(8,8,14,.62); backdrop-filter:blur(6px)}
.compare-modal__dialog{
  position:relative; width:min(680px, 100%);
  max-height:min(calc(100dvh - 40px), 900px); overflow:auto; overscroll-behavior:contain;
  padding:34px; border-radius:30px;
  background:var(--dark); color:var(--light);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 120px rgba(0,0,0,.5);
  transform:translateY(12px) scale(.98); transition:transform .26s ease;
}
.compare-modal.is-open .compare-modal__dialog,
.compare-modal:target .compare-modal__dialog{transform:translateY(0) scale(1)}

.compare-modal__close{
  position:absolute; top:14px; right:14px; width:42px; height:42px;
  border:1px solid rgba(255,255,255,.16); border-radius:50%;
  background:rgba(255,255,255,.06); color:var(--light);
  font-size:24px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:.2s ease;
}
.compare-modal__close:hover{background:var(--acid); color:#111; border-color:var(--acid)}
.compare-modal__close:focus-visible{outline:2px solid var(--acid); outline-offset:2px}

/* Форма внутри тёмного окна. */
.compare-order-form .field span{color:#e2dbcf}
.compare-order-form .form-lead{color:#d5cec2}
.compare-order-form .form-head .section-label{color:var(--acid)}
.compare-order-form .field input,
.compare-order-form .field textarea{
  background:rgba(255,255,255,.06); color:var(--light);
  border:1px solid rgba(255,255,255,.12);
}
.compare-order-form .field input::placeholder,
.compare-order-form .field textarea::placeholder{color:rgba(255,255,255,.38)}
.compare-order-form .field input:focus,
.compare-order-form .field textarea:focus{
  box-shadow:inset 0 0 0 2px rgba(201,255,87,.4); background:rgba(255,255,255,.09);
}
.compare-order-form .form-actions p{display:none}
.compare-order-form .form-grid-compact{grid-template-columns:1fr 1fr}
.compare-order-form .form-actions .btn{width:100%; justify-content:center}

body.modal-open{overflow:hidden}

.contact-page-grid{align-items:start}
.archive-post-card .case-more-link{margin-top:14px}

@media (max-width: 980px){
  .header-actions{gap:10px}
  .header-phone span{display:none}
}
@media (max-width: 720px){
  .header-actions{width:100%; justify-content:flex-end}
  .header-phone{min-height:44px; padding:0 12px}
  /* .header-link здесь показывалась вопреки скрытию на 980px — убрано. */
  .service-link-strong{width:100%; justify-content:center}
  .services-bottom-link .btn{width:100%}
  .compare-modal{padding:12px}
  .compare-modal__dialog{padding:18px; border-radius:22px}
  .compare-order-form .form-grid-compact{grid-template-columns:1fr}
}

.header-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center}
.brand{min-width:0}
.brand strong{line-height:1.05}
.brand small{display:block; max-width:340px; white-space:normal; line-height:1.3}
.header-phone{white-space:nowrap; border-radius:20px}
.header-phone span{white-space:nowrap}
.header-actions{flex-wrap:nowrap}
.site-header .container{position:relative}

.services-archive-page{padding-top:0}
.services-archive-grid{grid-template-columns:repeat(2,1fr)}
.service-archive-card .portfolio-card-copy{display:grid; gap:14px}
.service-archive-topline{display:flex; align-items:center; justify-content:space-between; gap:12px}
.service-inline-icon{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:14px; background:rgba(72,85,255,.08)}
.service-inline-icon svg{width:18px; height:18px; color:var(--cobalt)}
.service-meta-static{margin-top:0}

.contact-shell{grid-template-columns:.56fr .44fr; gap:24px}
.contact-card-grid{align-items:stretch}
.contact-card-grid .contact-row{min-height:86px}
.contact-info .mini-card h3{margin:0 0 10px; font-size:22px; line-height:1.05}
.contact-info .mini-card p{margin:0; color:var(--muted)}
.compare-card .webivan-form{margin-top:18px}
.compare-card .form-head{margin-bottom:8px}
.compare-card .form-head .section-label{margin-bottom:12px}

@media (max-width: 1240px){
  .header-row{grid-template-columns:auto 1fr}
  .header-actions{grid-column:1 / -1; justify-content:flex-end}
}
@media (max-width: 980px){
  .services-archive-grid{grid-template-columns:1fr}
  .contact-shell{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .header-row{grid-template-columns:auto auto; gap:12px}
  .brand small{max-width:160px; font-size:11px}
  .header-actions{grid-column:auto; width:auto; justify-content:flex-end}
  .services-archive-grid{grid-template-columns:1fr}
  .service-archive-card .portfolio-card-image{height:220px}
}

/* =========================================================================
   v1.1.0 — доступность, мобильное меню, исправления вёрстки
   ====================================================================== */

/* --- Служебные --- */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:400;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto; clip:auto; margin:0;
  padding:12px 18px; border-radius:999px; background:var(--acid); color:#111;
  font-weight:800; box-shadow:var(--shadow);
}
:focus-visible{outline:3px solid var(--cobalt); outline-offset:2px}
.section-dark :focus-visible{outline-color:var(--acid)}

/* --- Hero-заголовок теперь H1/H2, а не div --- */
.hero-title{margin:24px 0 0; font-weight:900; letter-spacing:-.07em; line-height:.9}
h1.hero-title,h2.hero-title{font-size:inherit}
.hero-title .title-row{display:block; overflow:hidden}
.hero-title .title-row span{
  display:block; font-size:clamp(58px, 10vw, 124px); line-height:.9; font-weight:900; letter-spacing:-.07em;
}

/* --- Бургер и мобильная панель --- */
.nav-toggle{
  display:none; width:48px; height:48px; padding:0; border:1px solid var(--line);
  border-radius:14px; background:rgba(255,255,255,.5); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle__bar{display:block; width:20px; height:2px; background:var(--ink); transition:.2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-panel-actions{display:none}
.nav-backdrop{position:fixed; inset:0; z-index:129; background:rgba(8,8,14,.5); backdrop-filter:blur(4px)}
.nav-backdrop[hidden]{display:none}
body.nav-open{overflow:hidden}

/*
 * Страховка от повторения бага с мобильным меню.
 *
 * Любой transform на .site-header превращает position:fixed у вложенной
 * панели в position:absolute — панель уезжает за край экрана и тянет за
 * собой горизонтальную прокрутку. Анимацию шапки в theme.js убрали,
 * а это правило не даёт вернуть её случайно (например, из плагина).
 */
.site-header{transform:none !important}


/* --- Подвал --- */
.footer-row{flex-wrap:wrap; gap:18px}
.footer-meta{margin-top:6px; color:var(--muted); font-size:13px}
.footer-menu{display:flex; flex-wrap:wrap; gap:16px; margin:0; padding:0; list-style:none}
.footer-menu a{font-size:14px; opacity:.85}
.footer-menu a:hover{opacity:1}
.footer-socials{display:flex; flex-wrap:wrap; gap:14px; font-size:14px; font-weight:700}
.footer-socials a{border-bottom:1px solid var(--line)}

/* --- Сетки карточек: поле допускает 1–4 колонки --- */
.service-grid-one{display:grid; grid-template-columns:1fr; gap:18px}
.service-grid-four{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}

/* --- Тексты, вынесенные из <p> ради валидной вложенности --- */
.panel-intro p,.service-hero-lead p{margin:0 0 10px}
.panel-intro p:last-child,.service-hero-lead p:last-child{margin-bottom:0}
.service-hero-lead{margin:16px 0; max-width:720px; font-size:19px; color:#e2dbcf}
.panel-intro{color:var(--muted)}

/* --- Заголовок блока сравнения --- */
.compare-head{margin-bottom:22px}
.compare-head h1,.compare-head h2{margin:12px 0 0; font-size:clamp(28px,4vw,46px); line-height:1.04; letter-spacing:-.05em}
.compare-panel[hidden]{display:none}
.compare-steps h4{margin:10px 0 6px; font-size:18px; line-height:1.2}

/* --- Список шагов стал <ol> --- */
.timeline{list-style:none; margin:0; padding:0}
.timeline-item{list-style:none}

/* --- Цитата стала <blockquote> --- */
blockquote.board-quote{margin:0}

/* --- Формы --- */
.field-required{color:var(--cobalt); margin-left:2px}
.search-form{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px}
.search-field{
  flex:1 1 220px; min-height:52px; padding:0 16px; border-radius:16px;
  border:1px solid var(--line); background:#fff; font-size:15px;
}
.search-submit{min-height:52px}
.error-search{margin:22px 0; max-width:520px}
.error-search .search-field{background:rgba(255,255,255,.08); border-color:var(--line-dark); color:var(--light)}

/* --- Пагинация --- */
.navigation.pagination,nav.pagination{margin-top:40px}
.pagination .nav-links,ul.page-numbers{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; list-style:none; margin:0; padding:0;
}
ul.page-numbers li{list-style:none; margin:0}
a.page-numbers,span.page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:52px; min-height:52px;
  padding:0 16px; border-radius:16px; border:1px solid var(--line); background:#fff;
  font-weight:800; font-size:15px; color:var(--ink); transition:.2s ease;
}
a.page-numbers:hover{background:var(--ink); color:var(--light); border-color:transparent; transform:translateY(-2px)}
span.page-numbers.current{background:var(--acid); border-color:transparent; color:#111}
a.page-numbers.next,a.page-numbers.prev{padding:0 22px; font-weight:900; letter-spacing:.03em}
span.page-numbers.dots{border-color:transparent; background:transparent; min-width:32px}
.section-dark a.page-numbers,.section-dark span.page-numbers{
  background:rgba(255,255,255,.05); border-color:var(--line-dark); color:var(--light);
}

/* --- Комментарии --- */
.comments-area{margin-top:40px; padding-top:28px; border-top:1px solid var(--line)}
.comments-title{margin:0 0 18px; font-size:26px}
.comment-list{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:18px}
.comment-list ol{list-style:none; padding-left:22px}
.comment-body{padding:18px; border-radius:18px; background:#fff; border:1px solid var(--line)}
.comment-form{display:grid; gap:14px; max-width:640px}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%; min-height:52px; padding:12px 16px; border-radius:16px;
  border:1px solid var(--line); background:#fff; font:inherit;
}
.comment-form textarea{min-height:140px}

/* --- Cookie-баннер: появилась вторая кнопка --- */
.cookie-bar__actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.cookie-bar__decline{
  border:1px solid rgba(255,255,255,.24); background:transparent; color:#e6dfd3;
  min-height:48px; padding:0 16px; border-radius:999px; font-weight:700; cursor:pointer;
}
.cookie-bar__decline:hover{border-color:rgba(255,255,255,.5)}

/* --- Прочее --- */
.archive-description{margin-top:14px; color:#d8d1c5}
.article-pagelinks{margin-top:20px; font-weight:700}
.case-gallery{margin-top:24px}
.brand-copy{display:block; min-width:0}

@media (max-width: 980px){
  /* Навигация больше не исчезает — она уезжает в выдвижную панель. */
  .nav-toggle{display:flex}
  .main-nav{
    display:block; position:fixed; z-index:130; inset:0 0 0 auto;
    width:min(360px, 86vw); padding:96px 24px 32px;
    background:var(--paper); border-left:1px solid var(--line);
    box-shadow:-24px 0 60px rgba(0,0,0,.18);
    transform:translateX(100%); transition:transform .28s ease, visibility .28s;
    overflow-y:auto; overscroll-behavior:contain;
    /*
     * visibility в закрытом состоянии обязателен: без него уехавшая вправо
     * панель остаётся в потоке прокрутки и на телефоне появляется
     * горизонтальный скролл.
     */
    visibility:hidden;
  }
  .main-nav.is-open{transform:translateX(0); visibility:visible}
  .main-nav .menu-list{display:grid; gap:4px; margin:0; padding:0; list-style:none}
  .main-nav .menu-list a{display:block; padding:14px 0; font-size:18px; font-weight:700; opacity:1}
  .main-nav .menu-list a::after{display:none}
  .nav-panel-actions{display:grid; gap:10px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line)}
  .nav-panel-actions .btn{width:100%}
  .nav-panel-actions .btn-ghost{border-color:var(--line); color:var(--ink); background:rgba(255,255,255,.5)}
  .header-link{display:none}
  .service-grid-four{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 720px){
  /* Правило .menu-list{display:none} из старой версии здесь больше не действует. */
  .main-nav .menu-list{display:grid}
  .service-grid-four{grid-template-columns:1fr}
  .footer-row{flex-direction:column; align-items:flex-start}
  .hero-title .title-row span{font-size:56px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .orbit{animation:none}
}

/* =========================================================================
   Готовые решения: тарифы, сравнение, SEO-текст и форма заказа
   ====================================================================== */

.compare{padding:110px 0}
.compare-head{max-width:860px; margin:0 auto 46px; text-align:center}
.compare-head h1,.compare-head h2{
  margin:14px 0 0; font-size:clamp(32px,4.4vw,58px); line-height:1.02; letter-spacing:-.05em;
}
.compare-intro{margin-top:18px; font-size:19px; line-height:1.6; color:var(--muted)}
.section-dark .compare-intro{color:#d5cec2}

/* --- Карточки вариантов --- */
.plan-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; align-items:start}
.plan-card{
  position:relative; display:flex; flex-direction:column; gap:20px; height:100%;
  padding:34px 32px 32px; border-radius:32px; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow); transition:.25s ease;
}
.plan-card:hover{transform:translateY(-4px); box-shadow:0 30px 80px rgba(0,0,0,.14)}
.plan-card-featured{
  border-color:transparent;
  box-shadow:0 0 0 2px var(--acid), var(--shadow);
  background:linear-gradient(180deg,#fff 0%,#fcffef 100%);
}
.plan-badge{
  display:inline-flex; align-items:center; align-self:flex-start; padding:8px 14px;
  border-radius:999px; background:var(--ink); color:var(--light);
  font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
}
.plan-card-featured .plan-badge{background:var(--acid); color:#111}
.plan-title{margin:14px 0 0; font-size:clamp(24px,2.4vw,32px); line-height:1.06; letter-spacing:-.03em}
.plan-price{
  margin-top:12px; font-size:clamp(26px,3vw,38px); font-weight:900;
  letter-spacing:-.04em; color:var(--cobalt);
}
.plan-card-featured .plan-price{color:#111}
.plan-lead{color:var(--muted); font-size:16px; line-height:1.6}
.plan-lead p{margin:0 0 10px}
.plan-lead p:last-child{margin:0}

.plan-steps{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.plan-step{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start}
.plan-step__no{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:12px; background:var(--paper-2); color:var(--ink);
  font-size:12px; font-weight:900; letter-spacing:.04em;
}
.plan-card-featured .plan-step__no{background:rgba(201,255,87,.45)}
.plan-step__body strong{display:block; font-size:16px; line-height:1.3; margin-bottom:4px}
.plan-step__text{color:var(--muted); font-size:15px; line-height:1.55}
.plan-step__text p{margin:0}

.plan-card__actions{margin-top:auto; padding-top:8px}
.plan-card__actions .btn{width:100%}
.btn-outline{border:1.5px solid var(--ink); color:var(--ink); background:transparent}
.btn-outline:hover{background:var(--ink); color:var(--light)}

/* --- Таблица сравнения --- */
.compare-table-wrap{margin-top:56px; overflow-x:auto; border-radius:26px; border:1px solid var(--line); background:#fff}
.compare-table{width:100%; border-collapse:collapse; min-width:640px}
.compare-table th,.compare-table td{padding:18px 22px; text-align:left; border-bottom:1px solid var(--line-soft)}
.compare-table thead th{
  background:var(--paper-2); font-size:13px; font-weight:900;
  text-transform:uppercase; letter-spacing:.08em;
}
.compare-table tbody th{font-weight:800; color:var(--ink); width:34%}
.compare-table tbody td{color:var(--muted)}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:none}
.compare-table tbody tr:hover{background:var(--paper)}

/* --- SEO-текст --- */
.compare-seo{
  margin:56px auto 0; max-width:820px; padding:36px 38px;
  border-radius:28px; background:var(--paper-2); border:1px solid var(--line-soft);
}
.compare-seo h2,.compare-seo h3{margin:26px 0 12px; line-height:1.15; letter-spacing:-.03em}
.compare-seo h2:first-child,.compare-seo h3:first-child{margin-top:0}
.compare-seo p{margin:0 0 14px; line-height:1.7; color:var(--ink-2)}
.compare-seo ul,.compare-seo ol{margin:0 0 14px; padding-left:22px; line-height:1.7; color:var(--ink-2)}
.compare-seo li{margin-bottom:8px}

/* --- Полоса с призывом под таблицей --- */
.compare-cta-row{
  margin-top:48px; padding:28px 32px; border-radius:26px;
  background:linear-gradient(120deg, rgba(72,85,255,.08), rgba(201,255,87,.12));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.compare-cta-row__text{margin:0; font-size:18px; font-weight:600; color:var(--ink-2); max-width:640px}
.section-dark .compare-cta-row{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}
.section-dark .compare-cta-row__text{color:var(--light)}

/* --- Форма заказа внутри модалки --- */
.compare-order__copy{margin-bottom:22px; padding-right:44px}
.compare-order__copy h3{margin:14px 0 0; font-size:clamp(22px,2.4vw,30px); line-height:1.1; letter-spacing:-.03em; color:var(--light)}
.compare-order__lead{margin-top:12px; color:#d5cec2; line-height:1.6; font-size:15px}
.compare-order__lead p{margin:0 0 10px}
.compare-order-form .field span{color:#e2dbcf}
.compare-order-form .consent-copy{color:#c9c2b6; font-size:13px}
.compare-order-form .form-lead{color:#d5cec2}

/* --- Ответ формы без перезагрузки --- */
.form-response{display:none}
.form-response.is-visible,.form-response.is-pending{
  display:block; margin-bottom:18px; padding:16px 18px; border-radius:18px;
  font-size:15px; line-height:1.5; font-weight:700;
}
.form-response.is-success{background:rgba(201,255,87,.2); color:#2c4000; box-shadow:inset 0 0 0 1px rgba(201,255,87,.45)}
.form-response.is-error{background:rgba(255,120,120,.14); color:#7a1e1e; box-shadow:inset 0 0 0 1px rgba(255,120,120,.3)}
.compare-order-form .form-response.is-success,.service-order-form .form-response.is-success{color:#eaffb7}
.compare-order-form .form-response.is-error,.service-order-form .form-response.is-error{color:#ffd3d3}
[data-form-submit][disabled]{opacity:.65; cursor:progress}

@media (max-width: 980px){
  .compare{padding:80px 0}
  .plan-grid{grid-template-columns:1fr}
  .compare-cta-row{flex-direction:column; align-items:flex-start; padding:24px}
  .compare-cta-row .btn{width:100%}
}

@media (max-width: 720px){
  .compare-head{margin-bottom:32px; text-align:left}
  .plan-card{padding:26px 22px}
  .compare-seo{padding:26px 22px}
  .compare-order__copy{padding-right:36px}
  /* Таблица на телефоне разворачивается в карточки. */
  .compare-table{min-width:0}
  .compare-table thead{display:none}
  .compare-table tbody tr{display:block; padding:14px 0; border-bottom:1px solid var(--line-soft)}
  .compare-table tbody th{display:block; width:auto; padding:0 16px 8px; border:none}
  .compare-table tbody td{display:flex; justify-content:space-between; gap:16px; padding:6px 16px; border:none}
  .compare-table tbody td::before{content:attr(data-label); font-weight:800; color:var(--ink)}
}

.webivan-form.is-highlighted{
  animation:webivan-form-pulse 1.2s ease;
}
@keyframes webivan-form-pulse{
  0%{box-shadow:0 0 0 0 rgba(201,255,87,.55)}
  100%{box-shadow:0 0 0 22px rgba(201,255,87,0)}
}

/* =========================================================================
   Живой фон секций

   Мягкие «ауры» медленно дрейфуют за содержимым. Рисуются в псевдоэлементах
   секции, не перехватывают клики и полностью выключаются при
   prefers-reduced-motion. Анимируется только transform — компоновка
   не пересчитывается, поэтому на прокрутку это не влияет.
   ========================================================================= */

/*
 * Именно clip, а не hidden: overflow:hidden делает секцию контейнером
 * прокрутки и ломает position:sticky у боковых колонок (.sticky-col,
 * .process-intro, .sidebar-card). clip обрезает ауры и sticky не трогает.
 */
.section-dark,
.section-light{overflow:clip; isolation:isolate}

.section-dark::before,
.section-dark::after,
.section-light::before,
.section-light::after{
  content:''; position:absolute; z-index:-1;
  pointer-events:none; border-radius:50%;
  filter:blur(90px); will-change:transform;
}

.section-dark::before{
  width:52vw; height:52vw; max-width:760px; max-height:760px;
  top:-18%; right:-12%;
  background:radial-gradient(circle, rgba(72,85,255,.30), transparent 68%);
  animation:webivan-drift-a 26s ease-in-out infinite alternate;
}
.section-dark::after{
  width:40vw; height:40vw; max-width:600px; max-height:600px;
  bottom:-20%; left:-10%;
  background:radial-gradient(circle, rgba(201,255,87,.16), transparent 66%);
  animation:webivan-drift-b 32s ease-in-out infinite alternate;
}

.section-light::before{
  width:44vw; height:44vw; max-width:640px; max-height:640px;
  top:-16%; left:-12%;
  background:radial-gradient(circle, rgba(72,85,255,.11), transparent 68%);
  animation:webivan-drift-b 30s ease-in-out infinite alternate;
}
.section-light::after{
  width:36vw; height:36vw; max-width:520px; max-height:520px;
  bottom:-18%; right:-10%;
  background:radial-gradient(circle, rgba(201,255,87,.20), transparent 66%);
  animation:webivan-drift-a 34s ease-in-out infinite alternate;
}

@keyframes webivan-drift-a{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-7%, 9%, 0) scale(1.14)}
}
@keyframes webivan-drift-b{
  from{transform:translate3d(0,0,0) scale(1.08)}
  to{transform:translate3d(8%, -7%, 0) scale(1)}
}

/* Тонкая граница на стыке секций. */
.section-dark{border-top:1px solid rgba(255,255,255,.06)}

/* Мобильные: ауры мельче, чтобы не жечь батарею и не тормозить прокрутку. */
@media (max-width: 720px){
  .section-dark::before,
  .section-dark::after,
  .section-light::before,
  .section-light::after{filter:blur(60px); animation-duration:40s}
}

@media (prefers-reduced-motion: reduce){
  .section-dark::before,
  .section-dark::after,
  .section-light::before,
  .section-light::after{animation:none}
}

/* =========================================================================
   Фоновая геометрия секций
   ========================================================================= */

.shape-field{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:clip}
.shape{
  position:absolute; display:block; opacity:.16;
  animation:webivan-float var(--dur, 36s) ease-in-out var(--delay, 0s) infinite alternate;
  will-change:transform;
}
.shape svg{width:100%; height:100%; display:block}
.section-dark .shape{color:rgba(255,255,255,.55); opacity:.13}
.section-light .shape{color:var(--cobalt); opacity:.12}

/* Разные фигуры движутся по разным траекториям. */
.shape--square{animation-name:webivan-float-turn}
.shape--tri{animation-name:webivan-float-turn}
.shape--hex{animation-name:webivan-float-slow}
.shape--cross{animation-name:webivan-float-spin}

@keyframes webivan-float{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(18px,-26px,0)}
}
@keyframes webivan-float-turn{
  from{transform:translate3d(0,0,0) rotate(0deg)}
  to{transform:translate3d(-22px,20px,0) rotate(24deg)}
}
@keyframes webivan-float-slow{
  from{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  to{transform:translate3d(14px,24px,0) rotate(-18deg) scale(1.08)}
}
@keyframes webivan-float-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(180deg)}
}

/* Содержимое секций всегда выше фигур. */
.section-dark > .container,
.section-light > .container,
.hero-layout,
.services-head,
.service-tiles,
.services-foot{position:relative; z-index:1}

@media (max-width: 720px){
  /* На телефоне оставляем по две фигуры на блок — остальные только жгут батарею. */
  .shape:nth-child(n+3){display:none}
  .shape{opacity:.09}
}
@media (prefers-reduced-motion: reduce){
  .shape{animation:none}
}

/* =========================================================================
   Hero: орбиты, карточки-факты, смена строки
   ========================================================================= */

.hero-rotator{
  display:block; position:relative; margin-top:8px;
  font-size:clamp(22px, 3.4vw, 44px); line-height:1.1; font-weight:800; letter-spacing:-.03em;
  color:var(--acid);
}
.hero-rotator__item{
  position:absolute; left:0; top:0; width:100%;
  opacity:0; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease;
}
.hero-rotator__item.is-active{opacity:1; transform:translateY(0); position:relative}

/* --- Орбиты --- */
.hero-orbits{position:absolute; inset:0; z-index:1; pointer-events:none}
.hero-orbit{
  /* Центрируем явно: выравнивание абсолютных элементов в grid ведёт себя
     по-разному в браузерах, а кольцо должно точно совпасть с центром фото. */
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,.16);
  animation:webivan-orbit var(--spin, 30s) linear infinite;
}
.hero-orbit--inner{width:116%; aspect-ratio:1; --spin:28s}
.hero-orbit--outer{width:140%; aspect-ratio:1; --spin:44s; animation-direction:reverse}
.section-light .hero-orbit{border-color:rgba(18,18,18,.14)}

/* Слот выносится на край кольца, поворот задаётся индивидуальным углом. */
.hero-orbit__slot{position:absolute; left:50%; top:0; height:50%; transform-origin:bottom center; transform:rotate(var(--angle))}
.hero-orbit__chip{
  position:absolute; left:50%; top:0; translate:-50% -50%;
  padding:9px 14px; border-radius:999px; white-space:nowrap;
  background:var(--light); color:#111;
  font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  /* Встречное вращение держит текст горизонтальным. */
  animation:webivan-orbit-counter var(--spin, 30s) linear infinite;
}
.hero-orbit--outer .hero-orbit__chip{animation-direction:reverse}

@keyframes webivan-orbit{to{transform:rotate(360deg)}}
@keyframes webivan-orbit-counter{to{transform:rotate(-360deg)}}

/* Наведение притормаживает кольца, чтобы можно было прочитать. */
.hero-stage:hover .hero-orbit,
.hero-stage:hover .hero-orbit__chip{animation-duration:150s}

/* --- Всплывающие карточки --- */
.hero-facts{position:absolute; inset:0; z-index:4; pointer-events:none}
.hero-fact{
  position:absolute; display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:16px;
  background:rgba(20,20,20,.55); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18); color:var(--light);
  font-size:13px; font-weight:700; line-height:1.3; max-width:230px;
  box-shadow:0 18px 50px rgba(0,0,0,.3);
  opacity:0; transform:translateY(16px);
  animation:webivan-fact-in .7s ease forwards, webivan-fact-bob 7s ease-in-out infinite;
  animation-delay:calc(.5s + var(--i) * .55s), calc(1.2s + var(--i) * .55s);
}
.hero-fact:nth-child(1){left:-6%;  top:14%}
.hero-fact:nth-child(2){right:-8%; top:46%}
.hero-fact:nth-child(3){left:0%;   bottom:8%}
.hero-fact__icon{display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:9px; background:rgba(201,255,87,.18)}
.hero-fact__icon svg{width:15px; height:15px; color:var(--acid)}
.section-light .hero-fact{background:rgba(255,255,255,.8); border-color:var(--line); color:var(--ink)}

@keyframes webivan-fact-in{to{opacity:1; transform:translateY(0)}}
@keyframes webivan-fact-bob{
  0%,100%{margin-top:0}
  50%{margin-top:-9px}
}

@media (prefers-reduced-motion: reduce){
  .hero-orbit,.hero-orbit__chip,.portrait-frame::after{animation:none}
  .hero-fact{animation:webivan-fact-in .01s forwards}
}

@media (max-width: 1240px){
  .hero-fact{max-width:200px; font-size:12px}
  .hero-fact:nth-child(1){left:-2%}
  .hero-fact:nth-child(2){right:-2%}
}
@media (max-width: 980px){
  /* Орбитам и карточкам нужен воздух по бокам, которого на планшете уже нет. */
  .hero-orbits,.hero-facts{display:none}
  .hero-stage{width:min(100%, 460px)}
}

/* =========================================================================
   Услуги: плотный каталог вместо колонки панелей
   ========================================================================= */

.services-head{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:end;
  margin-bottom:36px;
}
.services-head h1,
.services-head h2{margin:14px 0 0; font-size:clamp(30px,3.6vw,52px); line-height:1.04; letter-spacing:-.05em}
.services-head__intro{color:var(--muted); font-size:17px; line-height:1.6}
.section-dark .services-head__intro{color:#d5cec2}

.service-tiles{
  display:grid; gap:14px;
  grid-template-columns:repeat(var(--cols, 4), minmax(0, 1fr));
}
.service-tile{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:22px 20px 18px; border-radius:22px;
  background:#fff; border:1px solid var(--line);
}
.section-dark .service-tile{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1)}

.service-tile__no{font-size:11px; font-weight:900; letter-spacing:.14em; color:var(--muted); opacity:.7}
.service-tile__icon{
  display:grid; place-items:center; width:44px; height:44px; border-radius:14px;
  background:rgba(72,85,255,.09);
}
.service-tile__icon svg{width:20px; height:20px; color:var(--cobalt)}
.section-dark .service-tile__icon{background:rgba(201,255,87,.12)}
.section-dark .service-tile__icon svg{color:var(--acid)}

.service-tile__title{margin:0; font-size:18px; line-height:1.2; letter-spacing:-.02em}
.service-tile__title a{color:inherit}
/* Кликабельна вся плитка, но в разметке остаётся одна честная ссылка. */
.service-tile__title a::after{content:''; position:absolute; inset:0; border-radius:inherit}
.service-tile__title a:hover{color:var(--cobalt)}
.section-dark .service-tile__title a:hover{color:var(--acid)}

.service-tile__text{margin:0; font-size:14px; line-height:1.5; color:var(--muted)}
.section-dark .service-tile__text{color:#c9c2b6}

.service-tile__foot{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.section-dark .service-tile__foot{border-top-color:rgba(255,255,255,.1)}
.service-tile__price{font-size:15px; letter-spacing:-.02em}
.service-tile__term{font-size:12px; color:var(--muted)}
.service-tile__arrow{
  margin-left:auto; display:grid; place-items:center; width:32px; height:32px;
  border-radius:50%; background:var(--ink); color:var(--light);
  transition:transform .25s ease, background .25s ease;
}
.service-tile__arrow svg{width:15px; height:15px}
.service-tile:hover .service-tile__arrow{transform:translate(2px,-2px); background:var(--cobalt)}
.section-dark .service-tile__arrow{background:var(--acid); color:#111}

.services-foot{
  margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center;
}

@media (max-width: 1240px){
  .service-tiles{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (max-width: 980px){
  .services-head{grid-template-columns:1fr; align-items:start}
  .service-tiles{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 560px){
  .service-tiles{grid-template-columns:1fr}
  .services-foot .btn{width:100%}
}

/* =========================================================================
   Лента статей
   ========================================================================= */

.blog-shell{position:relative; z-index:1}
.blog-swiper{overflow:hidden; padding-bottom:4px}
.blog-swiper .blog-card{
  height:auto; display:flex; flex-direction:column; gap:10px;
  padding:16px; border-radius:22px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.section-light .blog-swiper .blog-card{background:#fff; border-color:var(--line)}
.blog-swiper .blog-thumb{display:block; overflow:hidden; border-radius:16px; aspect-ratio:4/3}
.blog-swiper .blog-thumb img{width:100%; height:100%; object-fit:cover}
.blog-swiper .blog-card h3{margin:0; font-size:16px; line-height:1.25; letter-spacing:-.02em}
.blog-swiper .blog-card p{margin:0; font-size:13px; line-height:1.5; color:#c9c2b6}
.section-light .blog-swiper .blog-card p{color:var(--muted)}
.blog-swiper .case-more-link{margin-top:auto; padding-top:8px; font-size:13px}

.blog-slider-controls{
  margin-top:20px; display:flex; align-items:center; justify-content:center; gap:14px;
}
.blog-pagination{display:flex; gap:7px; align-items:center}
.blog-pagination .swiper-pagination-bullet{
  width:7px; height:7px; border-radius:999px; background:currentColor; opacity:.3;
  transition:width .25s ease, opacity .25s ease; cursor:pointer;
}
.blog-pagination .swiper-pagination-bullet-active{width:22px; opacity:1; background:var(--acid)}

@media (max-width: 560px){
  /* Две карточки в ряд — карточка становится компактной. */
  .blog-swiper .blog-card{padding:11px; border-radius:17px; gap:7px}
  .blog-swiper .blog-card h3{font-size:13.5px; line-height:1.3}
  .blog-swiper .blog-card p{display:none}
  .blog-swiper .blog-date{font-size:11px}
  .blog-swiper .case-more-link{font-size:12px}
}

/* =========================================================================
   Кнопка «Обсудить проект» в шапке
   ========================================================================= */

.header-link{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 22px; border-radius:999px;
  font-size:14px; font-weight:900; letter-spacing:.01em;
  color:#111; border:none;
  background:linear-gradient(135deg, var(--acid), #e4ff9d);
  box-shadow:0 10px 30px rgba(201,255,87,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.header-link:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(201,255,87,.5)}
.header-link__dot{
  width:8px; height:8px; border-radius:50%; background:#111; flex:none;
  animation:webivan-pulse-dot 2.2s ease-in-out infinite;
}
@keyframes webivan-pulse-dot{
  0%,100%{box-shadow:0 0 0 0 rgba(17,17,17,.45)}
  50%{box-shadow:0 0 0 7px rgba(17,17,17,0)}
}
@media (prefers-reduced-motion: reduce){
  .header-link__dot{animation:none}
}

.cta-modal__direct{
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  font-size:13px; color:#c9c2b6;
}
.cta-modal__direct a{color:var(--acid); font-weight:800; border-bottom:1px solid rgba(201,255,87,.4)}

/* =========================================================================
   Исправления 1.2.1

   Блок стоит в самом конце файла намеренно: медиазапросы не добавляют
   специфичности, поэтому базовые правила, дописанные ниже них, побеждали
   мобильные. Здесь порядок гарантирован.
   ========================================================================= */

/* --- 1. Подложка меню больше не накрывает саму панель ---
 *
 * .site-header имеет z-index:120 и isolation:isolate, то есть создаёт
 * контекст наложения. z-index:130 у панели действовал ТОЛЬКО внутри шапки и
 * не мог поднять её выше подложки, которая лежит соседним элементом с
 * z-index:129 в корневом контексте. В итоге затемнение с блюром красило
 * всю шапку вместе с открытым меню — текст становился серым и нечитаемым.
 * Подложку опускаем под шапку: страницу она затемняет по-прежнему.
 */
.nav-backdrop{z-index:110}

/* --- 2. Шапка на мобильных --- */
@media (max-width: 980px){
  /*
   * Зелёная кнопка перекочевала в панель меню (.nav-panel-actions), в шапке
   * на этой ширине она не нужна — вместе с телефоном и бургером она не
   * влезала в строку и ломала раскладку.
   */
  .header-link{display:none !important}

  .header-row{
    min-height:72px; gap:12px;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }
  .header-actions{grid-column:auto; width:auto; justify-content:flex-end; flex-wrap:nowrap; gap:8px}

  /* Подпись бренда в одну строку с обрезкой, а не в пять строк. */
  .brand small{
    max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .brand strong{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
}

@media (max-width: 720px){
  /* На узком экране подпись не читается всё равно — освобождаем место. */
  .brand small{display:none}
  .header-row{min-height:64px; grid-template-columns:minmax(0,1fr) auto}
  .brand{gap:10px}
  .brand-index{width:42px; height:42px; border-radius:12px; font-size:13px}
  .brand strong{font-size:13px; letter-spacing:.1em}

  /* Телефон остаётся иконкой-кружком: цифры сюда не влезают. */
  .header-phone{
    width:44px; min-height:44px; padding:0; justify-content:center; border-radius:50%;
  }
  .header-phone span{display:none}
  .nav-toggle{width:44px; height:44px}
}

/* --- 3. Карточки статей: фото вылезало за пределы карточки ---
 *
 * Базовый .blog-thumb рассчитан на крупную карточку сетки: отрицательные
 * margin -26px выносят картинку под края, а height:220px перебивает
 * aspect-ratio. В слайдере карточка меньше и с другими отступами, поэтому
 * оба свойства нужно сбросить явно.
 */
.blog-swiper .blog-thumb{
  margin:0; height:auto; aspect-ratio:16/10;
  border-radius:14px; border-bottom:none;
}
.blog-swiper .blog-thumb img{width:100%; height:100%; object-fit:cover; display:block}

/* Внутренние отступы базовой карточки тоже были под крупный вид. */
.blog-swiper .blog-card{padding:14px}
.blog-swiper .blog-date{margin-bottom:0}
.blog-swiper .blog-card h3{margin:0}
.blog-swiper .blog-card p{margin:0}

@media (max-width: 560px){
  .blog-swiper .blog-card{padding:10px; gap:6px}
  .blog-swiper .blog-thumb{aspect-ratio:1/1; border-radius:12px}
  .blog-swiper .blog-card h3{font-size:13px; line-height:1.25}
  .blog-swiper .blog-date{font-size:10px; letter-spacing:.08em}
}

/*
 * Бургер остаётся над открытой панелью.
 *
 * Панель лежит в том же контексте наложения, что и содержимое шапки, и с
 * z-index:130 закрывала кнопку — крестик был не виден, и закрыть меню можно
 * было только тапом по затемнению. Поднимаем кнопку выше панели.
 */
body.nav-open .nav-toggle{position:relative; z-index:140}
body.nav-open .nav-toggle{background:transparent; border-color:transparent}

/* =========================================================================
   Блок SEO-текста

   Единственный блок темы, рассчитанный на длинный связный текст. Ширина
   строки ограничена: читать абзацы во всю ширину контейнера тяжело.
   ========================================================================= */

.seo-text{padding:96px 0}
.seo-text__head{margin-bottom:32px; max-width:820px}
.seo-text__head h1,
.seo-text__head h2{margin:14px 0 0; font-size:clamp(28px,3.4vw,48px); line-height:1.06; letter-spacing:-.05em}

.seo-text__layout{display:grid; gap:32px}
.seo-text__layout.has-aside{grid-template-columns:minmax(0,1fr) 340px; align-items:start}

.seo-text__body{max-width:76ch; font-size:17px; line-height:1.7; color:var(--ink-2)}
.section-dark .seo-text__body{color:#d5cec2}

.seo-text__body > *:first-child{margin-top:0}
.seo-text__body p{margin:0 0 16px}
.seo-text__body h3{
  margin:32px 0 12px; font-size:clamp(20px,2.2vw,26px); line-height:1.2;
  letter-spacing:-.03em; color:var(--ink);
}
.section-dark .seo-text__body h3{color:var(--light)}
.seo-text__body ul,
.seo-text__body ol{margin:0 0 18px; padding-left:0; list-style:none; display:grid; gap:10px}
.seo-text__body li{position:relative; padding-left:26px}
/* Маркер — кислотная точка вместо стандартного диска. */
.seo-text__body ul li::before{
  content:''; position:absolute; left:6px; top:11px;
  width:7px; height:7px; border-radius:50%; background:var(--acid);
  box-shadow:0 0 0 3px rgba(201,255,87,.25);
}
.seo-text__body ol{counter-reset:seo}
.seo-text__body ol li{counter-increment:seo}
.seo-text__body ol li::before{
  content:counter(seo); position:absolute; left:0; top:0;
  font-size:13px; font-weight:900; color:var(--cobalt);
}
.seo-text__body strong{color:var(--ink); font-weight:800}
.section-dark .seo-text__body strong{color:var(--light)}
.seo-text__body a{color:var(--cobalt); text-decoration:underline; text-underline-offset:2px}

/* Две колонки для длинного текста без врезки. */
.seo-text__body.is-two-col{max-width:none; columns:2; column-gap:44px}
.seo-text__body.is-two-col h3{break-after:avoid}
.seo-text__body.is-two-col p,
.seo-text__body.is-two-col li{break-inside:avoid}

/* --- Врезка --- */
.seo-text__aside{
  position:sticky; top:110px;
  padding:26px; border-radius:24px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
  display:grid; gap:12px;
}
.section-dark .seo-text__aside{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}
.seo-text__aside h3{margin:0; font-size:19px; line-height:1.25; letter-spacing:-.02em}
.seo-text__aside p{margin:0; font-size:15px; line-height:1.6; color:var(--muted)}
.section-dark .seo-text__aside p{color:#c9c2b6}
.seo-text__aside .btn{width:100%; min-height:50px; margin-top:4px}

.seo-text__cta{margin-top:28px}

@media (max-width: 1240px){
  .seo-text__layout.has-aside{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width: 980px){
  .seo-text{padding:72px 0}
  .seo-text__layout.has-aside{grid-template-columns:1fr}
  /* Врезка перестаёт липнуть, когда встаёт под текст. */
  .seo-text__aside{position:static}
  .seo-text__body.is-two-col{columns:1}
}
@media (max-width: 720px){
  .seo-text{padding:56px 0}
  .seo-text__body{font-size:16px}
  .seo-text__body h3{margin-top:26px}
  .seo-text__cta .btn,
  .seo-text__aside .btn{width:100%}
}

/* =========================================================================
   Готовые решения и разработки
   ========================================================================= */

/* --- Полоса ниш --- */
.niche-strip{padding:34px 0}
.niche-strip__list{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.niche-strip__list a{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 16px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  font-size:14px; font-weight:700; color:var(--ink);
  transition:border-color .2s ease, transform .2s ease;
}
.niche-strip__list a:hover{border-color:var(--cobalt); transform:translateY(-2px)}
.niche-strip__list em{
  font-style:normal; font-size:11px; font-weight:900;
  padding:2px 7px; border-radius:999px; background:var(--paper-2); color:var(--muted);
}
.section-dark .niche-strip__list a{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:var(--light)}
.section-dark .niche-strip__list em{background:rgba(255,255,255,.1); color:#c9c2b6}

/* --- Сетка решений --- */
.solutions-archive,
.solutions-block{padding:90px 0}
.solution-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.solution-card{
  position:relative; display:flex; flex-direction:column;
  border-radius:26px; overflow:hidden;
  background:#fff; border:1px solid var(--line);
}
.section-dark .solution-card{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1)}

.solution-card__shot{
  position:relative; display:block; aspect-ratio:4/3; overflow:hidden;
  background:var(--paper-2);
}
.solution-card__shot img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.solution-card:hover .solution-card__shot img{transform:scale(1.04)}
.solution-card__placeholder{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--paper-2), var(--paper-3));
}
.solution-card__placeholder svg{width:46px; height:46px; color:var(--cobalt); opacity:.5}

/* Число проектов на превью — самое сильное доказательство в каталоге. */
.solution-card__proof{
  position:absolute; left:12px; bottom:12px;
  padding:7px 12px; border-radius:999px;
  background:rgba(13,13,13,.82); color:var(--light);
  font-size:11px; font-weight:800; letter-spacing:.04em;
  backdrop-filter:blur(6px);
}

.solution-card__body{display:flex; flex-direction:column; gap:10px; padding:20px; flex:1}
.solution-card__niches{display:flex; flex-wrap:wrap; gap:6px}
.solution-card__niches span{
  padding:4px 10px; border-radius:999px; background:rgba(72,85,255,.09);
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--cobalt);
}
.section-dark .solution-card__niches span{background:rgba(201,255,87,.12); color:var(--acid)}

.solution-card__title{margin:0; font-size:19px; line-height:1.2; letter-spacing:-.025em}
.solution-card__title a{color:inherit}
.solution-card__title a:hover{color:var(--cobalt)}
.section-dark .solution-card__title a:hover{color:var(--acid)}

.solution-card__text{margin:0; font-size:14px; line-height:1.5; color:var(--muted)}
.section-dark .solution-card__text{color:#c9c2b6}

.solution-card__foot{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft);
}
.section-dark .solution-card__foot{border-top-color:rgba(255,255,255,.1)}
.solution-card__price{font-size:18px; letter-spacing:-.02em}
.solution-card__term{font-size:12px; color:var(--muted)}

.solution-card__actions{display:flex; gap:8px; flex-wrap:wrap}
.solution-card__actions .btn{min-height:46px; padding:0 18px; font-size:13px; flex:1}
.solution-card__demo{display:inline-flex; align-items:center; gap:7px; flex:0 0 auto}
.solution-card__demo svg{width:15px; height:15px}

/* --- Первый экран решения --- */
.solution-hero{padding:44px 0 84px}
.solution-hero__layout{
  display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
}
.solution-hero__copy h1{margin:16px 0 0; font-size:clamp(32px,4.6vw,62px); line-height:1.02; letter-spacing:-.05em}
.solution-hero__niches{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.solution-hero__niches a{
  padding:6px 13px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  font-size:12px; font-weight:800; color:var(--light);
}
.solution-hero__niches a:hover{background:var(--acid); color:#111; border-color:var(--acid)}
.solution-hero__lead{margin-top:18px; max-width:60ch; font-size:18px; line-height:1.6; color:#e2dbcf}
.solution-hero__lead p{margin:0 0 12px}

.solution-hero__buy{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:24px}
.solution-hero__price{display:grid; gap:2px}
.solution-hero__price strong{font-size:clamp(26px,3vw,38px); line-height:1; letter-spacing:-.04em; color:var(--acid)}
.solution-hero__price span{font-size:13px; color:#b8b1a5}
.solution-hero__term{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 16px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-size:14px; font-weight:700; color:var(--light);
}
.solution-hero__term svg{width:17px; height:17px; color:var(--acid)}
.solution-hero__demo-note{margin-top:12px; font-size:13px; color:#a49d92}
.solution-demo-btn{display:inline-flex; align-items:center; gap:9px}
.solution-demo-btn svg{width:16px; height:16px}

.solution-hero__visual{
  border-radius:28px; overflow:hidden;
  border:1px solid rgba(255,255,255,.1); box-shadow:var(--shadow-dark);
}
.solution-hero__visual img{display:block; width:100%; height:auto}

/* --- Функционал --- */
.solution-features{padding:90px 0}
.solution-features__grid{display:grid; gap:16px; grid-template-columns:repeat(3, minmax(0,1fr))}
.solution-feature{
  display:grid; gap:10px; align-content:start;
  padding:24px; border-radius:22px;
  background:#fff; border:1px solid var(--line);
}
.section-dark .solution-feature{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1)}
.solution-feature__icon{
  display:grid; place-items:center; width:44px; height:44px;
  border-radius:14px; background:rgba(72,85,255,.09);
}
.solution-feature__icon svg{width:20px; height:20px; color:var(--cobalt)}
.solution-feature h3{margin:0; font-size:17px; line-height:1.25; letter-spacing:-.02em}
.solution-feature p{margin:0; font-size:14px; line-height:1.55; color:var(--muted)}
.section-dark .solution-feature p{color:#c9c2b6}

/* --- Скриншоты --- */
.solution-shots{padding:90px 0}
.solution-shots__grid{display:grid; gap:16px; grid-template-columns:repeat(3, minmax(0,1fr))}
.solution-shots__item{
  display:block; border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); background:#111;
}
.solution-shots__item img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.section-light .solution-shots__item{border-color:var(--line); background:#fff}

/* --- Характеристики --- */
.solution-specs{padding:90px 0}
.solution-specs__layout{display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:start}
.solution-specs__table h2,
.solution-specs__includes h2{margin:0 0 18px; font-size:clamp(24px,3vw,36px); line-height:1.05; letter-spacing:-.04em}
.solution-specs__table dl{margin:0; display:grid; gap:0}
.solution-specs__table dl > div{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.solution-specs__table dt{margin:0; font-size:14px; color:var(--muted)}
.solution-specs__table dd{margin:0; font-size:15px; font-weight:700; color:var(--ink)}

.solution-specs__includes{
  padding:26px; border-radius:24px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
  position:sticky; top:110px;
}
.solution-specs__includes ul{margin:0 0 20px; padding:0; list-style:none; display:grid; gap:11px}
.solution-specs__includes li{position:relative; padding-left:26px; font-size:15px; line-height:1.5}
.solution-specs__includes li::before{
  content:''; position:absolute; left:4px; top:8px; width:8px; height:8px;
  border-radius:50%; background:var(--acid); box-shadow:0 0 0 3px rgba(201,255,87,.25);
}
.solution-specs__includes .btn{width:100%}

/* --- Проекты на решении --- */
.solution-projects{padding:90px 0}
.solution-projects__grid{display:grid; gap:16px; grid-template-columns:repeat(3, minmax(0,1fr))}
.solution-project{
  display:grid; gap:0; border-radius:22px; overflow:hidden;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:var(--light);
}
.section-light .solution-project{background:#fff; border-color:var(--line); color:var(--ink)}
.solution-project__image{display:block; aspect-ratio:16/10; overflow:hidden; background:#111}
.solution-project__image img{width:100%; height:100%; object-fit:cover}
.solution-project__body{display:grid; gap:5px; padding:18px}
.solution-project__body strong{font-size:16px; line-height:1.25; letter-spacing:-.02em}
.solution-project__body em{font-style:normal; font-size:12px; color:#a49d92}
.section-light .solution-project__body em{color:var(--muted)}
.solution-project__link{margin-top:6px; font-size:13px; font-weight:800; color:var(--acid)}
.section-light .solution-project__link{color:var(--cobalt)}

/* --- Призыв в конце разделов --- */
.solutions-cta{padding:80px 0}
.solutions-cta__shell{
  display:grid; grid-template-columns:1.3fr .7fr; gap:32px; align-items:center;
}
.solutions-cta__shell h2{margin:14px 0 0; font-size:clamp(26px,3.4vw,44px); line-height:1.05; letter-spacing:-.045em}
.solutions-cta__shell p{margin:14px 0 0; color:#d5cec2; line-height:1.6; max-width:62ch}
.solutions-cta__actions{display:grid; gap:10px}
.solutions-cta__actions .btn{width:100%}

/* --- Блок решений на главной --- */
.solutions-block__niches{
  margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  font-size:14px;
}
.solutions-block__niches > span{font-weight:800; color:var(--muted)}
.section-dark .solutions-block__niches > span{color:#a49d92}
.solutions-block__niches a{
  padding:6px 12px; border-radius:999px; border:1px solid var(--line);
  font-weight:700; color:var(--ink);
}
.section-dark .solutions-block__niches a{border-color:rgba(255,255,255,.14); color:var(--light)}
.solutions-block__niches a:hover{border-color:var(--acid); color:var(--acid)}

/* --- Разработки --- */
.devwork-archive{padding:90px 0}
.devwork-grid{display:grid; gap:18px; grid-template-columns:repeat(3, minmax(0,1fr))}
.devwork-card{
  display:grid; gap:12px; align-content:start;
  padding:24px; border-radius:24px;
  background:#fff; border:1px solid var(--line);
}
.section-dark .devwork-card{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1)}
.devwork-card__top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.devwork-card__icon{
  display:grid; place-items:center; width:46px; height:46px;
  border-radius:14px; background:#111; color:var(--acid);
}
.devwork-card__icon svg{width:21px; height:21px}

/* Статус кодируется цветом: платная — акцент, в разработке — приглушённый. */
.devwork-card__status{
  padding:5px 12px; border-radius:999px;
  font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  background:var(--paper-2); color:var(--muted);
}
.devwork-card.is-paid .devwork-card__status,
.devwork-card__status.is-paid{background:var(--acid); color:#111}
.devwork-card.is-free .devwork-card__status,
.devwork-card__status.is-free{background:rgba(72,85,255,.12); color:var(--cobalt)}
.devwork-card.is-wip .devwork-card__status,
.devwork-card__status.is-wip{background:rgba(18,18,18,.07); color:var(--muted)}

.devwork-card__title{margin:0; font-size:18px; line-height:1.25; letter-spacing:-.02em}
.devwork-card__title a{color:inherit}
.devwork-card__title a:hover{color:var(--cobalt)}
.devwork-card__text{margin:0; font-size:14px; line-height:1.55; color:var(--muted)}
.devwork-card__meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:2px}
.devwork-card__platform{
  padding:4px 11px; border-radius:999px; border:1px solid var(--line);
  font-size:11px; font-weight:800; color:var(--ink-2);
}
.devwork-card__version{font-family:ui-monospace,Consolas,monospace; font-size:12px; color:var(--muted)}
.devwork-card__price{margin-left:auto; font-size:16px; letter-spacing:-.02em}

.devwork-hero{padding:44px 0 84px}
.devwork-hero__layout{display:grid; gap:28px}
.devwork-hero__layout h1{margin:16px 0 0; font-size:clamp(30px,4.4vw,58px); line-height:1.03; letter-spacing:-.05em}
.devwork-hero__tags{display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:14px}
.devwork-hero__tags .devwork-card__platform{border-color:rgba(255,255,255,.2); color:var(--light)}
.devwork-hero__specs{display:flex; flex-wrap:wrap; gap:26px; margin-top:24px}
.devwork-hero__specs span{display:grid; gap:3px; font-size:12px; color:#a49d92}
.devwork-hero__specs strong{font-size:16px; color:var(--light); letter-spacing:-.01em}

/* --- Адаптив --- */
@media (max-width: 1240px){
  .solution-grid,
  .solution-features__grid,
  .solution-shots__grid,
  .solution-projects__grid,
  .devwork-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 980px){
  .solution-hero__layout{grid-template-columns:1fr}
  .solution-specs__layout{grid-template-columns:1fr}
  /* Врезка перестаёт липнуть, когда встаёт под таблицу. */
  .solution-specs__includes{position:static}
  .solutions-cta__shell{grid-template-columns:1fr}
  .solutions-archive,
  .solutions-block,
  .solution-features,
  .solution-shots,
  .solution-specs,
  .solution-projects,
  .devwork-archive{padding:70px 0}
}
@media (max-width: 720px){
  .solution-grid,
  .solution-features__grid,
  .solution-shots__grid,
  .solution-projects__grid,
  .devwork-grid{grid-template-columns:1fr}
  .solution-card__actions .btn{width:100%; flex:1 1 100%}
  .solution-hero{padding:20px 0 60px}
  .devwork-hero{padding:20px 0 60px}
  .solution-hero__buy{gap:14px}
  .niche-strip__list{gap:8px}
  .niche-strip__list a{padding:9px 13px; font-size:13px}
}