/* Longlivety B2B — статические страницы.
   Дизайн-система общая с longlivety.pro: парчмент, Fraunces, Inter Tight, teal.
   Без JS: декор — только CSS. */
/* Шрифты свои: подмножества под набор символов сайта.
   Внешних запросов нет — ни лишних соединений, ни передачи IP посетителя наружу.
   Fraunces кириллицы не содержит (её нет в самом шрифте), русский текст
   заголовков падает в Times New Roman — так же, как на longlivety.pro.
   Начертания Fraunces italic и Inter Tight italic не подключены: замер
   показал, что они не рисуют ни одного глифа. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 600;font-display:swap;src:url('fonts/fraunces.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300 600;font-display:swap;src:url('fonts/inter-tight.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('fonts/jetbrains-mono.woff2') format('woff2')}


:root{
  --bg:#F4F1EA; --bg-deep:#ECE6D8; --card:#FBF8F1;
  --ink:#1A1F1C; --ink-2:#3E4540; --ink-3:#4B5C46;
  --line:#D9D2BF; --line-soft:#E5DFCD;
  --teal:#0F4D44; --teal-bright:#1E7A6E; --teal-glow:#4FB3A4; --amber:#C97B3D;
  --serif:"Fraunces","Times New Roman",serif;
  --sans:"Inter Tight",-apple-system,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --wrap:1120px; --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.65 var(--sans);
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
}
/* тёплые подсветки + зерно — как на основном сайте */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 60% at 15% 18%, rgba(15,77,68,.055), transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 28%, rgba(201,123,61,.045), transparent 60%),
    radial-gradient(ellipse 50% 60% at 50% 88%, rgba(15,77,68,.04), transparent 60%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
header,main,footer{position:relative; z-index:2}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

/* ── шапка ── */
.top{position:sticky; top:0; z-index:20; background:rgba(244,241,234,.94); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line-soft)}
.top .wrap{display:flex; align-items:center; gap:22px; height:66px}
.logo{display:flex; align-items:baseline; gap:8px; font:400 21px/1 var(--serif); color:var(--ink); text-decoration:none; white-space:nowrap}
.logo .mark{width:26px; height:26px; display:block; align-self:center; flex:0 0 auto}
.logo small{font:500 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
/* семь пунктов: интервал поджат, иначе кнопка призыва выдавливается за край */
.nav{display:flex; gap:16px; margin-left:auto; white-space:nowrap}
.nav a{font-size:14.5px; color:var(--ink-2); text-decoration:none; padding:6px 0; border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--teal); border-bottom-color:var(--teal-glow)}

/* ── типографика ── */
h1,h2,h3{font-family:var(--serif); font-weight:300; letter-spacing:-.02em; color:var(--ink); margin:0}
h1{font-size:clamp(31px,5.2vw,68px); line-height:1.06; letter-spacing:-.03em}
h2{font-size:clamp(28px,3.4vw,46px); line-height:1.1; margin-bottom:14px}
h3{font-size:20px; font-weight:400; line-height:1.3}
em{font-style:italic; color:var(--teal); font-weight:400}
p{margin:0 0 16px; max-width:74ch}
.lead{font-size:19px; line-height:1.6; color:var(--ink-2); max-width:70ch}
a{color:var(--teal); text-underline-offset:3px; text-decoration-thickness:1px}
strong{font-weight:600}
.eyebrow{display:inline-block; font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--teal)}
.crumbs{font:400 13.5px/1 var(--mono); color:var(--ink-3); letter-spacing:.02em}
.crumbs a{color:var(--ink-3)}

section{padding:82px 0; border-top:1px solid var(--line-soft); display:flow-root}
section:first-of-type{border-top:0}
/* только вертикаль: сокращённая запись обнуляла боковые отступы .wrap */
.hero{padding-top:64px; padding-bottom:30px}


/* ── кнопки ── */
.btn{display:inline-flex; align-items:center; gap:9px; min-height:46px; padding:12px 24px; border-radius:999px;
  background:var(--teal); color:#fff; font:500 15px/1 var(--sans); text-decoration:none; border:1px solid var(--teal);
  transition:background .2s ease, transform .2s ease}
