/* ============================================================
Локальный ИИ — страница для it-shluz.ru
Все селекторы ограничены обёрткой .ai-page: конфликтов
с токенами и классами основного сайта нет.
Разметка: ...
Тема наследуется от атрибута data-theme на — как на сайте.
============================================================ */
/* ============================================================
Локальный ИИ — страница для it-shluz.ru
Токены дизайн-системы совпадают с основным сайтом
============================================================ */
/* ---------- Единственное правило вне .ai-page ----------
Отступ для якорных переходов, чтобы заголовки не заезжали
под шапку сайта. Значение = высота шапки + высота .ai-subnav.
Если на сайте уже задан scroll-padding-top — эту строку удалить. */
/* 85px — фактическая высота шапки it-shluz.ru, 54px — высота .ai-subnav. */
html{scroll-padding-top:139px}
.ai-page *, .ai-page *::before, .ai-page *::after{margin:0;padding:0;box-sizing:border-box}
/* ---------- Защита от глобальных стилей сайта ----------
Нейтрализует правила вида h2{...}, table{...}, ul{...}, объявленные
в основной таблице стилей it-shluz.ru и наследуемые внутрь страницы. */
.ai-page h1,.ai-page h2,.ai-page h3,.ai-page h4{color:inherit;margin:0;padding:0;
font-family:var(--font-heading);font-weight:500;line-height:1.18;letter-spacing:-.015em;text-transform:none}
.ai-page p,.ai-page figure,.ai-page blockquote{margin:0;padding:0;color:inherit}
.ai-page ul,.ai-page ol,.ai-page li{margin:0;padding:0;list-style:none}
.ai-page table{border:0;border-collapse:collapse;margin:0}
.ai-page th,.ai-page td{background:none}
.ai-page a{color:inherit;text-decoration:none;background:none}
.ai-page a::after,.ai-page a::before{content:none}
.ai-page button{font:inherit;color:inherit;background:none;border:0;margin:0;text-align:left}
.ai-page img,.ai-page svg{max-width:100%}
.ai-page section{margin:0;background:none}
.ai-page [hidden]{display:none!important}
.ai-page{--dark-900:#030F0F; --dark-800:#021A1A; --dark-700:#042222; --dark-600:#06302C;
--primary-700:#03624C; --primary-600:#17876E; --primary-500:#2CC295;
--accent:#00DF82;
--light-300:#AACBC4; --light-100:#F1F7F7; --gray:#6F7D7D;
--warn:#B87A14;
--font-heading:'Unbounded','Montserrat',system-ui,sans-serif;
--font-body:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
--container-max:1240px;
--pad:88px; --pad-mobile:56px;
--ease:cubic-bezier(.2,.9,.3,1);
--t-fast:140ms var(--ease);
--t-base:220ms var(--ease);
--fs-h1:clamp(30px,1.3rem + 2.2vw,50px);
--fs-h2:clamp(23px,1.1rem + 1.1vw,32px);
--fs-h3:clamp(18px,1rem + .4vw,21px);
--fs-lead:clamp(15px,.9rem + .25vw,17px);
--r-sm:4px; --r-md:8px; --r-lg:12px;
--bg:var(--light-100);
--surface:#ffffff;
--surface-2:#FAFCFC;
--text:var(--dark-900);
--muted:var(--gray);
--line:rgba(3,15,15,.11);
--line-2:rgba(3,15,15,.20);
--accent-text:var(--primary-700);}
[data-theme="dark"] .ai-page{--bg:var(--dark-900);
--surface:var(--dark-800);
--surface-2:#031212;
--text:var(--light-100);
--muted:#8FA5A2;
--line:rgba(241,247,247,.13);
--line-2:rgba(241,247,247,.24);
--accent-text:var(--accent);}
@media (prefers-color-scheme:dark){
html:not([data-theme="light"]) .ai-page{--bg:var(--dark-900);
--surface:var(--dark-800);
--surface-2:#031212;
--text:var(--light-100);
--muted:#8FA5A2;
--line:rgba(241,247,247,.13);
--line-2:rgba(241,247,247,.24);
--accent-text:var(--accent);}
}
.ai-page{font-family:var(--font-body);background:var(--bg);color:var(--text);
font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
transition:background .3s,color .3s;}
.ai-page a{color:inherit}
.ai-page h1, .ai-page h2, .ai-page h3, .ai-page h4{font-family:var(--font-heading);font-weight:500;line-height:1.18;letter-spacing:-.015em}
.ai-page b, .ai-page strong{font-weight:600}
.ai-page .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.ai-page .container{max-width:var(--container-max);margin:0 auto;padding:0 28px}
.ai-page section{padding:var(--pad) 0}
@media(max-width:768px){
.ai-page section{padding:var(--pad-mobile) 0}
.ai-page .container{padding:0 20px}
}
.ai-page .rule{border-top:1px solid var(--line)}
/* ---------- Верхняя панель ---------- */
/* ---------- Кнопки ---------- */
.ai-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:var(--font-body);font-weight:600;font-size:14.5px;text-decoration:none;
border:1px solid transparent;cursor:pointer;border-radius:var(--r-md);
padding:14px 26px;line-height:1.3;transition:background var(--t-base),color var(--t-base),border-color var(--t-base);}
.ai-page .btn-primary{background:var(--primary-700);color:#fff}
.ai-page .btn-primary:hover{background:var(--dark-600)}
[data-theme="dark"] .ai-page .btn-primary{background:var(--accent);color:var(--dark-900)}
[data-theme="dark"] .ai-page .btn-primary:hover{background:var(--primary-500)}
.ai-page .btn-line{background:transparent;border-color:var(--line-2);color:var(--text)}
.ai-page .btn-line:hover{border-color:var(--text)}
.ai-page .btn-sm{font-size:13px;padding:10px 18px}
/* ---------- Заголовки секций ---------- */
.ai-page .head{max-width:60ch;margin-bottom:44px}
.ai-page .eyebrow{display:flex;align-items:center;gap:12px;
font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
color:var(--muted);margin-bottom:18px;}
.ai-page .eyebrow::before{content:"";width:26px;height:1px;background:var(--line-2);flex-shrink:0}
.ai-page .head h2{font-size:var(--fs-h2);margin-bottom:0}
.ai-page .head p{font-size:var(--fs-lead);color:var(--muted);margin-top:16px;line-height:1.65;max-width:62ch}
/* ---------- Hero ---------- */
.ai-page .hero{padding:80px 0 72px;border-bottom:1px solid var(--line)}
.ai-page .hero-in{max-width:820px}
.ai-page .hero .eyebrow{margin-bottom:22px}
.ai-page .hero h1{font-size:var(--fs-h1);margin-bottom:22px;font-weight:500}
.ai-page .hero h1 em{font-style:normal;color:var(--accent-text)}
.ai-page .hero-lead{font-size:var(--fs-lead);color:var(--muted);max-width:64ch;margin-bottom:34px;line-height:1.7}
.ai-page .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:56px}
.ai-page .hero-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));border-top:1px solid var(--line)}
.ai-page .fact{padding:22px 24px 0 0;border-right:1px solid var(--line)}
.ai-page .fact:last-child{border-right:none}
@media(max-width:760px){
.ai-page .fact{border-right:none;border-bottom:1px solid var(--line);padding:18px 0}
.ai-page .fact:last-child{border-bottom:none}
}
.ai-page .fact b{display:block;font-family:var(--font-heading);font-size:22px;font-weight:500;line-height:1.15;margin-bottom:6px;font-variant-numeric:tabular-nums}
.ai-page .fact span{font-size:12.5px;color:var(--muted);line-height:1.45;display:block}
/* ---------- Селектор конфигураций ---------- */
.ai-page .selector{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:0}
@media(max-width:980px){
.ai-page .selector{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
.ai-page .selector{grid-template-columns:1fr}
}
.ai-page .sel{position:relative;text-align:left;cursor:pointer;font-family:var(--font-body);
background:var(--surface);border:none;border-right:1px solid var(--line);
padding:22px 20px 20px;color:var(--text);transition:background var(--t-base);}
.ai-page .sel:last-child{border-right:none}
@media(max-width:980px){
.ai-page .sel{border-bottom:1px solid var(--line)}
}
.ai-page .sel::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent-text);opacity:0;transition:opacity var(--t-base)}
.ai-page .sel:hover{background:var(--surface-2)}
.ai-page .sel[aria-selected="true"]{background:var(--surface-2)}
.ai-page .sel[aria-selected="true"]::before{opacity:1}
.ai-page .sel-name{display:block;font-family:var(--font-heading);font-size:17px;font-weight:500;letter-spacing:.01em;margin-bottom:9px}
.ai-page .sel-price{display:block;font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.ai-page .sel[aria-selected="true"] .sel-price{color:var(--accent-text)}
.ai-page .sel-note{display:block;font-size:11.5px;color:var(--muted);margin-top:5px}
/* ---------- Панель конфигурации ---------- */
.ai-page .panel[hidden]{display:none}
.ai-page .panel{border:1px solid var(--line);border-top:none;
border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--surface);
display:grid;grid-template-columns:1fr 320px;}
@media(max-width:900px){
.ai-page .panel{grid-template-columns:1fr}
}
.ai-page .panel-main{padding:38px 36px}
@media(max-width:600px){
.ai-page .panel-main{padding:26px 20px}
}
.ai-page .panel-main h3{font-size:var(--fs-h3);margin-bottom:12px}
.ai-page .panel-main > p{font-size:15px;color:var(--muted);line-height:1.65;margin-bottom:30px;max-width:64ch}
.ai-page .metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:30px}
@media(max-width:620px){
.ai-page .metrics{grid-template-columns:repeat(2,1fr)}
}
.ai-page .metrics div{padding:16px 18px 16px 0;border-right:1px solid var(--line)}
.ai-page .metrics div:last-child{border-right:none}
@media(max-width:620px){
.ai-page .metrics div:nth-child(2n){border-right:none}
.ai-page .metrics div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
.ai-page .metrics b{display:block;font-family:var(--font-heading);font-size:16px;font-weight:500;line-height:1.2;margin-bottom:4px;font-variant-numeric:tabular-nums}
.ai-page .metrics span{font-size:11.5px;color:var(--muted)}
.ai-page .spec{list-style:none;display:grid;gap:0;margin-bottom:30px}
.ai-page .spec li{display:grid;grid-template-columns:14px 1fr;gap:12px;font-size:14.5px;line-height:1.6;color:var(--muted);padding:11px 0;border-bottom:1px solid var(--line)}
.ai-page .spec li:first-child{border-top:1px solid var(--line)}
.ai-page .spec li::before{content:"";width:6px;height:1px;background:var(--line-2);margin-top:11px}
.ai-page .spec li b{color:var(--text)}
.ai-page .lab{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:14px}
.ai-page .chips{display:flex;flex-wrap:wrap;gap:6px}
.ai-page .chip{padding:6px 12px;border-radius:var(--r-sm);border:1px solid var(--line);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ai-page .panel-side{border-left:1px solid var(--line);padding:38px 32px;background:var(--surface-2)}
@media(max-width:900px){
.ai-page .panel-side{border-left:none;border-top:1px solid var(--line);padding:28px 20px}
}
.ai-page .side-price{font-family:var(--font-heading);font-size:27px;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}
.ai-page .side-sub{font-size:12px;color:var(--muted);margin-top:9px;line-height:1.5}
.ai-page .panel-side .btn{width:100%;margin-top:22px}
.ai-page .side-note{font-size:13px;color:var(--muted);line-height:1.6;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.ai-page .side-note b{color:var(--text)}
/* ---------- Таблицы ---------- */
.ai-page .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
.ai-page table{border-collapse:collapse;width:100%;min-width:640px;font-size:13.5px;background:var(--surface)}
.ai-page thead th{background:var(--surface-2);text-align:left;padding:15px 18px;font-weight:600;font-size:11.5px;
text-transform:uppercase;letter-spacing:.1em;color:var(--muted);white-space:nowrap;
border-bottom:1px solid var(--line);font-family:var(--font-heading);}
.ai-page tbody td, .ai-page tbody th{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;line-height:1.5;color:var(--muted)}
.ai-page tbody th{font-weight:600;white-space:nowrap;color:var(--text)}
.ai-page tbody tr:last-child td, .ai-page tbody tr:last-child th{border-bottom:none}
.ai-page .row-key td, .ai-page .row-key th{background:var(--surface-2);color:var(--text);font-weight:600}
.ai-page .tbl-note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.6}
/* ---------- Состав поставки ---------- */
.ai-page .scope{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;border-top:1px solid var(--line)}
@media(max-width:820px){
.ai-page .scope{grid-template-columns:1fr;gap:0}
}
.ai-page .scope-item{padding:26px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.ai-page .scope-ico{width:22px;height:22px;color:var(--accent-text);flex-shrink:0;margin-top:2px}
.ai-page .scope-ico svg{width:22px;height:22px;display:block}
.ai-page .scope-item h3{font-size:15.5px;margin-bottom:7px;font-family:var(--font-body);font-weight:600;letter-spacing:0}
.ai-page .scope-item p{font-size:14px;color:var(--muted);line-height:1.6}
/* ---------- Задачи ---------- */
.ai-page .cases{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:900px){
.ai-page .cases{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
.ai-page .cases{grid-template-columns:1fr}
}
.ai-page .case{padding:30px 28px;background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background var(--t-base)}
.ai-page .case:hover{background:var(--surface-2)}
.ai-page .case h3{font-size:16px;margin-bottom:9px;font-family:var(--font-body);font-weight:600;letter-spacing:0}
.ai-page .case p{font-size:13.5px;color:var(--muted);line-height:1.6}
.ai-page .case-ico{color:var(--accent-text);margin-bottom:16px;display:block}
.ai-page .case-ico svg{width:24px;height:24px;display:block}
@media(min-width:901px){
.ai-page .case:nth-child(3n){border-right:none}
.ai-page .case:nth-child(n+4){border-bottom:none}
}
@media(max-width:900px) and (min-width:561px){
.ai-page .case:nth-child(2n){border-right:none}
.ai-page .case:nth-child(n+5){border-bottom:none}
}
@media(max-width:560px){
.ai-page .case{border-right:none}
.ai-page .case:last-child{border-bottom:none}
}
/* ---------- Тёмная панель Spark ---------- */
.ai-page .dark-panel{background:var(--dark-900);color:var(--light-100);border-radius:var(--r-lg);border:1px solid rgba(241,247,247,.12);overflow:hidden}
.ai-page .dp-in{padding:48px 44px}
@media(max-width:640px){
.ai-page .dp-in{padding:30px 22px}
}
.ai-page .dp-top{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:start;padding-bottom:36px;border-bottom:1px solid rgba(241,247,247,.12)}
@media(max-width:900px){
.ai-page .dp-top{grid-template-columns:1fr;gap:28px}
}
.ai-page .dark-panel .eyebrow{color:#8FA5A2}
.ai-page .dark-panel .eyebrow::before{background:rgba(241,247,247,.24)}
.ai-page .dark-panel h2{font-size:var(--fs-h3);margin-bottom:14px;color:var(--light-100)}
.ai-page .dark-panel h3{font-size:15.5px;margin-bottom:9px;color:var(--light-100);font-family:var(--font-body);font-weight:600;letter-spacing:0}
.ai-page .dark-panel p{color:#8FA5A2;font-size:14.5px;line-height:1.7}
.ai-page .dp-nums{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(241,247,247,.12)}
.ai-page .dp-nums div{padding:16px 16px 16px 0;border-right:1px solid rgba(241,247,247,.12);border-bottom:1px solid rgba(241,247,247,.12)}
.ai-page .dp-nums div:nth-child(2n){border-right:none}
.ai-page .dp-nums div:nth-child(n+3){border-bottom:none}
.ai-page .dp-nums b{display:block;font-family:var(--font-heading);font-size:19px;font-weight:500;color:var(--accent);line-height:1.15;font-variant-numeric:tabular-nums}
.ai-page .dp-nums span{font-size:11.5px;color:#8FA5A2}
.ai-page .dp-uses{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding:36px 0;border-bottom:1px solid rgba(241,247,247,.12)}
@media(max-width:820px){
.ai-page .dp-uses{grid-template-columns:1fr;gap:24px}
}
.ai-page .dp-limit{padding:28px 0;border-bottom:1px solid rgba(241,247,247,.12);display:grid;grid-template-columns:auto 1fr;gap:18px}
.ai-page .dp-limit .bar{width:2px;background:var(--warn);border-radius:2px}
.ai-page .dp-limit p{color:#8FA5A2}
.ai-page .dp-limit b{color:var(--light-100)}
.ai-page .dp-farm{padding-top:36px}
.ai-page .dp-tbl-wrap{overflow-x:auto;margin-top:20px}
.ai-page .dp-tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px;background:transparent}
.ai-page .dp-tbl th, .ai-page .dp-tbl td{padding:13px 16px 13px 0;border-bottom:1px solid rgba(241,247,247,.11);text-align:left;color:#8FA5A2}
.ai-page .dp-tbl thead th{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#6E8582;font-weight:600;font-family:var(--font-heading)}
.ai-page .dp-tbl tbody th{font-weight:600;white-space:nowrap;color:var(--light-100)}
.ai-page .dp-tbl tr:last-child td, .ai-page .dp-tbl tr:last-child th{border-bottom:none}
.ai-page .dp-tbl .lead-val{color:var(--accent);font-weight:600}
.ai-page .dark-panel .btn-line{border-color:rgba(241,247,247,.24);color:var(--light-100)}
.ai-page .dark-panel .btn-line:hover{border-color:var(--accent);color:var(--accent)}
/* ---------- Границы ---------- */
.ai-page .duo{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:860px){
.ai-page .duo{grid-template-columns:1fr}
}
.ai-page .duo-col{padding:34px 32px;background:var(--surface)}
.ai-page .duo-col:first-child{border-right:1px solid var(--line)}
@media(max-width:860px){
.ai-page .duo-col:first-child{border-right:none;border-bottom:1px solid var(--line)}
}
@media(max-width:600px){
.ai-page .duo-col{padding:26px 20px}
}
.ai-page .duo-col h3{font-size:16px;margin-bottom:6px;font-family:var(--font-body);font-weight:600;letter-spacing:0}
.ai-page .duo-col > .sub{font-size:12.5px;color:var(--muted);margin-bottom:22px}
.ai-page .duo ul{list-style:none;display:grid}
.ai-page .duo li{display:grid;grid-template-columns:16px 1fr;gap:13px;font-size:14px;line-height:1.6;color:var(--muted);padding:13px 0;border-top:1px solid var(--line)}
.ai-page .duo li b{color:var(--text)}
.ai-page .mk{width:16px;height:16px;margin-top:3px;color:var(--accent-text)}
.ai-page .no .mk{color:var(--warn)}
.ai-page .mk svg{width:16px;height:16px;display:block}
/* ---------- Этапы ---------- */
.ai-page .steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
@media(max-width:920px){
.ai-page .steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:540px){
.ai-page .steps{grid-template-columns:1fr}
}
.ai-page .step{padding:28px 28px 28px 0;border-right:1px solid var(--line)}
.ai-page .step:last-child{border-right:none}
@media(max-width:920px){
.ai-page .step:nth-child(2n){border-right:none}
.ai-page .step:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:540px){
.ai-page .step{border-right:none;border-bottom:1px solid var(--line);padding:24px 0}
.ai-page .step:last-child{border-bottom:none}
}
.ai-page .step-n{font-family:var(--font-heading);font-size:12px;font-weight:600;color:var(--accent-text);letter-spacing:.1em;margin-bottom:14px;display:block}
.ai-page .step h3{font-size:15.5px;margin-bottom:8px;font-family:var(--font-body);font-weight:600;letter-spacing:0}
.ai-page .step p{font-size:13.5px;color:var(--muted);line-height:1.6}
.ai-page .step-time{display:block;margin-top:14px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:12px;border-top:1px solid var(--line)}
/* ---------- Сопровождение ---------- */
.ai-page .tiers{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:860px){
.ai-page .tiers{grid-template-columns:1fr}
}
.ai-page .tier{padding:34px 30px;background:var(--surface);border-right:1px solid var(--line)}
.ai-page .tier:last-child{border-right:none}
@media(max-width:860px){
.ai-page .tier{border-right:none;border-bottom:1px solid var(--line)}
.ai-page .tier:last-child{border-bottom:none}
}
.ai-page .tier.mark{background:var(--surface-2);position:relative}
.ai-page .tier.mark::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent-text)}
.ai-page .tier-name{font-family:var(--font-heading);font-size:17px;font-weight:500;margin-bottom:16px}
.ai-page .tier-rate{font-family:var(--font-heading);font-size:34px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.ai-page .tier-rate small{display:block;font-family:var(--font-body);font-size:12px;font-weight:500;color:var(--muted);margin-top:10px;line-height:1.5}
.ai-page .tier ul{list-style:none;margin-top:24px;display:grid}
.ai-page .tier li{font-size:13.5px;color:var(--muted);line-height:1.55;padding:11px 0;border-top:1px solid var(--line)}
/* ---------- Врезка ---------- */
.ai-page .callout{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:26px 0;margin-top:32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ai-page .callout .bar{width:2px;background:var(--accent-text);border-radius:2px}
.ai-page .callout p{font-size:14.5px;line-height:1.7;color:var(--muted)}
.ai-page .callout b{color:var(--text)}
/* ---------- CTA и подвал ---------- */
.ai-page .cta{background:var(--dark-900);color:var(--light-100);border-radius:var(--r-lg);padding:56px 48px;border:1px solid rgba(241,247,247,.12)}
@media(max-width:640px){
.ai-page .cta{padding:36px 24px}
}
.ai-page .cta-in{max-width:620px}
.ai-page .cta h2{font-size:var(--fs-h2);margin-bottom:16px;color:var(--light-100)}
.ai-page .cta p{color:#8FA5A2;font-size:var(--fs-lead);margin-bottom:32px;line-height:1.7}
.ai-page .cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.ai-page .cta .btn-primary{background:var(--accent);color:var(--dark-900)}
.ai-page .cta .btn-primary:hover{background:var(--primary-500)}
.ai-page .cta .btn-line{border-color:rgba(241,247,247,.24);color:var(--light-100)}
.ai-page .cta .btn-line:hover{border-color:var(--accent);color:var(--accent)}
.ai-page .foot{border-top:1px solid var(--line);padding:36px 0 44px;font-size:13px;color:var(--muted)}
.ai-page .foot-in{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:baseline;padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:22px}
.ai-page .foot a{color:var(--text);text-decoration:none;font-weight:600}
.ai-page .foot a:hover{color:var(--accent-text)}
.ai-page .legal{font-size:11.5px;color:var(--muted);line-height:1.7;max-width:110ch}
/* ---------- Навигация по разделам страницы ----------
Ставится под шапкой сайта. Значение top подогнать под её высоту. */
.ai-page{padding-top:85px} /* шапка сайта position:fixed, иначе первый экран уезжает под неё */
.ai-page .ai-subnav{position:sticky;top:85px;z-index:60;background:rgba(241,247,247,.94);
background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
html[data-theme="dark"] .ai-page .ai-subnav{background:rgba(3,15,15,.94);background:color-mix(in srgb,var(--bg) 94%,transparent)}
.ai-page .ai-subnav-in{max-width:var(--container-max);margin:0 auto;padding:0 28px;height:54px;
display:flex;align-items:center;gap:26px;overflow-x:auto;scrollbar-width:none}
.ai-page .ai-subnav-in::-webkit-scrollbar{display:none}
.ai-page .ai-subnav a{font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;
white-space:nowrap;transition:color var(--t-fast)}
.ai-page .ai-subnav a:hover{color:var(--text)}
.ai-page .ai-subnav .btn{margin-left:auto}
@media(max-width:768px){.ai-page .ai-subnav-in{padding:0 20px;gap:18px}.ai-page .ai-subnav .btn{display:none}}
/* ============================================================
ПОДГОНКА ПОД САЙТ it-shluz.ru
Исходный пакет свёрстан по левому краю. На основном сайте
заголовки секций центрированы — приводим к тому же виду.
============================================================ */
/* ---------- Заголовки секций по центру ---------- */
.ai-page .head{max-width:70ch;margin-left:auto;margin-right:auto;text-align:center}
.ai-page .head .eyebrow{justify-content:center}
.ai-page .head p{margin-left:auto;margin-right:auto}
/* Первый экран — тоже по центру, вместе с кнопками. */
.ai-page .hero-in{margin-left:auto;margin-right:auto;text-align:center}
.ai-page .hero .eyebrow{justify-content:center}
.ai-page .hero-lead{margin-left:auto;margin-right:auto}
.ai-page .hero-cta{justify-content:center}
/* ---------- Плитки с цифрами ---------- */
/* Были прижаты влево из-за padding-right и нулевого padding-left. */
.ai-page .fact,
.ai-page .metrics div,
.ai-page .dp-nums div{text-align:center;padding-left:18px;padding-right:18px}
.ai-page .fact{padding-top:22px;padding-bottom:22px}
/* ---------- Порядок работ ---------- */
/* Колонки одинаковой высоты, срок прижат к низу: раньше строка со сроком
заканчивалась на разной высоте, потому что тексты этапов разной длины. */
.ai-page .steps{align-items:stretch}
.ai-page .step{display:flex;flex-direction:column;text-align:center;
padding-left:24px;padding-right:24px}
.ai-page .step-time{margin-top:auto;padding-top:14px}
/* ---------- Тёмная панель DGX Spark ---------- */
.ai-page .dp-top{text-align:center}
.ai-page .dark-panel .eyebrow{justify-content:center}
.ai-page .dp-farm{text-align:center}
/* Названия параметров слева, значения справа — включая текстовые.
Иначе строки «Мощность» и «Охлаждение» выпадали из общей колонки цифр. */
.ai-page .dp-tbl th{text-align:left}
.ai-page .dp-tbl td{text-align:right}
@media(max-width:760px){
.ai-page .fact,
.ai-page .metrics div,
.ai-page .dp-nums div,
.ai-page .step{padding-left:14px;padding-right:14px}
}
/* ---------- Списки характеристик ---------- */
/* Было display:grid на : каждый вложенный становился отдельным
элементом сетки и переносился на новую строку, разрывая фразу
(«Пара узлов соединяется кабелем» / «200 Гбит/с» / «— общий пул»).
Обычный поток плюс маркер в абсолюте — текст остаётся единым. */
.ai-page .spec li{display:block;position:relative;padding-left:26px}
.ai-page .spec li::before{position:absolute;left:0;top:1.05em;margin-top:0}
/* Кнопка в липкой навигации.
Была 44px в полосе 54px — по 5px зазора, а .btn:hover основного сайта
поднимает кнопку на 2px, и верхний край наезжал на линию. */
.ai-page .ai-subnav .btn{
height:34px;
/* У .btn основного сайта min-height:44px — без сброса высота не падает. */
min-height:0;
padding:0 16px;
font-size:12.5px;
line-height:1;
flex-shrink:0;
align-self:center;
}
.ai-page .ai-subnav .btn:hover,
.ai-page .ai-subnav .btn:focus-visible{transform:none}
/* ============================================================
3D-ВЬЮЕР ФЕРМЫ DGX SPARK
Превью-картинка в блоке фермы, сам вьюер — в модалке.
Документ на 2.7 МБ грузится только по клику.
============================================================ */
.ai-page .dp-3d{margin-top:30px;text-align:center}
.ai-page .dp-3d[hidden]{display:none}
.ai-page .dp-3d-open{
display:block;width:100%;padding:0;cursor:pointer;position:relative;
border:1px solid rgba(241,247,247,.14);border-radius:var(--r-lg);overflow:hidden;
background:var(--dark-800);
transition:border-color var(--t-base);
}
.ai-page .dp-3d-open:hover{border-color:var(--accent)}
.ai-page .dp-3d-open img{display:block;width:100%;height:auto}
.ai-page .dp-3d figcaption{margin-top:12px;font-size:12px;color:#8FA5A2}
/* ---------- Модалка ---------- */
.spark3d-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px}
.spark3d-modal[hidden]{display:none}
.spark3d-backdrop{position:absolute;inset:0;background:rgba(3,15,15,.72);backdrop-filter:blur(4px)}
.spark3d-card{
position:relative;width:100%;max-width:1280px;height:min(88vh,900px);
display:flex;flex-direction:column;
background:#0a2528;border:1px solid rgba(148,212,196,.18);
border-radius:18px;overflow:hidden;
box-shadow:0 40px 100px -30px rgba(3,15,15,.6);
}
.spark3d-head{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:16px 20px;border-bottom:1px solid rgba(148,212,196,.14);flex-shrink:0;
}
.spark3d-head h3{
margin:0;font-family:'Unbounded',system-ui,sans-serif;font-size:16px;
font-weight:600;color:#F1F7F7;letter-spacing:-.005em;
}
.spark3d-close{
width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;
border:0;border-radius:50%;cursor:pointer;
background:rgba(148,212,196,.1);color:#F1F7F7;transition:background .15s ease;
}
.spark3d-close svg{width:16px;height:16px}
.spark3d-close:hover{background:rgba(148,212,196,.22)}
.spark3d-frame{flex:1;min-height:0;background:#030F0F}
.spark3d-frame iframe{display:block;width:100%;height:100%;border:0}
.spark3d-note{
margin:0;padding:12px 20px;flex-shrink:0;
border-top:1px solid rgba(148,212,196,.14);
font-size:11.5px;line-height:1.5;color:#8FA5A2;
}
.spark3d-note a{color:#00DF82;text-decoration:underline}
/* ---------- Подсказка «нажмите» на превью ----------
На рендере нарисована кнопка, но она часть картинки. Без движущейся
подсказки не читается, что кликабельно всё изображение. */
.ai-page .dp-3d-open{position:relative}
.ai-page .dp-3d-hint{
position:absolute;right:18px;bottom:18px;
display:inline-flex;align-items:center;gap:9px;
padding:10px 16px 10px 15px;border-radius:999px;
background:rgba(3,15,15,.82);
border:1px solid rgba(0,223,130,.55);
color:#F1F7F7;font-size:12.5px;font-weight:600;white-space:nowrap;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
animation:dp3dBob 2.6s ease-in-out infinite;
pointer-events:none;
}
.ai-page .dp-3d-hint svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}
/* Расходящееся кольцо — привлекает внимание, не двигая саму подсказку. */
.ai-page .dp-3d-hint-pulse{
position:absolute;inset:-1px;border-radius:inherit;
border:1px solid var(--accent);
animation:dp3dPulse 2.6s ease-out infinite;
}
@keyframes dp3dBob{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-5px)}
}
@keyframes dp3dPulse{
0%{opacity:.75;transform:scale(1)}
70%{opacity:0;transform:scale(1.14)}
100%{opacity:0;transform:scale(1.14)}
}
/* На наведении подсказка перестаёт прыгать: человек уже нашёл цель. */
.ai-page .dp-3d-open:hover .dp-3d-hint{animation-play-state:paused;background:var(--accent);color:var(--dark-900)}
.ai-page .dp-3d-open:hover .dp-3d-hint svg{color:var(--dark-900)}
.ai-page .dp-3d-open:hover .dp-3d-hint-pulse{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){
.ai-page .dp-3d-hint{animation:none}
.ai-page .dp-3d-hint-pulse{animation:none;opacity:.5}
}
/* ---------- Индикатор загрузки вьюера ---------- */
.spark3d-loader{
position:absolute;inset:0;z-index:2;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
padding:24px;text-align:center;background:#030F0F;
transition:opacity .3s ease;
}
.spark3d-loader.is-done{opacity:0;pointer-events:none}
.spark3d-loader b{font-size:15px;font-weight:600;color:#F1F7F7}
.spark3d-loader-note{font-size:12.5px;line-height:1.5;color:#8FA5A2;max-width:38ch}
.spark3d-spinner{
width:34px;height:34px;border-radius:50%;
border:2px solid rgba(0,223,130,.2);border-top-color:#00DF82;
animation:spark3dSpin .9s linear infinite;
}
@keyframes spark3dSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
.spark3d-spinner{animation-duration:2.4s}
}
/* Рамка держит индикатор поверх iframe. */
.spark3d-frame{position:relative}