/* ИИ Лаб РАКЕТЫ — стили лендинга. Все значения — токены «РАКЕТА — UI Kit» 1.0 (Figma ZUb7XlcEuh3T38ePcJvd6P): цвета (стр. 02), типографика (03), сетки и отступы (04), компоненты (06). Сырые HEX только здесь, в :root, под именами токенов кита. */ /* ---------- Шрифты: Unbounded (Heading/*), Inter (Text/*), self-hosted ---------- */ @font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/unbounded-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/unbounded-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Unbounded";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/unbounded-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Unbounded";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/unbounded-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{ /* Примитивы кита */ --violet-50:#F3EDFF; --violet-200:#C9B6FF; --violet-300:#B59AFF; --violet-400:#A07AFF; --violet-600:#7B53E6; --violet-700:#6D4BD6; --violet-900:#2A1B57; --neutral-0:#FFFFFF; --neutral-50:#F7F7F7; --neutral-100:#EDEDED; --neutral-200:#D9D9D9; --neutral-400:#8B8B8B; --neutral-600:#3A3A3A; --neutral-700:#303030; --neutral-800:#1F1F1F; --neutral-900:#171717; --status-success:#3DBE7A; --status-error:#FF5C5C; /* только состояния интерфейса */ /* Семантика Light */ --bg-page:var(--neutral-0); --bg-surface:var(--neutral-50); --bg-accent:var(--violet-400); --bg-accent-soft:var(--violet-50); --bg-inverse:var(--neutral-900); --text-primary:var(--neutral-900); /* text/secondary кита (neutral-400) не проходит WCAG AA для мелкого текста на светлом (3,5:1). На светлом фоне вторичный текст — neutral-600 (11:1). См. отчёт, раздел «Кит». */ --text-secondary-on-light:var(--neutral-600); --text-accent:var(--violet-600); --text-on-accent:var(--neutral-900); --text-inverse:var(--neutral-0); --border-default:var(--neutral-100); --border-strong:var(--neutral-900); /* Семантика Dark */ --dark-bg-page:var(--neutral-900); --dark-bg-surface:var(--neutral-800); --dark-text-secondary:var(--neutral-400); --dark-text-accent:var(--violet-400); --dark-border-default:var(--neutral-700); /* Отступы, радиусы, тени (стр. 04) */ --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-20:20px; --s-24:24px; --s-32:32px; --s-40:40px; --s-48:48px; --s-64:64px; --s-80:80px; --s-120:120px; --r-sm:8px; --r-md:14px; --r-lg:20px; --r-full:999px; --shadow-card:0 4px 16px rgba(23,23,23,.06); --glow-violet:0 12px 40px rgba(160,122,255,.45); /* Сетка: сайт 1440 — поля 80, gutter 24; mobile 375 — поля 16, gutter 12 */ --page-max:1440px; --margin:80px; --gutter:24px; --section-y:var(--s-120); --font-head:"Unbounded",system-ui,sans-serif; --font-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --header-h:76px; } @media (max-width:1199px){:root{--margin:40px;--section-y:var(--s-80)}} @media (max-width:767px){:root{--margin:16px;--gutter:12px;--section-y:var(--s-64);--header-h:64px}} /* ---------- База ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--bg-page);color:var(--text-primary);font:400 16px/1.5 var(--font-text);overflow-x:hidden} img,svg{display:block;max-width:100%} a{color:inherit} button,input,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--violet-400);outline-offset:3px} [hidden]{display:none!important} .visually-hidden{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:var(--margin);top:-60px;z-index:100;background:var(--bg-accent);color:var(--text-on-accent);padding:12px 20px;border-radius:var(--r-full);font-weight:600} .skip-link:focus{top:12px} .container{width:100%;max-width:var(--page-max);margin:0 auto;padding:0 var(--margin)} .section{padding:var(--section-y) 0} .section--surface{background:var(--bg-surface)} .section--dark{background:var(--dark-bg-page);color:var(--text-inverse)} .balance{text-wrap:balance} /* ---------- Типографика (стр. 03) ---------- */ .h1{font:700 64px/1.05 var(--font-head);letter-spacing:-.02em;text-transform:uppercase;margin:0} .h2{font:700 48px/1.1 var(--font-head);letter-spacing:-.01em;text-transform:uppercase;margin:0} .h4{font:500 20px/1.2 var(--font-head);text-transform:uppercase;margin:0} /* заголовок Feature Card в ките: Unbounded Medium 20 */ @media (max-width:1199px){.h1{font-size:52px}.h2{font-size:40px}} @media (max-width:767px){.h1{font-size:28px}.h2{font-size:26px}.h4{font-size:16px}} @media (max-width:419px){.h1{font-size:24px}.h2{font-size:24px}} @media (max-width:379px){.h1{font-size:22px}} .accent{color:var(--text-accent)} .section--dark .accent,.hero .accent{color:var(--dark-text-accent)} .body-l{font-size:20px;line-height:1.5} .body-s{font-size:14px;line-height:1.45} @media (max-width:767px){.body-l{font-size:17px}} /* Rubric (8:83): Inter SemiBold 12, трекинг 14%, капс, фиолетовый */ .rubric{display:inline-flex;align-items:center;gap:8px;font:600 12px/1.4 var(--font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent);margin:0 0 var(--s-20)} .rubric svg{width:14px;height:14px} .section--dark .rubric,.hero .rubric{color:var(--dark-text-accent)} .section-head{margin-bottom:var(--s-48);max-width:900px} @media (max-width:767px){.section-head{margin-bottom:var(--s-32)}} /* ---------- Button (7:116): Primary / Dark / White / Outline, L 56–60 / M 44 ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-full);font:600 16px/1.2 var(--font-text);text-decoration:none;cursor:pointer;border:0;padding:20px 32px;min-height:60px;transition:background-color .15s,color .15s,border-color .15s;white-space:nowrap} .btn svg{width:20px;height:20px;flex:none} .btn--m{font-size:14px;padding:12px 20px;min-height:44px} .btn--primary{background:var(--bg-accent);color:var(--text-on-accent)} .btn--primary:hover{background:var(--violet-300)} .btn--dark{background:var(--neutral-900);color:var(--neutral-0)} .btn--outline{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--border-strong)} .btn--outline-inverse{background:transparent;color:var(--neutral-0);box-shadow:inset 0 0 0 1.5px var(--neutral-0)} .btn--outline:hover{background:var(--bg-surface)} .btn--outline-inverse:hover{background:var(--neutral-800)} .btn[disabled]{opacity:.5;cursor:not-allowed} .section--dark .btn--primary:hover,.hero .btn--primary:hover{box-shadow:var(--glow-violet)} /* ---------- Link (7:133): Inter SemiBold 13, трекинг 6%, капс ---------- */ .link{display:inline-flex;align-items:center;gap:8px;font:600 13px/1.2 var(--font-text);letter-spacing:.06em;text-transform:uppercase;color:var(--text-accent);text-decoration:none;padding:12px 0;min-height:44px} .link svg{width:18px;height:18px;transition:transform .15s} .link:hover svg{transform:translateX(3px)} .link--inverse{color:var(--neutral-0)} /* ---------- Tag (8:69): пилюли ---------- */ .tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0} .tag{display:inline-flex;align-items:center;border-radius:var(--r-full);padding:8px 16px;font-size:14px;line-height:1.4;background:var(--neutral-0);box-shadow:inset 0 0 0 1px var(--border-default)} .tag--s{padding:4px 12px;font-size:12px;font-weight:500} .tag--dark{background:transparent;color:var(--neutral-0);box-shadow:inset 0 0 0 1px var(--dark-border-default)} .tag--soft{background:var(--bg-accent-soft);box-shadow:none;color:var(--text-primary)} /* ---------- Icon Badge (8:108) ---------- */ .icon-badge{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--r-full);background:var(--bg-accent-soft);color:var(--text-accent);flex:none} .icon-badge svg{width:28px;height:28px} /* ================= B0 Шапка ================= */ .header{position:sticky;top:0;z-index:50;background:var(--bg-page);border-bottom:1px solid var(--border-default)} .header__in{display:flex;align-items:center;gap:var(--s-32);height:var(--header-h)} .logo{display:block;color:var(--neutral-900);flex:none} .logo svg{width:160px;height:32px} .nav{flex:1} .nav ul{display:flex;gap:var(--s-32);list-style:none;margin:0;padding:0} .nav a{font:600 14px/1.2 var(--font-text);text-decoration:none;padding:12px 0;display:inline-block} .nav a:hover{color:var(--text-accent)} @media (max-width:767px){ .nav{display:none} .header__in{justify-content:space-between;gap:var(--s-12)} .logo svg{width:140px;height:28px} /* минимум кита для версии с дескриптором — 140 px */ .header .btn--m{padding:10px 16px} } /* ================= B1 Hero ================= */ .hero{position:relative;overflow:hidden;background:var(--dark-bg-page);color:var(--text-inverse);padding:var(--s-120) 0 var(--s-80)} .hero::before{content:"";position:absolute;right:-240px;top:-200px;width:820px;height:820px;background:radial-gradient(closest-side,rgba(160,122,255,.8),rgba(160,122,255,0));opacity:.45;pointer-events:none} /* Glow: #A07AFF 80% → 0% */ .hero__spark{position:absolute;right:calc(var(--margin) + 40px);top:96px;width:260px;height:260px;color:var(--violet-400);pointer-events:none} .hero__in{position:relative} .hero .h1{max-width:1060px} .hero__lead{max-width:720px;margin:var(--s-24) 0 0;color:var(--neutral-0)} .hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-16) var(--s-24);margin-top:var(--s-40)} .hero__cta-note{margin:0;color:var(--dark-text-secondary);font-size:14px;line-height:1.45;max-width:280px} .facts{display:flex;flex-wrap:wrap;gap:var(--s-16) var(--s-48);margin:var(--s-64) 0 0;padding:0;list-style:none} .facts li{display:flex;flex-direction:column;gap:4px} .facts b{font:700 40px/1 var(--font-head);letter-spacing:-.02em;color:var(--violet-400)} .facts span{font-size:14px;color:var(--dark-text-secondary)} .stack{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-12) var(--s-16);margin-top:var(--s-32)} .stack__label{font:600 12px/1.4 var(--font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--dark-text-secondary);margin:0} @media (max-width:1199px){.hero__spark{width:180px;height:180px;top:64px}} @media (max-width:767px){ .hero{padding:var(--s-48) 0 var(--s-48)} .hero::before{right:-360px;top:-300px} .hero__spark{display:none} .hero__cta{flex-direction:column;align-items:stretch;gap:var(--s-8);margin-top:var(--s-32)} .hero__cta .btn{width:100%} .hero__cta-note{text-align:center;max-width:none} .facts{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;margin-top:var(--s-40);gap:var(--s-16) var(--s-24)} .facts b{font-size:24px} } /* ================= B2 Форматы — Feature Card (9:94, Theme Light) ================= */ .cards{display:grid;gap:var(--gutter);grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:0;padding:0} .card{display:flex;flex-direction:column;gap:var(--s-20);background:var(--neutral-0);border:1px solid var(--border-default);border-radius:var(--r-lg);padding:var(--s-32)} .card__texts{display:flex;flex-direction:column;gap:var(--s-8)} .card__text{margin:0;color:var(--text-secondary-on-light);font-size:16px} .card__num{font:600 12px/1.4 var(--font-text);letter-spacing:.14em;color:var(--text-accent)} .card__top{display:flex;align-items:center} .card .link{margin-top:auto;align-self:flex-start} @media (max-width:767px){.cards{grid-template-columns:1fr}.card{padding:var(--s-24);gap:var(--s-16)}} /* ================= B3 Продукты ================= */ .cards--3{grid-template-columns:repeat(3,minmax(0,1fr))} .cards--3 .card{box-shadow:var(--shadow-card)} @media (max-width:1199px){.cards--3{grid-template-columns:1fr}} /* ================= B4 Вопросы — Accordion (11:132) ================= */ .faq{display:flex;flex-direction:column;gap:var(--s-12);max-width:900px;margin:0;padding:0;list-style:none} .acc{background:var(--bg-surface);border-radius:var(--r-md);transition:background-color .15s} .acc.is-open,.no-js .acc{background:var(--bg-accent-soft)} .acc__q{margin:0;font:inherit} .acc__btn{display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);width:100%;min-height:60px;padding:var(--s-20) var(--s-24);background:none;border:0;text-align:left;font:600 16px/1.3 var(--font-text);cursor:pointer;border-radius:var(--r-md)} .acc__icon{width:20px;height:20px;flex:none} .acc__icon .v{transition:opacity .15s} .acc.is-open .acc__icon .v{opacity:0} .acc__a{color:var(--text-secondary-on-light);font-size:16px} .acc__a>div{overflow:hidden;min-height:0} .acc__a p{margin:0;max-width:720px;padding:0 var(--s-24) var(--s-20)} .js .acc__a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s ease,visibility 0s .3s} .js .acc.is-open .acc__a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s ease,visibility 0s} .acc__icon{transition:transform .3s} .acc.is-open .acc__icon{transform:none} /* ================= B5 Форма (Input 11:95, Control 11:119, Notification 11:155) ================= */ .lead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-64)} .lead__intro .body-l{margin:var(--s-20) 0 0;color:var(--neutral-0)} .contacts{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-12);margin-top:var(--s-40)} .contacts__mail{color:var(--dark-text-secondary);font-size:14px} .contacts__mail a{color:var(--neutral-0)} @media (max-width:1023px){.lead{grid-template-columns:1fr;gap:var(--s-40)}} .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-20) var(--gutter)} .field{display:flex;flex-direction:column;gap:var(--s-8);min-width:0} .field--full{grid-column:1/-1} .field__label{font:500 12px/1.4 var(--font-text);color:var(--dark-text-secondary)} .field__label i{font-style:normal;color:var(--dark-text-secondary)} .input{width:100%;min-height:50px;padding:12px 16px;border-radius:var(--r-md);border:1px solid var(--border-default);background:var(--neutral-0);color:var(--text-primary);font-size:16px;line-height:1.5} textarea.input{min-height:120px;resize:vertical} .input::placeholder{color:var(--neutral-600);opacity:.7} .input:focus{outline:none;border-color:var(--violet-400);box-shadow:0 0 0 1px var(--violet-400)} /* Focus: обводка 2 px violet-400 */ .field.is-error .input{border-color:var(--status-error);box-shadow:0 0 0 1px var(--status-error)} .field__error{font:500 12px/1.4 var(--font-text);color:var(--status-error);margin:0} .field__error:empty{display:none} .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} .check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--neutral-0)} .check input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0;border-radius:6px;border:1.5px solid var(--neutral-400);background:var(--neutral-0);cursor:pointer;display:grid;place-content:center} .check input::after{content:"";width:12px;height:12px;background:var(--neutral-900);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%);transform:scale(0);transition:transform .1s} .check input:checked{background:var(--bg-accent);border-color:var(--bg-accent)} .check input:checked::after{transform:scale(1)} .check input:focus-visible{outline:2px solid var(--violet-400);outline-offset:3px} .check a{color:var(--violet-300)} .check label{cursor:pointer} .field.is-error .check input{border-color:var(--status-error)} .form__submit{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-16)} .form__status{margin:0;font-size:14px;color:var(--dark-text-secondary)} @media (max-width:767px){.form{grid-template-columns:1fr}.form__submit .btn{width:100%}} .notice{display:flex;gap:var(--s-12);align-items:flex-start;background:var(--neutral-900);border:1px solid var(--dark-border-default);border-radius:var(--r-md);padding:var(--s-16) var(--s-20);font-size:16px;color:var(--neutral-0)} .notice__icon{display:grid;place-content:center;width:28px;height:28px;border-radius:14px;background:var(--status-success);color:var(--neutral-900);flex:none} .notice__icon svg{width:16px;height:16px} .notice p{margin:2px 0 0} .notice--error .notice__icon{background:var(--status-error)} /* ================= B6 Подвал ================= */ .footer{background:var(--dark-bg-page);color:var(--neutral-0);border-top:1px solid var(--dark-border-default);padding:var(--s-48) 0} .footer__in{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-32) var(--s-64);align-items:start} .footer .logo{color:var(--neutral-0)} .footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-8)} .footer a{text-decoration:none} .footer a:hover{color:var(--violet-300)} .footer__legal{color:var(--dark-text-secondary);font-size:14px;line-height:1.45} .footer__legal p{margin:0 0 4px} @media (max-width:767px){.footer__in{grid-template-columns:1fr}.footer{padding-bottom:calc(var(--s-48) + 76px)}} /* ================= Мобильная панель: CTA + связь ================= */ .dock{display:none} @media (max-width:767px){ .dock{display:flex;gap:var(--s-8);position:fixed;left:0;right:0;bottom:0;z-index:60;padding:var(--s-12) var(--margin) calc(var(--s-12) + env(safe-area-inset-bottom));background:var(--neutral-900);border-top:1px solid var(--dark-border-default);transition:transform .2s} .dock .btn{flex:1;padding-left:12px;padding-right:12px} .dock.is-hidden{transform:translateY(110%)} .no-js .dock{display:none} } /* ===================================================================== v2 — визуальный ритм и анимация (10.10.2026) Опоры в ките: Case Card (превью — градиент Violet 135°, радиус 20), Graphic/Marquee (фиолетовая лента, Unbounded Bold, искры), правило фото (мозаика 2–3 карточки с поворотом 2–4°), Glow, Icon/spark. ===================================================================== */ :root{--grad-violet:linear-gradient(135deg,var(--violet-700),var(--violet-400));--ease-out:cubic-bezier(.2,.7,.2,1)} .h3{font:500 32px/1.15 var(--font-head);text-transform:uppercase;margin:0} @media (max-width:767px){.h3{font-size:22px}} /* ---------- Появление при скролле (только с JS и без reduced-motion) ---------- */ .js [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)} .js [data-reveal].is-in{opacity:1;transform:none} .js .hero__anim{animation:heroIn .8s var(--ease-out) both;animation-delay:calc(120ms + var(--d,0) * 110ms)} @keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} /* ---------- B0: тень шапки при прокрутке ---------- */ .header{transition:box-shadow .2s} .header.is-scrolled{box-shadow:var(--shadow-card)} /* ---------- B1: Hero ---------- */ .hero{padding:var(--s-80) 0 var(--s-120)} .hero::before{animation:glow 14s ease-in-out infinite alternate} @keyframes glow{from{transform:translate(0,0) scale(1)}to{transform:translate(-120px,80px) scale(1.15)}} .hero__spark{width:180px;height:180px;top:72px;right:calc(var(--margin) - 40px);opacity:.9;animation:spin 48s linear infinite} @keyframes spin{to{rotate:360deg}} .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:var(--s-48);align-items:center;margin-top:var(--s-8)} .hero .h1{max-width:1120px} .hero .facts{margin-top:var(--s-48)} .mosaic{position:relative;height:460px} .mosaic .mosaic__item{position:absolute;width:76%;box-shadow:0 24px 60px rgba(0,0,0,.45);animation:float 7s ease-in-out infinite alternate} .mosaic__item--1{top:0;right:0;rotate:4deg;animation-delay:-2s} .mosaic__item--2{top:30%;left:0;rotate:-3deg;z-index:2;animation-duration:8s} .mosaic__item--3{bottom:0;right:6%;rotate:2deg;z-index:3;width:62%;animation-delay:-4s} .mosaic__spark{position:absolute;left:-28px;top:-12px;width:72px;height:72px;color:var(--violet-400);z-index:4;animation:spin 18s linear infinite,pulse 3s ease-in-out infinite} @keyframes float{from{translate:0 0}to{translate:0 -14px}} @keyframes pulse{50%{scale:.8}} @media (max-width:1199px){ .hero__grid{grid-template-columns:1fr} .mosaic{height:400px;max-width:620px;width:100%;margin:var(--s-24) auto 0} } @media (max-width:767px){ .hero{padding:var(--s-40) 0 var(--s-64)} .hero__spark{display:none} .mosaic{height:250px;margin-top:var(--s-16)} .mosaic__item{width:78%} .mosaic__item--3{width:60%} .mosaic__spark{width:44px;height:44px;left:-6px;top:-10px} } /* ---------- Плейсхолдер скриншота (Case Card / image) ---------- */ .shot{position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);background:var(--grad-violet);overflow:hidden;padding:7% 7% 0;margin:0} .shot--img{padding:0;background:var(--neutral-800)} .shot--img img{width:100%;height:100%;object-fit:cover} .shot__win{height:100%;background:var(--neutral-0);border-radius:var(--r-md) var(--r-md) 0 0;padding:4% 5% 0;display:flex;flex-direction:column;gap:6%;box-shadow:0 -8px 30px rgba(42,27,87,.25)} .shot__bar{display:flex;gap:6px;flex:none} .shot__bar i{height:8px;border-radius:4px;background:var(--neutral-100);width:12%} .shot__bar i:first-child{width:8%;background:var(--violet-200)} .shot__bar i:last-child{margin-left:auto;width:18%} .shot__label{position:absolute;left:16px;bottom:16px;z-index:2;background:var(--neutral-900);color:var(--neutral-0);font:500 12px/1.4 var(--font-text);padding:6px 12px;border-radius:var(--r-full);box-shadow:var(--shadow-card)} .mosaic .shot__label{display:none} /* Полка: распознавание (НейроВижен) */ .sk-shelf{position:relative;flex:1;display:flex;flex-direction:column;gap:9%;padding-bottom:6%} .sk-shelf__row{display:flex;gap:4%;flex:1;align-items:flex-end;border-bottom:3px solid var(--neutral-200);padding:0 2% 2%} .sk-shelf__row i{flex:1;height:82%;border-radius:4px;background:var(--neutral-100);position:relative} .sk-shelf__row i:nth-child(2n){height:66%} .sk-shelf__row i.hit{background:var(--violet-50);outline:2px solid var(--violet-400);outline-offset:2px} .sk-shelf__row i.gap{background:transparent;outline:2px dashed var(--violet-600);outline-offset:2px} .sk-shelf__scan{position:absolute;left:-2%;right:-2%;top:0;height:100%;pointer-events:none;animation:scan 3.2s ease-in-out infinite alternate} .sk-shelf__scan::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--violet-400);box-shadow:0 0 16px 4px rgba(160,122,255,.6)} @keyframes scan{from{transform:translateY(0)}to{transform:translateY(calc(100% - 3px))}} /* Мерчендайзинг: фото + чек-лист (НейроМерч) */ .sk-merch{flex:1;display:grid;grid-template-columns:1fr 1.1fr;gap:6%;padding-bottom:6%} .sk-merch__photo{border-radius:var(--r-sm);background:var(--neutral-50);display:flex;flex-direction:column;justify-content:space-around;padding:8%} .sk-merch__photo i{height:16%;border-radius:3px;background:repeating-linear-gradient(90deg,var(--neutral-200) 0 14%,transparent 14% 18%)} .sk-merch__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-around} .sk-merch__list li{display:flex;align-items:center;gap:8%} .sk-merch__list b{flex:none;width:18px;height:18px;border-radius:50%;background:var(--neutral-100);position:relative} .sk-merch__list b::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--violet-400);transform:scale(0);animation:tick 6s ease infinite} .sk-merch__list li:nth-child(2) b::after{animation-delay:.6s} .sk-merch__list li:nth-child(3) b::after{animation-delay:1.2s} .sk-merch__list li:nth-child(4) b::after{animation-delay:1.8s} @keyframes tick{0%,5%{transform:scale(0)}12%,85%{transform:scale(1)}100%{transform:scale(0)}} .sk-merch__list i{flex:1;height:8px;border-radius:4px;background:var(--neutral-100)} .sk-merch__list li:nth-child(odd) i{max-width:70%} /* Эконометрика: столбцы + боковая панель */ .sk-econ{flex:1;display:flex;gap:6%;padding-bottom:6%} .sk-econ__side{width:24%;display:flex;flex-direction:column;gap:12%} .sk-econ__side i{height:10px;border-radius:5px;background:var(--neutral-100)} .sk-econ__side i:first-child{background:var(--violet-200);width:70%} .sk-econ__bars{flex:1;display:flex;align-items:flex-end;gap:5%;border-bottom:2px solid var(--neutral-200);padding:0 2%} .sk-econ__bars i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:var(--violet-200);transform-origin:bottom;animation:grow 1.2s var(--ease-out) both} .sk-econ__bars i:nth-child(3n){background:var(--violet-400)} .sk-econ__bars i:nth-child(2){animation-delay:.08s}.sk-econ__bars i:nth-child(3){animation-delay:.16s}.sk-econ__bars i:nth-child(4){animation-delay:.24s}.sk-econ__bars i:nth-child(5){animation-delay:.32s}.sk-econ__bars i:nth-child(6){animation-delay:.4s}.sk-econ__bars i:nth-child(7){animation-delay:.48s}.sk-econ__bars i:nth-child(8){animation-delay:.56s} @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}} .js [data-reveal]:not(.is-in) .sk-econ__bars i{animation-play-state:paused} /* ---------- B2: карточки форматов ---------- */ .card--format{transition:transform .25s var(--ease-out),box-shadow .25s,border-color .25s} .card--format .icon-badge{transition:background-color .25s,color .25s} .card--format .card__num{font:700 40px/1 var(--font-head);letter-spacing:-.02em;color:var(--neutral-100);transition:color .25s} .js [data-reveal].card--format.is-in:hover,.card--format:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(23,23,23,.08);border-color:var(--violet-200)} .card--format:hover .icon-badge{background:var(--bg-accent);color:var(--neutral-900)} .card--format:hover .card__num{color:var(--violet-200)} .card--format:hover .link svg{transform:translateX(4px)} @media (max-width:767px){.card--format .card__num{font-size:28px}} /* ---------- Бегущая строка (Graphic/Marquee) между B2 и B3 ---------- */ .ribbon{background:linear-gradient(var(--bg-page) 50%,var(--dark-bg-page) 50%);overflow:hidden;padding:var(--s-24) 0} .ribbon__band{background:var(--bg-accent);rotate:-2deg;width:calc(100% + 120px);margin-left:-60px;padding:var(--s-20) 0;overflow:hidden} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .ribbon__track{display:flex;align-items:center;gap:var(--s-32);width:max-content;animation:marquee 40s linear infinite;padding-right:var(--s-32)} .ribbon__track span{font:700 56px/1 var(--font-head);letter-spacing:-.02em;text-transform:uppercase;color:var(--neutral-900);white-space:nowrap} .ribbon__track svg{width:40px;height:40px;color:var(--neutral-900);flex:none} @media (max-width:767px){.ribbon__track{gap:var(--s-16);padding-right:var(--s-16)}.ribbon__track span{font-size:28px}.ribbon__track svg{width:22px;height:22px}.ribbon__band{padding:var(--s-12) 0}} /* ---------- B3: витрина продуктов (тёмная тема) ---------- */ .products{position:relative;overflow:hidden} .products::before{content:"";position:absolute;left:-300px;top:30%;width:900px;height:900px;background:radial-gradient(closest-side,rgba(160,122,255,.8),rgba(160,122,255,0));opacity:.18;pointer-events:none} .products .container{position:relative} .products__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-80)} .product{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-64);align-items:center} .product--rev .shot{order:2} .product__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-16)} .product__body .card__num{font:700 72px/1 var(--font-head);letter-spacing:-.02em;color:var(--violet-400)} .product__text{margin:0;font-size:20px;line-height:1.5;color:var(--neutral-0);max-width:480px} .product .shot{box-shadow:var(--glow-violet);transition:transform .5s var(--ease-out)} .product:hover .shot{transform:scale(1.02) rotate(-1deg)} .tag--status{background:transparent;color:var(--neutral-0);box-shadow:inset 0 0 0 1px var(--dark-border-default);gap:8px} .tag--status{position:relative} .tag--status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--violet-400)} .tag--status::after{content:"";position:absolute;left:16px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--violet-400);animation:ping 2s ease-out infinite} @keyframes ping{from{transform:scale(1);opacity:.6}to{transform:scale(3);opacity:0}} @media (max-width:1023px){ .product{grid-template-columns:1fr;gap:var(--s-24)} .product--rev .shot{order:0} .products__list{gap:var(--s-64)} .product__body .card__num{font-size:40px} .product__text{font-size:17px} } /* ---------- B4: две колонки ---------- */ .faq-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-64);align-items:start} .faq-wrap__head{position:sticky;top:calc(var(--header-h) + 32px);display:flex;flex-direction:column;align-items:flex-start} .faq-wrap__head .h2{margin-bottom:var(--s-32)} .faq{max-width:none} .acc__btn:hover{background:rgba(160,122,255,.08)} @media (max-width:1023px){.faq-wrap{grid-template-columns:1fr;gap:var(--s-32)}.faq-wrap__head{position:static}.faq-wrap__head .btn{display:none}} /* ---------- B5: декор ---------- */ .lead-section{position:relative;overflow:hidden} .lead-section::before{content:"";position:absolute;right:-260px;bottom:-320px;width:860px;height:860px;background:radial-gradient(closest-side,rgba(160,122,255,.8),rgba(160,122,255,0));opacity:.3;pointer-events:none;animation:glow 16s ease-in-out infinite alternate-reverse} .lead-section__spark{position:absolute;left:calc(var(--margin) - 20px);bottom:48px;width:140px;height:140px;color:var(--violet-700);opacity:.6;animation:spin 60s linear infinite reverse;pointer-events:none} .lead-section .container{position:relative} @media (max-width:1023px){.lead-section__spark{display:none}} /* ---------- Без движения ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .js [data-reveal]{opacity:1;transform:none} .sk-shelf__scan{display:none} } @media print{.dock,.header,.clients{display:none}} /* ---------- B3: реальные скриншоты, два слоя (15.10.2026) ---------- */ .shot--duo{padding:0} .shot--duo img{position:absolute;display:block;height:auto;border-radius:var(--r-sm);box-shadow:0 18px 40px rgba(23,23,23,.35);transition:transform .6s var(--ease-out)} .shot__back{top:7%;right:-6%;width:80%;opacity:.92} .shot__front{left:5%;bottom:-8%;width:76%} .shot--duo-phone .shot__back{top:8%;left:5%;right:auto;width:84%} .shot--duo-phone .shot__front{left:auto;right:6%;bottom:-18%;width:38%;border-radius:var(--r-md)} .product:hover .shot--duo .shot__front{transform:translate(-6px,-10px)} .product:hover .shot--duo .shot__back{transform:translate(6px,4px)} .product:hover .shot--duo{transform:none} /* ---------- Лента логотипов v6 (15.10.2026) ---------- Одна картинка-полоса повторяется фоном (repeat-x): слой шириной с экран, без гигантских текстур на мобильных. Толщина и наклон — как у бегущей строки (Graphic/Marquee): 96 / 52 px, ±2°. Задняя полоса (violet-700) лежит на тёмном фоне Hero, передняя (violet-400) — на границе тёмного и светлого, как бегущая строка ниже. Граница фона = центр передней полосы: --pt + --h + --gap + --h/2. Фильтр + screen перекрашивают фиолетовый файла (#AE7CFF) в цвет подложки кита. */ .clients{--h:96px;--pt:40px;--gap:-30px;position:relative;overflow:hidden;padding:var(--pt) 0 40px; background:linear-gradient(var(--dark-bg-page) calc(var(--pt) + var(--h) + var(--gap) + var(--h) / 2),var(--bg-page) 0)} .logos{width:calc(100% + 240px);margin-left:-120px;background:var(--bg-accent);isolation:isolate;position:relative;z-index:2;rotate:-2deg} .logos--rev{background:var(--violet-700);z-index:1;rotate:2deg} .logos__strip[data-src*="clients1_"]{--ratio:40.5067} .logos__strip[data-src*="clients2_"]{--ratio:44.1422} .logos--rev + .logos{margin-top:var(--gap)} .logos{overflow:hidden} /* Полоса шире ленты на полпериода картинки (в файле набор логотипов повторён ровно дважды: период = W/2), сдвигается transform — анимация идёт на композиторе, без перерисовки в каждом кадре. */ .logos__strip{--shift:calc(var(--h) * var(--ratio) / 2);width:calc(100% + var(--shift));height:var(--h); background-repeat:repeat-x;background-size:auto var(--h);background-position:0 50%; filter:grayscale(1) brightness(.623) contrast(4.05);mix-blend-mode:screen;will-change:transform; animation:logosX 45s linear infinite} /* Картинку рисует app.js в canvas после загрузки страницы: canvas не участвует в LCP и не отнимает канал у шрифтов. Без JS — CSS-фон из