.btn:hover{background:#0c3f38; transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--teal)}
.btn.ghost:hover{background:rgba(15,77,68,.06)}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

/* ── карточки ── */
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r); padding:26px 24px}
.card h3{margin-bottom:9px}
.card p{margin:0; font-size:15.5px; line-height:1.58; color:var(--ink-2)}
.num{display:block; font:400 italic 20px/1 var(--serif); color:var(--teal-bright); margin-bottom:12px}

/* ── таблицы ── */
.tw{overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--r); background:var(--card)}
table{width:100%; border-collapse:collapse; font-size:15.5px; min-width:560px}
th,td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top}
th{font:500 11px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); background:rgba(236,230,216,.5)}
tr:last-child td{border-bottom:0}
.num-cell{font-variant-numeric:tabular-nums; white-space:nowrap}

/* ── списки ── */
ul.clean{list-style:none; padding:0; margin:0}
ul.clean li{position:relative; padding-left:26px; margin-bottom:13px; max-width:74ch; color:var(--ink-2)}
ul.clean li::before{content:""; position:absolute; left:4px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--teal-glow)}
ul.clean li strong{color:var(--ink)}

/* ── вопрос-ответ ── */
.qa{padding:22px 0; border-bottom:1px solid var(--line-soft)}
.qa:last-child{border-bottom:0}
.qa h3{font-size:18.5px; margin-bottom:8px}
.qa p{margin:0; color:var(--ink-2); font-size:16px}

/* ── врезки ── */
.note{border-left:2px solid var(--teal-glow); background:var(--card); border-radius:0 var(--r) var(--r) 0; padding:20px 24px; margin:26px 0}
.note p{margin:0; font-size:16px; color:var(--ink-2)}
.note.limit{border-left-color:var(--amber)}


/* ── призыв ── */
.cta{background:var(--teal); color:#fff; border-radius:20px; padding:48px 44px; margin-top:14px}
.cta h2{color:#fff; margin-bottom:12px}
.cta p{color:rgba(255,255,255,.84); max-width:62ch}
.cta .btn{background:#fff; color:var(--teal); border-color:#fff; margin-top:10px}
.cta .btn:hover{background:#EFEDE6}

/* ── подвал ── */
footer{border-top:1px solid var(--line-soft); padding:44px 0 60px; color:var(--ink-3); font-size:14.5px}
footer .cols{display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between}
footer a{color:var(--ink-2); text-decoration:none} footer a:hover{color:var(--teal)}
.disclaimer{margin-top:26px; padding-top:20px; border-top:1px solid var(--line-soft); max-width:82ch; line-height:1.55}

/* ── мягкое появление только для декора, не для текста ── */
@media (prefers-reduced-motion:no-preference){
  .hero-art,.shot img{animation:up .8s cubic-bezier(.16,1,.3,1) both}
}
@keyframes up{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

@media (max-width:1080px){ .nav{gap:13px} .nav a{font-size:13.5px} .logo small{display:none} }
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} .hero-art{order:-1} .g3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .nav{display:none}
  section{padding:56px 0}
  .g2,.g3{grid-template-columns:1fr}
  .cta{padding:34px 24px}
  body{font-size:16.5px}
}

/* ── роутер по ролям: с чего начать ── */
.g4{grid-template-columns:repeat(4,1fr)}
.role{display:block; background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:24px 22px; text-decoration:none; color:inherit; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease}
.role:hover{border-color:var(--teal-glow); transform:translateY(-2px); box-shadow:0 14px 34px -20px rgba(15,77,68,.4)}
.role .who{font:500 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin-bottom:14px}
.role h3{font-size:19px; margin-bottom:8px}
.role .q{margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-3)}
.narrow{max-width:78ch}
@media (max-width:1080px){ .g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .g4{grid-template-columns:1fr} }

/* герой: воздух между заголовком и лидом */
.hero h1{margin-bottom:26px}
.hero .eyebrow{margin-bottom:26px; max-width:52ch; line-height:1.5}
.hero .lead{font-size:18.5px}

/* ── герой: текст во всю ширину, дерево мелким акцентом в углу ── */
.hero{position:relative}

.hero h1{max-width:none}

.hero .lead{max-width:66ch}

/* ── кадры: небольшие, сбоку от текста ── */
figure{margin:0}
.split{display:grid; grid-template-columns:1fr 430px; gap:44px; align-items:center; padding:38px 0; border-top:1px solid var(--line-soft)}
.split:first-of-type{border-top:0}
.split > div h3{font-size:22px; margin-bottom:10px}
.split > div p{margin:0; color:var(--ink-2); font-size:16.5px; max-width:52ch}
.split.rev{grid-template-columns:430px 1fr}
.split.rev > div{order:2} .split.rev figure{order:1}
.shot img{display:block; width:100%; height:auto; filter:drop-shadow(0 14px 30px rgba(26,31,28,.12))}
.shot.phone img{max-width:211px; margin-inline:auto; filter:drop-shadow(0 18px 34px rgba(26,31,28,.20))}
.shot figcaption{margin-top:12px; font-size:14px; line-height:1.5; color:var(--ink-3)}
.shot.side{float:right; width:340px; margin:6px 0 22px 30px}
@media (max-width:900px){
  .split,.split.rev{grid-template-columns:1fr; gap:24px; padding:28px 0}
  .split.rev > div{order:1} .split.rev figure{order:2}
  .shot.side{float:none; width:100%; max-width:420px; margin:22px 0}
  
}

/* подвал: ссылки столбиком */
footer .cols > div{display:flex; flex-direction:column; gap:9px}
footer .cols > div:first-child{gap:14px; max-width:36ch}

/* кадры: плотнее, телефон в узкой колонке */
.split{gap:38px; padding:32px 0; align-items:center}
.split.phone-row{grid-template-columns:1fr 250px}
.split.phone-row.rev{grid-template-columns:250px 1fr}
@media (max-width:900px){ .split.phone-row,.split.phone-row.rev{grid-template-columns:1fr} }


/* ── врезанные кадры: не выпускать float из секции, не подпирать заголовки ── */
h2{clear:both}
.shot.side + ul.clean, .shot.side + p{margin-top:0}
.shot.side figcaption{max-width:340px}
.crumbs{display:block; padding-top:26px}

/* неразрывное «ИИ-инфраструктура» только там, где строка это выдержит */
@media (min-width:900px){ .hero h1 .nb{white-space:nowrap} }
/* герой на узком экране: дерево под кнопками, не под текстом */


/* планшет: шапка не влезает с кнопкой — навигация важнее, призыв есть в тексте */
@media (max-width:960px){ .top .btn{display:none} }

/* ── секция кадров: ровные ряды, подпись под каждым ── */
.split{grid-template-columns:1fr 400px}
.split.rev{grid-template-columns:400px 1fr}
.split.phone-row{grid-template-columns:1fr 196px}
.split.phone-row.rev{grid-template-columns:196px 1fr}
.shot.phone img{max-width:158px}
.shot figcaption{text-align:left}
.split .shot figcaption{margin-top:10px}
.split.phone-row .shot figcaption{text-align:center}
@media (max-width:900px){
  .split,.split.rev,.split.phone-row,.split.phone-row.rev{grid-template-columns:1fr}
  .shot.phone img{max-width:200px}
}

/* ── призыв: дерево справа, на тёмном оно и было нарисовано ── */
.cta{position:relative; overflow:hidden}
.cta > *{position:relative; z-index:1}

@media (max-width:900px){ .cta-leaf{display:none} }


/* ── телефон: навигация не исчезает, а переносится второй строкой ── */
@media (max-width:640px){
  .top{position:static}
  .top .wrap{flex-wrap:wrap; height:auto; padding-top:14px; padding-bottom:13px; gap:11px 18px}
  .logo{flex:1 1 100%}
  .nav{display:flex; flex-wrap:wrap; width:100%; gap:10px 18px}
  .nav a{font-size:14px}
}

/* ════ КАДРЫ СИСТЕМЫ — крупно, целиком, на подложке ════ */

/* подложка вокруг кадра */
.shot{background:var(--bg-deep); border:1px solid var(--line-soft); border-radius:22px; padding:20px}
.shot img{display:block; width:100%; height:auto; border-radius:12px;
  box-shadow:0 22px 48px -26px rgba(26,31,28,.45); filter:none}
.shot figcaption{margin:16px 4px 2px; font-size:13.5px; line-height:1.5; color:var(--ink-3); text-align:left}

/* крупный кадр во всю ширину под героем */
.shot-hero{padding-top:16px; padding-bottom:76px; border-top:0}
.shot.wide{padding:26px}
.shot.wide figcaption{text-align:center; margin-top:18px}

/* ряд: узкий текст — широкий кадр */
.split{grid-template-columns:.85fr 1.3fr; gap:52px; padding:40px 0; align-items:center}
.split.rev{grid-template-columns:1.3fr .85fr}
.split > div p{max-width:44ch}

/* телефон — тоже целиком, в своей подложке */
.split.phone-row,.split.phone-row.rev{grid-template-columns:.85fr 1.3fr}
.split.phone-row.rev{grid-template-columns:1.3fr .85fr}
.shot.phone{display:flex; flex-direction:column; align-items:center}
.shot.phone img{max-width:286px; border-radius:0; box-shadow:none;
  filter:drop-shadow(0 22px 40px rgba(26,31,28,.26))}
.shot.phone figcaption{text-align:center}

@media (max-width:900px){
  .split,.split.rev,.split.phone-row,.split.phone-row.rev{grid-template-columns:1fr; gap:26px}
  .split > div p{max-width:none}
  .shot{padding:14px; border-radius:18px}
  .shot.wide{padding:14px}
  .shot.phone img{max-width:240px}
  .shot.side{float:none; width:100%; max-width:none; margin:24px 0}
  .shot-hero{padding-bottom:52px}
}
/* врезанные кадры на внутренних страницах — крупнее, но только там, где есть место */
@media (min-width:901px){ .shot.side{float:right; width:430px; margin:6px 0 26px 34px} }
@media (max-width:900px){ .shot.side{float:none; width:auto; max-width:none; margin:24px 0} }

/* ════ ДЕРЕВЬЯ ════
   в герое — в стеклянной сфере (сфера, блик и тень вплавлены в картинку:
   CSS-filter здесь нельзя, он выносит слой и зерно body::after даёт квадрат);
   поле кадра шире сферы: иначе мягкая тень упирается в границу и срезается;
   дерево занимает 70.9% кадра, поэтому 330px кадра = 234px дерева — как было;
   в блоке призыва — исходный рисунок без подложки */
/* right в ноль: у кадра 38px прозрачного поля под тень, отрицательный отступ
   выталкивал страницу вширь на узких экранах */
.hero-leaf{position:absolute; right:0; bottom:-10px; width:330px; height:auto}
.cta-leaf{position:absolute; z-index:0; right:14px; top:50%; transform:translateY(-50%);
  width:268px; height:auto; opacity:.5; pointer-events:none}
@media (max-width:900px){ .cta-leaf{display:none} }
@media (max-width:640px){ .hero-leaf{width:172px; right:0; bottom:-4px} }

/* текст героя выше декора без вынесения дерева в отдельный слой */
.hero > .eyebrow, .hero > h1, .hero > .lead, .hero > p{position:relative; z-index:1}

/* ── шар и текст шапки не должны пересекаться ──
   ≥1024px шар помещается справа от текста; уже — уходит под текст,
   поэтому шапке добавляется нижнее поле ровно под его высоту */
@media (min-width:1024px){ .hero{min-height:312px} }
@media (min-width:641px) and (max-width:1023px){
  .hero{padding-bottom:252px}
  .hero-leaf{width:240px}
}
@media (max-width:640px){
  .hero{padding-bottom:184px}
}
}

/* ── шапка внутренней страницы ──
   у «Инфраструктуры» и «Безопасности» подзаголовок на строку длиннее (331px против 312),
   поэтому шар, привязанный к низу шапки, вставал ниже. Привязываем его к верху —
   верх шапки у всех разделов одинаков, и положение совпадает независимо от длины текста */
.hero-sub{padding-top:26px}
@media (min-width:1024px){
  .hero-sub .hero-leaf{top:-8px; bottom:auto}
}

/* ════ ОКНО СВЯЗИ ════
   Открывается по :target — без JavaScript. Пока окно закрыто, оно
   display:none, поэтому не видно ни глазами, ни программе чтения экрана
   и ссылки внутри не попадают в обход клавиатурой. */
.modal{position:fixed; inset:0; z-index:60; display:none}
.modal:target{display:flex; align-items:center; justify-content:center; padding:24px}
.modal-veil{position:absolute; inset:0; background:rgba(26,31,28,.52); backdrop-filter:blur(3px)}
.modal-box{position:relative; z-index:1; width:100%; max-width:420px;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:32px 30px 26px; box-shadow:0 40px 90px -40px rgba(26,31,28,.55);
  animation:modal-in .22s cubic-bezier(.16,1,.3,1) both}
@keyframes modal-in{from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .modal-box{animation:none} }
.modal-box h2{font-size:27px; margin-bottom:8px}
.modal-lead{font-size:15px; line-height:1.5; color:var(--ink-2); margin-bottom:22px; max-width:none}
.modal-x{position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font:400 24px/1 var(--sans);
  color:var(--ink-3); text-decoration:none; transition:background .18s ease, color .18s ease}
.modal-x:hover,.modal-x:focus-visible{background:var(--bg-deep); color:var(--ink)}

.ch{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:13px 16px; margin-bottom:9px; border:1px solid var(--line-soft); border-radius:11px;
  background:var(--bg); text-decoration:none; color:var(--ink);
  transition:border-color .18s ease, transform .18s ease, background .18s ease}
.ch:last-of-type{margin-bottom:0}
.ch:hover,.ch:focus-visible{border-color:var(--teal-glow); background:#fff; transform:translateY(-1px)}
.ch-k{font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--teal); flex:0 0 auto}
.ch-v{font-size:15.5px; font-variant-numeric:tabular-nums; text-align:right}

@media (max-width:640px){
  .modal-box{padding:28px 22px 22px; border-radius:16px}
  .modal-box h2{font-size:24px}
  .ch{flex-direction:column; align-items:flex-start; gap:5px}
  .ch-v{text-align:left; font-size:16.5px}
}

/* ── карточки-роутера: видно, что это переход, и куда именно ── */
.role{display:flex; flex-direction:column}
.role .q{flex:1 1 auto; margin-bottom:16px}
.go{display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font:500 13.5px/1.3 var(--sans); color:var(--teal); text-align:left;
  border-bottom:1px solid rgba(15,77,68,.28); padding-bottom:2px;
  transition:gap .18s ease, border-color .18s ease}
.go::after{content:"→"; font-size:14px; line-height:1}
.role:hover .go,.role:focus-visible .go{gap:11px; border-bottom-color:var(--teal)}
.role:focus-visible{outline:2px solid var(--teal); outline-offset:3px}

/* ── перечень направлений: это список, а не предложение на 43 слова ── */
.tags{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:18px 0 22px}
.tags li{font:400 13.5px/1.3 var(--sans); color:var(--ink-2);
  background:var(--card); border:1px solid var(--line-soft); border-radius:999px; padding:7px 14px}

/* ── карточки людей: имя крупнее рубрики, иначе иерархия перевёрнута ── */
.card .who{font:500 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal); margin-bottom:14px}
h3.person{font-size:24px; margin-bottom:14px}

/* ссылка-переход вне карточки роутера */
p > .go{font-size:15px}